jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mark the active panel with an accent line, not a tinted header

Browse Source 
Tinting the whole header strip of the focused panel was too much: the
strip changed color every time focus moved. Both panels now share one
neutral header strip, and the active panel is marked by a thin accent
line along its top edge (an inset shadow, so switching panels never
shifts the layout).

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jgamboa
2026-10-05 09:59:40 +02:00
co-authored by Claude
parent 141d675bf7
commit 318760efa6
5 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/styles.css
+2 -9
View File
@@ -19,8 +19,6 @@
--background: oklch(1 0 0);
--chrome: oklch(0.935 0.002 286.375);
--toolbar: oklch(0.965 0.001 286.375);
/* the active panel's header strip: a whisper of the accent (graphite: neutral) */
--toolbar-active: color-mix(in oklab, var(--primary) 8%, var(--toolbar));
--row-alt: oklch(0.978 0.001 286.375);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
@@ -60,7 +58,6 @@
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.165 0.002 107);
--toolbar: oklch(0.265 0.002 107);
--toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
--row-alt: oklch(0.232 0.002 107);
--foreground: oklch(0.982 0.003 107);
/* above --toolbar, so a popover never reads darker than the strip it covers */
@@ -93,7 +90,6 @@
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.165 0.002 107);
--toolbar: oklch(0.265 0.002 107);
--toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
--row-alt: oklch(0.232 0.002 107);
--foreground: oklch(0.982 0.003 107);
--card: oklch(0.285 0.002 107);
@@ -127,8 +123,8 @@
#000 (OLED pixels actually off). Elevation survives only through --card and
--accent; --border/--input are raised to 16%/18% because on pure black those
lines are the only thing defining panes, bars and rows. The surface layers
(--toolbar, its active tint, --row-alt) collapse to black too: AMOLED stays
one flat black on purpose, so every NEW surface token needs a line here.
(--toolbar, --row-alt) collapse to black too: AMOLED stays one flat black on
purpose, so every NEW surface token needs a line here.
Duplicated for forced-dark and system-dark like the token blocks above — the
extra attribute outranks them. Never declare a token both here and in the
accent dark formula blocks below: same (0,3,0) specificity, the later wins. */
@@ -136,7 +132,6 @@
--background: oklch(0 0 0);
--chrome: oklch(0 0 0);
--toolbar: oklch(0 0 0);
--toolbar-active: oklch(0 0 0);
--row-alt: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
@@ -151,7 +146,6 @@
--background: oklch(0 0 0);
--chrome: oklch(0 0 0);
--toolbar: oklch(0 0 0);
--toolbar-active: oklch(0 0 0);
--row-alt: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
@@ -167,7 +161,6 @@
--color-background: var(--background);
--color-chrome: var(--chrome);
--color-toolbar: var(--toolbar);
--color-toolbar-active: var(--toolbar-active);
--color-row-alt: var(--row-alt);
--color-foreground: var(--foreground);
--color-card: var(--card);