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-lo: rgba(255, 255, 255, 0.22);
--glass-border: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.72);
--glass-inset: rgba(255, 255, 255, 0.9); --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); --glass-shadow: 0 26px 55px -30px rgba(23, 32, 60, 0.55);
--hover: rgba(109, 94, 252, 0.12); --hover: rgba(109, 94, 252, 0.12);
--accent-soft: rgba(109, 94, 252, 0.35); --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-lo: rgba(255, 255, 255, 0.045);
--glass-border: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.12);
--glass-inset: rgba(255, 255, 255, 0.1); --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); --glass-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.85);
--hover: rgba(139, 124, 255, 0.14); --hover: rgba(139, 124, 255, 0.14);
--accent-soft: rgba(139, 124, 255, 0.4); --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; right: 18px;
padding: 3px 9px; padding: 3px 9px;
border-radius: 999px; border-radius: 999px;
background-color: var(--glass-lo); background: var(--pill-bg);
background-image: linear-gradient(155deg, var(--glass-hi), var(--glass-lo));
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
/* Frosted pill: blurs the footer's border line passing behind it so the two /* Frosted pill: a near-opaque fill so the footer panel/line behind it no
stop visually colliding. */ longer shows through, softened with a backdrop blur. */
-webkit-backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.55); box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.55);
font-size: 0.66rem; font-size: 0.66rem;
font-weight: 700; font-weight: 700;