style(web): refine Frutiger Aero liquid glass to clear 3D bevel-rimmed glass (v2.2.18)

This commit is contained in:
Martin Dvořák 2026-10-15 23:28:31 +02:00
commit ee745a3619
7 changed files with 185 additions and 144 deletions

View file

@ -56,7 +56,7 @@ frosted-glass **web** site, and an alternate KDE/Plasma **desktop simulation**
utilities in the components (Tailwind is present via PostCSS but the look is utilities in the components (Tailwind is present via PostCSS but the look is
hand-written CSS). hand-written CSS).
- Path alias: `@/*` → `src/*`. - Path alias: `@/*` → `src/*`.
- Version: `2.2.17` (see `package.json`). - Version: `2.2.18` (see `package.json`).
### Scripts ### Scripts
```bash ```bash
@ -179,8 +179,8 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
desktop mode is untouched): the icon swaps to `public/freezmo_aero.png`, the desktop mode is untouched): the icon swaps to `public/freezmo_aero.png`, the
website background switches to `public/frutigerbackground.png`, floating glossy website background switches to `public/frutigerbackground.png`, floating glossy
bubbles (`.web-aero-bubbles` / `.web-aero-bubble`) rise across the backdrop, and bubbles (`.web-aero-bubbles` / `.web-aero-bubble`) rise across the backdrop, and
all `.glass` panels and interactive controls become refractive liquid glass / all `.glass` panels and interactive controls become crystal-clear 3D bevel-rimmed
gel buttons. The two remaining feature panels (`.web-split`) stretch liquid glass. The two remaining feature panels (`.web-split`) stretch
to equal height and share a fixed `16 / 10` `.fw` window (the `FeatureWindow` to equal height and share a fixed `16 / 10` `.fw` window (the `FeatureWindow`
component) — decorative, **asset-free CSS mock-ups** rather than screenshots: component) — decorative, **asset-free CSS mock-ups** rather than screenshots:
Revival Inc. is a little necromancy game scene (night sky, moon, tombstones, Revival Inc. is a little necromancy game scene (night sky, moon, tombstones,

View file

@ -46,8 +46,8 @@ more.
- **Frutiger Aero easter egg (web shell)** — clicking the Freezmo app icon swaps it to - **Frutiger Aero easter egg (web shell)** — clicking the Freezmo app icon swaps it to
`freezmo_aero.png` and transforms the web shell into a Frutiger Aero theme: `freezmo_aero.png` and transforms the web shell into a Frutiger Aero theme:
`frutigerbackground.png` as the full-screen backdrop, floating glossy water/soap bubbles `frutigerbackground.png` as the full-screen backdrop, floating glossy water/soap bubbles
across the viewport, and refractive liquid-glass panels and gel buttons (leaving the across the viewport, and crystal-clear 3D bevel-rimmed liquid-glass panels and buttons
desktop mode untouched). (leaving the desktop mode untouched).
- **Draggable desktop icons** — free placement that snaps to a measured grid, one icon per - **Draggable desktop icons** — free placement that snaps to a measured grid, one icon per
cell, with a follow-the-cursor drag ghost. Icons shrink on cramped viewports so they never cell, with a follow-the-cursor drag ghost. Icons shrink on cramped viewports so they never
collide. collide.
@ -92,7 +92,7 @@ more.
icons (`public/freezmo.png`, `public/freezmo_aero.png`), the Frutiger Aero wallpaper icons (`public/freezmo.png`, `public/freezmo_aero.png`), the Frutiger Aero wallpaper
(`public/frutigerbackground.png`), the Joker easter egg and the Gentoo mark; all cards, (`public/frutigerbackground.png`), the Joker easter egg and the Gentoo mark; all cards,
feature/app previews and the desktop wallpaper are CSS. feature/app previews and the desktop wallpaper are CSS.
- **Version:** `2.2.17` (see `package.json`) - **Version:** `2.2.18` (see `package.json`)
- **Dependencies:** `npm audit` reports **0 vulnerabilities**. `next` is kept at a patched - **Dependencies:** `npm audit` reports **0 vulnerabilities**. `next` is kept at a patched
release (`>=16.3.6`) for the `next/og` RCE, and `brace-expansion` is force-upgraded via release (`>=16.3.6`) for the `next/og` RCE, and `brace-expansion` is force-upgraded via
`overrides`. `braces` (a transitive ESLint/`fast-glob` dependency) has **no upstream fix**, `overrides`. `braces` (a transitive ESLint/`fast-glob` dependency) has **no upstream fix**,

View file

@ -24,9 +24,9 @@
"semantic_hash": "03388a201be8750ddcddb14dfbc34411" "semantic_hash": "03388a201be8750ddcddb14dfbc34411"
}, },
"package.json": { "package.json": {
"mtime": 1792099231.5153382, "mtime": 1792099681.7033262,
"seen": 1792099263.7669873, "seen": 1792099697.2859526,
"ast_hash": "bb5daf478e875b6c5d5d2ec7def9b34b", "ast_hash": "54ab7827bcc73a489e87842b63dc3ff2",
"semantic_hash": "" "semantic_hash": ""
}, },
"postcss.config.mjs": { "postcss.config.mjs": {
@ -114,9 +114,9 @@
"semantic_hash": "20e25c727b4bb982e5a22d65efece143" "semantic_hash": "20e25c727b4bb982e5a22d65efece143"
}, },
"src/app/components/WebLayout.tsx": { "src/app/components/WebLayout.tsx": {
"mtime": 1792099104.6213684, "mtime": 1792099684.666372,
"seen": 1792099263.767026, "seen": 1792099697.2860098,
"ast_hash": "50f87afc8c92b67d8e83deaf0db4f4a6", "ast_hash": "c1ce20c375fe65ec25daa5ee3570b159",
"semantic_hash": "" "semantic_hash": ""
}, },
"src/app/components/WinWindow.tsx": { "src/app/components/WinWindow.tsx": {
@ -240,9 +240,9 @@
"semantic_hash": "b81dea2175efa2b0b6c38451ab5a4bbd" "semantic_hash": "b81dea2175efa2b0b6c38451ab5a4bbd"
}, },
"README.md": { "README.md": {
"mtime": 1792099238.3164437, "mtime": 1792099686.846406,
"seen": 1792099263.7670863, "seen": 1792099697.286089,
"ast_hash": "3109d3679249509421774e43bea54df6", "ast_hash": "56de572329691e8f09e3d591315d7f75",
"semantic_hash": "" "semantic_hash": ""
}, },
"public/llms.txt": { "public/llms.txt": {
@ -366,9 +366,9 @@
"semantic_hash": "6f69e16823f10d9c7af1625eff2b32e8" "semantic_hash": "6f69e16823f10d9c7af1625eff2b32e8"
}, },
"AGENTS.md": { "AGENTS.md": {
"mtime": 1792099254.9847023, "mtime": 1792099688.789436,
"seen": 1792099263.7670813, "seen": 1792099697.2860813,
"ast_hash": "401ce39abe80415b6a57cc5e55684160", "ast_hash": "b94f2124b7e2b2e682234e9fc12e0bd2",
"semantic_hash": "" "semantic_hash": ""
}, },
"public/freezmo_aero.png": { "public/freezmo_aero.png": {

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "dvorakmortonxd", "name": "dvorakmortonxd",
"version": "2.2.17", "version": "2.2.18",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "dvorakmortonxd", "name": "dvorakmortonxd",
"version": "2.2.17", "version": "2.2.18",
"dependencies": { "dependencies": {
"next": "^16.3.8", "next": "^16.3.8",
"react": "^19.3.0", "react": "^19.3.0",

View file

@ -1,6 +1,6 @@
{ {
"name": "dvorakmortonxd", "name": "dvorakmortonxd",
"version": "2.2.17", "version": "2.2.18",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "node scripts/dev-server.mjs", "dev": "node scripts/dev-server.mjs",

View file

@ -421,7 +421,7 @@ export default function WebLayout() {
</Section> </Section>
<footer className="web-footer glass"> <footer className="web-footer glass">
<span className="web-footer-label">v2.2.17</span> <span className="web-footer-label">v2.2.18</span>
© 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just © 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just
follow the GPL3.0 License) follow the GPL3.0 License)
</footer> </footer>

View file

@ -1954,65 +1954,76 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
============================================================ */ ============================================================ */
html[data-theme="web"][data-aero="true"], html[data-theme="web"][data-aero="true"],
html[data-theme="web"][data-scheme="dark"][data-aero="true"] { html[data-theme="web"][data-scheme="dark"][data-aero="true"] {
--web-accent: #0078e8; --web-accent: #baf2ff;
--web-accent-2: #00c49a; --web-accent-2: #7ce8ff;
--web-page: #0a74cc; --web-page: #0a74cc;
--web-ink: #03223a; --web-ink: #ffffff;
--web-muted: #0d456c; --web-muted: rgba(236, 248, 255, 0.86);
--glass-hi: rgba(255, 255, 255, 0.72); --glass-hi: rgba(255, 255, 255, 0.22);
--glass-lo: rgba(185, 238, 255, 0.34); --glass-lo: rgba(255, 255, 255, 0.06);
--glass-border: rgba(255, 255, 255, 0.9); --glass-border: rgba(255, 255, 255, 0.78);
--glass-inset: rgba(255, 255, 255, 0.98); --glass-inset: rgba(255, 255, 255, 0.95);
--pill-bg: rgba(230, 250, 255, 0.9); --pill-bg: rgba(255, 255, 255, 0.16);
--glass-shadow: --glass-shadow:
0 24px 50px -18px rgba(0, 42, 92, 0.58), inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
0 4px 16px rgba(0, 170, 255, 0.28); inset 0 -1.5px 1px rgba(255, 255, 255, 0.7),
--hover: rgba(0, 168, 255, 0.22); inset 1.5px 0 1px rgba(255, 255, 255, 0.5),
--accent-soft: rgba(0, 168, 255, 0.45); inset -1.5px 0 1px rgba(255, 255, 255, 0.5),
inset 0 4px 12px rgba(255, 255, 255, 0.26),
inset 0 -4px 12px rgba(255, 255, 255, 0.18),
inset 0 0 22px rgba(255, 255, 255, 0.12),
0 14px 34px -10px rgba(0, 22, 56, 0.42),
0 2px 8px rgba(0, 18, 48, 0.22);
--hover: rgba(255, 255, 255, 0.18);
--accent-soft: rgba(255, 255, 255, 0.45);
--accent-line: rgba(255, 255, 255, 0.95); --accent-line: rgba(255, 255, 255, 0.95);
--btn-bg: rgba(255, 255, 255, 0.68); --btn-bg: rgba(255, 255, 255, 0.1);
--btn-bg-hi: rgba(255, 255, 255, 0.92); --btn-bg-hi: rgba(255, 255, 255, 0.22);
--btn-border: rgba(255, 255, 255, 0.92); --btn-border: rgba(255, 255, 255, 0.8);
--btn-shadow: --btn-shadow:
0 10px 22px -10px rgba(0, 55, 110, 0.45), inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 -1.5px 1px rgba(255, 255, 255, 0.68),
inset 0 -2px 6px rgba(0, 165, 245, 0.28); inset 1px 0 1px rgba(255, 255, 255, 0.45),
inset -1px 0 1px rgba(255, 255, 255, 0.45),
inset 0 3px 8px rgba(255, 255, 255, 0.24),
inset 0 -3px 8px rgba(255, 255, 255, 0.14),
0 8px 20px -8px rgba(0, 22, 56, 0.36);
--fg: var(--web-ink); --fg: var(--web-ink);
--white: var(--web-ink); --white: var(--web-ink);
--gray: var(--web-muted); --gray: var(--web-muted);
--bg: var(--web-page); --bg: var(--web-page);
--bg-hard: rgba(255, 255, 255, 0.42); --bg-hard: rgba(255, 255, 255, 0.16);
--accent: var(--web-accent); --accent: var(--web-accent);
--accent2: var(--web-accent-2); --accent2: var(--web-accent-2);
--accent3: var(--web-accent); --accent3: var(--web-accent);
--green: #0ea54a; --green: #7effb2;
--aqua: #009eb8; --aqua: #7ce8ff;
--blue: #006ee6; --blue: #9ed4ff;
--purple: #6d4aff; --purple: #d8b4fe;
--red: #e11d48; --red: #fda4af;
--darkpink: #d92682; --darkpink: #f9a8d4;
--index-line: rgba(255, 255, 255, 0.55); --index-line: rgba(255, 255, 255, 0.28);
--status-finished: #0b7a38; --status-finished: #86efac;
--status-live: #005ec4; --status-live: #93c5fd;
--status-wip: #9a4700; --status-wip: #fde047;
--status-unfinished: #a83205; --status-unfinished: #fdba74;
--status-discontinued: #a81313; --status-discontinued: #fca5a5;
--status-forgotten: #2f516c; --status-forgotten: #e2e8f0;
} }
html[data-theme="web"][data-aero="true"] body { html[data-theme="web"][data-aero="true"] body {
background: #0a74cc url("/frutigerbackground.png") center / cover fixed no-repeat; background: #0a74cc url("/frutigerbackground.png") center / cover fixed no-repeat;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); text-shadow: 0 1px 3px rgba(0, 24, 58, 0.48);
} }
html[data-theme="web"][data-aero="true"] .web-bg { html[data-theme="web"][data-aero="true"] .web-bg {
background: background:
radial-gradient(56rem 38rem at 86% 6%, rgba(255, 255, 255, 0.42), transparent 65%), radial-gradient(56rem 38rem at 86% 6%, rgba(255, 255, 255, 0.28), transparent 65%),
radial-gradient(50rem 40rem at 14% 92%, rgba(80, 255, 190, 0.24), transparent 68%), radial-gradient(50rem 40rem at 14% 92%, rgba(80, 255, 190, 0.18), transparent 68%),
url("/frutigerbackground.png") center / cover no-repeat; url("/frutigerbackground.png") center / cover no-repeat;
} }
@ -2101,56 +2112,56 @@ html[data-theme="web"][data-aero="true"] .web-bg {
} }
} }
/* ---------- Liquid glass panels & glossy gel surfaces ---------- */ /* ---------- Crystal-clear 3D bevel-rimmed liquid glass ---------- */
html[data-theme="web"][data-aero="true"] .glass { html[data-theme="web"][data-aero="true"] .glass,
background-color: rgba(210, 245, 255, 0.36);
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.82) 0%,
rgba(240, 252, 255, 0.52) 44%,
rgba(170, 232, 255, 0.34) 46%,
rgba(130, 220, 255, 0.46) 86%,
rgba(180, 255, 235, 0.56) 100%
);
border: 1.5px solid rgba(255, 255, 255, 0.92);
box-shadow:
0 24px 50px -18px rgba(0, 42, 92, 0.58),
0 3px 14px rgba(0, 175, 255, 0.3),
inset 0 2px 1px rgba(255, 255, 255, 1),
inset 0 18px 28px rgba(255, 255, 255, 0.45),
inset 0 -4px 12px rgba(0, 175, 255, 0.34);
-webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.06);
backdrop-filter: blur(16px) saturate(200%) brightness(1.06);
}
html[data-theme="web"][data-aero="true"] .web-freezmo { html[data-theme="web"][data-aero="true"] .web-freezmo {
background: background:
radial-gradient(60% 90% at 12% 0%, rgba(255, 255, 255, 0.65), transparent 62%),
radial-gradient(52% 82% at 94% 14%, rgba(0, 215, 255, 0.42), transparent 60%),
radial-gradient(48% 72% at 76% 100%, rgba(70, 255, 180, 0.38), transparent 64%),
linear-gradient( linear-gradient(
180deg, 135deg,
rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.24) 0%,
rgba(220, 248, 255, 0.52) 48%, rgba(255, 255, 255, 0.06) 40%,
rgba(145, 225, 255, 0.44) 50%, rgba(255, 255, 255, 0.02) 62%,
rgba(175, 255, 230, 0.58) 100% rgba(255, 255, 255, 0.18) 100%
); )
padding-box,
linear-gradient(
135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.26) 28%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.22) 74%,
rgba(255, 255, 255, 0.98) 100%
)
border-box;
border: 1.5px solid transparent;
box-shadow:
inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 0 -1.5px 1px rgba(255, 255, 255, 0.72),
inset 1.5px 0 1px rgba(255, 255, 255, 0.5),
inset -1.5px 0 1px rgba(255, 255, 255, 0.5),
inset 0 5px 14px rgba(255, 255, 255, 0.28),
inset 0 -5px 14px rgba(255, 255, 255, 0.18),
inset 0 0 24px rgba(255, 255, 255, 0.12),
0 16px 36px -12px rgba(0, 22, 56, 0.42),
0 2px 8px rgba(0, 18, 48, 0.22);
-webkit-backdrop-filter: blur(12px) saturate(145%);
backdrop-filter: blur(12px) saturate(145%);
} }
html[data-theme="web"][data-aero="true"] .web-freezmo-orb { html[data-theme="web"][data-aero="true"] .web-freezmo-orb {
border: 1.2px solid rgba(255, 255, 255, 0.9); border: 1.2px solid rgba(255, 255, 255, 0.9);
background: radial-gradient( background: radial-gradient(
circle at 30% 26%, circle at 30% 26%,
rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 0%,
rgba(255, 255, 255, 0.45) 16%, rgba(255, 255, 255, 0.35) 16%,
rgba(130, 235, 255, 0.2) 52%, rgba(255, 255, 255, 0.06) 52%,
rgba(0, 195, 255, 0.42) 82%, rgba(255, 255, 255, 0.25) 82%,
rgba(160, 255, 220, 0.78) 100% rgba(255, 255, 255, 0.82) 100%
); );
box-shadow: box-shadow:
inset 0 -8px 16px rgba(0, 180, 255, 0.4), inset 0 -6px 14px rgba(255, 255, 255, 0.35),
inset 0 6px 12px rgba(255, 255, 255, 0.95), inset 0 6px 12px rgba(255, 255, 255, 0.92),
0 0 36px rgba(100, 230, 255, 0.6); 0 0 28px rgba(255, 255, 255, 0.45);
} }
html[data-theme="web"][data-aero="true"] .web-ctl, html[data-theme="web"][data-aero="true"] .web-ctl,
@ -2160,78 +2171,108 @@ html[data-theme="web"][data-aero="true"] .gym-item,
html[data-theme="web"][data-aero="true"] .contribution-entry, html[data-theme="web"][data-aero="true"] .contribution-entry,
html[data-theme="web"][data-aero="true"] .index-list, html[data-theme="web"][data-aero="true"] .index-list,
html[data-theme="web"][data-aero="true"] .heatmap-container, html[data-theme="web"][data-aero="true"] .heatmap-container,
html[data-theme="web"][data-aero="true"] .web-freezmo-ghost { html[data-theme="web"][data-aero="true"] .web-freezmo-cta,
background-image: linear-gradient( html[data-theme="web"][data-aero="true"] .web-freezmo-ghost,
180deg, html[data-theme="web"][data-aero="true"] .web-freezmo-badge,
rgba(255, 255, 255, 0.92) 0%, html[data-theme="web"][data-aero="true"] .web-switch,
rgba(230, 250, 255, 0.68) 49%, html[data-theme="web"][data-aero="true"] .web-footer-label,
rgba(168, 230, 255, 0.52) 51%, html[data-theme="web"][data-aero="true"] .fw,
rgba(215, 250, 255, 0.82) 100% html[data-theme="web"][data-aero="true"] .fw-url,
); html[data-theme="web"][data-aero="true"] .fw-search,
border-color: rgba(255, 255, 255, 0.94); html[data-theme="web"][data-aero="true"] .fw-tab {
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.26) 0%,
rgba(255, 255, 255, 0.07) 42%,
rgba(255, 255, 255, 0.03) 64%,
rgba(255, 255, 255, 0.2) 100%
)
padding-box,
linear-gradient(
135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.28) 30%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.24) 74%,
rgba(255, 255, 255, 0.98) 100%
)
border-box;
border: 1.5px solid transparent;
box-shadow: box-shadow:
0 10px 22px -12px rgba(0, 52, 105, 0.48), inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -1.5px 1px rgba(255, 255, 255, 0.7),
inset 0 -2px 6px rgba(0, 170, 255, 0.28); inset 1px 0 1px rgba(255, 255, 255, 0.48),
inset -1px 0 1px rgba(255, 255, 255, 0.48),
inset 0 4px 10px rgba(255, 255, 255, 0.24),
inset 0 -4px 10px rgba(255, 255, 255, 0.16),
0 10px 24px -10px rgba(0, 22, 56, 0.38);
-webkit-backdrop-filter: blur(12px) saturate(145%);
backdrop-filter: blur(12px) saturate(145%);
color: #ffffff;
} }
html[data-theme="web"][data-aero="true"] .web-ctl:hover, html[data-theme="web"][data-aero="true"] .web-ctl:hover,
html[data-theme="web"][data-aero="true"] .service-button:hover, html[data-theme="web"][data-aero="true"] .service-button:hover,
html[data-theme="web"][data-aero="true"] .social-button:hover, html[data-theme="web"][data-aero="true"] .social-button:hover,
html[data-theme="web"][data-aero="true"] .gym-item:hover, html[data-theme="web"][data-aero="true"] .gym-item:hover,
html[data-theme="web"][data-aero="true"] .web-freezmo-cta:hover,
html[data-theme="web"][data-aero="true"] .web-freezmo-ghost:hover { html[data-theme="web"][data-aero="true"] .web-freezmo-ghost:hover {
background-image: linear-gradient( background:
180deg, linear-gradient(
rgba(255, 255, 255, 0.98) 0%, 135deg,
rgba(235, 252, 255, 0.82) 49%, rgba(255, 255, 255, 0.36) 0%,
rgba(175, 238, 255, 0.68) 51%, rgba(255, 255, 255, 0.12) 42%,
rgba(210, 255, 242, 0.92) 100% rgba(255, 255, 255, 0.06) 64%,
); rgba(255, 255, 255, 0.28) 100%
border-color: #ffffff; )
padding-box,
linear-gradient(
135deg,
#ffffff 0%,
rgba(255, 255, 255, 0.45) 30%,
#ffffff 50%,
rgba(255, 255, 255, 0.4) 74%,
#ffffff 100%
)
border-box;
border-color: transparent;
box-shadow: box-shadow:
0 14px 28px -12px rgba(0, 95, 175, 0.55), inset 0 2px 1.5px #ffffff,
0 0 14px rgba(80, 225, 255, 0.65), inset 0 -2px 1.5px rgba(255, 255, 255, 0.85),
inset 0 2px 0 #ffffff; inset 0 5px 14px rgba(255, 255, 255, 0.36),
inset 0 -5px 14px rgba(255, 255, 255, 0.24),
0 14px 30px -10px rgba(0, 22, 56, 0.48),
0 0 14px rgba(255, 255, 255, 0.35);
} }
html[data-theme="web"][data-aero="true"] .web-freezmo-cta, html[data-theme="web"][data-aero="true"] .web-freezmo-name {
html[data-theme="web"][data-aero="true"] .web-freezmo-badge, background: linear-gradient(120deg, #ffffff, #baf2ff);
html[data-theme="web"][data-aero="true"] .web-switch.on { -webkit-background-clip: text;
background: linear-gradient( background-clip: text;
180deg, color: transparent;
#9df8ff 0%,
#28c8ff 48%,
#0088eb 52%,
#00dc9e 100%
);
border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow:
0 12px 26px -10px rgba(0, 95, 175, 0.65),
0 0 12px rgba(0, 210, 255, 0.45),
inset 0 1.5px 0 rgba(255, 255, 255, 0.98);
text-shadow: 0 1px 2px rgba(0, 55, 105, 0.65);
} }
html[data-theme="web"][data-aero="true"] .social-icon { html[data-theme="web"][data-aero="true"] .social-icon {
filter: none; filter: invert(1) brightness(1.8);
opacity: 0.85; opacity: 0.92;
} }
html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="1"], html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="1"],
html[data-theme="web"][data-aero="true"] .heatmap-legend-cell[data-level="1"] { html[data-theme="web"][data-aero="true"] .heatmap-legend-cell[data-level="1"] {
background-color: rgba(0, 168, 240, 0.28); background-color: rgba(255, 255, 255, 0.26);
} }
html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="2"], html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="2"],
html[data-theme="web"][data-aero="true"] .heatmap-legend-cell[data-level="2"] { html[data-theme="web"][data-aero="true"] .heatmap-legend-cell[data-level="2"] {
background-color: rgba(0, 155, 235, 0.5); background-color: rgba(255, 255, 255, 0.46);
} }
html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="3"], html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="3"],
html[data-theme="web"][data-aero="true"] .heatmap-legend-cell[data-level="3"] { html[data-theme="web"][data-aero="true"] .heatmap-legend-cell[data-level="3"] {
background-color: rgba(0, 140, 225, 0.76); background-color: rgba(255, 255, 255, 0.7);
} }
html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="4"], html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="4"],
html[data-theme="web"][data-aero="true"] .heatmap-legend-cell[data-level="4"] { html[data-theme="web"][data-aero="true"] .heatmap-legend-cell[data-level="4"] {
background-color: #0078e8; background-color: rgba(255, 255, 255, 0.95);
} }
/* ============================================================ /* ============================================================