daniel-c-harvey
35 lines
1.1 KiB
CSS
35 lines
1.1 KiB
CSS
/* The controls row sits in the mix-detail foreground, below the back button and above the masthead.
|
|
A horizontal row of four icon+slider controls. On narrow viewports it wraps to keep all four
|
|
present (spec §3b: wrap is the chosen mobile behaviour — none may drop). */
|
|
.mix-visualizer-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.75rem 1.5rem;
|
|
margin: 0.5rem 0 1.5rem;
|
|
}
|
|
|
|
/* One control: a compact label icon followed by the slider. The slider gets a fixed-ish track width
|
|
so the four read as a tidy row rather than stretching unevenly. */
|
|
.mix-visualizer-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1 1 180px;
|
|
min-width: 160px;
|
|
max-width: 260px;
|
|
}
|
|
|
|
.mix-visualizer-control-icon {
|
|
flex: 0 0 auto;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* MudSlider renders a Razor component, so its root is reached with ::deep (a bare scoped selector
|
|
would not be stamped onto the child component's element). Let the slider fill the remaining width
|
|
of its control so the icon+slider pair lays out cleanly. */
|
|
.mix-visualizer-control ::deep .mud-slider {
|
|
flex: 1 1 auto;
|
|
margin: 0;
|
|
}
|