From 50b5531d68327d8ceee335546d401fc67e48db49 Mon Sep 17 00:00:00 2001 From: Martin Dvorak Date: Wed, 30 Sep 2026 22:14:20 +0000 Subject: [PATCH] make the footer version pill an opaque frosted chip --- src/app/web.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/web.css b/src/app/web.css index 721d27b..6047f08 100644 --- a/src/app/web.css +++ b/src/app/web.css @@ -16,6 +16,8 @@ --glass-lo: rgba(255, 255, 255, 0.22); --glass-border: rgba(255, 255, 255, 0.72); --glass-inset: rgba(255, 255, 255, 0.9); + /* Near-opaque frosted fill for the footer version pill. */ + --pill-bg: rgba(255, 255, 255, 0.86); --glass-shadow: 0 26px 55px -30px rgba(23, 32, 60, 0.55); --hover: rgba(109, 94, 252, 0.12); --accent-soft: rgba(109, 94, 252, 0.35); @@ -59,6 +61,7 @@ html[data-theme="web"][data-scheme="dark"] { --glass-lo: rgba(255, 255, 255, 0.045); --glass-border: rgba(255, 255, 255, 0.12); --glass-inset: rgba(255, 255, 255, 0.1); + --pill-bg: rgba(20, 24, 40, 0.92); --glass-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.85); --hover: rgba(139, 124, 255, 0.14); --accent-soft: rgba(139, 124, 255, 0.4); @@ -998,13 +1001,12 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"] right: 18px; padding: 3px 9px; border-radius: 999px; - background-color: var(--glass-lo); - background-image: linear-gradient(155deg, var(--glass-hi), var(--glass-lo)); + background: var(--pill-bg); border: 1px solid var(--glass-border); - /* Frosted pill: blurs the footer's border line passing behind it so the two - stop visually colliding. */ - -webkit-backdrop-filter: blur(14px) saturate(180%); - backdrop-filter: blur(14px) saturate(180%); + /* Frosted pill: a near-opaque fill so the footer panel/line behind it no + longer shows through, softened with a backdrop blur. */ + -webkit-backdrop-filter: blur(16px) saturate(180%); + backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.55); font-size: 0.66rem; font-weight: 700;