dark glass gets a surface ladder, and the 200-750ms stalls are dead - two sessions of uncommitted work landing together
SURFACES: panes add black, surfaces INSIDE panes add white. Every pane stands on 0.7075 black over the acrylic (.content 0.35 over .app 0.55), so a translucent black card nets 0.81 - darker than its own pane and inside the ~0.85 band already rejected once on the artist page. Solid mode's ladder is measured UPWARD from #121212 (+6/+18/+24), so glass elevates with WHITE: new --glass-surface/-hover/-press/-hairline/-well/-ring under :root.glass (0.03/0.08/0.11/0.10/0.18), which is independently the vocabulary .btn-ghost:hover and .ax-ghost:hover already shipped. The four solid tokens are NEVER redefined - they are consumed inside color-mix() and gradient stops where an alpha multiplies through and kills the call site (0.74 x 0.03 = an invisible chip; the album row's text-overflow fade works by BEING opaque), and they paint modal chrome that has to stay solid. 129 additive :global(:root.glass) declarations across 18 files, all 129 verified inside a glass block by walking the diff - solid mode byte-identical, confirmed structurally, by computed style with the class off, and visually. Three of them are not colour swaps: the album row's .rowbtns shim was OCCLUDING the last ~19px of the listeners bar and nothing translucent can occlude, so .tcount masks out just before the buttons instead; Playlist's banner scrim and the discography's pinned ambience both landed on opaque --bg-base and now dissolve like the album banner; and the 0.9 black hero tint on Home/CatalogSearch/Discography paints straight onto the pane when there is no artwork, so :first-child (the {#if} renders no element) flips it to white. Menus, dialogs, toasts and the import surfaces stay opaque deliberately, and the Settings copy for the mode now says so instead of claiming cards do. Measured with a known ground substituted behind the transparent window, since CDP never sees the acrylic: library toolbar chroma +2 as shipped, +16 with a white fill AND its backdrop-filter dropped, +30 for the bare pane beside it. RESIZE: Windows drops the legacy accent-policy acrylic for the whole of a live resize and the window stays transparent through it, so the desktop punches through sharp - measured by toggling window_glass alone, desktop icon labels readable through the titlebar. The blur cannot be kept (documented since Win10 2004, and the modern DWM backdrop was already rejected for the overlay-promotion blink), so armGlassResizeGuard grounds the canvas to --bg-sidebar for the length of the gesture. STALLS: "choppy but the FPS says 144" was 200-750ms MAIN-THREAD TASKS, not frame pacing - idle-scheduled work fires at scroll pauses by definition. Twin bake moved to display resolution and off the ready task (was a same-task 4K WebGL readback plus software blur, 100-170ms per rotation AND per artist entry); gl.finish() -> gl.flush() in buildMaster, which had been draining the whole 4K EASU/RCAS/grade chain on the main thread; copyCanvas realloc guarded; one app-wide scroll clock in scrollbar.js (markAppScroll/appScrollIdleFor) so all three periscopes stop cloning mid-gesture on ANY pane rather than only their own; bounded reclone with the querySelectorAll census deleted, the gate widened 250->1000ms, and the build/attach split across an idle callback and a rAF behind a generation guard; the hero rotation tick gated on scroll recency and its payload cache sized to the working set (2->4 entries, 24->32MiB, 32->64MiB); sessionTick no longer force-rewrites every 12s while merely PAUSED. Scroll storm went from 109-616ms long tasks to zero. Hover recalc and GC were measured innocent - do not re-chase them. 98/98 tests throughout.
This commit is contained in:
1 parent
7ab678fd22
commit
547cee6649
26 files changed
+1220
-144
No files matched your search
@@ -1930,4 +1930,54 @@
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── dark glass ────────────────────────────────────────────────────────
|
||||
Most of this page already speaks the white-veil vocabulary (.iconbtn,
|
||||
.pill.ghost, .gpill). The tracklist did not: hovering a row dropped an
|
||||
opaque #242424 band across the pane — the third of Kyle's screenshots.
|
||||
Ladder in global.css; solid mode untouched. */
|
||||
:global(:root.glass) .trow:hover,
|
||||
:global(:root.glass) .trow:focus-within,
|
||||
:global(:root.glass) .trow:has(:global(.plm-trigger[aria-expanded="true"])) {
|
||||
background: var(--glass-hover);
|
||||
}
|
||||
|
||||
/* The row-button shim is the subtle half of that change. In solid mode
|
||||
.rowbtns fades to the SAME --bg-highlight as the hover, so the cluster
|
||||
reads as "the buttons take over" while quietly occluding the last ~19px
|
||||
of the listeners bar behind them (measured: the bar's fill ends 15px
|
||||
inside .tcount, the buttons start 34px inside it). Nothing translucent
|
||||
can occlude, so under glass the bar gets out of the way instead: the
|
||||
shim stops painting and .tcount fades out just before the buttons
|
||||
begin. Offsets are from .tcount's RIGHT edge so they hold at any pane
|
||||
width — the button cluster is a fixed 96px and .tcount's right edge is
|
||||
70px from the row's, leaving the 34px start point. */
|
||||
:global(:root.glass) .rowbtns {
|
||||
background: none;
|
||||
}
|
||||
:global(:root.glass) .trow:hover .tcount,
|
||||
:global(:root.glass) .trow:focus-within .tcount {
|
||||
mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent calc(100% - 34px));
|
||||
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent calc(100% - 34px));
|
||||
}
|
||||
|
||||
:global(:root.glass) .pill:disabled {
|
||||
background: var(--glass-surface);
|
||||
}
|
||||
/* The artwork well, when a record has no cover at all. */
|
||||
:global(:root.glass) .cover.placeholder {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.11));
|
||||
}
|
||||
:global(:root.glass) .ed-art.placeholder {
|
||||
background: var(--glass-surface);
|
||||
}
|
||||
/* Loading skeletons, and the two hairline-bordered tags. --border is
|
||||
opaque #2a2a2a and reads as a drawn line on frost. */
|
||||
:global(:root.glass) .sk {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
:global(:root.glass) .tag-unreleased,
|
||||
:global(:root.glass) .stat-note {
|
||||
border-color: var(--glass-hairline);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user