daniel-c-harvey
42 lines
1.4 KiB
CSS
42 lines
1.4 KiB
CSS
/* Full-viewport fixed backdrop. Sits behind the detail content (.mix-detail-foreground is z-index:1)
|
|
and never intercepts pointer events — except the zoom slider, which re-enables them on itself. */
|
|
.mix-waveform-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* The canvas fills the viewport. The glassy/frosted treatment is a CSS backdrop-blur on this layer
|
|
(the ribbon's luminous depth is drawn inside the canvas by the module); together they read as lit
|
|
glass moving behind the content rather than a hard chart. */
|
|
.mix-waveform-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
backdrop-filter: blur(2px);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Zoom slider — a small viewing control pinned to the top-right, clear of the player bar at
|
|
the bottom and the nav bar at the top. Pointer events are re-enabled here only (the backdrop
|
|
stays inert), and it is never a seek surface. top: 5rem sits just below the fixed nav bar
|
|
(~4.5rem tall) so neither the expanded player bar nor the nav occludes it. */
|
|
.mix-waveform-zoom {
|
|
position: absolute;
|
|
right: 1.5rem;
|
|
top: 5rem;
|
|
width: 180px;
|
|
max-width: 40vw;
|
|
pointer-events: auto;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.mix-waveform-zoom:hover {
|
|
opacity: 1;
|
|
}
|