daniel-c-harvey
89 lines
2.8 KiB
CSS
89 lines
2.8 KiB
CSS
/* Container — transparent so the absolute-positioned fallback panel or album art
|
|
controls the card's background. Glass edge matches NowPlayingCard vocabulary. */
|
|
.deepdrft-track-card-container {
|
|
width: 250px;
|
|
height: 250px;
|
|
min-width: 250px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
border: 1px solid rgba(250, 250, 248, 0.12);
|
|
}
|
|
|
|
.deepdrft-track-card-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
filter: brightness(0.7);
|
|
}
|
|
|
|
.deepdrft-track-card-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 16px;
|
|
background: linear-gradient(to top,
|
|
rgba(13, 27, 42, 0.75) 0%,
|
|
rgba(13, 27, 42, 0.35) 45%,
|
|
rgba(13, 27, 42, 0.00) 100%);
|
|
}
|
|
|
|
/* Fallback panel — solid navy, opaque so the card reads correctly on both
|
|
light and dark page backgrounds. Semi-transparent + blur washes out on white. */
|
|
.deepdrft-track-card-fallback {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background: var(--deepdrft-navy-mid, #162437);
|
|
border: 1px solid rgba(250, 250, 248, 0.12);
|
|
}
|
|
|
|
/* Title: off-white — matches .np-title.
|
|
::deep required: MudText renders its own element, so Blazor isolation
|
|
won't stamp b-{hash} on it; ::deep pierces into child component output. */
|
|
::deep .deepdrft-track-title { color: var(--deepdrft-white, #FAFAF8); }
|
|
|
|
/* Artist: green-accent — matches .np-label. ::deep for same reason. */
|
|
::deep .deepdrft-track-artist { color: var(--deepdrft-green-accent, #3D7A68); }
|
|
|
|
/* Meta: muted off-white — matches .np-sub. ::deep for same reason. */
|
|
::deep .deepdrft-track-meta { color: rgba(250, 250, 248, 0.45); }
|
|
|
|
/* FAB always green-accent — card is always dark glass regardless of page theme.
|
|
.mud-button-filled-primary specificity (0,1,0) in MudBlazor; our (0,1,1) wins. */
|
|
::deep .mud-button-filled-primary {
|
|
background-color: var(--deepdrft-green-accent, #3D7A68);
|
|
color: var(--deepdrft-white, #FAFAF8);
|
|
}
|
|
|
|
/* Genre chip always green-accent outline/text on the dark glass card. */
|
|
::deep .deepdrft-genre-chip.mud-chip-outlined {
|
|
border-color: var(--deepdrft-green-accent, #3D7A68);
|
|
color: var(--deepdrft-green-accent, #3D7A68);
|
|
}
|
|
::deep .deepdrft-genre-chip.mud-chip-color-primary {
|
|
color: var(--deepdrft-green-accent, #3D7A68);
|
|
}
|
|
|
|
.deepdrft-track-info-middle { margin: 8px 0; }
|
|
|
|
.deepdrft-track-info-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.deepdrft-track-card-container {
|
|
min-width: 200px;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|