daniel-c-harvey
33 lines
1.7 KiB
CSS
33 lines
1.7 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.
|
|
|
|
Footer clip (Phase 10 W1, spec §2c): the backdrop must stop cleanly ABOVE the audio player bar so
|
|
no lava/waveform pixel paints over or under it. `overflow: hidden` clips the canvas to this box, and
|
|
`bottom` is inset by the player bar's LIVE height — `--player-height`, the custom property the player
|
|
already publishes on :root via its ResizeObserver (AudioPlayerBar + Interop/layout/spacer.ts). That
|
|
var tracks the expanded bar's border-box height across breakpoints/error-banner reflow, and resets to
|
|
0 when the bar is minimized — so the clip line follows the bar's actual current height with no extra
|
|
coupling: when minimized the var is 0 and the backdrop reaches the viewport bottom (the floating FAB,
|
|
z-index 1300, simply sits over it — there is no full-width bar to clip to), matching spec §2c. The
|
|
0px fallback keeps the backdrop full-height on any page that doesn't host the player. */
|
|
.mix-waveform-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
bottom: var(--player-height, 0px);
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* The canvas fills the viewport. All ribbon shading (luminous depth, soft edges) is drawn inside the
|
|
canvas by the WebGL2 fragment shader. NO CSS backdrop-filter: it was a confirmed per-frame perf killer
|
|
on the Canvas predecessor and is exactly the cost the GPU move exists to eliminate (spec §2, §5.2);
|
|
the glass treatment returns in-shader in Wave 3. */
|
|
.mix-waveform-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|