Improve Nord theme
Redesign slider and pagination to rectangular form.
This commit is contained in:
mkpaz
parent
1286854da5
commit
2716cca2a0
@ -16,8 +16,8 @@ import static javafx.geometry.Orientation.VERTICAL;
|
||||
public class SliderPage extends AbstractPage {
|
||||
|
||||
public static final String NAME = "Slider";
|
||||
private static final int SLIDER_SIZE = 200;
|
||||
private static final int SPACING = 40;
|
||||
private static final int SLIDER_SIZE = 180;
|
||||
private static final int SPACING = 20;
|
||||
|
||||
@Override
|
||||
public String getName() { return NAME; }
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
|
||||
@use "../settings/icons";
|
||||
|
||||
$button-radius: 10em !default;
|
||||
|
||||
.pagination {
|
||||
-fx-padding: 0;
|
||||
-fx-arrow-button-gap: 4;
|
||||
@ -55,17 +57,17 @@
|
||||
-fx-spacing: 0;
|
||||
|
||||
>.left-arrow-button {
|
||||
-fx-background-radius: 10em;
|
||||
-fx-background-radius: $button-radius;
|
||||
-fx-padding: 0 0.25em 0 0.083em; // center arrow inside the circle
|
||||
}
|
||||
|
||||
>.right-arrow-button {
|
||||
-fx-background-radius: 10em;
|
||||
-fx-background-radius: $button-radius;
|
||||
-fx-padding: 0 0.083em 0 0.25em; // center arrow inside the circle
|
||||
}
|
||||
|
||||
>.bullet-button {
|
||||
-fx-background-radius: 0, 10em, 10em;
|
||||
-fx-background-radius: 0, $button-radius, $button-radius;
|
||||
-fx-background-color: transparent, -color-border-default, -color-bg-subtle;
|
||||
-fx-background-insets: 0, 5, 6;
|
||||
|
||||
|
||||
@ -3,21 +3,25 @@
|
||||
@use "../settings/config" as cfg;
|
||||
@use "sass:math";
|
||||
|
||||
$color-thumb: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
|
||||
$color-thumb-border: $color-thumb !default;
|
||||
$color-track: -color-border-muted !default;
|
||||
$color-track-progress: -color-accent-emphasis !default;
|
||||
$color-tick: -color-fg-muted !default;
|
||||
$color-thumb: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
|
||||
$color-thumb-border: $color-thumb !default;
|
||||
$color-thumb-large: if(cfg.$darkMode, $color-thumb, -color-fg-emphasis) !default;
|
||||
$color-thumb-large-border: if(cfg.$darkMode, $color-thumb, -color-accent-emphasis) !default;
|
||||
$color-track: -color-border-muted !default;
|
||||
$color-track-progress: -color-accent-emphasis !default;
|
||||
$color-tick: -color-fg-muted !default;
|
||||
|
||||
// this is padding ...
|
||||
$thumb-size: (
|
||||
"small": 8px,
|
||||
"medium": 10px,
|
||||
"large": 12px
|
||||
"small-h" : 8px,
|
||||
"small-w" : 8px,
|
||||
"medium-h": 10px,
|
||||
"medium-w": 10px,
|
||||
"large-h" : 12px,
|
||||
"large-w" : 12px
|
||||
) !default;
|
||||
|
||||
// ... in combination with radius it can be converted to square or rectange
|
||||
$thumb-radius: 10em !default;
|
||||
$thumb-border-width: 2px !default;
|
||||
|
||||
// visual track height (or width)
|
||||
$track-size: (
|
||||
@ -40,27 +44,14 @@ $tick-minor-size: 3px !default;
|
||||
-color-slider-tick: $color-tick;
|
||||
|
||||
&.large {
|
||||
-color-slider-thumb: if(cfg.$darkMode, $color-thumb, -color-fg-emphasis);
|
||||
-color-slider-thumb-border: if(cfg.$darkMode, $color-thumb, -color-accent-emphasis);
|
||||
-color-slider-thumb: $color-thumb-large;
|
||||
-color-slider-thumb-border: $color-thumb-large-border;
|
||||
}
|
||||
|
||||
>.thumb {
|
||||
-fx-background-color: -color-slider-thumb-border, -color-slider-thumb;
|
||||
-fx-background-insets: 0, 2px;
|
||||
-fx-background-radius: $thumb-radius;
|
||||
-fx-padding: map-get($thumb-size, "medium");
|
||||
}
|
||||
|
||||
&.small {
|
||||
>.thumb {
|
||||
-fx-padding: map-get($thumb-size, "small");
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
>.thumb {
|
||||
-fx-padding: map-get($thumb-size, "large");
|
||||
}
|
||||
}
|
||||
|
||||
>.track {
|
||||
@ -95,39 +86,50 @@ $tick-minor-size: 3px !default;
|
||||
|
||||
// center thumb over track horizontally
|
||||
&:horizontal {
|
||||
>.thumb {
|
||||
-fx-padding: map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w");
|
||||
}
|
||||
>.track {
|
||||
-fx-padding: map-get($thumb-size, "medium") 0 map-get($thumb-size, "medium") 0;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0
|
||||
calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0;
|
||||
-fx-padding: map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h") 0;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
|
||||
calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
|
||||
}
|
||||
>.progress {
|
||||
-fx-background-radius: $track-radius;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0
|
||||
calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
|
||||
calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.small:horizontal {
|
||||
>.thumb {
|
||||
-fx-padding: map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w");
|
||||
}
|
||||
>.track {
|
||||
-fx-padding: map-get($thumb-size, "small") 0 map-get($thumb-size, "small") 0;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0
|
||||
calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0;
|
||||
-fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
|
||||
calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
|
||||
}
|
||||
>.progress {
|
||||
-fx-padding: map-get($thumb-size, "small") 0 map-get($thumb-size, "small") 0;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0
|
||||
calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0;
|
||||
-fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
|
||||
calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.large:horizontal {
|
||||
>.thumb {
|
||||
-fx-padding: map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "smlargeall-w");
|
||||
}
|
||||
>.track {
|
||||
-fx-padding: map-get($track-size, "large") 0 map-get($track-size, "large") 0;
|
||||
-fx-background-insets: 0;
|
||||
-fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
|
||||
calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
|
||||
}
|
||||
>.progress {
|
||||
-fx-padding: map-get($track-size, "large") 0 map-get($track-size, "large") 0;
|
||||
-fx-background-insets: 0;
|
||||
-fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
|
||||
-fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
|
||||
calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,39 +139,50 @@ $tick-minor-size: 3px !default;
|
||||
|
||||
// center thumb over track vertically
|
||||
&:vertical {
|
||||
>.thumb {
|
||||
-fx-padding: map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h");
|
||||
}
|
||||
>.track {
|
||||
-fx-padding: 0 map-get($thumb-size, "medium") 0 map-get($thumb-size, "medium");
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium"))
|
||||
0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium"));
|
||||
-fx-padding: 0 map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h");
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
|
||||
0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
|
||||
}
|
||||
>.progress {
|
||||
-fx-background-radius: $thumb-radius $thumb-radius $track-radius $track-radius;
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium"))
|
||||
0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium"));
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
|
||||
0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
|
||||
}
|
||||
}
|
||||
|
||||
&.small:vertical {
|
||||
>.thumb {
|
||||
-fx-padding: map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h");
|
||||
}
|
||||
>.track {
|
||||
-fx-padding: 0 map-get($thumb-size, "small") 0 map-get($thumb-size, "small");
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "small") - map-get($track-size, "small"))
|
||||
0 calc(map-get($thumb-size, "small") - map-get($track-size, "small"));
|
||||
-fx-padding: 0 map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h");
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
|
||||
0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
|
||||
}
|
||||
>.progress {
|
||||
-fx-padding: map-get($thumb-size, "small") 0 map-get($thumb-size, "small") 0;
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "small") - map-get($track-size, "small"))
|
||||
0 calc(map-get($thumb-size, "small") - map-get($track-size, "small"));
|
||||
-fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
|
||||
0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
|
||||
}
|
||||
}
|
||||
|
||||
&.large:vertical {
|
||||
>.thumb {
|
||||
-fx-padding: map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h");
|
||||
}
|
||||
>.track {
|
||||
-fx-padding: 0 map-get($track-size, "large") 0 map-get($track-size, "large");
|
||||
-fx-background-insets: 0;
|
||||
-fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
|
||||
0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
|
||||
}
|
||||
>.progress {
|
||||
-fx-padding: 0 map-get($track-size, "large") 0 map-get($track-size, "large");
|
||||
-fx-background-insets: 0;
|
||||
-fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
|
||||
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
|
||||
0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -151,13 +151,27 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
|
||||
$color-menubar-bg-hover: -color-base-7
|
||||
);
|
||||
|
||||
@forward "components/pagination" as pagination-* with (
|
||||
$button-radius: 1
|
||||
);
|
||||
|
||||
@forward "components/slider" as slider-* with (
|
||||
$thumb-size: (
|
||||
"small-h": 8px, "medium-h": 10px, "large-h": 14px,
|
||||
"small-w": 4px, "medium-w": 4px, "large-w": 4px
|
||||
),
|
||||
$track-size: ("small": 2px, "medium": 4px, "large": 12px),
|
||||
$thumb-radius: 1,
|
||||
$track-radius: 1
|
||||
);
|
||||
|
||||
@forward "components/toolbar" as toolbar-* with (
|
||||
$color-bg-selected: -color-base-7
|
||||
);
|
||||
|
||||
@forward "components/toggle-switch" as toggle-switch-* with (
|
||||
$thumb-radius: 1px,
|
||||
$thumb-area-radius: 1px,
|
||||
$thumb-radius: 1,
|
||||
$thumb-area-radius: 1,
|
||||
$thumb-padding: 0.8em,
|
||||
$thumb-area-padding: 0.8em 1.6em 0.8em 1.6em,
|
||||
$thumb-border-width: 3px
|
||||
|
||||
@ -137,6 +137,22 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
|
||||
|
||||
@use "general";
|
||||
|
||||
@forward "components/pagination" as pagination-* with (
|
||||
$button-radius: 1
|
||||
);
|
||||
|
||||
@forward "components/slider" as slider-* with (
|
||||
$color-thumb-large: -color-accent-emphasis,
|
||||
$color-thumb-large-border: -color-accent-emphasis,
|
||||
$thumb-size: (
|
||||
"small-h": 8px, "medium-h": 10px, "large-h": 14px,
|
||||
"small-w": 4px, "medium-w": 4px, "large-w": 4px
|
||||
),
|
||||
$track-size: ("small": 2px, "medium": 4px, "large": 12px),
|
||||
$thumb-radius: 0,
|
||||
$track-radius: 0
|
||||
);
|
||||
|
||||
@forward "components/toggle-switch" as toggle-switch-* with (
|
||||
$thumb-radius: 1px,
|
||||
$thumb-area-radius: 1px,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user