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 <noreply@anthropic.com>
This commit is contained in:
oliver 2026-10-13 02:00:25 +08:00
parent ec19102446
commit 313706595d
4 changed files with 43 additions and 41 deletions

View file

@ -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 {

View file

@ -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); }

View file

@ -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 */

View file

@ -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);
}