daniel-c-harvey
130 lines
3.7 KiB
CSS
130 lines
3.7 KiB
CSS
/* Geometry, positioning, and animation only.
|
||
Colour, surface, and elevation come from MudBlazor theme props. */
|
||
|
||
/* Fixed dock to the viewport bottom */
|
||
.player-dock {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1200;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.player-fixed {
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1200;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
::deep .player-inner-container {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
/* The visible surface is a MudPaper; scoped CSS only sets geometry + a hairline accent */
|
||
::deep .player-surface {
|
||
position: relative;
|
||
border-radius: 16px;
|
||
border: 1px solid var(--mud-palette-primary);
|
||
overflow: hidden;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* Minimize / close cluster, pinned top-right of the surface */
|
||
::deep .player-surface .player-window-controls {
|
||
position: absolute;
|
||
top: 0.5rem;
|
||
right: 0.5rem;
|
||
}
|
||
|
||
/* Minimized floating dock — positioning + hover only; colour from MudFab */
|
||
.minimized-dock {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
z-index: 1300;
|
||
}
|
||
|
||
.minimized-dock:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.minimized-dock {
|
||
bottom: 15px;
|
||
right: 15px;
|
||
}
|
||
|
||
::deep .player-surface {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
}
|
||
|
||
/* Unified responsive player layout — CSS Grid with named areas redefined per breakpoint.
|
||
The metadata (meta-zone) detaches from the waveform (seek-zone) in the mid band, which a
|
||
flex order-swap can't express, so each of the four zones is placed by grid-area and the three
|
||
shapes are pure template-area swaps — no runtime breakpoint subscription. min-width:0 on the
|
||
shrinkable centre zones lets the title truncate and the waveform shrink instead of overflowing. */
|
||
.player-layout {
|
||
display: grid;
|
||
align-items: center;
|
||
gap: 8px;
|
||
/*padding-right: 2.5rem; !* clear the abs-positioned PlayerWindowControls *!*/
|
||
}
|
||
|
||
::deep .transport-zone { grid-area: transport; }
|
||
::deep .meta-zone { grid-area: meta; min-width: 0; }
|
||
::deep .seek-zone { grid-area: waveform; min-width: 0; }
|
||
::deep .volume-zone { grid-area: volume; }
|
||
|
||
/* Wide (>= 900px): single row — transport and volume flank the centre column; the metadata
|
||
sits directly under the waveform (transport/volume span both rows, centred). */
|
||
@media (min-width: 900px) {
|
||
.player-layout {
|
||
grid-template-columns: auto minmax(360px, 1fr) auto;
|
||
grid-template-areas:
|
||
"transport waveform volume"
|
||
"transport meta .";
|
||
}
|
||
}
|
||
|
||
/* Mid (600–900px): metadata rides the top row between transport and volume; the waveform gets
|
||
the whole bottom row to itself rather than being squeezed beside the metadata. */
|
||
@media (min-width: 600px) and (max-width: 899.98px) {
|
||
.player-layout {
|
||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||
grid-template-areas:
|
||
"transport meta volume"
|
||
"waveform waveform waveform";
|
||
}
|
||
}
|
||
|
||
/* Narrow (< 600px): transport + volume share the top row; waveform then metadata stack full-width
|
||
below — the most compressed shape. */
|
||
@media (min-width: 420px) and (max-width: 599.98px) {
|
||
.player-layout {
|
||
grid-template-columns: auto 1fr auto;
|
||
grid-template-areas:
|
||
"transport . volume"
|
||
"waveform waveform waveform"
|
||
"meta meta meta";
|
||
}
|
||
}
|
||
|
||
/* Very Narrow (< 400px): transport + volume share the top row; waveform then metadata stack full-width
|
||
below — the most compressed shape. */
|
||
@media (max-width: 419.98px) {
|
||
.player-layout {
|
||
grid-template-columns: auto 1fr auto;
|
||
grid-template-areas:
|
||
"transport . volume"
|
||
"waveform waveform waveform"
|
||
"meta meta meta";
|
||
}
|
||
}
|