From 9c916245c1f3206c8cf8d4dc643308aeed1f7bc6 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Fri, 5 Jun 2026 17:35:16 -0400 Subject: [PATCH] refactor(css): scope track card styles; apply NowPlayingCard color vocabulary --- .../wwwroot/styles/deepdrft-styles.css | 110 +----------------- .../Components/TrackCard.razor.css | 74 ++++++++++++ .../Components/TracksGallery.razor.css | 5 + 3 files changed, 80 insertions(+), 109 deletions(-) create mode 100644 DeepDrftShared.Client/Components/TrackCard.razor.css diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css index d980e33..667d9b7 100644 --- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css @@ -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; - } -} diff --git a/DeepDrftShared.Client/Components/TrackCard.razor.css b/DeepDrftShared.Client/Components/TrackCard.razor.css new file mode 100644 index 0000000..270c4bc --- /dev/null +++ b/DeepDrftShared.Client/Components/TrackCard.razor.css @@ -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; + } +} diff --git a/DeepDrftShared.Client/Components/TracksGallery.razor.css b/DeepDrftShared.Client/Components/TracksGallery.razor.css index 05d59fc..be316f8 100644 --- a/DeepDrftShared.Client/Components/TracksGallery.razor.css +++ b/DeepDrftShared.Client/Components/TracksGallery.razor.css @@ -1,3 +1,8 @@ .tracks-gallery-container { box-sizing: border-box; } + +.deepdrft-track-gallery-item-center { + display: flex; + justify-content: center; +}