Update style.css

webui/static/style.css

@@ -12075,6 +12075,7 @@ body {
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     max-width: 1400px;
+    border-radius: 20px;
     margin: 0 auto;
     overflow: hidden; /* Prevent overflow */
 }
@@ -12094,6 +12095,10 @@ body {
     width: 100%;
     min-width: 0; /* Allow shrinking */
     overflow: hidden; /* Prevent content overflow */
+    transition: box-shadow 0.6s ease-in-out,
+                background 0.6s ease-in-out,
+                border-left-color 0.6s ease-in-out;
+    cursor: pointer;
 }
 
 /* Color-coded themes */
@@ -12113,6 +12118,33 @@ body {
         inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
+/* Hover Effects for Top 10 Lists */
+.beatport-top10-list:hover {
+    border-left-color: #00ff88;
+    box-shadow:
+        0 20px 40px rgba(0, 0, 0, 0.5),
+        0 0 40px rgba(0, 255, 136, 0.4),
+        0 0 80px rgba(0, 255, 136, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    background: linear-gradient(135deg,
+        rgba(0, 255, 136, 0.1),
+        rgba(18, 18, 18, 0.95),
+        rgba(30, 30, 30, 0.9));
+}
+
+.beatport-hype10-list:hover {
+    border-left-color: #ff3366;
+    box-shadow:
+        0 20px 40px rgba(0, 0, 0, 0.5),
+        0 0 40px rgba(255, 51, 102, 0.4),
+        0 0 80px rgba(255, 51, 102, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    background: linear-gradient(135deg,
+        rgba(255, 51, 102, 0.1),
+        rgba(18, 18, 18, 0.95),
+        rgba(30, 30, 30, 0.9));
+}
+
 /* List headers */
 .beatport-top10-list-header, .beatport-hype10-list-header {
     text-align: center;