mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2025-01-08 19:50:21 +00:00
Adwaita: simplify scrollbar styling
By the use of slider margins. In the process darken the overlay scrollbar trough in fine-tune mode to make it noticiable.
This commit is contained in:
Lapo Calamandrei
parent
85a539ce6d
commit
c9d0bd8a72
@ -1898,7 +1898,6 @@ column-header.button.dnd { // for treeview-like derive widgets
|
||||
}
|
||||
|
||||
// slider coloring
|
||||
%scrollbar_slider_coloring,
|
||||
.slider {
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
@ -1919,11 +1918,10 @@ column-header.button.dnd { // for treeview-like derive widgets
|
||||
&.overlay-indicator { // Overlay scrolling indicator
|
||||
-GtkRange-slider-width: 8px;
|
||||
|
||||
&.vertical .slider,
|
||||
&.horizontal .slider {
|
||||
.slider {
|
||||
background-color: transparentize($fg_color, 0.7);
|
||||
border-width: 2px;
|
||||
border-radius: 30px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.trough {
|
||||
@ -1935,53 +1933,38 @@ column-header.button.dnd { // for treeview-like derive widgets
|
||||
&.hovering {
|
||||
-GtkRange-slider-width: 13;
|
||||
|
||||
&.vertical {
|
||||
@extend %scrollbar_vertical_sizing;
|
||||
|
||||
.slider {
|
||||
@extend %scrollbar_slider_coloring;
|
||||
|
||||
border-width: 1px 1px 1px 2px; // see comments in the sizing part
|
||||
&:dir(rtl) { border-width: 1px 2px 1px 1px; }
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
@extend %scrollbar_horizontal_sizing;
|
||||
|
||||
.slider {
|
||||
@extend %scrollbar_slider_coloring;
|
||||
|
||||
border-width: 2px 1px 1px 1px;
|
||||
}
|
||||
}
|
||||
.slider { border-width: 1px; }
|
||||
|
||||
.trough {
|
||||
border-color: transparentize($borders_color, 0.3);
|
||||
background-color: transparentize($scrollbar_bg_color, 0.3);
|
||||
}
|
||||
|
||||
&.fine-tune {
|
||||
|
||||
.slider { border-width: 3px; }
|
||||
|
||||
.trough { background-color: if($variant=='light', darken($scrollbar_bg_color, 3%), lighten($scrollbar_bg_color, 3%)); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// sizing
|
||||
%scrollbar_vertical_sizing,
|
||||
&.vertical {
|
||||
.slider {
|
||||
border-width: 3px 3px 3px 4px; // This is used as a margin actually, it's uneven since the
|
||||
// trough border needs to be compensated
|
||||
border-radius: 6px;
|
||||
border-top-left-radius: 7px 6px; // uneven vertical/horizontal radius since borders are uneven
|
||||
border-bottom-left-radius: 7px 6px; //
|
||||
// borders and margins
|
||||
.slider {
|
||||
border-width: 3px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
&.fine-tune { border-width: 4px 4px 4px 5px; }
|
||||
&.fine-tune .slider { border-width: 4px; }
|
||||
|
||||
&.vertical {
|
||||
|
||||
.slider {
|
||||
margin-left: 1px;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-width: 3px 4px 3px 3px;
|
||||
border-radius: 6px;
|
||||
border-top-right-radius: 7px 6px;
|
||||
border-bottom-right-radius: 7px 6px;
|
||||
|
||||
&.fine-tune { border-width: 4px 5px 4px 4px; }
|
||||
margin-left: 0;
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1995,15 +1978,10 @@ column-header.button.dnd { // for treeview-like derive widgets
|
||||
}
|
||||
}
|
||||
|
||||
%scrollbar_horizontal_sizing,
|
||||
&.horizontal {
|
||||
.slider {
|
||||
border-width: 4px 3px 3px 3px;
|
||||
border-radius: 6px;
|
||||
border-top-right-radius: 7px 5px; // This is actually bogus, to workaround a gtk+ border radius drawing issue
|
||||
border-top-left-radius: 6px 7px;
|
||||
|
||||
&.fine-tune { border-width: 5px 4px 4px 4px; }
|
||||
.slider {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.trough { border-top-style: solid; }
|
||||
|
||||
@ -2408,71 +2408,57 @@ column-header .titlebar .button.titlebutton,
|
||||
.scrollbar .trough:backdrop {
|
||||
background-color: #323737;
|
||||
border-color: #1e2222; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar.overlay-indicator.hovering.horizontal .slider,
|
||||
.scrollbar .slider {
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
background-color: #818584;
|
||||
background-clip: padding-box; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:hover, .scrollbar.overlay-indicator.hovering.vertical .slider:hover, .scrollbar.overlay-indicator.dragging.horizontal .slider:hover, .scrollbar.overlay-indicator.hovering.horizontal .slider:hover,
|
||||
.scrollbar .slider:hover {
|
||||
background-color: #a5a8a6; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, .scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, .scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, .scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active,
|
||||
.scrollbar .slider:prelight:active {
|
||||
background-color: #2a76c6; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, .scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, .scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, .scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop,
|
||||
.scrollbar .slider:backdrop {
|
||||
background-color: #5d6161; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:insensitive, .scrollbar.overlay-indicator.hovering.vertical .slider:insensitive, .scrollbar.overlay-indicator.dragging.horizontal .slider:insensitive, .scrollbar.overlay-indicator.hovering.horizontal .slider:insensitive,
|
||||
.scrollbar .slider:insensitive {
|
||||
background-color: transparent; }
|
||||
.scrollbar.overlay-indicator {
|
||||
-GtkRange-slider-width: 8px; }
|
||||
.scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider {
|
||||
.scrollbar.overlay-indicator .slider {
|
||||
background-color: rgba(238, 238, 236, 0.3);
|
||||
border-width: 2px;
|
||||
border-radius: 30px; }
|
||||
border-radius: 100px; }
|
||||
.scrollbar.overlay-indicator .trough {
|
||||
border-color: transparent;
|
||||
background-color: transparent; }
|
||||
.scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering {
|
||||
-GtkRange-slider-width: 13; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical .slider {
|
||||
border-width: 1px 1px 1px 2px; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl) {
|
||||
border-width: 1px 2px 1px 1px; }
|
||||
.scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar.overlay-indicator.hovering.horizontal .slider {
|
||||
border-width: 2px 1px 1px 1px; }
|
||||
.scrollbar.overlay-indicator.dragging .slider, .scrollbar.overlay-indicator.hovering .slider {
|
||||
border-width: 1px; }
|
||||
.scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
|
||||
border-color: rgba(28, 31, 31, 0.7);
|
||||
background-color: rgba(40, 44, 44, 0.7); }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.vertical .slider {
|
||||
border-width: 3px 3px 3px 4px;
|
||||
border-radius: 6px;
|
||||
border-top-left-radius: 7px 6px;
|
||||
border-bottom-left-radius: 7px 6px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider.fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider.fine-tune, .scrollbar.vertical .slider.fine-tune {
|
||||
border-width: 4px 4px 4px 5px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl), .scrollbar.vertical .slider:dir(rtl) {
|
||||
border-width: 3px 4px 3px 3px;
|
||||
border-radius: 6px;
|
||||
border-top-right-radius: 7px 6px;
|
||||
border-bottom-right-radius: 7px 6px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl).fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl).fine-tune, .scrollbar.vertical .slider:dir(rtl).fine-tune {
|
||||
border-width: 4px 5px 4px 4px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .trough, .scrollbar.vertical .trough {
|
||||
.scrollbar.overlay-indicator.dragging.fine-tune .slider, .scrollbar.overlay-indicator.hovering.fine-tune .slider {
|
||||
border-width: 3px; }
|
||||
.scrollbar.overlay-indicator.dragging.fine-tune .trough, .scrollbar.overlay-indicator.hovering.fine-tune .trough {
|
||||
background-color: #2f3434; }
|
||||
.scrollbar .slider {
|
||||
border-width: 3px;
|
||||
border-radius: 100px; }
|
||||
.scrollbar.fine-tune .slider {
|
||||
border-width: 4px; }
|
||||
.scrollbar.vertical .slider {
|
||||
margin-left: 1px; }
|
||||
.scrollbar.vertical .slider:dir(rtl) {
|
||||
margin-left: 0;
|
||||
margin-right: 1px; }
|
||||
.scrollbar.vertical .trough {
|
||||
border-left-style: solid; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough:dir(rtl), .scrollbar .scrollbar.overlay-indicator.hovering.vertical .trough:dir(rtl), .scrollbar.vertical .trough:dir(rtl) {
|
||||
.scrollbar.vertical .trough:dir(rtl) {
|
||||
border-left-style: none;
|
||||
border-right-style: solid; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar.horizontal .slider {
|
||||
border-width: 4px 3px 3px 3px;
|
||||
border-radius: 6px;
|
||||
border-top-right-radius: 7px 5px;
|
||||
border-top-left-radius: 6px 7px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider.fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .slider.fine-tune, .scrollbar.horizontal .slider.fine-tune {
|
||||
border-width: 5px 4px 4px 4px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.horizontal .trough, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .trough, .scrollbar.horizontal .trough {
|
||||
.scrollbar.horizontal .slider {
|
||||
margin-top: 1px; }
|
||||
.scrollbar.horizontal .trough {
|
||||
border-top-style: solid; }
|
||||
|
||||
.scrollbars-junction,
|
||||
|
||||
@ -2405,71 +2405,57 @@ column-header .titlebar .button.titlebutton,
|
||||
.scrollbar .trough:backdrop {
|
||||
background-color: #e5e5e5;
|
||||
border-color: #a8a8a8; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar.overlay-indicator.hovering.horizontal .slider,
|
||||
.scrollbar .slider {
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
background-color: #a0a3a3;
|
||||
background-clip: padding-box; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:hover, .scrollbar.overlay-indicator.hovering.vertical .slider:hover, .scrollbar.overlay-indicator.dragging.horizontal .slider:hover, .scrollbar.overlay-indicator.hovering.horizontal .slider:hover,
|
||||
.scrollbar .slider:hover {
|
||||
background-color: #7a7e7f; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, .scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, .scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, .scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active,
|
||||
.scrollbar .slider:prelight:active {
|
||||
background-color: #2a76c6; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, .scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, .scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, .scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop,
|
||||
.scrollbar .slider:backdrop {
|
||||
background-color: #c6c7c8; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:insensitive, .scrollbar.overlay-indicator.hovering.vertical .slider:insensitive, .scrollbar.overlay-indicator.dragging.horizontal .slider:insensitive, .scrollbar.overlay-indicator.hovering.horizontal .slider:insensitive,
|
||||
.scrollbar .slider:insensitive {
|
||||
background-color: transparent; }
|
||||
.scrollbar.overlay-indicator {
|
||||
-GtkRange-slider-width: 8px; }
|
||||
.scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider {
|
||||
.scrollbar.overlay-indicator .slider {
|
||||
background-color: rgba(46, 52, 54, 0.3);
|
||||
border-width: 2px;
|
||||
border-radius: 30px; }
|
||||
border-radius: 100px; }
|
||||
.scrollbar.overlay-indicator .trough {
|
||||
border-color: transparent;
|
||||
background-color: transparent; }
|
||||
.scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering {
|
||||
-GtkRange-slider-width: 13; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical .slider {
|
||||
border-width: 1px 1px 1px 2px; }
|
||||
.scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl) {
|
||||
border-width: 1px 2px 1px 1px; }
|
||||
.scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar.overlay-indicator.hovering.horizontal .slider {
|
||||
border-width: 2px 1px 1px 1px; }
|
||||
.scrollbar.overlay-indicator.dragging .slider, .scrollbar.overlay-indicator.hovering .slider {
|
||||
border-width: 1px; }
|
||||
.scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
|
||||
border-color: rgba(161, 161, 161, 0.7);
|
||||
background-color: rgba(219, 219, 219, 0.7); }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.vertical .slider {
|
||||
border-width: 3px 3px 3px 4px;
|
||||
border-radius: 6px;
|
||||
border-top-left-radius: 7px 6px;
|
||||
border-bottom-left-radius: 7px 6px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider.fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider.fine-tune, .scrollbar.vertical .slider.fine-tune {
|
||||
border-width: 4px 4px 4px 5px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl), .scrollbar.vertical .slider:dir(rtl) {
|
||||
border-width: 3px 4px 3px 3px;
|
||||
border-radius: 6px;
|
||||
border-top-right-radius: 7px 6px;
|
||||
border-bottom-right-radius: 7px 6px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl).fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl).fine-tune, .scrollbar.vertical .slider:dir(rtl).fine-tune {
|
||||
border-width: 4px 5px 4px 4px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .trough, .scrollbar.vertical .trough {
|
||||
.scrollbar.overlay-indicator.dragging.fine-tune .slider, .scrollbar.overlay-indicator.hovering.fine-tune .slider {
|
||||
border-width: 3px; }
|
||||
.scrollbar.overlay-indicator.dragging.fine-tune .trough, .scrollbar.overlay-indicator.hovering.fine-tune .trough {
|
||||
background-color: lightgray; }
|
||||
.scrollbar .slider {
|
||||
border-width: 3px;
|
||||
border-radius: 100px; }
|
||||
.scrollbar.fine-tune .slider {
|
||||
border-width: 4px; }
|
||||
.scrollbar.vertical .slider {
|
||||
margin-left: 1px; }
|
||||
.scrollbar.vertical .slider:dir(rtl) {
|
||||
margin-left: 0;
|
||||
margin-right: 1px; }
|
||||
.scrollbar.vertical .trough {
|
||||
border-left-style: solid; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough:dir(rtl), .scrollbar .scrollbar.overlay-indicator.hovering.vertical .trough:dir(rtl), .scrollbar.vertical .trough:dir(rtl) {
|
||||
.scrollbar.vertical .trough:dir(rtl) {
|
||||
border-left-style: none;
|
||||
border-right-style: solid; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar.horizontal .slider {
|
||||
border-width: 4px 3px 3px 3px;
|
||||
border-radius: 6px;
|
||||
border-top-right-radius: 7px 5px;
|
||||
border-top-left-radius: 6px 7px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider.fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .slider.fine-tune, .scrollbar.horizontal .slider.fine-tune {
|
||||
border-width: 5px 4px 4px 4px; }
|
||||
.scrollbar .scrollbar.overlay-indicator.dragging.horizontal .trough, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .trough, .scrollbar.horizontal .trough {
|
||||
.scrollbar.horizontal .slider {
|
||||
margin-top: 1px; }
|
||||
.scrollbar.horizontal .trough {
|
||||
border-top-style: solid; }
|
||||
|
||||
.scrollbars-junction,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user