anti/DECNET
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(decnet_web/css): three light-mode dimness fixes

Browse Source 
--dim-color and --danger-color were referenced across drawers and
RemoteUpdates but never defined; --dim-color silently inherited
(defeating its purpose) and --danger-color fell back to literal
#f88 salmon (the 'ugly red' WifiOff icon next to UNREACHABLE
hosts). Added both as aliases in :root: --dim-color = var(--fg-3),
--danger-color = var(--alert).

--fg-2/3/4 alphas in light mode were tuned identical to dark
(0.78/0.55/0.35), but ink-on-cream needs more punch than
matrix-on-black at the same alpha — the deploy preview code
block (.code-block .comment / .key) and every dim caption
rendered too faint. Bumped to 0.88/0.70/0.50.

.maze-net-box.inactive applies opacity 0.42 + grayscale(0.7) for
the 'no traffic' signal. On cream that fades the LAN out of
visibility entirely. Override in light mode keeps the dotted
border as the dim-state cue and bumps opacity to 0.85 so the
header text stays legible.
This commit is contained in:
anti
2026-05-09 03:56:06 -04:00
parent 388a968d89
commit 9cab37db3a
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
decnet_web/src/components/MazeNET/MazeNET.css
View File

@@ -199,6 +199,14 @@ body.maze-fullscreen .maze-shell {
opacity: 0.42; filter: grayscale(0.7); border-style: dotted;
}
.maze-net-box.inactive .maze-net-box-head { color: var(--fg-3); }
/* In light mode 0.42 + grayscale on cream makes inactive LANs
* disappear into the page. Keep the dotted border as the "no
* traffic" signal but bump opacity so the header is still
* legible. */
html[data-theme="light"] .maze-net-box.inactive {
opacity: 0.85;
filter: none;
}
/* Optimistic placeholder for an enqueued LAN-add. Amber tint matches
* the REAP button voice — clearly "in-flight, not committed" without
* collapsing into the dimmed-out 'inactive' style which means the

8
decnet_web/src/index.css
View File

@@ -19,6 +19,8 @@
--accent-color: var(--violet);
--secondary-color: var(--panel);
--border-color: var(--border);
--dim-color: var(--fg-3); /* dimmed body text (~60-70% of base) */
--danger-color: var(--alert); /* red icon/text — was undefined, fell back to #f88 */
/* Cyan/info — REPLAY buttons, neutral status that's neither
* "good/active" (matrix) nor "stop" (alert). */
@@ -152,9 +154,9 @@ html[data-theme="light"] {
--crit: #b91c1c; /* matches alert in light, distinct in dark */
--fg-1: var(--matrix);
--fg-2: rgba(13, 13, 13, 0.78);
--fg-3: rgba(13, 13, 13, 0.55);
--fg-4: rgba(13, 13, 13, 0.35);
--fg-2: rgba(13, 13, 13, 0.88); /* near-ink — bumped from dark's 0.80 */
--fg-3: rgba(13, 13, 13, 0.70); /* dim ink — bumped from 0.55 */
--fg-4: rgba(13, 13, 13, 0.50); /* faint ink — bumped from 0.35 */
--matrix-tint-5: rgba(13, 13, 13, 0.04);
--matrix-tint-10: rgba(13, 13, 13, 0.08);