From 56e964d66fb157625141c1e8bd2d4ae90c184bac Mon Sep 17 00:00:00 2001 From: fullstackjam Date: Tue, 16 Jun 2026 10:36:46 +0800 Subject: [PATCH] fix(ui): vignette no longer washes out content at page bottom The dark-mode edge vignette was a fixed full-viewport overlay (body::before, z-index 0) painting over content. On tall pages (config editor) the bottom content sat in the darkest part of the vignette and became unreadable. Move the vignette into the body background layer (background-image + background-attachment: fixed) so it always renders behind content, and soften it slightly. Fixes the unreadable SCRIPT section at the bottom of /dashboard/edit in dark mode. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/lib/styles/variables.css | 2 +- src/routes/+layout.svelte | 15 ++++----------- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/lib/styles/variables.css b/src/lib/styles/variables.css index 522e510..f221eaa 100644 --- a/src/lib/styles/variables.css +++ b/src/lib/styles/variables.css @@ -20,7 +20,7 @@ --accent-deep: #2f6b4d; --amber: #c9a14e; --shadow: rgba(0, 0, 0, 0.5); - --vignette: color-mix(in srgb, var(--bg-primary) 55%, #000); + --vignette: color-mix(in srgb, var(--bg-primary) 72%, #000); --grain-blend: soft-light; --grain-opacity: 0.05; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index d6b3207..183e057 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -29,7 +29,10 @@ :global(body) { font-family: var(--font-mono); - background: var(--bg-primary); + /* edge vignette lives in the background layer so it never washes out content */ + background-color: var(--bg-primary); + background-image: radial-gradient(125% 85% at 50% -10%, transparent 62%, var(--vignette) 100%); + background-attachment: fixed; color: var(--text-primary); line-height: 1.5; min-height: 100vh; @@ -41,16 +44,6 @@ 'ss01' 1; } - /* edge vignette for depth (dark only via --vignette) */ - :global(body)::before { - content: ''; - position: fixed; - inset: 0; - z-index: 0; - pointer-events: none; - background: radial-gradient(120% 80% at 50% -10%, transparent 55%, var(--vignette) 100%); - } - /* film grain — the texture that kills the flat digital look */ :global(body)::after { content: '';