From 420f045033876a99cd263a5a7f4b80761b79d830 Mon Sep 17 00:00:00 2001 From: etalon Date: Sat, 13 Jun 2026 11:23:22 +0200 Subject: [PATCH] style: darker/sparser dither on dark themes; CRT scanlines for terminal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- web/static/css/app.css | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/web/static/css/app.css b/web/static/css/app.css index 41e2ff4..34300af 100644 --- a/web/static/css/app.css +++ b/web/static/css/app.css @@ -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: