ui: color-coded chip groups in streams header with per-chip shade variation

Device chips: blue, resolution chips: teal, codec chips: amber.
Alternating bg shades within each group to visually separate chips.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gmer4Lfe
2026-05-31 21:59:16 -04:00
co-authored by Claude Sonnet 4.6
parent 89df1a98db
commit 0319b13304
2 changed files with 32 additions and 7 deletions
+14 -4
View File
@@ -753,11 +753,21 @@ mark { background: #5d4037; color: #ffcc80; border-radius: 2px; }
.vv-server-badge { background: #333; border: 1px solid #555; color: #aaa;
font-size: 10px; padding: 1px 7px; border-radius: 10px; }
.vv-server-badge-sm { font-size: 9px; padding: 1px 6px; flex-shrink: 0; }
/* Device type chips — shown right of server badges when sessions are active */
/* Chip groups — server badge row */
.vv-device-sep { color: #2a2a2a; font-size: 12px; margin: 0 2px; user-select: none; }
.vv-device-chip { font-size: 10px; color: #666; padding: 1px 7px;
border-radius: 10px; background: #181818; border: 1px solid #252525;
white-space: nowrap; }
/* shared chip geometry */
.vv-device-chip,
.vv-chip-device, .vv-chip-res, .vv-chip-codec {
font-size: 10px; padding: 1px 7px; border-radius: 10px;
white-space: nowrap; border: 1px solid; }
/* device — blue */
.vv-chip-device { color: #5a9ec8; background: #0d1e2e; border-color: #1c3f5c; }
/* resolution — teal */
.vv-chip-res { color: #4aaa9a; background: #0b1e1c; border-color: #1a4540; }
/* codec — amber */
.vv-chip-codec { color: #b38820; background: #201500; border-color: #483300; }
/* legacy fallback */
.vv-device-chip { color: #666; background: #181818; border-color: #252525; }
.vv-stream-empty { color: #555; font-style: italic; font-size: 12px; margin: 4px 0; }
.vv-stream-empty span { font-size: 11px; color: #444; }
.vv-stream-row { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #282828; }