From 913289a29710bb40f92847b0842bc8937f1d5750 Mon Sep 17 00:00:00 2001 From: KeelrLeek <156356974+KeelrLeek@users.noreply.github.com> Date: Mon, 31 Aug 2026 15:13:24 -0500 Subject: [PATCH] the panel tops speak one language: 28px discs, white glyphs, one veil MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Kyle put four crops side by side and asked why the top chrome disagrees with itself. The audit found five variants across three panel tops: the glass bar's arrows (28px circle, white, 17px glyph, 0.12 white-veil hover), the sidebar toggle and both Now Playing chevrons (28px 6px-radius squares, grey, 16px, opaque --bg-highlight hover that slabs under glass and a --glass-hover override that reads as nothing up here), the add-to-playlist trigger (grey square, 15px glyph), and the save button (34px 8px-radius square, 18px glyph). One spec now, the arrows' language: 28x28 circle, 16px glyph, #fff at rest, rgba(255,255,255,.12) hover in BOTH modes. This commit carries the Now Playing header set — np-icon (head collapse + rail expand), the plm-trigger override, and a new np-head override pulling SaveMenu's trigger down from its 34px playbar size (SaveMenu grows an iconSize prop; the playbar keeps 18, the head passes 16). The glass-hover overrides for these buttons are gone — the base veil is mode-independent — except one glass-scoped rule kept solely to outrank SaveMenu's own glass hover on specificity. The bar arrows' 17->16 and the sidebar toggle's disc ride the hub commit; their files carry that rework and split poorly. Verified by computed style across all five controls: identical to the pixel, and the disabled arrows stay dimmed white rather than grey so even the off state is the same hue family. --- src/components/NowPlaying.svelte | 44 +++++++++++++++++++++----------- src/components/SaveMenu.svelte | 7 +++-- 2 files changed, 34 insertions(+), 17 deletions(-) diff --git a/src/components/NowPlaying.svelte b/src/components/NowPlaying.svelte index 27f91c6..7ec0fc8 100644 --- a/src/components/NowPlaying.svelte +++ b/src/components/NowPlaying.svelte @@ -1291,7 +1291,7 @@ [ { @@ -1315,7 +1315,7 @@ only ACTION that did, so it comes up here rather than being lost with it. --> {#if isStream && currentItem?.stream} - + {/if} {#if isStream} @@ -1855,11 +1855,16 @@ background: var(--glass-surface); box-shadow: var(--glass-ring); } - :global(:root.glass) .np-icon:hover, - :global(:root.glass) .row:hover, - :global(:root.glass) .np-head :global(.plm-trigger:hover) { + :global(:root.glass) .row:hover { background: var(--glass-hover); } + /* The header chrome keeps its 0.12 veil under glass too (the spec above) + — this exists only to outrank SaveMenu's own glass hover rule, which + otherwise wins on specificity and dims the save disc to 0.08. */ + :global(:root.glass) .np-head :global(.save-icon:hover), + :global(:root.glass) .np-head :global(.save-icon.on) { + background: rgba(255, 255, 255, 0.12); + } /* Artwork wells: what is visible while a cover loads, or in place of one that never arrives. */ :global(:root.glass) .cover, @@ -2239,25 +2244,34 @@ text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } + /* Panel-top chrome spec (2026-08-31, Kyle's consistency audit): every + 28px CIRCLE, white glyph at rest, white-veil hover — byte-for-byte the + glass bar's .arrow language, in both modes (0.12 is the established + chrome-position veil; --bg-highlight was an opaque slab under glass + and --glass-hover reads as nothing up here). */ .np-icon { display: grid; place-items: center; width: 28px; height: 28px; - border-radius: 6px; - color: var(--text-secondary); + border-radius: 50%; + color: #fff; } - .np-icon:hover { background: var(--bg-highlight); color: var(--text-primary); } - /* The add-to-playlist trigger wears the header-icon look exactly. */ - .np-head :global(.plm-trigger) { + .np-icon:hover { background: rgba(255, 255, 255, 0.12); } + /* The add-to-playlist and save triggers wear the header-icon look + exactly (SaveMenu's own 34px box is the playbar's — overridden here). */ + .np-head :global(.plm-trigger), + .np-head :global(.save-icon) { width: 28px; height: 28px; - border-radius: 6px; - color: var(--text-secondary); + border-radius: 50%; + color: #fff; } - .np-head :global(.plm-trigger:hover) { - background: var(--bg-highlight); - color: var(--text-primary); + .np-head :global(.plm-trigger:hover), + .np-head :global(.save-icon:hover), + .np-head :global(.save-icon.on) { + background: rgba(255, 255, 255, 0.12); + color: #fff; } .np-scroll { diff --git a/src/components/SaveMenu.svelte b/src/components/SaveMenu.svelte index 7d4ae68..e6e1601 100644 --- a/src/components/SaveMenu.svelte +++ b/src/components/SaveMenu.svelte @@ -3,7 +3,10 @@ import Icon from "./Icon.svelte"; // align hint: "down" (panel) or "up" (player bar). Auto-flips if needed. - let { align = "down" } = $props(); + // iconSize: the playbar keeps the 18px transport glyph; the Now Playing + // header passes 16 to match the panel-top chrome spec (28px circle, + // 16px glyph — see the np-head overrides there). + let { align = "down", iconSize = 18 } = $props(); const currentItem = $derived(player.queue[player.queueIndex] ?? null); const isStream = $derived(!!currentItem?.stream); @@ -84,7 +87,7 @@ title="Save to library" onclick={onClick} > - +