refactor(css): scope track card styles; apply NowPlayingCard color vocabulary
This commit is contained in:
daniel-c-harvey
@@ -208,110 +208,9 @@ body, p, span, div,
|
||||
.deepdrft-card-lavender-tint { background: color-mix(in srgb, var(--theme-quinary) 10%, transparent); }
|
||||
|
||||
/* =============================================================================
|
||||
8. TRACK CARDS
|
||||
8. (moved to TrackCard.razor.css and TracksGallery.razor.css)
|
||||
============================================================================= */
|
||||
|
||||
/* Container — transparent so the absolute-positioned fallback panel or album art
|
||||
controls the card's background. No MudBlazor surface component background to fight. */
|
||||
.deepdrft-track-card-container {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
min-width: 250px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Dark: glass edge to match NowPlayingCard vocabulary */
|
||||
.deepdrft-theme-dark .deepdrft-track-card-container {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Scrim behind text — guarantees legibility over album art and fallback glass */
|
||||
.deepdrft-theme-dark .deepdrft-track-card-content {
|
||||
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 — layout + stable dark default.
|
||||
Base rule sets navy-mid so the card never flashes grey/surface-teal even
|
||||
if the theme wrapper class is absent during WASM hydration. */
|
||||
.deepdrft-track-card-fallback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--deepdrft-navy-mid, #162437);
|
||||
}
|
||||
|
||||
/* Fallback panel — navy-glass, dark theme. Mirrors NowPlayingCard's .now-playing glass. */
|
||||
.deepdrft-theme-dark .deepdrft-track-card-fallback {
|
||||
background: color-mix(in srgb, var(--deepdrft-navy) 55%, transparent);
|
||||
border: 1px solid rgba(250, 250, 248, 0.12);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* Fallback panel — light theme: subtle navy tint on off-white */
|
||||
.deepdrft-theme-light .deepdrft-track-card-fallback {
|
||||
background: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white));
|
||||
border: 1px solid var(--deepdrft-border);
|
||||
}
|
||||
|
||||
/* Card text — theme-neutral base for the WASM hydration window (no wrapper class yet).
|
||||
Inherits body text so no jarring flash in either theme direction. */
|
||||
.deepdrft-track-title,
|
||||
.deepdrft-track-artist,
|
||||
.deepdrft-track-meta { color: inherit; }
|
||||
|
||||
/* Dark theme text — wins on specificity (0,2,0), not load order.
|
||||
Title: off-white. Artist: muted off-white (hierarchy above meta, below title).
|
||||
Meta: more muted. Green is reserved for the FAB (action) and chip border (tag only). */
|
||||
.deepdrft-theme-dark .deepdrft-track-title { color: var(--deepdrft-white, #FAFAF8); }
|
||||
.deepdrft-theme-dark .deepdrft-track-artist { color: rgba(250, 250, 248, 0.65); }
|
||||
.deepdrft-theme-dark .deepdrft-track-meta { color: rgba(250, 250, 248, 0.45); }
|
||||
|
||||
/* Light theme text — wins on specificity (0,2,0) */
|
||||
.deepdrft-theme-light .deepdrft-track-title { color: var(--deepdrft-navy, #0D1B2A); }
|
||||
.deepdrft-theme-light .deepdrft-track-artist { color: var(--deepdrft-green, #1A3C34); }
|
||||
.deepdrft-theme-light .deepdrft-track-meta { color: var(--deepdrft-muted, #8A9BB0); }
|
||||
|
||||
.deepdrft-track-info-middle { margin: 8px 0; }
|
||||
|
||||
.deepdrft-track-info-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.deepdrft-track-gallery-item-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
9. CHIPS & BUTTONS
|
||||
============================================================================= */
|
||||
@@ -373,10 +272,3 @@ body, p, span, div,
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.deepdrft-track-card-container {
|
||||
min-width: 200px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
/* 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 */
|
||||
.deepdrft-track-title { color: var(--deepdrft-white, #FAFAF8); }
|
||||
|
||||
/* Artist: green-accent — matches .np-label */
|
||||
.deepdrft-track-artist { color: var(--deepdrft-green-accent, #3D7A68); }
|
||||
|
||||
/* Meta: muted off-white — matches .np-sub */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,8 @@
|
||||
.tracks-gallery-container {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.deepdrft-track-gallery-item-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user