dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make the footer version pill an opaque frosted chip

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 22:14:20 +00:00
commit 50b5531d68
1 changed files with 8 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/app/web.css
View file

@ -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;