fix(gui): allinea CSS tab Braccio DX al tema dark esistente

- Sostituisce colori hardcoded con CSS variables (--bg/--panel/--border/--dim/--warn/--ok/--danger)
- Scope .dim a #tab-right-arm per non alterare altre tab che usano la classe
- Aggiunge white-space pre-wrap a .ra-result per testi multi-riga

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Adriano Dal PastroandClaude Opus 4.7 committed 2026-05-20 12:40:55 +02:00
1 parent 2f8c7006ba
commit 03ecbbae4e
1 file changed
+35 -10
+35 -10
View File
@@ -744,8 +744,16 @@ details.joint-temps summary { cursor: pointer; font-weight: 600; font-size: 12px
align-items: center;
gap: 12px;
}
.ra-banner-warn { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.ra-banner-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.ra-banner-warn {
background: rgba(240, 173, 78, 0.15);
color: var(--warn);
border: 1px solid var(--warn);
}
.ra-banner-ok {
background: rgba(62, 207, 142, 0.15);
color: var(--ok);
border: 1px solid var(--ok);
}
.ra-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@@ -753,24 +761,41 @@ details.joint-temps summary { cursor: pointer; font-weight: 600; font-size: 12px
margin-bottom: 12px;
}
.ra-card {
border: 1px solid #ddd;
border: 1px solid var(--border);
border-radius: 4px;
padding: 12px;
background: #fafafa;
background: var(--panel);
color: var(--fg);
}
.ra-card h3 { margin-top: 0; }
.ra-card.ra-wide { grid-column: 1 / -1; }
.ra-imgwrap { position: relative; width: 100%; }
.ra-imgwrap img { width: 100%; display: block; }
.ra-imgwrap img { width: 100%; display: block; background: var(--bg); }
.ra-imgwrap canvas { position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; }
.ra-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.ra-sep { color: #888; }
.ra-result { font-family: monospace; font-size: 0.9em; padding: 6px; background: #f0f0f0; border-radius: 4px; }
.ra-sep { color: var(--dim); }
.ra-result {
font-family: monospace;
font-size: 0.9em;
padding: 6px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
white-space: pre-wrap;
}
.ra-result.dim { color: var(--dim); }
.ra-pose-table { border-collapse: collapse; }
.ra-pose-table th, .ra-pose-table td { padding: 2px 8px; text-align: left; }
.ra-pose-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ra-pose-form input { width: 100%; }
.ra-wide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ra-danger { background: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; }
.ra-danger:hover { background: #c82333; }
.dim { color: #888; }
.ra-danger {
background: var(--danger);
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
}
.ra-danger:hover { filter: brightness(1.1); }
#tab-right-arm .dim { color: var(--dim); }