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

give the footer version pill a glass sheen so it fits the dark theme

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

11
src/app/web.css
View file

@ -61,7 +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); --pill-bg: rgba(23, 28, 45, 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);
@ -1001,13 +1001,14 @@ 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: var(--pill-bg); background-color: var(--pill-bg);
/* Glass sheen + inset highlight so the pill reads as a small glass surface
(matches the panels in both light and dark) instead of a flat block. */
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: 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%); -webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.55); box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 var(--glass-inset);
font-size: 0.66rem; font-size: 0.66rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;