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} > - +