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

Shade the window frame, panel headers and file rows apart

Browse Source 
Every surface was one flat shade. The window now reads in layers: a darker
frame (tab, transfer and status bars), a lighter header strip per file panel
(session strip, path bar, column headers), the file list, and popovers above
them all. The active panel's header carries a tint of the accent, and odd file
rows get a faint zebra stripe (per row, so it stays aligned at any interface
scale; the cursor and selection replace it).

Hover and selected states become a translucent overlay: an opaque hover
vanished on a surface of its own lightness (light's header strip). Dark cards
and badges step up so popovers never read darker than the strip they cover.
AMOLED is unchanged: every new layer collapses to black there.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jgamboa
2026-10-05 09:47:32 +02:00
co-authored by Claude
parent 99bfd3abc2
commit f3bec7aeaf
6 changed files with 85 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/gotchas.md
+15
View File
@@ -56,6 +56,21 @@ touching the adjacent code.
anything poking out of a horizontally scrolling strip (a raised tab, an
underline at `-bottom-px`) is silently clipped. Reserve padding instead.
## Theming (`ui/src/styles.css`)
- **A new surface token needs an AMOLED line, or AMOLED stops being
all-black.** The two `[data-dark-tone='darker']` blocks re-declare every
surface (`--chrome`, `--toolbar`, `--toolbar-active`, `--row-alt`, …) as
`#000`; a token added only to the dark blocks shows through in AMOLED.
- **Never declare one token in both the AMOLED blocks and the accent dark
formula blocks.** Both are (0,3,0), so source order decides and the later
accent block wins. That is why `--toolbar-active` lives in the base theme
blocks — its `var(--primary)` resolves per accent on `:root` anyway.
- **Hover/selected color is a translucent overlay (`--accent`).** An opaque
hover vanishes on a surface of its own lightness — light's old 0.967 hover
on the 0.965 header strip did exactly that. Keep `--accent` alpha-based when
retoning surfaces.
## The interface scale (root font-size lever)
- **electrobun's native page zoom is a silent no-op on Linux — do not reach for