mirror of
https://github.com/hansjone/netx.git
synced 2026-10-15 04:53:20 +08:00
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:
parent
ec19102446
commit
313706595d
4 changed files with 43 additions and 41 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue