From 313706595dd3a439bd74f5007f13929ddbd67250 Mon Sep 17 00:00:00 2001 From: oliver Date: Tue, 13 Oct 2026 02:00:25 +0800 Subject: [PATCH] Tone down the glass theme: no glows, softer rims, dimmer text. - Glass: backdrop dimmed (brightness 0.82, saturate 120%), white sheen and inner glow removed, specular rim now a faint blue line instead of white. - Inner borders (tiles, tables, KPI strips, tag cards, controls) use a faint blue hairline; top-edge white highlights removed. - Removed glows: brand mark, primary buttons, tile hover, active tag card, task status dots (also no pulse). - Wallpaper color pools, light streaks and dot grid at ~1/4 of before. - Text and accent tokens one step dimmer so copy no longer glares on the dark background. Co-Authored-By: Claude Opus 5.5 --- web/src/styles/layout/app-shell.css | 5 ++-- web/src/styles/pages/workbench.css | 6 ++-- web/src/styles/theme/glass.css | 45 ++++++++++++++++------------- web/src/styles/theme/tokens.css | 28 +++++++++--------- 4 files changed, 43 insertions(+), 41 deletions(-) diff --git a/web/src/styles/layout/app-shell.css b/web/src/styles/layout/app-shell.css index 5d22ec7..2125508 100644 --- a/web/src/styles/layout/app-shell.css +++ b/web/src/styles/layout/app-shell.css @@ -106,7 +106,7 @@ .app-brand__logo:hover { background: rgb(255 255 255 / 0.06); } .app-brand__logo:focus-visible { outline: none; box-shadow: var(--nx-ring); } -.app-brand__mark { display: block; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgb(var(--nx-accent-rgb) / 0.35)); } +.app-brand__mark { display: block; flex-shrink: 0; } .app-brand__wordmark { font-size: 15px; @@ -230,8 +230,7 @@ .app-brand__tasks.is-busy .app-brand__tasks-dot { background: var(--nx-accent); - box-shadow: 0 0 0 3px rgb(var(--nx-accent-rgb) / 0.2); - animation: app-brand-pulse 1.8s ease-in-out infinite; + animation: none; } .app-brand__tasks.is-busy .app-brand__tasks-count { diff --git a/web/src/styles/pages/workbench.css b/web/src/styles/pages/workbench.css index aa1fb40..31879a1 100644 --- a/web/src/styles/pages/workbench.css +++ b/web/src/styles/pages/workbench.css @@ -34,16 +34,16 @@ .app--shell .app-main .wb-tile { width: 100%; height: auto; min-height: var(--wb-tile-h); padding: 12px 16px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; - border: 1px solid rgb(255 255 255 / .07); border-radius: 12px; + border: 1px solid rgb(150 190 255 / .05); border-radius: 12px; background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .015)); color: var(--nx-text); text-align: left; white-space: nowrap; - box-shadow: inset 0 1px 0 rgb(255 255 255 / .10); + box-shadow: none; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; } .app--shell .app-main .wb-tile:hover { background: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / .03)), rgb(var(--wb-tone-rgb, var(--nx-accent-rgb)) / .08); border-color: rgb(var(--wb-tone-rgb, var(--nx-accent-rgb)) / .35); - box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 10px 28px rgb(var(--wb-tone-rgb, var(--nx-accent-rgb)) / .14); + box-shadow: none; transform: translateY(-2px); } .app--shell .app-main .wb-tile:focus-visible { box-shadow: var(--nx-ring); } diff --git a/web/src/styles/theme/glass.css b/web/src/styles/theme/glass.css index 1f91271..89cf956 100644 --- a/web/src/styles/theme/glass.css +++ b/web/src/styles/theme/glass.css @@ -24,14 +24,14 @@ something to look through, so there is texture: a faint network dot grid, two light streaks, and a few defined color pools. */ background: - radial-gradient(circle, rgb(147 197 253 / 0.10) 1px, transparent 1.6px) 0 0 / 24px 24px, - linear-gradient(118deg, transparent 38%, rgb(56 152 255 / 0.10) 46%, transparent 54%), - linear-gradient(118deg, transparent 62%, rgb(34 180 230 / 0.07) 67%, transparent 72%), - radial-gradient(34% 44% at 6% 10%, rgb(20 110 230 / 0.42), transparent 62%), - radial-gradient(28% 36% at 94% 6%, rgb(6 150 210 / 0.26), transparent 62%), - radial-gradient(40% 46% at 58% 64%, rgb(14 84 180 / 0.34), transparent 64%), - radial-gradient(30% 40% at 10% 96%, rgb(4 120 175 / 0.28), transparent 62%), - radial-gradient(28% 38% at 98% 98%, rgb(16 100 210 / 0.24), transparent 62%), + radial-gradient(circle, rgb(147 197 253 / 0.04) 1px, transparent 1.6px) 0 0 / 24px 24px, + linear-gradient(118deg, transparent 38%, rgb(56 152 255 / 0.025) 46%, transparent 54%), + linear-gradient(118deg, transparent 62%, rgb(34 180 230 / 0.018) 67%, transparent 72%), + radial-gradient(34% 44% at 6% 10%, rgb(20 110 230 / 0.13), transparent 62%), + radial-gradient(28% 36% at 94% 6%, rgb(6 150 210 / 0.07), transparent 62%), + radial-gradient(40% 46% at 58% 64%, rgb(14 84 180 / 0.11), transparent 64%), + radial-gradient(30% 40% at 10% 96%, rgb(4 120 175 / 0.08), transparent 62%), + radial-gradient(28% 38% at 98% 98%, rgb(16 100 210 / 0.07), transparent 62%), linear-gradient(140deg, #030a16 0%, #05132a 40%, #041022 72%, #020a14 100%); background-attachment: fixed; } @@ -103,7 +103,7 @@ /* ------------------------------------------------- 3. Content inside panels */ .app--shell :is(.app-main, .app-heroui-modal) .pt-list-table-wrap { - border: 1px solid rgb(255 255 255 / 0.06); + border: 1px solid rgb(150 190 255 / 0.05); border-radius: 12px; background: rgb(2 8 18 / 0.30); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04); @@ -113,22 +113,22 @@ .app--shell .app-main .pt-list-table thead th, .app--shell .app-main .data-table thead th { background: rgb(255 255 255 / 0.045) !important; - border-bottom-color: rgb(255 255 255 / 0.10); + border-bottom-color: rgb(150 190 255 / 0.06); } .app--shell .app-main .pt-list-kpis, .app--shell .network-main .pt-list-kpis { - border: 1px solid rgb(255 255 255 / 0.06); + border: 1px solid rgb(150 190 255 / 0.05); border-radius: 12px; - background: rgb(255 255 255 / 0.03); - box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); + background: rgb(255 255 255 / 0.025); + box-shadow: none; } .app--shell .app-main .ne-tag-card { - border-color: rgb(255 255 255 / 0.08); + border-color: rgb(150 190 255 / 0.06); border-radius: 12px; background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015)); - box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10); + box-shadow: none; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; } @@ -139,7 +139,7 @@ .app--shell .app-main .ne-tag-card.is-active { border-color: rgb(var(--nx-accent-rgb) / 0.55); background: linear-gradient(180deg, rgb(var(--nx-accent-rgb) / 0.16), rgb(var(--nx-accent-rgb) / 0.05)); - box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 6px 20px rgb(var(--nx-accent-rgb) / 0.15); + box-shadow: none; } /* Topology workspace: rim + corners of a glass panel, but a dense fill and no @@ -196,8 +196,8 @@ Scoped to .app-main only: dialogs keep their solid controls. */ :where(.app--shell .app-main) button.button--secondary { background: rgb(255 255 255 / 0.08); - border-color: rgb(255 255 255 / 0.14); - box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10); + border-color: rgb(150 190 255 / 0.10); + box-shadow: none; } :where(.app--shell .app-main) button.button--secondary:where(:hover:not(:disabled)) { @@ -207,7 +207,7 @@ :where(.app--shell .app-main) :is(button.button--tertiary, button.button--ghost) { background: rgb(255 255 255 / 0.04); - border-color: rgb(255 255 255 / 0.12); + border-color: rgb(150 190 255 / 0.09); } :where(.app--shell .app-main) :is(button.button--tertiary, button.button--ghost):where(:hover:not(:disabled)) { @@ -216,7 +216,12 @@ .app--shell :where(.app-main) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea) { background-color: rgb(2 8 18 / 0.30); - border-color: rgb(255 255 255 / 0.10); + border-color: rgb(150 190 255 / 0.07); +} + +/* Primary buttons: solid, no outer glow. */ +:where(.app--shell .app-main) button.button--primary { + box-shadow: none; } /* --------------------------------------------------------------- Fallbacks */ diff --git a/web/src/styles/theme/tokens.css b/web/src/styles/theme/tokens.css index 049b4f7..63e5316 100644 --- a/web/src/styles/theme/tokens.css +++ b/web/src/styles/theme/tokens.css @@ -30,16 +30,16 @@ --nx-line-soft: rgb(148 163 184 / 0.14); /* Text — five tones, all >= 4.5:1 on surface-1 */ - --nx-text-strong: #f1f5f9; - --nx-text: #e2e8f0; - --nx-text-soft: #cbd5e1; - --nx-text-muted: #94a3b8; + --nx-text-strong: #c8d1de; + --nx-text: #bcc6d4; + --nx-text-soft: #a3afc0; + --nx-text-muted: #7d8ca2; --nx-text-faint: #74849b; /* Accent: blue. Primary actions, selection, focus, gradients. */ - --nx-accent: #6ba9ec; + --nx-accent: #5b97d6; --nx-accent-strong: #3b82f6; - --nx-accent-text: #93c5fd; + --nx-accent-text: #7fb0e6; --nx-accent-soft: rgb(var(--nx-accent-rgb) / 0.14); /* Status — semantic only */ @@ -71,17 +71,15 @@ painted as a masked 1px ring) and a faint inner glow. Needs a textured backdrop behind it (theme/glass.css) or it simply disappears. */ --nx-glass-fill: - linear-gradient(180deg, rgb(255 255 255 / 0.065) 0%, rgb(255 255 255 / 0.012) 38%, rgb(255 255 255 / 0.008) 70%, rgb(255 255 255 / 0.03) 100%), - rgb(6 14 28 / 0.14); - --nx-glass-rim: rgb(255 255 255 / 0.05); - --nx-glass-blur: blur(5px) saturate(175%) brightness(1.08); + linear-gradient(180deg, rgb(255 255 255 / 0.018) 0%, rgb(255 255 255 / 0.004) 40%, rgb(255 255 255 / 0) 100%), + rgb(4 10 22 / 0.30); + --nx-glass-rim: rgb(150 190 255 / 0.04); + --nx-glass-blur: blur(6px) saturate(120%) brightness(0.82); --nx-glass-specular: linear-gradient(135deg, - rgb(255 255 255 / 0.60) 0%, rgb(255 255 255 / 0.16) 18%, rgb(255 255 255 / 0.02) 42%, - rgb(255 255 255 / 0.02) 62%, rgb(255 255 255 / 0.14) 84%, rgb(255 255 255 / 0.42) 100%); + rgb(170 205 255 / 0.13) 0%, rgb(170 205 255 / 0.05) 20%, rgb(170 205 255 / 0.015) 42%, + rgb(170 205 255 / 0.015) 62%, rgb(170 205 255 / 0.035) 84%, rgb(170 205 255 / 0.08) 100%); --nx-glass-shadow: - inset 0 1px 1px rgb(255 255 255 / 0.12), - inset 0 0 28px rgb(255 255 255 / 0.035), - inset 0 -14px 28px rgb(120 180 255 / 0.03), + inset 0 1px 0 rgb(255 255 255 / 0.025), 0 14px 36px rgb(0 0 0 / 0.40), 0 2px 4px rgb(0 0 0 / 0.25); }