Front End Work

- Home Page
 - Custom Site Styles & Mud Theme Adjustments

DeepDrftWeb.Client/Controls/AudioPlayerBar.razor

@@ -15,7 +15,7 @@
                                    Disabled="!IsLoaded"/>    
                 }
             </MudStack>
-            <MudText Typo="Typo.body2" Class="font-monospace" Style="min-width: 120px">
+            <MudText Typo="Typo.body2" Class="font-monospace deepdrft-audio-time">
                 @FormatTime(CurrentTime) / @FormatTime(Duration)
             </MudText>
         </MudStack>
@@ -27,17 +27,17 @@
                    Value="@CurrentTime"
                    ValueChanged="@OnSeek"
                    Disabled="!IsLoaded"
-                   Style="flex: 1; margin-right: 8px;"/>
+                   Class="deepdrft-audio-slider-seek"/>
 
-        <div style="display: flex; align-items: center; width: 140px;">
-            <MudIcon Icon="@GetVolumeIcon()" Style="margin-right: 4px;"/>
+        <div class="deepdrft-audio-controls">
+            <MudIcon Icon="@GetVolumeIcon()" Class="deepdrft-audio-volume-icon"/>
             <MudSlider T="double"
                        Min="0"
                        Max="1"
                        Step="0.01"
                        Value="@Volume"
                        ValueChanged="@OnVolumeChange"
-                       Style="flex: 1;"/>
+                       Class="deepdrft-audio-slider"/>
         </div>
     </MudStack>
     @if (!string.IsNullOrEmpty(ErrorMessage))

DeepDrftWeb.Client/Controls/TrackCard.razor

@@ -1,42 +1,35 @@
-<MudCard Style="width: 250px; height: 250px; position: relative; overflow: hidden;"
+<MudCard Class="deepdrft-track-card-container"
          Elevation="4">
     
     @if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
     {
-        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
-                    background-image: url('@TrackModel.ImagePath'); 
-                    background-size: cover; 
-                    background-position: center;
-                    filter: brightness(0.7);">
+        <div class="deepdrft-track-card-bg" style="background-image: url('@TrackModel.ImagePath');">
         </div>
     }
     else
     {
-        <MudPaper Style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
-                  Class="mud-theme-secondary"
+        <MudPaper Class="deepdrft-track-card-fallback mud-theme-secondary"
                   Elevation="0">
         </MudPaper>
     }
     
-    <MudCardContent Style="position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;">
+    <MudCardContent Class="deepdrft-track-card-content">
         
-        <div>
+        <div class="deepdrft-track-info-top">
             <MudText Typo="Typo.h6" 
                      Color="Color.Surface"
-                     Style="margin-bottom: 4px;"
-                     Class="text-truncate">
+                     Class="text-truncate mb-1">
                 @TrackModel?.TrackName
             </MudText>
             
             <MudText Typo="Typo.subtitle1" 
                      Color="Color.Surface"
-                     Style="margin-bottom: 8px;"
-                     Class="text-truncate">
+                     Class="text-truncate mb-2">
                 @TrackModel?.Artist
             </MudText>
         </div>
         
-        <div Style="margin: 8px 0;">
+        <div class="deepdrft-track-info-middle">
             @if (!string.IsNullOrEmpty(TrackModel?.Album))
             {
                 <MudText Typo="Typo.caption" 
@@ -52,13 +45,13 @@
                          Size="Size.Small" 
                          Variant="Variant.Filled" 
                          Color="Color.Primary"
-                         Style="opacity: 0.9; margin-top: 4px;">
+                         Class="deepdrft-genre-chip">
                     @TrackModel.Genre
                 </MudChip>
             }
         </div>
         
-        <div Style="display: flex; justify-content: space-between; align-items: center;">
+        <div class="deepdrft-track-info-bottom">
             @if (TrackModel?.ReleaseDate.HasValue == true)
             {
                 <MudText Typo="Typo.caption" 

DeepDrftWeb.Client/Controls/TracksGallery.razor

@@ -3,7 +3,7 @@
         @foreach (var track in Tracks)
         {
             <MudItem xs="12" sm="6" md="4" lg="2" xl="2">
-                <div Style="display: flex; justify-content: center;">
+                <div class="deepdrft-track-gallery-item-center">
                     <TrackCard TrackModel="@track" IsPlaying="@(track.Id == SelectedTrack?.Id)" OnPlay="@HandlePlayClick"/>
                 </div>
             </MudItem>