Expose SplitPane looked-up color variables

This commit is contained in:
mkpaz 2022-09-05 14:53:31 +04:00
parent 2990b52033
commit 90fbbd35c6
2 changed files with 19 additions and 8 deletions

@ -26,7 +26,8 @@
-fx-icon-size: 32px; -fx-icon-size: 32px;
} }
.music-player-showcase > .player-screen > .split-pane-divider { .music-player-showcase > .player-screen > .split-pane-divider {
-fx-background-color: -color-dominant-border; -color-divider: -color-dominant-border;
-color-grabber: -color-dominant-border;
} }
.music-player-showcase > .player-screen > * > .playlist { .music-player-showcase > .player-screen > * > .playlist {

@ -2,16 +2,26 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
$divider-thickness: 2px !default; $divider-color: cfg.$scrollbar-color-track !default;
$grabber-length: 10px !default; $divider-color-pressed: -color-accent-emphasis !default;
$divider-thickness: 2px !default;
$grabber-color: cfg.$scrollbar-color-thumb !default;
$grabber-color-pressed: -color-accent-emphasis !default;
$grabber-length: 10px !default;
.split-pane { .split-pane {
-color-divider: $divider-color;
-color-divider-pressed: $divider-color-pressed;
-color-grabber: $grabber-color;
-color-grabber-pressed: $grabber-color-pressed;
-fx-background-color: transparent; -fx-background-color: transparent;
-fx-background-insets: 0; -fx-background-insets: 0;
-fx-padding: 0; -fx-padding: 0;
>.split-pane-divider { >.split-pane-divider {
-fx-background-color: cfg.$scrollbar-color-track; -fx-background-color: -color-divider;
-fx-padding: 0 $divider-thickness 0 $divider-thickness; -fx-padding: 0 $divider-thickness 0 $divider-thickness;
-fx-opacity: cfg.$scrollbar-opacity-inactive; -fx-opacity: cfg.$scrollbar-opacity-inactive;
@ -21,21 +31,21 @@ $grabber-length: 10px !default;
//-fx-border-width: 0 5 0 5; //-fx-border-width: 0 5 0 5;
>.horizontal-grabber { >.horizontal-grabber {
-fx-background-color: cfg.$scrollbar-color-thumb; -fx-background-color: -color-grabber;
-fx-padding: $grabber-length $divider-thickness $grabber-length $divider-thickness; -fx-padding: $grabber-length $divider-thickness $grabber-length $divider-thickness;
} }
>.vertical-grabber { >.vertical-grabber {
-fx-background-color: cfg.$scrollbar-color-thumb; -fx-background-color: -color-grabber;
-fx-padding: $divider-thickness $grabber-length $divider-thickness $grabber-length; -fx-padding: $divider-thickness $grabber-length $divider-thickness $grabber-length;
} }
&:pressed { &:pressed {
-fx-background-color: -color-accent-emphasis; -fx-background-color: -color-divider-pressed;
>.horizontal-grabber, >.horizontal-grabber,
>.vertical-grabber { >.vertical-grabber {
-fx-background-color: -color-accent-emphasis; -fx-background-color: -color-grabber-pressed;
} }
} }