Refactor Audio Plaback layers for simplification and improved maintenance

DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

@@ -1,26 +1,24 @@
-/* AudioPlayerBar Component - Scoped Styles */
+/* Preserve key visual styles while simplifying layout */
 
-/* Outer container - full width, fixed to bottom */
-.deepdrft-player-outer-container {
+/* Player outer container - fixed positioning */
+.player-outer-container {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
-    width: 100%;
     z-index: 1200;
     padding: 0;
     margin: 0;
 }
 
-/* Inner container wrapper */
-.deepdrft-player-inner-container {
+/* Player inner container */
+.player-inner-container {
     padding: 1rem;
     padding-bottom: 1.5rem;
-    margin: 0 auto;
 }
 
-/* Player bar with rounded corners and semi-opaque background */
-.deepdrft-audio-player-bar {
+/* Custom backdrop blur container */
+.player-backdrop {
     position: relative;
     background: var(--deepdrft-theme-background-gray);
     backdrop-filter: blur(15px);
@@ -29,21 +27,21 @@
     border: 1px solid var(--deepdrft-theme-primary);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 
                 0 2px 10px var(--deepdrft-theme-secondary);
-    transition: all 0.3s ease;
     color: #ffffff;
+    transition: all 0.3s ease;
     overflow: hidden;
     margin-bottom: 1rem;
 }
 
-/* Spacer div to maintain layout spacing */
-.deepdrft-player-spacer {
-    height: 140px;
-    width: 100%;
-    flex-shrink: 0;
+/* Control buttons positioning */
+.player-controls {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
 }
 
-/* Minimized floating dock */
-.deepdrft-minimized-player-dock {
+/* Minimized floating dock with gradient */
+.minimized-dock {
     position: fixed;
     bottom: 60px;
     right: 60px;
@@ -51,148 +49,83 @@
     width: 60px;
     height: 60px;
     border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    cursor: pointer;
     background: linear-gradient(135deg, 
         var(--deepdrft-theme-primary) 0%,
         var(--deepdrft-theme-secondary) 50%,
         var(--deepdrft-theme-tertiary) 100%
     );
     backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
     border: 2px solid var(--deepdrft-theme-secondary);
     box-shadow: 0 4px 20px var(--deepdrft-theme-primary),
                 0 2px 10px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
-    cursor: pointer;
 }
 
-.deepdrft-minimized-player-dock:hover {
+.minimized-dock:hover {
     transform: scale(1.1);
-    box-shadow: 0 6px 25px rgba(var(--mud-palette-primary-rgb), 0.8),
+    box-shadow: 0 6px 25px rgba(var(--deepdrft-theme-primary), 0.8),
                 0 3px 15px rgba(0, 0, 0, 0.4);
 }
 
-.deepdrft-minimized-player-button {
-    border-radius: 50%;
+/* Minimized button styles */
+.minimized-button {
+    border-radius: 50% !important;
     background: transparent !important;
-    color: white;
-    transition: all 0.3s ease;
+    color: white !important;
+    transition: all 0.3s ease !important;
     box-shadow: none !important;
     border: none !important;
     width: 48px !important;
     height: 48px !important;
 }
 
-/* Layout containers */
-.deepdrft-audio-player-content {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1.25rem;
+/* Spacer to prevent content overlap */
+.player-spacer {
+    height: 140px;
+    width: 100%;
+    flex-shrink: 0;
 }
 
-.deepdrft-audio-controls-section {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+/* Essential layout adjustments only */
+.controls-left {
     min-width: 200px;
 }
 
-.deepdrft-audio-buttons-row {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.deepdrft-audio-info-row {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-top: 0.25rem;
-    justify-items: center;
-}
-
-.deepdrft-audio-volume-section {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    width: 140px;
-}
-
-.deepdrft-audio-minimize-section {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Control elements */
-.deepdrft-audio-seek-slider {
+.seekbar-flex {
     flex: 1;
-    margin-right: 0.5rem;
 }
 
-.deepdrft-audio-volume-slider {
-    width: 100px;
+.volume-right {
+    /*min-width: 140px;*/
 }
 
-.deepdrft-audio-time {
-    min-width: 120px;
-}
-
-.deepdrft-audio-volume-icon {
-    margin-right: 4px;
-}
-
-/* Mobile responsiveness */
+/* Mobile responsive adjustments */
 @media (max-width: 768px) {
-    .deepdrft-minimized-player-dock {
+    .minimized-dock {
         bottom: 15px;
         right: 15px;
         width: 56px;
         height: 56px;
     }
     
-    .deepdrft-minimized-player-button {
+    .minimized-button {
         width: 44px !important;
         height: 44px !important;
     }
     
-    .deepdrft-player-inner-container {
+    .player-inner-container {
         padding: 0.75rem;
         padding-bottom: 1.25rem;
     }
     
-    .deepdrft-audio-player-bar {
+    .player-backdrop {
         border-radius: 1rem;
         margin-bottom: 1.25rem;
     }
     
-    .deepdrft-audio-player-content {
-        flex-direction: column;
-        gap: 0.5rem;
-        padding: 0.75rem 1rem;
-    }
-    
-    .deepdrft-audio-controls-section {
-        align-items: center;
-        width: 100%;
-    }
-    
-    .deepdrft-audio-seek-slider {
-        margin-right: 0;
-        width: 100%;
-    }
-    
-    .deepdrft-audio-volume-section {
-        width: 100%;
-        justify-content: center;
-    }
-    
-    .deepdrft-player-spacer {
+    .player-spacer {
         height: 160px;
     }
 }