diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css index f980e5d..e84237a 100644 --- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css @@ -219,6 +219,11 @@ body, p, span, div, overflow: hidden; } +/* 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; @@ -240,6 +245,15 @@ body, p, span, div, 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 (theme-agnostic) */ .deepdrft-track-card-fallback { position: absolute; top: 0; @@ -248,6 +262,33 @@ body, p, span, div, height: 100%; } +/* Fallback panel — navy-glass, dark theme only. 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 — dark theme (Reading 2: NowPlayingCard hierarchy) */ +/* Title: off-white (NowPlayingCard .np-title) */ +.deepdrft-theme-dark .deepdrft-track-title { + color: var(--deepdrft-white); +} +/* Artist: moss-green (NowPlayingCard .np-label accent) */ +.deepdrft-theme-dark .deepdrft-track-artist { + color: var(--deepdrft-green-accent); +} +/* Meta (album, year): muted off-white (NowPlayingCard .np-sub) */ +.deepdrft-theme-dark .deepdrft-track-meta { + color: rgba(250, 250, 248, 0.55); +} + .deepdrft-track-info-middle { margin: 8px 0; } .deepdrft-track-info-bottom { diff --git a/DeepDrftShared.Client/Components/TrackCard.razor b/DeepDrftShared.Client/Components/TrackCard.razor index f86b6f1..d0bffda 100644 --- a/DeepDrftShared.Client/Components/TrackCard.razor +++ b/DeepDrftShared.Client/Components/TrackCard.razor @@ -1,5 +1,5 @@ + Elevation="0"> @if (!string.IsNullOrEmpty(TrackModel?.ImagePath)) { @@ -8,7 +8,7 @@ } else { - } @@ -17,14 +17,12 @@
+ Class="deepdrft-track-title text-truncate mb-1"> @TrackModel?.TrackName + Class="deepdrft-track-artist text-truncate mb-2"> @TrackModel?.Artist
@@ -33,8 +31,7 @@ @if (!string.IsNullOrEmpty(TrackModel?.Album)) { + Class="deepdrft-track-meta text-truncate"> @TrackModel.Album } @@ -55,7 +52,7 @@ @if (TrackModel?.ReleaseDate.HasValue == true) { + Class="deepdrft-track-meta"> @TrackModel.ReleaseDate.Value.Year }