Develop #1
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user