From 91535accef844ee9feb6d66a9a6b65f73ebe12e8 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Thu, 11 Jun 2026 22:45:14 +0200 Subject: [PATCH] =?UTF-8?q?fix(ui):=20restore=20glass=20translucency=20(82?= =?UTF-8?q?%)=20=E2=80=94=20opaque=20value=20killed=20the=20effect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit backdrop-filter blur does work here; the previous 94% opacity made .glass nearly solid so the blurred backdrop never showed. Dial back to 82% with a strong blur so overlays read as frosted glass again, while staying less see-through than the old 72% that made the account menu look too transparent. --- frontend/src/index.css | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 0be69e9..c135167 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -32,16 +32,15 @@ body { /* ===== Liquid-glass surface system (theme-aware, GPU-light) ===== */ .glass { - /* Frosted overlay surface. We lean on opacity (not blur) so it looks right even - when the browser has hardware acceleration off, where backdrop-filter is a no-op - and a sharp background would otherwise show through. The blur is a bonus that - kicks in when GPU compositing is available. */ - background: color-mix(in srgb, var(--surface) 94%, transparent); + /* Frosted overlay surface: translucent enough that the blurred backdrop shows + through (the glassy look), opaque enough that the background isn't distracting. + The strong blur turns whatever is behind into soft colour, not a sharp image. */ + background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); - border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); + border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); box-shadow: - inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent), + inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent), 0 18px 44px -16px rgba(0, 0, 0, 0.6); } .glass-card {