From 2089705e37bdc49e53d4e446823da3b07eac2442 Mon Sep 17 00:00:00 2001 From: dvorakmortonxd Date: Thu, 15 Oct 2026 23:33:41 +0200 Subject: [PATCH] fix(web): make Frutiger Aero liquid glass truly see-through with readable text (v2.2.19) --- AGENTS.md | 2 +- README.md | 2 +- graphify-out/manifest.json | 24 +-- package-lock.json | 4 +- package.json | 2 +- src/app/components/WebLayout.tsx | 2 +- src/app/web.css | 242 +++++++++++++++---------------- 7 files changed, 135 insertions(+), 143 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 289412f..c37ce8a 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -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 hand-written CSS). - Path alias: `@/*` → `src/*`. -- Version: `2.2.18` (see `package.json`). +- Version: `2.2.19` (see `package.json`). ### Scripts ```bash diff --git a/README.md b/README.md index e36bd24..eb47177 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,7 @@ more. 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, feature/app previews and the desktop wallpaper are CSS. -- **Version:** `2.2.18` (see `package.json`) +- **Version:** `2.2.19` (see `package.json`) - **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 `overrides`. `braces` (a transitive ESLint/`fast-glob` dependency) has **no upstream fix**, diff --git a/graphify-out/manifest.json b/graphify-out/manifest.json index 72d5058..358d736 100644 --- a/graphify-out/manifest.json +++ b/graphify-out/manifest.json @@ -24,9 +24,9 @@ "semantic_hash": "03388a201be8750ddcddb14dfbc34411" }, "package.json": { - "mtime": 1792099681.7033262, - "seen": 1792099697.2859526, - "ast_hash": "54ab7827bcc73a489e87842b63dc3ff2", + "mtime": 1792099979.9219553, + "seen": 1792099995.8841898, + "ast_hash": "8172234618a09e371ddd0ffde8aae133", "semantic_hash": "" }, "postcss.config.mjs": { @@ -114,9 +114,9 @@ "semantic_hash": "20e25c727b4bb982e5a22d65efece143" }, "src/app/components/WebLayout.tsx": { - "mtime": 1792099684.666372, - "seen": 1792099697.2860098, - "ast_hash": "c1ce20c375fe65ec25daa5ee3570b159", + "mtime": 1792099982.8900013, + "seen": 1792099995.884235, + "ast_hash": "3bfb36b857aa77ff2f4d6273032b2807", "semantic_hash": "" }, "src/app/components/WinWindow.tsx": { @@ -240,9 +240,9 @@ "semantic_hash": "b81dea2175efa2b0b6c38451ab5a4bbd" }, "README.md": { - "mtime": 1792099686.846406, - "seen": 1792099697.286089, - "ast_hash": "56de572329691e8f09e3d591315d7f75", + "mtime": 1792099983.2880075, + "seen": 1792099995.8842998, + "ast_hash": "a803a6b174839fa961a949e6126934e7", "semantic_hash": "" }, "public/llms.txt": { @@ -366,9 +366,9 @@ "semantic_hash": "6f69e16823f10d9c7af1625eff2b32e8" }, "AGENTS.md": { - "mtime": 1792099688.789436, - "seen": 1792099697.2860813, - "ast_hash": "b94f2124b7e2b2e682234e9fc12e0bd2", + "mtime": 1792099983.9940186, + "seen": 1792099995.8842938, + "ast_hash": "e2d160704c7a65c785806cd9872d9113", "semantic_hash": "" }, "public/freezmo_aero.png": { diff --git a/package-lock.json b/package-lock.json index 7460723..ad615c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "dvorakmortonxd", - "version": "2.2.18", + "version": "2.2.19", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "dvorakmortonxd", - "version": "2.2.18", + "version": "2.2.19", "dependencies": { "next": "^16.3.8", "react": "^19.3.0", diff --git a/package.json b/package.json index d7f6578..431df53 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dvorakmortonxd", - "version": "2.2.18", + "version": "2.2.19", "private": true, "scripts": { "dev": "node scripts/dev-server.mjs", diff --git a/src/app/components/WebLayout.tsx b/src/app/components/WebLayout.tsx index b193e1f..1dd0d4c 100644 --- a/src/app/components/WebLayout.tsx +++ b/src/app/components/WebLayout.tsx @@ -421,7 +421,7 @@ export default function WebLayout() { diff --git a/src/app/web.css b/src/app/web.css index 2b70fe4..18a5568 100644 --- a/src/app/web.css +++ b/src/app/web.css @@ -1954,48 +1954,47 @@ 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-scheme="dark"][data-aero="true"] { - --web-accent: #baf2ff; - --web-accent-2: #7ce8ff; + --web-accent: #9eefff; + --web-accent-2: #64e3ff; --web-page: #0a74cc; --web-ink: #ffffff; - --web-muted: rgba(236, 248, 255, 0.86); + --web-muted: rgba(242, 250, 255, 0.94); - --glass-hi: rgba(255, 255, 255, 0.22); - --glass-lo: rgba(255, 255, 255, 0.06); - --glass-border: rgba(255, 255, 255, 0.78); - --glass-inset: rgba(255, 255, 255, 0.95); - --pill-bg: rgba(255, 255, 255, 0.16); + --glass-hi: rgba(255, 255, 255, 0.14); + --glass-lo: rgba(8, 28, 62, 0.2); + --glass-border: rgba(255, 255, 255, 0.58); + --glass-inset: rgba(255, 255, 255, 0.92); + --pill-bg: rgba(8, 28, 62, 0.32); --glass-shadow: - inset 0 1.5px 1px rgba(255, 255, 255, 0.95), - inset 0 -1.5px 1px rgba(255, 255, 255, 0.7), - inset 1.5px 0 1px rgba(255, 255, 255, 0.5), - 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); + inset 0 1.5px 1px rgba(255, 255, 255, 0.92), + inset 0 -1.5px 1px rgba(255, 255, 255, 0.58), + inset 1.5px 0 1px rgba(255, 255, 255, 0.45), + inset -1.5px 0 1px rgba(255, 255, 255, 0.45), + inset 0 6px 16px rgba(255, 255, 255, 0.16), + inset 0 -6px 16px rgba(0, 18, 48, 0.22), + 0 14px 36px -10px rgba(0, 18, 48, 0.45), + 0 2px 8px rgba(0, 14, 40, 0.25); --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.92); - --btn-bg: rgba(255, 255, 255, 0.1); + --btn-bg: rgba(8, 28, 62, 0.22); --btn-bg-hi: rgba(255, 255, 255, 0.22); - --btn-border: rgba(255, 255, 255, 0.8); + --btn-border: rgba(255, 255, 255, 0.68); --btn-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.95), - inset 0 -1.5px 1px rgba(255, 255, 255, 0.68), - 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); + inset 0 -1.5px 1px rgba(255, 255, 255, 0.6), + inset 1px 0 1px rgba(255, 255, 255, 0.42), + inset -1px 0 1px rgba(255, 255, 255, 0.42), + inset 0 4px 10px rgba(255, 255, 255, 0.18), + inset 0 -4px 10px rgba(0, 18, 48, 0.18), + 0 8px 20px -8px rgba(0, 18, 48, 0.35); --fg: var(--web-ink); --white: var(--web-ink); --gray: var(--web-muted); --bg: var(--web-page); - --bg-hard: rgba(255, 255, 255, 0.16); + --bg-hard: rgba(6, 24, 54, 0.26); --accent: var(--web-accent); --accent2: var(--web-accent-2); --accent3: var(--web-accent); @@ -2017,13 +2016,15 @@ html[data-theme="web"][data-scheme="dark"][data-aero="true"] { html[data-theme="web"][data-aero="true"] body { background: #0a74cc url("/frutigerbackground.png") center / cover fixed no-repeat; - text-shadow: 0 1px 3px rgba(0, 24, 58, 0.48); + text-shadow: + 0 1px 2px rgba(0, 16, 42, 0.82), + 0 2px 8px rgba(0, 16, 42, 0.45); } html[data-theme="web"][data-aero="true"] .web-bg { background: - 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.18), transparent 68%), + radial-gradient(56rem 38rem at 86% 6%, rgba(255, 255, 255, 0.16), transparent 65%), + radial-gradient(50rem 40rem at 14% 92%, rgba(80, 255, 190, 0.12), transparent 68%), url("/frutigerbackground.png") center / cover no-repeat; } @@ -2115,53 +2116,65 @@ html[data-theme="web"][data-aero="true"] .web-bg { /* ---------- Crystal-clear 3D bevel-rimmed liquid glass ---------- */ html[data-theme="web"][data-aero="true"] .glass, html[data-theme="web"][data-aero="true"] .web-freezmo { - background: - linear-gradient( - 135deg, - rgba(255, 255, 255, 0.24) 0%, - rgba(255, 255, 255, 0.06) 40%, - rgba(255, 255, 255, 0.02) 62%, - 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; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.14) 0%, + rgba(8, 28, 62, 0.18) 48%, + rgba(6, 22, 52, 0.22) 78%, + rgba(255, 255, 255, 0.1) 100% + ); + border: 1px solid rgba(255, 255, 255, 0.45); 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%); + inset 0 1.5px 1px rgba(255, 255, 255, 0.9), + inset 0 -1.5px 1px rgba(255, 255, 255, 0.55), + inset 1.5px 0 1px rgba(255, 255, 255, 0.42), + inset -1.5px 0 1px rgba(255, 255, 255, 0.42), + inset 0 6px 16px rgba(255, 255, 255, 0.15), + inset 0 -6px 16px rgba(0, 18, 48, 0.22), + 0 14px 36px -10px rgba(0, 18, 48, 0.45), + 0 2px 8px rgba(0, 14, 40, 0.25); + -webkit-backdrop-filter: blur(8px) saturate(135%); + backdrop-filter: blur(8px) saturate(135%); +} + +/* Hollow specular gradient rim (paints ONLY the 1.5px border ring, leaving the + interior 100% see-through). */ +html[data-theme="web"][data-aero="true"] .glass::after { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + padding: 1.5px; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.98) 0%, + rgba(255, 255, 255, 0.18) 28%, + rgba(255, 255, 255, 0.85) 50%, + rgba(255, 255, 255, 0.16) 74%, + rgba(255, 255, 255, 0.98) 100% + ); + -webkit-mask: + linear-gradient(#000 0 0) content-box, + linear-gradient(#000 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; } 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.88); background: radial-gradient( circle at 30% 26%, - rgba(255, 255, 255, 0.96) 0%, - rgba(255, 255, 255, 0.35) 16%, - rgba(255, 255, 255, 0.06) 52%, - rgba(255, 255, 255, 0.25) 82%, - rgba(255, 255, 255, 0.82) 100% + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 255, 255, 0.32) 16%, + rgba(255, 255, 255, 0.04) 52%, + rgba(255, 255, 255, 0.22) 82%, + rgba(255, 255, 255, 0.78) 100% ); box-shadow: - inset 0 -6px 14px rgba(255, 255, 255, 0.35), - inset 0 6px 12px rgba(255, 255, 255, 0.92), - 0 0 28px rgba(255, 255, 255, 0.45); + inset 0 -6px 14px rgba(255, 255, 255, 0.32), + inset 0 6px 12px rgba(255, 255, 255, 0.9), + 0 0 28px rgba(255, 255, 255, 0.4); } html[data-theme="web"][data-aero="true"] .web-ctl, @@ -2180,35 +2193,23 @@ html[data-theme="web"][data-aero="true"] .fw, html[data-theme="web"][data-aero="true"] .fw-url, html[data-theme="web"][data-aero="true"] .fw-search, 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; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.16) 0%, + rgba(8, 28, 62, 0.24) 50%, + rgba(255, 255, 255, 0.1) 100% + ); + border: 1px solid rgba(255, 255, 255, 0.68); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.95), - inset 0 -1.5px 1px rgba(255, 255, 255, 0.7), - 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%); + inset 0 -1.5px 1px rgba(255, 255, 255, 0.6), + inset 1px 0 1px rgba(255, 255, 255, 0.42), + inset -1px 0 1px rgba(255, 255, 255, 0.42), + inset 0 4px 10px rgba(255, 255, 255, 0.18), + inset 0 -4px 10px rgba(0, 18, 48, 0.2), + 0 8px 20px -8px rgba(0, 18, 48, 0.35); + -webkit-backdrop-filter: blur(8px) saturate(135%); + backdrop-filter: blur(8px) saturate(135%); color: #ffffff; } @@ -2218,44 +2219,35 @@ 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"] .web-freezmo-cta:hover, html[data-theme="web"][data-aero="true"] .web-freezmo-ghost:hover { - background: - linear-gradient( - 135deg, - rgba(255, 255, 255, 0.36) 0%, - rgba(255, 255, 255, 0.12) 42%, - rgba(255, 255, 255, 0.06) 64%, - rgba(255, 255, 255, 0.28) 100% - ) - 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; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.26) 0%, + rgba(8, 28, 62, 0.26) 50%, + rgba(255, 255, 255, 0.18) 100% + ); + border-color: rgba(255, 255, 255, 0.95); box-shadow: inset 0 2px 1.5px #ffffff, - inset 0 -2px 1.5px rgba(255, 255, 255, 0.85), - inset 0 5px 14px rgba(255, 255, 255, 0.36), - inset 0 -5px 14px rgba(255, 255, 255, 0.24), + inset 0 -2px 1.5px rgba(255, 255, 255, 0.8), + inset 0 5px 14px rgba(255, 255, 255, 0.28), + inset 0 -5px 14px rgba(0, 18, 48, 0.22), 0 14px 30px -10px rgba(0, 22, 56, 0.48), - 0 0 14px rgba(255, 255, 255, 0.35); + 0 0 14px rgba(255, 255, 255, 0.3); } html[data-theme="web"][data-aero="true"] .web-freezmo-name { - background: linear-gradient(120deg, #ffffff, #baf2ff); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + background: none; + -webkit-background-clip: border-box; + background-clip: border-box; + color: #9eefff; + text-shadow: + 0 1px 2px rgba(0, 16, 42, 0.85), + 0 0 16px rgba(130, 235, 255, 0.55); } html[data-theme="web"][data-aero="true"] .social-icon { - filter: invert(1) brightness(1.8); - opacity: 0.92; + filter: invert(1) brightness(1.8) drop-shadow(0 1px 2px rgba(0, 16, 42, 0.75)); + opacity: 0.95; } html[data-theme="web"][data-aero="true"] .heatmap-cell[data-level="1"],