daniel-c-harvey
cb899a2913
Drop the --player-height bottom inset so the fixed visualizer fills the viewport; the inset player bar no longer leaves a page-background gap. The spacer now occludes via opaque page-surface + z-index. Visualizer no longer reads --player-height, so spacer.ts coalescing is removed.
47 lines
2.5 KiB
CSS
47 lines
2.5 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.
|
|
|
|
Anchored to the viewport bottom (`inset: 0` — fills the whole screen). The chrome that must occlude
|
|
it paints OVER it on z-index, not by clipping the box: the app bar (z 100), the docked player bar
|
|
(z 1200/1300), the site footer (z 1 stacking context), and the layout spacer (z 1 stacking context,
|
|
`--deepdrft-page-surface` background) all sit above this z-0 layer. Where those elements are inset
|
|
from the screen edges or scrolled below the fold, the visualizer fills the gap continuously — no
|
|
page-background strip around the inset player bar. `overflow: hidden` clips the canvas to this box.
|
|
|
|
NOTE: this box is decoupled from `--player-height` (it no longer reads that var). The renderer's own
|
|
ResizeObserver therefore never fires on a player-bar height change, so an eased Theater-Mode collapse
|
|
can no longer clear the GL backing store mid-ease (the former theater-flash source). See
|
|
Interop/layout/spacer.ts. */
|
|
.mix-waveform-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Fill / container-sizing mode (Phase 12 §6c, mode C). The contained hosts (the NowPlaying card)
|
|
set Fill="true": the canvas fills its nearest positioned ancestor instead of the viewport, and the
|
|
footer clip drops (there is no player bar to clear — the bounding box IS the clip). The host is
|
|
responsible for giving this layer a positioned, sized parent. `inset: 0` over `position: absolute`
|
|
makes the box exactly that parent's content box; `overflow: hidden` still clips the canvas to it.
|
|
The canvas backing-store sizing in WaveformVisualizer.ts is unchanged — it already measures the
|
|
canvas's own box, so this purely re-parents the box from the viewport to the container. */
|
|
.mix-waveform-bg--fill {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* 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;
|
|
}
|