From 7b15e0982e09b76110250c54776d4e89c6322606 Mon Sep 17 00:00:00 2001 From: Jokin Date: Sun, 16 Aug 2026 03:27:40 +0200 Subject: [PATCH] Ares-style dark glass; drop the window drop shadow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two requests, plus a correctness bug the first one exposed. Drop shadow removed: the frame keeps only 7.css's inset 1px glass highlight. That highlight shares the `box-shadow` declaration with the drop shadow, so it has to be restated rather than the shorthand cleared. With no shadow there is nothing to reserve a gutter for, so the window is full-bleed 100vh again instead of inset by 9/13px. Dark theme retoned after the Ares reference: the glass goes near-black (--w7-w-bg #101013, #060607 on the darker tone) with a white caption, and 7.css's own alpha streaks/highlights become the gloss. Blue stays in the accents — selection, sorted column, active tab — not in the glass. Two literals 7.css hardcodes had to be themed for this: the caption text (black + an 8-fold white halo, which is invisible on black) and the glass streak gradient (its two #fff5 corner shines washed a dark caption silver). The bug: those dark restatements were keyed on [data-theme='dark'], which matches ONLY the forced-dark path. SYSTEM dark sets no attribute — it runs through the prefers-color-scheme media query — so every literal I had restated for the ListView and menu was silently reverting to its light value for anyone on system dark. Rather than duplicate each rule, the restated literals are now tokens (--w7-lv-*, --w7-mn-*, --w7-cap-*, --w7-glass-title) declared in :root.win7 with 7.css's own light values and overridden in BOTH existing dark blocks, which is the pattern this file already uses. The rules themselves are written once and theme through the tokens. Also: the accent -> --w7-w-bg mapping is now light-only, or picking an accent repaints the Ares glass with it. Verified zoomed in both themes: light renders identically to 7.css's reference beside it; dark shows black glass, white caption, subdued streaks. Co-Authored-By: Claude --- ui/src/styles.css | 193 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 144 insertions(+), 49 deletions(-) diff --git a/ui/src/styles.css b/ui/src/styles.css index cb9ec87..2cfea06 100644 --- a/ui/src/styles.css +++ b/ui/src/styles.css @@ -401,6 +401,37 @@ body { :root.win7[data-text='compact'] { --w7-fs: 11px; } :root.win7[data-text='large'] { --w7-fs: 13px; } +/* Light values for every 7.css literal the skinfix rules below restate through + vars (7.css hardcodes these outside its var system). The values are 7.css's + own, verbatim — light must render exactly as stock. Dark overrides live in + the duplicated dark blocks above, which is the house pattern: rules are + written ONCE and theme through tokens. (The previous attribute-keyed dark + rules silently missed SYSTEM-dark — the media-query path sets no attribute.) */ +:root.win7 { + /* ListView (listview.css) */ + --w7-lv-bg: #fff; + --w7-lv-bd: #c0c1cd; + --w7-lv-c: #000; + --w7-lv-head-grad: linear-gradient(180deg, #fff 45%, #fafafa 0, #f0f0f0); + --w7-lv-head-bd: #d7d7d7; + --w7-lv-cell-bd: #eee; + /* Menu (menu.css) */ + --w7-mn-c: #000; + --w7-mn-bd: #0006; + --w7-mn-stripe: inset 1px 0 #00000026, inset -1px 0 #fff; + --w7-mn-divider: inset 0 1px #00000026, inset 0 -1px #fff; + --w7-mn-check-ring: #b3d3f9; + --w7-mn-check-c: #0c12a1; + /* Glass caption streaks (window.css .window.glass>.title-bar): a literal. + The two #fff5 corner shines wash a DARK caption silver, so dark subdues + every white in the stack while keeping the streak structure. */ + --w7-glass-title: linear-gradient(135deg, #fff5 70px, transparent 100px), linear-gradient(225deg, #fff5 70px, transparent 100px), linear-gradient(54deg, #0002 0 4%, #6661 6% 6%, #0002 8% 10%, #0002 15% 16%, #aaa1 17% 18%, #0002 23% 24%, #bbb2 25% 26%, #0002 31% 33%, #0002 34% 34.5%, #bbb2 36% 40%, #0002 41% 41.5%, #bbb2 44% 45%, #bbb2 46% 47%, #0002 48% 49%, #0002 50% 50.5%, #0002 56% 56.5%, #bbb2 57% 63%, #0002 67% 69%, #bbb2 69.5% 70%, #0002 73.5% 74%, #bbb2 74.5% 79%, #0002 80% 84%, #aaa2 85% 86%, #0002 87%, #bbb1 90%) 0 / 100vw 100vh no-repeat fixed; + /* Caption text (window.css .title-bar-text: black + 8-fold white halo) */ + --w7-cap-c: #000; + --w7-cap-glow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, + 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff; +} + /* Hand-authored dark Win7. Microsoft never shipped one — this exists so the theme and tone settings stay live under the skin. Only the colour-carrying --w7-* vars are listed: --w7-el-grad and --w7-w-grad are DERIVED from the @@ -426,11 +457,31 @@ body { --w7-el-grad-a: linear-gradient(#2c4657, #24384a 30% 50%, #1d2f3f 50%, #16242f); --w7-li-bd-hl: #3f6c8c; --w7-li-bg-hl: linear-gradient(#ffffff14, #4a6b8433 90%, #ffffff1a); - --w7-w-bd: #000000d9; - --w7-w-bg: #1f3a52; - --w7-tab-bg: #2b2b2b; - --w7-title-c: #8ab4e8; + --w7-w-bd: #000000e6; + /* Ares-style black glass: near-black ground; 7.css's own alpha streaks and + highlight gradients become the gloss. Blue lives in accents (selection, + active tab), not in the glass itself. */ + --w7-w-bg: #101013; + --w7-tab-bg: #1c1c1e; + --w7-title-c: #f5f5f5; --w7-link-c: #6fb3ff; + /* literal restatements consumed by the skinfix rules (see :root.win7) */ + --w7-lv-bg: var(--w7-el-bg-s-2); + --w7-lv-bd: var(--w7-el-bd-d); + --w7-lv-c: var(--w7-el-c); + --w7-lv-head-grad: linear-gradient(180deg, var(--w7-el-bg) 45%, var(--w7-el-bg-d) 0, var(--w7-el-bg-s-1)); + --w7-lv-head-bd: var(--w7-el-bd-d); + --w7-lv-cell-bd: var(--w7-el-bd-d); + --w7-mn-c: var(--w7-el-c); + --w7-mn-bd: var(--w7-el-bd-d); + --w7-mn-stripe: inset 1px 0 #00000059, inset -1px 0 #ffffff14; + --w7-mn-divider: inset 0 1px #00000059, inset 0 -1px #ffffff14; + --w7-mn-check-ring: var(--w7-li-bd-hl); + --w7-mn-check-c: var(--w7-el-c); + --w7-glass-title: linear-gradient(135deg, #ffffff1a 70px, transparent 100px), linear-gradient(225deg, #ffffff1a 70px, transparent 100px), linear-gradient(54deg, #0003 0 4%, #ffffff08 6% 6%, #0003 8% 10%, #0003 15% 16%, #ffffff0d 17% 18%, #0003 23% 24%, #ffffff10 25% 26%, #0003 31% 33%, #0003 34% 34.5%, #ffffff10 36% 40%, #0003 41% 41.5%, #ffffff10 44% 45%, #ffffff10 46% 47%, #0003 48% 49%, #0003 50% 50.5%, #0003 56% 56.5%, #ffffff10 57% 63%, #0003 67% 69%, #ffffff10 69.5% 70%, #0003 73.5% 74%, #ffffff10 74.5% 79%, #0003 80% 84%, #ffffff0d 85% 86%, #0003 87%, #ffffff0a 90%) 0 / 100vw 100vh no-repeat fixed; + /* Ares: white caption on black glass, dark halo instead of white */ + --w7-cap-c: var(--w7-title-c); + --w7-cap-glow: 0 0 8px #000c, 0 0 8px #000c, 0 1px 2px #000; --w7-link-c-h: #9acbff; --background: #1f1f1f; @@ -465,11 +516,28 @@ body { --w7-el-grad-a: linear-gradient(#2c4657, #24384a 30% 50%, #1d2f3f 50%, #16242f); --w7-li-bd-hl: #3f6c8c; --w7-li-bg-hl: linear-gradient(#ffffff14, #4a6b8433 90%, #ffffff1a); - --w7-w-bd: #000000d9; - --w7-w-bg: #1f3a52; - --w7-tab-bg: #2b2b2b; - --w7-title-c: #8ab4e8; + --w7-w-bd: #000000e6; + --w7-w-bg: #101013; + --w7-tab-bg: #1c1c1e; + --w7-title-c: #f5f5f5; --w7-link-c: #6fb3ff; + /* literal restatements consumed by the skinfix rules (see :root.win7) */ + --w7-lv-bg: var(--w7-el-bg-s-2); + --w7-lv-bd: var(--w7-el-bd-d); + --w7-lv-c: var(--w7-el-c); + --w7-lv-head-grad: linear-gradient(180deg, var(--w7-el-bg) 45%, var(--w7-el-bg-d) 0, var(--w7-el-bg-s-1)); + --w7-lv-head-bd: var(--w7-el-bd-d); + --w7-lv-cell-bd: var(--w7-el-bd-d); + --w7-mn-c: var(--w7-el-c); + --w7-mn-bd: var(--w7-el-bd-d); + --w7-mn-stripe: inset 1px 0 #00000059, inset -1px 0 #ffffff14; + --w7-mn-divider: inset 0 1px #00000059, inset 0 -1px #ffffff14; + --w7-mn-check-ring: var(--w7-li-bd-hl); + --w7-mn-check-c: var(--w7-el-c); + --w7-glass-title: linear-gradient(135deg, #ffffff1a 70px, transparent 100px), linear-gradient(225deg, #ffffff1a 70px, transparent 100px), linear-gradient(54deg, #0003 0 4%, #ffffff08 6% 6%, #0003 8% 10%, #0003 15% 16%, #ffffff0d 17% 18%, #0003 23% 24%, #ffffff10 25% 26%, #0003 31% 33%, #0003 34% 34.5%, #ffffff10 36% 40%, #0003 41% 41.5%, #ffffff10 44% 45%, #ffffff10 46% 47%, #0003 48% 49%, #0003 50% 50.5%, #0003 56% 56.5%, #ffffff10 57% 63%, #0003 67% 69%, #ffffff10 69.5% 70%, #0003 73.5% 74%, #ffffff10 74.5% 79%, #0003 80% 84%, #ffffff0d 85% 86%, #0003 87%, #ffffff0a 90%) 0 / 100vw 100vh no-repeat fixed; + /* Ares: white caption on black glass, dark halo instead of white */ + --w7-cap-c: var(--w7-title-c); + --w7-cap-glow: 0 0 8px #000c, 0 0 8px #000c, 0 1px 2px #000; --w7-link-c-h: #9acbff; --background: #1f1f1f; @@ -494,7 +562,7 @@ body { :root.win7[data-theme='dark'][data-dark-tone='darker'] { --w7-surface: #1a1a1a; --w7-el-bg: #262626; - --w7-w-bg: #12202c; + --w7-w-bg: #060607; --background: #121212; --chrome: #1a1a1a; --card: #1a1a1a; @@ -503,7 +571,7 @@ body { :root.win7:not([data-theme='light'])[data-dark-tone='darker'] { --w7-surface: #1a1a1a; --w7-el-bg: #262626; - --w7-w-bg: #12202c; + --w7-w-bg: #060607; --background: #121212; --chrome: #1a1a1a; --card: #1a1a1a; @@ -511,10 +579,28 @@ body { } /* Accent -> Aero window colour, so the existing accent picker keeps meaning - under the skin. --w7-w-bg is the one colour 7.css documents as settable. */ + under the skin. --w7-w-bg is the one colour 7.css documents as settable. + LIGHT ONLY: in dark the glass is Ares black regardless of accent (the accent + keeps tinting selection etc. through --primary). These arms out-rank the + accent rule below on specificity — without them it wins the tie on source + order and dark glass turns accent-coloured. */ :root.win7[data-accent] { --w7-w-bg: var(--primary); } +:root.win7[data-theme='dark'][data-accent] { + --w7-w-bg: #101013; +} +:root.win7[data-theme='dark'][data-dark-tone='darker'][data-accent] { + --w7-w-bg: #060607; +} +@media (prefers-color-scheme: dark) { + :root.win7:not([data-theme='light'])[data-accent] { + --w7-w-bg: #101013; + } + :root.win7:not([data-theme='light'])[data-dark-tone='darker'][data-accent] { + --w7-w-bg: #060607; + } +} /* Unlayered on purpose: the html/body rule above sets font-family unlayered, so a layered override would lose. Family only — NOT font-size: the app's @@ -604,44 +690,45 @@ body { 7.css paints the selection band on the ROW, and a cell background paints over a row background — setting one erased the selection highlight entirely in dark mode. */ - .win7[data-theme='dark'] table { - background-color: var(--w7-el-bg-s-2); - border-color: var(--w7-el-bd-d); - color: var(--w7-el-c); + .win7 table { + background-color: var(--w7-lv-bg); + border-color: var(--w7-lv-bd); + color: var(--w7-lv-c); } - .win7[data-theme='dark'] table > thead > tr > * { - background: linear-gradient(180deg, var(--w7-el-bg) 45%, var(--w7-el-bg-d) 0, var(--w7-el-bg-s-1)); - border-color: var(--w7-el-bd-d); - color: var(--w7-el-c); + .win7 table > thead > tr > * { + background: var(--w7-lv-head-grad); + border-color: var(--w7-lv-head-bd); + color: var(--w7-lv-c); } - .win7[data-theme='dark'] table > tbody > tr > :not(:last-child) { - border-right-color: var(--w7-el-bd-d); + .win7 table > tbody > tr > :not(:last-child) { + border-right-color: var(--w7-lv-cell-bd); } /* 7.css drops the cell separators inside a selected row; the rule above is more specific than its, so restore that behaviour explicitly. */ - .win7[data-theme='dark'] table > tbody > tr.highlighted > :not(:last-child) { + .win7 table > tbody > tr.highlighted > :not(:last-child) { border-right: none; } - .win7[data-theme='dark'] table > tbody > tr.highlighted { + .win7 table > tbody > tr.highlighted { background: var(--w7-li-bg-hl); border-color: var(--w7-li-bd-hl); } /* ---- Window frame ---- The native window is transparent (chromeOptions in src/bun/windows.ts), so - nothing but .window paints an opaque surface. The margins are the gutter - the drop shadow falls into, sized to the shadow's exact extents — - `2px 2px 10px 1px` reaches blur+spread-offset = 9px up/left and - offset+blur+spread = 13px down/right. An undersized gutter hard-clips a - 70%-black shadow into a solid dark band around the window ("way too - strong"); matched to the extents it falls off to nothing. h-screen (100vh) - shrinks by the same totals or the gutter produces a scrollbar. + nothing but .window paints an opaque surface — that is what lets the 6px + corner radius actually be transparent at the corners. + NO drop shadow, by request: 7.css's `2px 2px 10px 1px #000000b3` needed a + margin gutter to fall into and still read heavy against a real desktop, so + the frame keeps only the inset 1px glass highlight from that shorthand + (dropping the whole box-shadow would lose the highlight too — it lives in + the same declaration). No shadow -> no gutter -> full-bleed 100vh. Keyed on `w7-frame` — the app hook the three window ROOTS carry — never on - bare .window: this sizing is "the window that IS the page", and on any - other .window (dialogs, demos) 100vh is nonsense. */ + bare .window: on any other .window (dialogs, demos) this sizing is + nonsense and 7.css's own shadow is fine. */ .win7 .window.w7-frame { - margin: 9px 13px 13px 9px; - height: calc(100vh - 22px); + margin: 0; + height: 100vh; + box-shadow: inset 0 0 0 1px #fffa; } /* 7.css's glass layer is `backdrop-filter: blur(4px)` on .window::after — @@ -704,24 +791,32 @@ body { palette, same as the ListView above: the black `color:initial`, the white bevel halves of the gutter stripe and dividers, and the checked-box ring (#b3d3f9). */ - .win7[data-theme='dark'] ul[role='menu'] { - color: var(--w7-el-c); - border-color: var(--w7-el-bd-d); + .win7 ul[role='menu'] { + color: var(--w7-mn-c); + border-color: var(--w7-mn-bd); } - .win7[data-theme='dark'] ul[role='menu']:before { - box-shadow: - inset 1px 0 #00000059, - inset -1px 0 #ffffff14; + .win7 ul[role='menu']:before { + box-shadow: var(--w7-mn-stripe); } - .win7[data-theme='dark'] ul [role='menuitem'].has-divider:after { - box-shadow: - inset 0 1px #00000059, - inset 0 -1px #ffffff14; + .win7 ul [role='menuitem'].has-divider:after { + box-shadow: var(--w7-mn-divider); } - .win7[data-theme='dark'] ul [role='menuitem'] > input[type] + label:before { - box-shadow: 0 0 0 1px var(--w7-li-bd-hl); + .win7 ul [role='menuitem'] > input[type] + label:before { + box-shadow: 0 0 0 1px var(--w7-mn-check-ring); } - .win7[data-theme='dark'] ul [role='menuitem'] > input[type='checkbox']:checked + label:after { - color: var(--w7-el-c); + .win7 ul [role='menuitem'] > input[type='checkbox']:checked + label:after { + color: var(--w7-mn-check-c); + } + + .win7 .window.glass > .title-bar { + background: var(--w7-glass-title); + background-attachment: fixed; + } + + /* Caption text: 7.css hardcodes black + a white halo; in dark that becomes + the Ares treatment (white caption, dark halo) through the same vars. */ + .win7 .title-bar-text { + color: var(--w7-cap-c); + text-shadow: var(--w7-cap-glow); } }