daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Move NowPlaying waveform visualizer to full-bleed hero-right background

Browse Source 
Lift the WaveformVisualizer + control popover out of the 120px NowPlayingCard box into NowPlaying as a full-panel background layer; migrate the hero-right wrapper and its scoped styles from Home into NowPlaying.
This commit is contained in:
daniel-c-harvey
2026-06-17 13:06:48 -04:00
parent 0dce46bcab
commit 528f09d96a
6 changed files with 77 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/NowPlaying.razor.css
+36 -1
View File
@@ -3,6 +3,41 @@
50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.03); }
}
/* Hero-right panel (migrated from Home.razor's .hero-right). Owns the navy backdrop, clips the
full-bleed visualizer + ring overflow, and is the positioned ancestor for the inset:0 layers. */
.now-playing-panel {
background: var(--deepdrft-navy);
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
height: 100%;
}
@media (max-width: 960px) {
.now-playing-panel { min-height: 50vh; }
}
/* Full-bleed waveform background. WaveformVisualizer Fill="true" renders its layer as
position:absolute; inset:0, so this box only needs to be a positioned, sized ancestor. z-index:0
pins it to the bottom of the panel's stacking order, beneath the rings and the now-playing-content. */
.np-visualizer-bg {
position: absolute;
inset: 0;
z-index: 0;
}
/* The lava-lamp popover trigger overlays the panel's top-right corner (full parity, §8e). Above the
canvas (z-index) and pointer-enabled so the icon is clickable even though the visualizer layer below
it is pointer-events:none. */
.np-visualizer-controls {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 3;
}
.now-playing-content {
position: relative;
z-index: 2;
@@ -22,4 +57,4 @@
.circle-deco:nth-child(1) { width: 320px; height: 320px; animation-delay: 0s; }
.circle-deco:nth-child(2) { width: 520px; height: 520px; animation-delay: 0.8s; }
.circle-deco:nth-child(3) { width: 720px; height: 720px; animation-delay: 1.6s; }
.circle-deco:nth-child(3) { width: 720px; height: 720px; animation-delay: 1.6s; }