style(web): refine Frutiger Aero liquid glass to clear 3D bevel-rimmed glass (v2.2.18)
This commit is contained in:
parent
12e717448b
commit
ee745a3619
7 changed files with 185 additions and 144 deletions
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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**,
|
||||||
|
|
|
||||||
|
|
@ -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
4
package-lock.json
generated
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
281
src/app/web.css
281
src/app/web.css
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue