add light.css and dark.css

2026-05-28 04:18:34 +03:30
parent 1e33389921
commit ac6e777e3d
3 changed files with 92 additions and 74 deletions
@@ -0,0 +1,92 @@
+/* Overall application background */
+.root {
+    -fx-font-family: "Segoe UI", "Inter", "Arial"; /* Modern, clean fonts */
+    -fx-background-color: #0f172a; /* Very dark blue/black */
+    -fx-padding: 20;
+}
+
+/* Main container for the music list */
+.main-container { /* Applied to the root VBox */
+    -fx-background-color: #111827; /* Dark slate background */
+    -fx-background-radius: 18; /* Rounded corners */
+    -fx-padding: 20;
+    -fx-spacing: 14; /* Space between elements */
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.35), 20, 0.2, 0, 6); /* Stronger shadow for dark mode */
+}
+
+/* Header row (Track, Artist, etc.) */
+.header-row {
+    -fx-alignment: center-left;
+    -fx-padding: 0 0 10 0;
+    -fx-spacing: 14;
+}
+
+/* Column headers within the header-row */
+.header-row .label {
+    -fx-text-fill: #f8fafc; /* Off-white for headers */
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+}
+
+/* Individual track rows */
+.track-row {
+    -fx-background-color: #1f2937; /* Darker gray for rows */
+    -fx-background-radius: 14;
+    -fx-padding: 10 14;
+    -fx-spacing: 14;
+    -fx-alignment: center-left;
+}
+
+.track-row:hover {
+    -fx-background-color: #273244; /* Slightly lighter gray on hover */
+    -fx-cursor: hand;
+}
+
+/* Labels within track rows */
+.track-row .label {
+    -fx-text-fill: #cbd5e1; /* Light gray for track info */
+    -fx-font-size: 13px;
+}
+
+/* Buttons */
+.button {
+    -fx-background-color: #3b82f6; /* Bright blue */
+    -fx-text-fill: white;
+    -fx-background-radius: 10;
+    -fx-padding: 8 14;
+    -fx-font-size: 13px;
+    -fx-cursor: hand;
+    -fx-border-width: 0;
+}
+
+.button:hover {
+    -fx-background-color: #2563eb; /* Darker blue on hover */
+}
+
+.button:pressed {
+    -fx-background-color: #1d4ed8; /* Even darker blue when pressed */
+}
+
+/* Specific styling for the Playlist button */
+#PlayListButton { /* Use fx:id for specific element styling */
+    -fx-background-color: #22c55e; /* Bright green */
+}
+
+#PlayListButton:hover {
+    -fx-background-color: #16a34a; /* Darker green on hover */
+}
+
+#PlayListButton:pressed {
+    -fx-background-color: #15803d; /* Darkest green when pressed */
+}
+
+/* Footer row (Playing: and Playlist button) */
+.footer-row {
+    -fx-alignment: center-left;
+    -fx-padding: 16 0 0 0;
+    -fx-spacing: 10;
+}
+
+.footer-row .label {
+    -fx-text-fill: #94a3b8; /* Lighter gray for "Playing:" text */
+}
@@ -1,74 +0,0 @@
-.root-pane {
-    -fx-padding: 20;
-    -fx-background-color: linear-gradient(to bottom right, #1e1e2f, #2b2b45);
-}
-
-.header-row {
-    -fx-padding: 10 0 15 0;
-}
-
-.header-label {
-    -fx-text-fill: white;
-    -fx-font-size: 24px;
-    -fx-font-weight: bold;
-}
-
-.song-row {
-    -fx-padding: 12;
-    -fx-background-color: rgba(255, 255, 255, 0.08);
-    -fx-background-radius: 12;
-    -fx-border-radius: 12;
-    -fx-border-color: rgba(255, 255, 255, 0.15);
-    -fx-border-width: 1;
-}
-
-.song-title {
-    -fx-text-fill: white;
-    -fx-font-size: 16px;
-    -fx-font-weight: bold;
-    -fx-min-width: 160px;
-}
-
-.song-artist {
-    -fx-text-fill: #cfcfe8;
-    -fx-font-size: 14px;
-    -fx-min-width: 140px;
-}
-
-.song-duration {
-    -fx-text-fill: #a8a8c8;
-    -fx-font-size: 13px;
-    -fx-min-width: 60px;
-}
-
-.play-button {
-    -fx-background-color: #4CAF50;
-    -fx-text-fill: white;
-    -fx-font-weight: bold;
-    -fx-background-radius: 8;
-}
-
-.play-button:hover {
-    -fx-background-color: #43a047;
-}
-
-.secondary-button {
-    -fx-background-color: #2196F3;
-    -fx-text-fill: white;
-    -fx-background-radius: 8;
-}
-
-.secondary-button:hover {
-    -fx-background-color: #1976D2;
-}
-
-.primary-button {
-    -fx-background-color: #ff9800;
-    -fx-text-fill: white;
-    -fx-font-weight: bold;
-    -fx-background-radius: 8;
-}
-
-.primary-button:hover {
-    -fx-background-color: #fb8c00;
-}