Commit 14cfa4c3 authored by Artem Grinev's avatar Artem Grinev Committed by Nate Graham
Browse files

gtk3, gtk4: Progressbar and scale blue ocean

This commit introduces new style for progress bars and scales.

* A new function `gtkoverlay` is added to replicate `KColorUtils::overlayColors`
  used in Breeze QStyle using `linear-gradient` color overlaying
* ...and `gtkoverlayalpha` for the same thing plus alpha channel
* Scale bars with steps got tickmarks back
* Fixed broken Gnome Disks partition change scale margins

CCBUG: 443919
parent 1f157e9f
......@@ -22,6 +22,18 @@
@return unquote("mix(#{$c1},#{$c2},#{$m})");
}
@function gtkoverlay($c1, $c2) {
@return unquote("linear-gradient(#{$c2},#{$c2}),
linear-gradient(#{$c1},#{$c1})");
}
@function gtkoverlayalpha($c1, $c2, $a) {
$ca1: gtkalpha(#{$c1}, #{$a});
$ca2: gtkalpha(#{$c2}, #{$a});
@return unquote("linear-gradient(#{$ca2},#{$ca2}),
linear-gradient(#{$ca1},#{$ca1})");
}
//
// Theme color functions
//
......
......@@ -8,14 +8,14 @@ progressbar {
&.horizontal {
trough,
progress {
min-height: 6px;
min-height: 4px;
}
}
&.vertical {
trough,
progress {
min-width: 6px;
min-width: 4px;
}
}
......@@ -27,31 +27,40 @@ progressbar {
);
trough {
border: 0px solid transparent;
border: 1px solid;
border-radius: $r;
background-color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.3
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2)
);
}
&:backdrop trough {
background-color: gtkalpha(
gtk("@theme_button_foreground_backdrop"),
0.3
border-color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2
);
} // looks like states are not passed to the trough component here
}
progress {
background-color: gtk("@theme_selected_bg_color");
border: 0px solid transparent;
border-radius: 3px;
border: 1px solid;
margin: -1px;
border-radius: $r;
box-shadow: none; //needed for clipping
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)
);
border: 1px solid gtk("@theme_button_decoration_hover");
}
&:backdrop progress {
background-color: gtk(
"@theme_unfocused_selected_bg_color_alt"
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.5)
);
border-color: gtk(
"@theme_unfocused_selected_bg_color"
);
} // states not passed here as well
......
......@@ -4,6 +4,7 @@
* GtkScale *
************/
scale {
padding: 12px;
&.fine-tune {
&.trough {
margin: 8px;
......@@ -12,36 +13,41 @@ scale {
}
slider {
min-width: 18px;
min-height: 18px;
background-color: gtk(
"@theme_button_background_normal"
);
border: 1px solid gtk("@borders");
min-width: 16px;
min-height: 16px;
border: 1px solid gtkmix(gtk("@theme_bg_color"),gtk("@theme_button_foreground_normal"), 0.4);
border-radius: 50%;
box-shadow: none;
box-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.125);
background: gtk("@theme_button_background_normal");
margin: -9px;
&:hover {
border-style: solid;
border-width: 2px;
border-color: gtk("@theme_button_decoration_hover");
border-radius: 50%; // needed for double marks scales
&:backdrop {
background-color: gtk(
"@theme_button_background_backdrop"
);
border-color: gtk(
"@theme_button_decoration_hover_insensitive"
);
}
}
&:focus {
border-color: gtk("@theme_button_decoration_focus");
border-radius: 50%; // needed for double marks scales
&:backdrop {
border-color: gtk(
"@theme_button_decoration_focus_insensitive"
);
}
}
&:disabled {
border-style: solid; // needed for double marks scales or they'll get
border-radius: 50%; // overridden
background-color: gtkalpha(
gtk("@theme_button_background_insensitive"),
100
);
background-color: gtk("@theme_button_background_insensitive");
opacity: 1;
border-color: gtk("@insensitive_borders");
&:backdrop {
......@@ -55,8 +61,8 @@ scale {
}
}
&:active {
border: 2px solid
gtk("@theme_button_decoration_focus");
box-shadow: none;
background-color: gtk("@theme_button_background_normal");
&:backdrop {
background-color: gtk(
"@theme_button_background_normal"
......@@ -73,56 +79,117 @@ scale {
border-color: gtk("@unfocused_borders");
}
}
trough {
min-width: 6px;
min-height: 6px;
margin: 9px;
border: 0px solid;
min-width: 4px;
min-height: 4px;
border: 1px solid;
border-radius: $r;
background-color: $trough_color;
box-shadow: none;
&:disabled,
&.vertical:disabled {
border-color: $trough_color_insensitive;
background-color: $trough_color_insensitive;
box-shadow: none;
&:backdrop {
background-color: $trough_color_backdrop_insensitive;
border-color: $trough_color_backdrop_insensitive;
}
}
&:backdrop {
background-color: $trough_color_backdrop;
border-color: $trough_color_backdrop;
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2)
);
border-color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2
);
&:disabled, &.vertical:disabled {
background: gtkoverlayalpha(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2),
0.5
);
border-color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2 * 0.5
);
}
}
highlight {
border: 0px solid;
border-radius: 3px;
background-color: gtk("@theme_selected_bg_color");
border-color: gtk("@theme_selected_bg_color");
&.vertical {
background-color: gtk("@theme_selected_bg_color");
border-color: gtk("@theme_selected_bg_color");
}
margin: -1px;
border-radius: $r;
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)
);
border: 1px solid gtk("@theme_button_decoration_hover");
&:disabled {
background-color: gtk(
"@insensitive_selected_bg_color"
);
background: none;
border-color: transparent;
}
&:backdrop {
background-color: gtk(
"@theme_unfocused_selected_bg_color"
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.5)
);
border-color: gtk(
"@theme_unfocused_selected_bg_color"
);
&:disabled {
background-color: gtk(
"@insensitive_unfocused_selected_bg_color"
);
background: none;
border-color: transparent;
}
}
}
$_marks_length: 8px;
$_marks_distance: 1px;
marks {
color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2
);
font-feature-settings: "tnum";
}
label {
color: gtk("@theme_button_foreground_normal")
}
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
(horizontal, bottom, bottom, top),
(vertical, top, left, right),
(vertical, bottom, right, left) {
&.#{$scale_orient} marks {
&.#{$marks_class} {
margin-#{$marks_margin}: $_marks_distance;
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
}
}
&.#{$scale_orient}.fine-tune marks {
&.#{$marks_class} {
margin-#{$marks_margin}: $_marks_distance;
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px);
}
}
}
&.horizontal {
indicator {
min-height: $_marks_length;
min-width: 1px;
}
&.fine-tune indicator { min-height: ($_marks_length - 3px); }
}
&.vertical {
indicator {
min-height: 1px;
min-width: $_marks_length;
}
&.fine-tune indicator { min-width: ($_marks_length - 3px); }
}
}
......@@ -8,14 +8,14 @@ progressbar {
&.horizontal {
trough,
progress {
min-height: 6px;
min-height: 4px;
}
}
&.vertical {
trough,
progress {
min-width: 6px;
min-width: 4px;
}
}
......@@ -27,31 +27,40 @@ progressbar {
);
trough {
border: 0px solid transparent;
border: 1px solid;
border-radius: $r;
background-color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.3
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2)
);
}
&:backdrop trough {
background-color: gtkalpha(
gtk("@theme_button_foreground_backdrop"),
0.3
border-color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2
);
} // looks like states are not passed to the trough component here
}
progress {
background-color: gtk("@theme_selected_bg_color");
border: 0px solid transparent;
border-radius: 3px;
border: 1px solid;
margin: -1px;
border-radius: $r;
box-shadow: none; //needed for clipping
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)
);
border: 1px solid gtk("@theme_button_decoration_hover");
}
&:backdrop progress {
background-color: gtk(
"@theme_unfocused_selected_bg_color_alt"
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.5)
);
border-color: gtk(
"@theme_unfocused_selected_bg_color"
);
} // states not passed here as well
......
......@@ -4,6 +4,8 @@
* GtkScale *
************/
scale {
padding: 12px;
&.fine-tune {
&.trough {
margin: 8px;
......@@ -12,36 +14,30 @@ scale {
}
slider {
min-width: 18px;
min-height: 18px;
background-color: gtk(
"@theme_button_background_normal"
);
border: 1px solid gtk("@borders");
min-width: 16px;
min-height: 16px;
border: 1px solid gtkmix(gtk("@theme_bg_color"),gtk("@theme_button_foreground_normal"), 0.4);
border-radius: 50%;
box-shadow: none;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.125);
background: gtk("@theme_button_background_normal");
margin: -9px;
&:hover {
border-style: solid;
border-width: 2px;
border-color: gtk("@theme_button_decoration_hover");
border-radius: 50%; // needed for double marks scales
&:backdrop {
background-color: gtk(
"@theme_button_background_backdrop"
);
border-color: gtk(
"@theme_button_decoration_hover_insensitive"
);
}
}
&:disabled {
border-style: solid; // needed for double marks scales or they'll get
border-radius: 50%; // overridden
background-color: gtkalpha(
gtk("@theme_button_background_insensitive"),
100
);
background-color: gtk("@theme_button_background_insensitive");
opacity: 1;
border-color: gtk("@insensitive_borders");
&:backdrop {
......@@ -55,8 +51,8 @@ scale {
}
}
&:active {
border: 2px solid
gtk("@theme_button_decoration_focus");
box-shadow: none;
background-color: gtk("@theme_button_background_normal");
&:backdrop {
background-color: gtk(
"@theme_button_background_normal"
......@@ -73,56 +69,145 @@ scale {
border-color: gtk("@unfocused_borders");
}
}
&:focus-within slider {
border-color: gtk("@theme_button_decoration_focus");
border-radius: 50%; // needed for double marks scales
&:backdrop {
border-color: gtk(
"@theme_button_decoration_focus_insensitive"
);
}
}
trough {
min-width: 6px;
min-height: 6px;
margin: 9px;
border: 0px solid;
min-width: 4px;
min-height: 4px;
border: 1px solid;
border-radius: $r;
background-color: $trough_color;
box-shadow: none;
&:disabled,
&.vertical:disabled {
border-color: $trough_color_insensitive;
background-color: $trough_color_insensitive;
box-shadow: none;
&:backdrop {
background-color: $trough_color_backdrop_insensitive;
border-color: $trough_color_backdrop_insensitive;
}
}
&:backdrop {
background-color: $trough_color_backdrop;
border-color: $trough_color_backdrop;
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2)
);
border-color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2
);
&:disabled, &.vertical:disabled {
background: gtkoverlayalpha(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2),
0.5
);
border-color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2 * 0.5
);
}
}
highlight {
border: 0px solid;
border-radius: 3px;
background-color: gtk("@theme_selected_bg_color");
border-color: gtk("@theme_selected_bg_color");
&.vertical {
background-color: gtk("@theme_selected_bg_color");
border-color: gtk("@theme_selected_bg_color");
}
margin: -1px;
border-radius: $r;
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)
);
border: 1px solid gtk("@theme_button_decoration_hover");
&:disabled {
background-color: gtk(
"@insensitive_selected_bg_color"
);
background: none;
border-color: transparent;
}
&:backdrop {
background-color: gtk(
"@theme_unfocused_selected_bg_color"
background: gtkoverlay(
gtk("@theme_bg_color"),
gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.5)
);
border-color: gtk(
"@theme_unfocused_selected_bg_color"
);
&:disabled {
background-color: gtk(
"@insensitive_unfocused_selected_bg_color"
);
background: none;
border-color: transparent;
}
}
}
$_marks_length: 8px;
$_marks_distance: 1px;
> label {
color: gtk("@theme_button_foreground_normal")
}
&.horizontal {
> marks {
color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2
);
&.top { margin-bottom: $_marks_distance; }
&.bottom { margin-top: $_marks_distance; }
indicator {
background-color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2
);
min-height: $_marks_length;
min-width: 1px;
}
}
> value.left { margin-right: 9px; }
> value.right { margin-left: 9px; }
&.fine-tune >marks {
&.top { margin-top: 3px; }
&.bottom { margin-bottom: 3px; }
indicator { min-height: ($_marks_length - 3px); }
}
}
&.vertical {
> marks {
color: gtkalpha(
gtk("@theme_button_foreground_normal"),
0.2
);
&.top { margin-right: $_marks_distance; }
&.bottom { margin-left: $_marks_distance; }
indicator {
background-color: gtkalpha(
gtk("@theme_button_foreground_normal"),