daniel-c-harvey
45 lines
2.1 KiB
CSS
45 lines
2.1 KiB
CSS
/* SCOPED fallback for the LEGACY inline mount only (Mix's TopRowCenter bar). The popover-hosted panel's
|
|
chrome lives in the GLOBAL deepdrft-styles.css (.waveform-visualizer-control-panel*) because MudPopover
|
|
portals its content out of this component's DOM subtree, where Blazor CSS isolation cannot reach. These
|
|
scoped rules apply only when the panel is mounted inline (not portaled) — i.e. Mix's existing bar.
|
|
|
|
Phase 10 §4: the inline host ALWAYS renders this component and the component @if-gates the knobs on its
|
|
Visible parameter. So the container is permanent and reserves its height whether or not the knobs are
|
|
present — content below the bar never pops on toggle. A plain transparent horizontal flex row of the
|
|
eight knobs that wraps to a second line only if the band is genuinely too narrow.
|
|
|
|
min-height reserves one knob-row's worth of space (knob Size=64 + icon caption + gaps + margins) so the
|
|
empty (hidden) state occupies the same vertical box the populated single-row state does. The
|
|
popover-panel rule in the global sheet overrides this min-height (a popover does not reserve height). */
|
|
.mix-visualizer-controls-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 0.85rem 1rem;
|
|
margin: 0.5rem 0;
|
|
min-height: 6rem;
|
|
}
|
|
|
|
/* One control: a RadialKnob with its Material icon caption underneath. RadialKnob has no icon slot, so
|
|
the icon rides adjacent (§7d). Center the pair so the eight read as a tidy bar. */
|
|
.mix-visualizer-control {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
/* The caption icon is a MudIcon (a Razor component), so Blazor CSS isolation does not stamp the scope
|
|
attribute onto its element — reach it with ::deep. Tinted to the primary accent and the overlay-label
|
|
opacity so it matches the session-hero NowPlaying captions (§7e). The portaled popover panel tints the
|
|
same icons via the global sheet instead. */
|
|
.mix-visualizer-control ::deep .mix-visualizer-control-icon {
|
|
color: var(--mud-palette-primary);
|
|
opacity: 0.78;
|
|
}
|
|
|
|
.wvc-row {
|
|
display: flex;
|
|
width: 100%;
|
|
} |