etalon/BountyBoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: darker/sparser dither on dark themes; CRT scanlines for terminal

Browse Source 
The bright dither dots created visual noise behind sidebar menu items on the
dark themes. Dark/neon/blueprint/sunset now use a low-contrast dot a touch
above their background on a sparser 8px tile. Terminal swaps dots for faint
horizontal scanlines (1×3 tile) for an interlaced CRT look.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
etalon
2026-06-13 11:23:22 +02:00
parent 9bacb8092d
commit 420f045033
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/app.css
+11 -10
View File
@@ -56,8 +56,8 @@
:root[data-theme=dark] {
--ink-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
--ink-shadow-lift: 5px 5px 0 rgba(0, 0, 0, 0.65);
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23d9a548'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23d9a548'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23d9a548'/%3E%3C/svg%3E");
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' x='0' y='0' fill='%233a2c12'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%233a2c12'/%3E%3C/svg%3E");
}
/* ============================================================= */
@@ -72,8 +72,8 @@
--ok:#39ff9e; --warn:#ffd23f; --err:#ff3b8b; --radius:8px;
--ink-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
--ink-shadow-lift: 0 0 26px color-mix(in srgb, var(--accent) 70%, transparent);
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%2300e5ff'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23ff3bd6'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%2300e5ff'/%3E%3C/svg%3E");
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23221046'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23221046'/%3E%3C/svg%3E");
}
:root[data-theme=neon] body {
background:
@@ -104,8 +104,9 @@
--ok:#7dff9f; --warn:#d7ff3f; --err:#ff5d5d; --radius:0px;
--ink-shadow: 0 0 10px rgba(65,255,122,0.4);
--ink-shadow-lift: 0 0 18px rgba(65,255,122,0.55);
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%237dff9f'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%237dff9f'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%237dff9f'/%3E%3C/svg%3E");
/* interlaced CRT scanlines (horizontal lines, not dots) */
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3'%3E%3Crect width='1' height='1' x='0' y='0' fill='%230a3315'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%230a3315'/%3E%3C/svg%3E");
--font-display: "Spline Sans Mono", ui-monospace, monospace;
--font-body: "Spline Sans Mono", ui-monospace, monospace;
}
@@ -125,8 +126,8 @@
--ok:#7fffd4; --warn:#ffd24a; --err:#ff9a8a; --radius:0px;
--ink-shadow: 4px 4px 0 rgba(0,0,0,0.3);
--ink-shadow-lift: 6px 6px 0 rgba(0,0,0,0.4);
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%236fb8ff'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%236fb8ff'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%236fb8ff'/%3E%3C/svg%3E");
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' x='0' y='0' fill='%230e3c68'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%230e3c68'/%3E%3C/svg%3E");
}
:root[data-theme=blueprint] body {
background:
@@ -148,8 +149,8 @@
--ok:#7ef0c4; --warn:#ffd76a; --err:#ff6b8e; --radius:12px;
--ink-shadow: 0 8px 24px rgba(255,107,142,0.25);
--ink-shadow-lift: 0 12px 34px rgba(255,142,199,0.35);
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23ffb347'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23ff8ec7'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23ff8ec7'/%3E%3C/svg%3E");
--dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' x='0' y='0' fill='%233a1a4e'/%3E%3C/svg%3E");
--dither-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%233a1a4e'/%3E%3C/svg%3E");
}
:root[data-theme=sunset] body {
background: