From dd415e2813988107fc912a6d064b50e1c4ed0341 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 25 Apr 2026 02:42:57 +0300 Subject: [PATCH] fix(ui): cards on pure black/white, decoupled from bg-anim MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three related fixes after the Phase-4 migration landed: - `--card-bg` flipped from `#101216` / `#f5f6f8` to pure `#000000` / `#ffffff` in base.css. Off-pure greys read as muddy when sitting on a pure-black/white page background; pure values keep card surfaces flush with the rest of the chrome and let the channel stripe + corner bracket carry all the visual differentiation. - Removed the `[data-bg-anim="on"] .card { background: rgba(...) }` block that turned every entity card translucent whenever the WebGL background was enabled. Card backgrounds are now stable across the toggle — the shader bleeds through `body { background: transparent }` only, not through cards. The same card now reads identically with the shader on or off. - WebGL shader base colour (`_bgColor` in bg-anim.ts and bg-shaders.ts) was using the legacy mid-grey `#1a1a1a` / `#f5f5f5`. That added a constant grey haze under the additive accent glow that didn't exist on the surrounding pure-black/white page. Switched to `[0,0,0]` / `[1,1,1]` so the shader composes against the same base as the page. - Reverted two leftovers from the Phase-4 commit where I had migrated `.template-card` and `.graph-node-body` away from `var(--card-bg)` toward `var(--lux-bg-1, …)`. Those backgrounds now live on `var(--card-bg)` again, matching every other migrated card. --- server/src/ledgrab/static/css/base.css | 24 ++++++------------- .../src/ledgrab/static/css/graph-editor.css | 2 +- server/src/ledgrab/static/css/streams.css | 2 +- server/src/ledgrab/static/js/core/bg-anim.ts | 9 +++++-- .../src/ledgrab/static/js/core/bg-shaders.ts | 8 +++++-- 5 files changed, 22 insertions(+), 23 deletions(-) diff --git a/server/src/ledgrab/static/css/base.css b/server/src/ledgrab/static/css/base.css index f3f91a5..f6b1592 100644 --- a/server/src/ledgrab/static/css/base.css +++ b/server/src/ledgrab/static/css/base.css @@ -101,7 +101,7 @@ [data-theme="dark"] { --bg-color: #000000; --bg-secondary: #0a0b0d; - --card-bg: #101216; + --card-bg: #000000; --text-color: #e0e0e0; --text-primary: #e0e0e0; --text-secondary: #999; @@ -148,7 +148,7 @@ [data-theme="light"] { --bg-color: #ffffff; --bg-secondary: #fafbfc; - --card-bg: #f5f6f8; + --card-bg: #ffffff; --text-color: #333333; --text-primary: #333333; --text-secondary: #595959; @@ -241,21 +241,11 @@ html.modal-open { background: transparent; } -/* When bg-anim is active, make entity cards slightly translucent - so the shader bleeds through. Only target cards — NOT modals, - pickers, tab bars, headers, or other chrome. */ -[data-bg-anim="on"][data-theme="dark"] .card, -[data-bg-anim="on"][data-theme="dark"] .template-card, -[data-bg-anim="on"][data-theme="dark"] .add-device-card, -[data-bg-anim="on"][data-theme="dark"] .dashboard-target { - background: rgba(45, 45, 45, 0.88); -} -[data-bg-anim="on"][data-theme="light"] .card, -[data-bg-anim="on"][data-theme="light"] .template-card, -[data-bg-anim="on"][data-theme="light"] .add-device-card, -[data-bg-anim="on"][data-theme="light"] .dashboard-target { - background: rgba(255, 255, 255, 0.85); -} +/* Card backgrounds are intentionally stable across the dynamic-bg + toggle — the shader bleeds through the page background only. + (Previously a translucent override let the shader show through + cards too, but it made the same card look different depending on + whether the user had the WebGL background enabled.) */ /* Blur behind header via pseudo-element — applying backdrop-filter directly to header would create a containing block and break position:fixed on the .tab-bar nested inside it (mobile bottom nav). */ diff --git a/server/src/ledgrab/static/css/graph-editor.css b/server/src/ledgrab/static/css/graph-editor.css index d6e3bfa..36a8e74 100644 --- a/server/src/ledgrab/static/css/graph-editor.css +++ b/server/src/ledgrab/static/css/graph-editor.css @@ -430,7 +430,7 @@ html:has(#tab-graph.active) { } .graph-node-body { - fill: var(--lux-bg-1, var(--card-bg)); + fill: var(--card-bg); stroke: var(--lux-line, var(--border-color)); stroke-width: 1; rx: 6; diff --git a/server/src/ledgrab/static/css/streams.css b/server/src/ledgrab/static/css/streams.css index 014959b..cf867d5 100644 --- a/server/src/ledgrab/static/css/streams.css +++ b/server/src/ledgrab/static/css/streams.css @@ -10,7 +10,7 @@ .template-card { --ch: var(--ch-cyan, var(--info-color)); /* default channel — overridden per data-attr below */ - background: var(--lux-bg-1, var(--card-bg)); + background: var(--card-bg); border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color)); border-radius: var(--lux-r-md, var(--radius-md)); padding: 18px 20px 16px; diff --git a/server/src/ledgrab/static/js/core/bg-anim.ts b/server/src/ledgrab/static/js/core/bg-anim.ts index a9aa5b6..3e61aab 100644 --- a/server/src/ledgrab/static/js/core/bg-anim.ts +++ b/server/src/ledgrab/static/js/core/bg-anim.ts @@ -114,7 +114,10 @@ let _particleBuf: Float32Array | null = null; // pre-allocated Float32Array for let _raf: number | null = null; let _startTime = 0; let _accent = [76 / 255, 175 / 255, 80 / 255]; -let _bgColor = [26 / 255, 26 / 255, 26 / 255]; +// Base canvas colour — must match `--bg-color` (pure black / white in the +// Lumenworks theme). Using mid-greys here washes the additive glow with a +// constant tint that doesn't exist on the surrounding page background. +let _bgColor = [0, 0, 0]; let _isLight = 0.0; // Particle state (CPU-side, positions in 0..1 UV space) @@ -262,7 +265,9 @@ export function updateBgAnimAccent(hex: string): void { } export function updateBgAnimTheme(isDark: boolean): void { - _bgColor = isDark ? [26 / 255, 26 / 255, 26 / 255] : [245 / 255, 245 / 255, 245 / 255]; + // Match the page's `--bg-color` (pure black/white) — see comment on + // the `_bgColor` declaration above. + _bgColor = isDark ? [0, 0, 0] : [1, 1, 1]; _isLight = isDark ? 0.0 : 1.0; } diff --git a/server/src/ledgrab/static/js/core/bg-shaders.ts b/server/src/ledgrab/static/js/core/bg-shaders.ts index df1b82f..b95d0a9 100644 --- a/server/src/ledgrab/static/js/core/bg-shaders.ts +++ b/server/src/ledgrab/static/js/core/bg-shaders.ts @@ -320,7 +320,10 @@ let _uBg: WebGLUniformLocation | null = null; let _uLight: WebGLUniformLocation | null = null; let _accent = [76 / 255, 175 / 255, 80 / 255]; -let _bgColor = [26 / 255, 26 / 255, 26 / 255]; +// Base canvas colour — must match `--bg-color` (pure black / white in +// the Lumenworks theme). Using mid-greys here washes the additive glow +// with a constant tint that doesn't exist on the surrounding page bg. +let _bgColor = [0, 0, 0]; let _isLight = 0.0; // ─── GL helpers ────────────────────────────────────────────── @@ -471,7 +474,8 @@ export function updateShaderAccent(hex: string): void { /** Update theme brightness (called on theme toggle). */ export function updateShaderTheme(isDark: boolean): void { - _bgColor = isDark ? [26 / 255, 26 / 255, 26 / 255] : [245 / 255, 245 / 255, 245 / 255]; + // Match the page's `--bg-color` token (pure black/white). + _bgColor = isDark ? [0, 0, 0] : [1, 1, 1]; _isLight = isDark ? 0.0 : 1.0; }