update

Author: devnamdev2003

src/app/features/music/music.component.css

@@ -1,14 +1,127 @@
-.fixed {
-  z-index: 50;
+/* CSS Variables for Theming (Adapts to Light/Dark mode gracefully) */
+:root {
+  --color-bg: #0f172a;
+  --color-surface: #1e293b;
+  --color-text: #f8fafc;
+  --theme-color: #3b82f6;
+  --theme-color-rgb: 59, 130, 246;
+  --list-hover: rgba(255, 255, 255, 0.05);
+  --input-bg: rgba(255, 255, 255, 0.05);
+  --input-text: #f8fafc;
 }
 
-img {
-  object-fit: cover;
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-bg: #f8fafc;
+    --color-surface: #ffffff;
+    --color-text: #0f172a;
+    --list-hover: rgba(0, 0, 0, 0.03);
+    --input-bg: #e2e8f0;
+    --input-text: #0f172a;
+  }
 }
 
-input.no-select {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+/* Custom Slider Styling */
+.custom-slider {
+  -webkit-appearance: none;
+  border-radius: 9999px;
+}
+
+.custom-slider::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border-radius: 9999px;
+}
+
+.custom-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: var(--theme-color);
+  box-shadow: 0 0 10px rgba(var(--theme-color-rgb), 0.6);
+  margin-top: -5px;
+  /* Centers the thumb relative to track */
+  cursor: pointer;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.custom-slider:hover::-webkit-slider-thumb {
+  transform: scale(1.3);
+}
+
+/* Animations */
+@keyframes slide-up {
+  from {
+    transform: translateY(120%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-up {
+  animation: slide-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0px);
+  }
+
+  to {
+    opacity: 1;
+    backdrop-filter: blur(20px);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.4s ease-out forwards;
+}
+
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin-slow 12s linear infinite;
+}
+
+/* Equalizer Bars */
+.eq-bar {
+  width: 3px;
+  background-color: var(--theme-color);
+  border-radius: 2px;
+  animation: eq-bounce 1s infinite ease-in-out;
+}
+
+.eq-bar:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.eq-bar:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes eq-bounce {
+
+  0%,
+  100% {
+    height: 4px;
+  }
+
+  50% {
+    height: 16px;
+  }
 }