src/main/resources/com/github/arthurdeka/cedromoderndock/css/dockSettings.css
/**
 * Cedro Modern Dock - Dock Settings Stylesheet
 * * Color Scheme:
 * - Dark Background: #2b2b2b
 * - Lighter Dark Background/Controls: #3c3c3c
 * - Accent/Text Color: #007acc
 * - Hover Color: #555555
 * - Text on Accent: #ffffff
 */

/* --- General Styles --- */
.root {
    -fx-background-color: #2b2b2b;
    -fx-font-family: "Segoe UI", Arial, sans-serif;
}

.label {
    -fx-text-fill: #007acc; /* Main accent color for all labels */
    -fx-font-size: 24px;
}

/* Style for the main title "Dock Settings" */
#mainTitle { /* You would add fx:id="mainTitle" to your main Label in FXML */
    -fx-font-size: 32px;
    -fx-text-fill: #007acc;
    -fx-font-weight: bold;
}


/* --- TabPane and Tabs Styles --- */
.tab-pane {
    -fx-background-color: #2b2b2b;
}

.tab-pane .tab-header-area .tab-header-background {
    -fx-background-color: #2b2b2b;
    -fx-padding: 0 0 5 0;
}

.tab-pane .tab {
    -fx-background-color: #3c3c3c;
    -fx-background-radius: 5 5 0 0;
    -fx-padding: 8 15 8 15;
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}

.tab-pane .tab .tab-label {
    -fx-text-fill: #cccccc; /* Lighter text for non-selected tabs */
    -fx-font-size: 10px;
    -fx-font-weight: bold;
}

.tab-pane .tab:selected {
    -fx-background-color: #3c3c3c;
    -fx-border-color: #007acc #3c3c3c #3c3c3c #3c3c3c;
    -fx-border-width: 3 0 0 0;
}

.tab-pane .tab:selected .tab-label {
    -fx-text-fill: #007acc; /* Accent color for the selected tab's text */
}

.tab-pane .tab:hover {
    -fx-background-color: #555555;
}

.tab-pane .tab-content-area {
    -fx-background-color: #3c3c3c;
    -fx-background-radius: 0 5 5 5;
    -fx-padding: 20px;
}


/* --- Button Styles --- */
.button {
    -fx-background-color: #007acc;
    -fx-text-fill: #ffffff;
    -fx-font-weight: bold;
    -fx-font-size: 13px;
    -fx-background-radius: 5;
    -fx-padding: 8 15 8 15;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 5, 0, 0, 2);
}

.button:hover {
    -fx-background-color: #0095ff;
    -fx-cursor: hand;
}

.button:pressed {
    -fx-background-color: #005c9e;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 3, 0, 0, 1);
}

.button:disabled {
    -fx-opacity: 0.6;
    -fx-effect: none;
}


/* --- General tab --- */
.general-label {
    -fx-font-size: 12px;
    -fx-text-fill: white;
    -fx-font-weight: bold;
}


/* --- ListView Styles --- */
.list-view {
    -fx-background-color: #2b2b2b;
    -fx-border-color: #555555;
    -fx-border-width: 1;
    -fx-background-radius: 5;
    -fx-border-radius: 5;
}

.list-cell {
    -fx-background-color: transparent;
    -fx-text-fill: #007acc;
    -fx-padding: 8px;
    -fx-font-size: 14px;
}

.list-cell:filled:hover {
    -fx-background-color: #555555;
    -fx-text-fill: #ffffff;
}

.list-cell:filled:selected {
    -fx-background-color: #007acc;
    -fx-text-fill: #ffffff;
}

/* --- Slider Styles --- */
.slider .track {
    -fx-background-color: #555555;
    -fx-background-radius: 5;
    -fx-pref-height: 8px;
}

.slider .thumb {
    -fx-background-color: #007acc;
    -fx-background-radius: 20;
    -fx-padding: 8px;
}

.slider .axis .tick-mark {
    -fx-stroke: #cccccc;
    -fx-stroke-width: 1px;
}

.slider .axis .axis-label {
    -fx-text-fill: #cccccc;
}


/* --- ColorPicker Styles --- */
#dockColorPicker {
    -fx-background-color: #007acc;
    -fx-background-radius: 5;
    -fx-padding: 5 10 5 10;
}

#dockColorPicker .color-picker-label {
    -fx-text-fill: white;
    -fx-font-weight: bold;
}

#dockColorPicker .arrow {
    -fx-background-color: white;
}

/* Prevents the color picker from showing the opacity option */
#dockColorPicker .color-picker-grid .opacity-slider,
#dockColorPicker .color-picker-grid .opacity-label {
    visibility: hidden;
    max-height: 0;
    padding: 0;
}
