Merge branch 'track-card-glass' into dev

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 {

DeepDrftShared.Client/Components/TrackCard.razor

@@ -1,5 +1,5 @@
 <MudCard Class="deepdrft-track-card-container"
-         Elevation="4">
+         Elevation="0">
 
     @if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
     {
@@ -8,7 +8,7 @@
     }
     else
     {
-        <MudPaper Class="deepdrft-track-card-fallback mud-theme-secondary"
+        <MudPaper Class="deepdrft-track-card-fallback"
                   Elevation="0">
         </MudPaper>
     }
@@ -17,14 +17,12 @@
 
         <div class="deepdrft-track-info-top">
             <MudText Typo="Typo.subtitle1"
-                     Color="Color.Surface"
+                     Class="deepdrft-track-title text-truncate mb-1">
-                     Class="text-truncate mb-1">
                 @TrackModel?.TrackName
             </MudText>
 
             <MudText Typo="Typo.caption"
-                     Color="Color.Surface"
+                     Class="deepdrft-track-artist text-truncate mb-2">
-                     Class="text-truncate mb-2">
                 @TrackModel?.Artist
             </MudText>
         </div>
@@ -33,8 +31,7 @@
             @if (!string.IsNullOrEmpty(TrackModel?.Album))
             {
                 <MudText Typo="Typo.caption"
-                         Color="Color.Surface"
+                         Class="deepdrft-track-meta text-truncate">
-                         Class="text-truncate">
                     @TrackModel.Album
                 </MudText>
             }
@@ -55,7 +52,7 @@
             @if (TrackModel?.ReleaseDate.HasValue == true)
             {
                 <MudText Typo="Typo.caption"
-                         Color="Color.Surface">
+                         Class="deepdrft-track-meta">
                     @TrackModel.ReleaseDate.Value.Year
                 </MudText>
             }