Merge branch 'track-card-plain-shell' into dev

DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

@@ -211,7 +211,7 @@ body, p, span, div,
    8. TRACK CARDS
    ============================================================================= */
 
-/* Container — always transparent so MudCard's paper background never competes
+/* Container — transparent so no background competes
    with the absolute-positioned fallback panel or album art. */
 .deepdrft-track-card-container {
     width: 250px;
@@ -219,7 +219,7 @@ body, p, span, div,
     min-width: 250px;
     position: relative;
     overflow: hidden;
-    background: transparent !important;
+    background: transparent;
 }
 
 /* Dark: glass edge to match NowPlayingCard vocabulary */
@@ -265,19 +265,19 @@ body, p, span, div,
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--deepdrft-navy-mid, #162437) !important;
+    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) !important;
+    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)) !important;
+    background: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white));
     border: 1px solid var(--deepdrft-border);
 }
 

DeepDrftShared.Client/Components/TrackCard.razor

@@ -1,5 +1,4 @@
-<MudCard Class="deepdrft-track-card-container"
-         Elevation="0">
+<div class="deepdrft-track-card-container">
 
     @if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
     {
@@ -8,12 +7,10 @@
     }
     else
     {
-        <MudPaper Class="deepdrft-track-card-fallback"
-                  Elevation="0">
-        </MudPaper>
+        <div class="deepdrft-track-card-fallback"></div>
     }
 
-    <MudCardContent Class="deepdrft-track-card-content">
+    <div class="deepdrft-track-card-content">
 
         <div class="deepdrft-track-info-top">
             <MudText Typo="Typo.subtitle1"
@@ -67,6 +64,6 @@
                     OnClick="@PlayClick"/>
         </div>
 
-    </MudCardContent>
+    </div>
 
-</MudCard>
+</div>