daniel-c-harvey
77 lines
2.2 KiB
CSS
77 lines
2.2 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 — navy-glass, mirrors NowPlayingCard's .now-playing glass.
|
|
Stable base fallback so the card never flashes grey during WASM hydration. */
|
|
.deepdrft-track-card-fallback {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: color-mix(in srgb, var(--deepdrft-navy, #0D1B2A) 55%, transparent);
|
|
border: 1px solid rgba(250, 250, 248, 0.12);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
/* 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); }
|
|
|
|
.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;
|
|
}
|
|
}
|