daniel-c-harvey
106 lines
2.5 KiB
CSS
106 lines
2.5 KiB
CSS
/* Single space-between row under the waveform: identity on the left, accents on the right.
|
||
Colours come from the MudBlazor theme (the dock surface is theme-aware), so we do not
|
||
hard-code green-accent overrides here. */
|
||
.track-meta-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
width: 100%;
|
||
padding: 2px 4px 0;
|
||
}
|
||
|
||
/* Left group shrinks and truncates so a long title never pushes the chip off-screen. */
|
||
.track-meta-identity {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
::deep .track-meta-title {
|
||
font-family: var(--deepdrft-font-mono);
|
||
min-width: 0;
|
||
}
|
||
|
||
::deep .track-meta-artist {
|
||
opacity: 0.75;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Right group keeps its natural size and never shrinks. */
|
||
.track-meta-accents {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
::deep .track-meta-year {
|
||
opacity: 0.75;
|
||
}
|
||
|
||
/* The metadata's three shapes track the dock's layout bands (same breakpoints as the grid in
|
||
AudioPlayerBar.razor.css), not the label's own slot width — in the <600 band the slot is actually
|
||
full-width yet we still want it fully vertical, which a container query can't express.
|
||
|
||
Mid band (600–900): 2×2 — title over artist on the left (start-justified), genre over year on the
|
||
right (end-justified). The row stays a row; only the two inner groups go vertical. */
|
||
@media (min-width: 600px) and (max-width: 899.98px) {
|
||
.track-meta-row {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.track-meta-identity {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0;
|
||
}
|
||
|
||
.track-meta-accents {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 2px;
|
||
}
|
||
|
||
::deep .track-meta-sep {
|
||
display: none;
|
||
}
|
||
|
||
::deep .track-meta-year {
|
||
padding-left: 8px;
|
||
}
|
||
}
|
||
|
||
/* Narrow band (<600): fully vertical — title / artist / genre / year all stacked, left-aligned. */
|
||
@media (min-width: 420px) and (max-width: 599.98px) {
|
||
.track-meta-identity {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0;
|
||
}
|
||
|
||
.track-meta-accents {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 2px;
|
||
}
|
||
|
||
::deep .track-meta-sep {
|
||
display: none;
|
||
}
|
||
|
||
::deep .track-meta-year {
|
||
padding-left: 8px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 419.98px) {
|
||
.track-meta-row {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 4px;
|
||
}
|
||
}
|