daniel-c-harvey
528f09d96a
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.
61 lines
1.9 KiB
CSS
61 lines
1.9 KiB
CSS
@keyframes pulse-ring {
|
|
0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
|
|
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;
|
|
padding: 3rem;
|
|
}
|
|
|
|
.circle-deco {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(61, 122, 104, 0.3);
|
|
animation: pulse-ring 4s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.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; }
|