refactor(player): move SpectrumVisualizer into VolumeZone above volume slider
Rename VolumeControls to VolumeZone; stack 24-bucket SpectrumVisualizer above volume slider; remove it from PlayerSeekZone. MudSlider stays as seek placeholder. Pin flex-shrink:0 on volume-zone; add Class param to VolumeZone for layout flexibility.
This commit is contained in:
@@ -74,7 +74,7 @@
|
||||
|
||||
/* Unified responsive player layout.
|
||||
Wide and narrow shapes are pure CSS — no runtime breakpoint subscription.
|
||||
Children are targeted by their stable classes (transport-zone, volume-controls,
|
||||
Children are targeted by their stable classes (transport-zone, volume-zone,
|
||||
seek-zone) rather than positional nth-child, since all three render a .mud-stack
|
||||
root and positional selectors would be fragile. */
|
||||
.player-layout {
|
||||
@@ -89,12 +89,12 @@
|
||||
@media (min-width: 600px) {
|
||||
::deep .transport-zone { order: 1; }
|
||||
::deep .seek-zone { order: 2; flex-grow: 1; flex-basis: 0; }
|
||||
::deep .volume-controls { order: 3; }
|
||||
::deep .volume-zone { order: 3; flex-shrink: 0; }
|
||||
}
|
||||
|
||||
/* Narrow (< 600px): transport + volume on top row, seek full-width below */
|
||||
@media (max-width: 599.98px) {
|
||||
::deep .transport-zone { order: 1; }
|
||||
::deep .volume-controls { order: 2; }
|
||||
::deep .volume-zone { order: 2; }
|
||||
::deep .seek-zone { flex-basis: 100%; order: 3; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user