mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-17 06:10:15 +00:00
Adwaita: scrollbar styling overhaul
- finally added the missing border; - proper backdrop state styling; - tweaked overlay indicator; - sidebar special casing gone for now.
This commit is contained in:
Lapo Calamandrei
parent
22ad7b7782
commit
d859cf19f6
@ -16,6 +16,8 @@ $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($se
|
||||
$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%));
|
||||
$top_hilight: $borders_edge;
|
||||
|
||||
$scrollbar_bg_color: darken($bg_color, 7%);
|
||||
|
||||
$warning_color: #f57900;
|
||||
$error_color: #cc0000;
|
||||
$success_color: if($variant == 'light', #73d216, darken(#73d216,10%));
|
||||
@ -46,3 +48,5 @@ $backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color,
|
||||
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
|
||||
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
|
||||
$backdrop_sidebar_bg_color: lighten($backdrop_bg_color,5%);
|
||||
|
||||
$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
|
||||
|
||||
@ -1872,87 +1872,157 @@ column-header.button.dnd { // for treeview-like derive widgets
|
||||
**************/
|
||||
|
||||
.scrollbar {
|
||||
background-clip: padding-box;
|
||||
background-image: none;
|
||||
border-style: solid;
|
||||
-GtkRange-slider-width: 13;
|
||||
-GtkRange-trough-border: 1;
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
-GtkRange-slider-width: 13;
|
||||
-GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
|
||||
// sadly can't be in '.slider'
|
||||
// where it belongs
|
||||
|
||||
-GtkRange-stepper-spacing: 0;
|
||||
-GtkRange-trough-under-steppers: 1;
|
||||
|
||||
.button {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// trough coloring
|
||||
.trough {
|
||||
@extend .scrollbars-junction;
|
||||
&.right { border-right: 1px solid $borders_color; }
|
||||
background-color: $scrollbar_bg_color;
|
||||
border: 1px none $borders_color;
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_scrollbar_bg_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
}
|
||||
}
|
||||
|
||||
// slider coloring
|
||||
%scrollbar_slider_coloring,
|
||||
.slider {
|
||||
border-radius: 20px;
|
||||
border: 3px solid transparent; //margin :/
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
background-color: mix($bg_color, $fg_color, 70%);
|
||||
background-clip: padding-box; // needed since we use the borders as margins
|
||||
|
||||
&:hover { background-color: mix($bg_color, $fg_color, 50%); }
|
||||
|
||||
&:prelight:active { background-color: $selected_bg_color; }
|
||||
|
||||
&.fine-tune {
|
||||
border-width: 5px;
|
||||
&:prelight:active { background-color: $selected_bg_color; }
|
||||
}
|
||||
&:backdrop { background-color: mix($backdrop_bg_color, $backdrop_fg_color, 60%); }
|
||||
|
||||
&:backdrop,
|
||||
&:insensitive {
|
||||
background-color: mix($bg_color, $fg_color, 90%);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar &.overlay-indicator,
|
||||
&.overlay-indicator { // overlay scrollbars
|
||||
&.overlay-indicator { // Overlay scrolling indicator
|
||||
-GtkRange-slider-width: 8px;
|
||||
|
||||
.slider {
|
||||
&.vertical .slider,
|
||||
&.horizontal .slider {
|
||||
background-color: transparentize($fg_color, 0.7);
|
||||
border-width: 2px;
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.trough {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.hovering,
|
||||
&.dragging {
|
||||
-GtkRange-slider-width: 15px;
|
||||
&.dragging,
|
||||
&.hovering {
|
||||
-GtkRange-slider-width: 13;
|
||||
|
||||
.slider {
|
||||
border-width: 3px;
|
||||
background-color: transparentize($fg_color, 0.7);
|
||||
&:active { background-color: $fg_color; }
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
||||
.trough {
|
||||
border: none; // to override sidebar styling
|
||||
border-radius: 0; //
|
||||
background-color: if($variant == 'light', transparentize($fg_color, 0.9),
|
||||
transparentize($fg_color, 0.95));
|
||||
border-color: transparentize($borders_color, 0.3);
|
||||
background-color: transparentize($scrollbar_bg_color, 0.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; //
|
||||
|
||||
&.fine-tune { border-width: 4px 4px 4px 5px; }
|
||||
|
||||
&: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; }
|
||||
}
|
||||
}
|
||||
|
||||
.trough {
|
||||
border-left-style: solid;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%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; }
|
||||
}
|
||||
|
||||
.trough { border-top-style: solid; }
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbars-junction,
|
||||
.scrollbars-junction.frame { // the small square between two scrollbars
|
||||
border-color: transparent;
|
||||
background-color: darken($bg_color, 5%);
|
||||
&:backdrop { background-color: transparent; }
|
||||
// the border image is used to add the missing dot between the borders, details, details, details...
|
||||
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
|
||||
background-color: $scrollbar_bg_color;
|
||||
|
||||
&:dir(rtl) { border-image-slice: 0 1 0 0; }
|
||||
|
||||
&:backdrop {
|
||||
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
|
||||
background-color: $backdrop_scrollbar_bg_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2821,7 +2891,7 @@ GtkFileChooserDialog {
|
||||
.sidebar {
|
||||
border: none;
|
||||
background-color: $sidebar_bg_color;
|
||||
|
||||
/*
|
||||
.scrollbar {
|
||||
&.trough {
|
||||
background-color: darken($bg_color,10%);
|
||||
@ -2835,7 +2905,7 @@ GtkFileChooserDialog {
|
||||
&:hover { background-color: lighten($bg_color, 10%); }
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
&:backdrop {
|
||||
background-color: $backdrop_sidebar_bg_color;
|
||||
}
|
||||
|
||||
@ -2407,13 +2407,10 @@ column-header .titlebar .button.titlebutton,
|
||||
* Scrollbars *
|
||||
**************/
|
||||
.scrollbar {
|
||||
background-clip: padding-box;
|
||||
background-image: none;
|
||||
border-style: solid;
|
||||
-GtkRange-slider-width: 13;
|
||||
-GtkRange-trough-border: 1;
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
-GtkRange-slider-width: 13;
|
||||
-GtkScrollbar-min-slider-length: 42;
|
||||
-GtkRange-stepper-spacing: 0;
|
||||
-GtkRange-trough-under-steppers: 1; }
|
||||
@ -2421,50 +2418,91 @@ column-header .titlebar .button.titlebutton,
|
||||
.scrollbar .titlebar .button.titlebutton,
|
||||
.titlebar .scrollbar .button.titlebutton {
|
||||
border: none; }
|
||||
.scrollbar .trough.right {
|
||||
border-right: 1px solid #1c1f1f; }
|
||||
.scrollbar .trough {
|
||||
background-color: #282c2c;
|
||||
border: 1px none #1c1f1f; }
|
||||
.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-radius: 20px;
|
||||
border: 3px solid transparent;
|
||||
background-color: #6f7372; }
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
background-color: #6f7372;
|
||||
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: #939695; }
|
||||
.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: #215d9c; }
|
||||
.scrollbar .slider.fine-tune {
|
||||
border-width: 5px; }
|
||||
.scrollbar .slider.fine-tune:prelight:active {
|
||||
background-color: #215d9c; }
|
||||
.scrollbar .slider:backdrop, .scrollbar .slider:insensitive {
|
||||
background-color: #4b5050; }
|
||||
.sidebar .scrollbar.overlay-indicator, .scrollbar.overlay-indicator {
|
||||
-GtkRange-slider-width: 8px; }
|
||||
.sidebar .scrollbar.overlay-indicator .slider, .scrollbar.overlay-indicator .slider {
|
||||
border-width: 2px;
|
||||
background-color: rgba(238, 238, 236, 0.2); }
|
||||
.sidebar .scrollbar.overlay-indicator .trough, .scrollbar.overlay-indicator .trough {
|
||||
.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; }
|
||||
.sidebar .scrollbar.overlay-indicator.hovering, .sidebar .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering, .scrollbar.overlay-indicator.dragging {
|
||||
-GtkRange-slider-width: 15px; }
|
||||
.sidebar .scrollbar.overlay-indicator.hovering .slider, .sidebar .scrollbar.overlay-indicator.dragging .slider, .scrollbar.overlay-indicator.hovering .slider, .scrollbar.overlay-indicator.dragging .slider {
|
||||
border-width: 3px;
|
||||
background-color: rgba(238, 238, 236, 0.3); }
|
||||
.sidebar .scrollbar.overlay-indicator.hovering .slider:active, .sidebar .scrollbar.overlay-indicator.dragging .slider:active, .scrollbar.overlay-indicator.hovering .slider:active, .scrollbar.overlay-indicator.dragging .slider:active {
|
||||
background-color: #eeeeec; }
|
||||
.sidebar .scrollbar.overlay-indicator.hovering .trough, .sidebar .scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough, .scrollbar.overlay-indicator.dragging .trough {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: rgba(238, 238, 236, 0.05); }
|
||||
.scrollbar.overlay-indicator {
|
||||
-GtkRange-slider-width: 8px; }
|
||||
.scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider {
|
||||
background-color: rgba(238, 238, 236, 0.3);
|
||||
border-width: 2px;
|
||||
border-radius: 30px; }
|
||||
.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 .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 {
|
||||
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) {
|
||||
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 {
|
||||
border-top-style: solid; }
|
||||
|
||||
.scrollbars-junction, .scrollbar .trough,
|
||||
.scrollbars-junction.frame,
|
||||
.scrollbar .frame.trough {
|
||||
.scrollbars-junction,
|
||||
.scrollbars-junction.frame {
|
||||
border-color: transparent;
|
||||
background-color: #2d3232; }
|
||||
.scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
|
||||
.scrollbars-junction.frame:backdrop,
|
||||
.scrollbar .frame.trough:backdrop {
|
||||
background-color: transparent; }
|
||||
border-image: linear-gradient(to bottom, #1c1f1f 1px, transparent 1px) 0 0 0 1/0 1px stretch;
|
||||
background-color: #282c2c; }
|
||||
.scrollbars-junction:dir(rtl),
|
||||
.scrollbars-junction.frame:dir(rtl) {
|
||||
border-image-slice: 0 1 0 0; }
|
||||
.scrollbars-junction:backdrop,
|
||||
.scrollbars-junction.frame:backdrop {
|
||||
border-image-source: linear-gradient(to bottom, #1e2222 1px, transparent 1px);
|
||||
background-color: #323737; }
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
@ -3937,16 +3975,22 @@ GtkFileChooserDialog .dialog-action-box {
|
||||
***********/
|
||||
.sidebar {
|
||||
border: none;
|
||||
background-color: #454c4c; }
|
||||
.sidebar .scrollbar.trough {
|
||||
background-color: #212424;
|
||||
border-radius: 6px;
|
||||
border-width: 2px;
|
||||
border-color: transparent; }
|
||||
.sidebar .scrollbar.slider {
|
||||
background-color: #454c4c; }
|
||||
.sidebar .scrollbar.slider:hover {
|
||||
background-color: #515a5a; }
|
||||
background-color: #454c4c;
|
||||
/*
|
||||
.scrollbar {
|
||||
&.trough {
|
||||
background-color: darken($bg_color,10%);
|
||||
border-radius: 6px;
|
||||
border-width: 2px;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.slider {
|
||||
background-color: $sidebar_bg_color;
|
||||
&:hover { background-color: lighten($bg_color, 10%); }
|
||||
}
|
||||
}
|
||||
*/ }
|
||||
.sidebar:backdrop {
|
||||
background-color: #454c4c; }
|
||||
.sidebar:selected {
|
||||
|
||||
@ -2404,13 +2404,10 @@ column-header .titlebar .button.titlebutton,
|
||||
* Scrollbars *
|
||||
**************/
|
||||
.scrollbar {
|
||||
background-clip: padding-box;
|
||||
background-image: none;
|
||||
border-style: solid;
|
||||
-GtkRange-slider-width: 13;
|
||||
-GtkRange-trough-border: 1;
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
-GtkRange-slider-width: 13;
|
||||
-GtkScrollbar-min-slider-length: 42;
|
||||
-GtkRange-stepper-spacing: 0;
|
||||
-GtkRange-trough-under-steppers: 1; }
|
||||
@ -2418,50 +2415,91 @@ column-header .titlebar .button.titlebutton,
|
||||
.scrollbar .titlebar .button.titlebutton,
|
||||
.titlebar .scrollbar .button.titlebutton {
|
||||
border: none; }
|
||||
.scrollbar .trough.right {
|
||||
border-right: 1px solid #a1a1a1; }
|
||||
.scrollbar .trough {
|
||||
background-color: #dbdbdb;
|
||||
border: 1px none #a1a1a1; }
|
||||
.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-radius: 20px;
|
||||
border: 3px solid transparent;
|
||||
background-color: #b3b5b6; }
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
background-color: #b3b5b6;
|
||||
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: #8d9091; }
|
||||
.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: #4a90d9; }
|
||||
.scrollbar .slider.fine-tune {
|
||||
border-width: 5px; }
|
||||
.scrollbar .slider.fine-tune:prelight:active {
|
||||
background-color: #4a90d9; }
|
||||
.scrollbar .slider:backdrop, .scrollbar .slider:insensitive {
|
||||
background-color: #d9dada; }
|
||||
.sidebar .scrollbar.overlay-indicator, .scrollbar.overlay-indicator {
|
||||
-GtkRange-slider-width: 8px; }
|
||||
.sidebar .scrollbar.overlay-indicator .slider, .scrollbar.overlay-indicator .slider {
|
||||
border-width: 2px;
|
||||
background-color: rgba(46, 52, 54, 0.2); }
|
||||
.sidebar .scrollbar.overlay-indicator .trough, .scrollbar.overlay-indicator .trough {
|
||||
.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; }
|
||||
.sidebar .scrollbar.overlay-indicator.hovering, .sidebar .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering, .scrollbar.overlay-indicator.dragging {
|
||||
-GtkRange-slider-width: 15px; }
|
||||
.sidebar .scrollbar.overlay-indicator.hovering .slider, .sidebar .scrollbar.overlay-indicator.dragging .slider, .scrollbar.overlay-indicator.hovering .slider, .scrollbar.overlay-indicator.dragging .slider {
|
||||
border-width: 3px;
|
||||
background-color: rgba(46, 52, 54, 0.3); }
|
||||
.sidebar .scrollbar.overlay-indicator.hovering .slider:active, .sidebar .scrollbar.overlay-indicator.dragging .slider:active, .scrollbar.overlay-indicator.hovering .slider:active, .scrollbar.overlay-indicator.dragging .slider:active {
|
||||
background-color: #2e3436; }
|
||||
.sidebar .scrollbar.overlay-indicator.hovering .trough, .sidebar .scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough, .scrollbar.overlay-indicator.dragging .trough {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: rgba(46, 52, 54, 0.1); }
|
||||
.scrollbar.overlay-indicator {
|
||||
-GtkRange-slider-width: 8px; }
|
||||
.scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider {
|
||||
background-color: rgba(46, 52, 54, 0.3);
|
||||
border-width: 2px;
|
||||
border-radius: 30px; }
|
||||
.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 .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 {
|
||||
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) {
|
||||
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 {
|
||||
border-top-style: solid; }
|
||||
|
||||
.scrollbars-junction, .scrollbar .trough,
|
||||
.scrollbars-junction.frame,
|
||||
.scrollbar .frame.trough {
|
||||
.scrollbars-junction,
|
||||
.scrollbars-junction.frame {
|
||||
border-color: transparent;
|
||||
background-color: #e0e0e0; }
|
||||
.scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
|
||||
.scrollbars-junction.frame:backdrop,
|
||||
.scrollbar .frame.trough:backdrop {
|
||||
background-color: transparent; }
|
||||
border-image: linear-gradient(to bottom, #a1a1a1 1px, transparent 1px) 0 0 0 1/0 1px stretch;
|
||||
background-color: #dbdbdb; }
|
||||
.scrollbars-junction:dir(rtl),
|
||||
.scrollbars-junction.frame:dir(rtl) {
|
||||
border-image-slice: 0 1 0 0; }
|
||||
.scrollbars-junction:backdrop,
|
||||
.scrollbars-junction.frame:backdrop {
|
||||
border-image-source: linear-gradient(to bottom, #a8a8a8 1px, transparent 1px);
|
||||
background-color: #e5e5e5; }
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
@ -4098,16 +4136,22 @@ GtkFileChooserDialog .dialog-action-box {
|
||||
***********/
|
||||
.sidebar {
|
||||
border: none;
|
||||
background-color: #fafafa; }
|
||||
.sidebar .scrollbar.trough {
|
||||
background-color: lightgray;
|
||||
border-radius: 6px;
|
||||
border-width: 2px;
|
||||
border-color: transparent; }
|
||||
.sidebar .scrollbar.slider {
|
||||
background-color: #fafafa; }
|
||||
.sidebar .scrollbar.slider:hover {
|
||||
background-color: white; }
|
||||
background-color: #fafafa;
|
||||
/*
|
||||
.scrollbar {
|
||||
&.trough {
|
||||
background-color: darken($bg_color,10%);
|
||||
border-radius: 6px;
|
||||
border-width: 2px;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.slider {
|
||||
background-color: $sidebar_bg_color;
|
||||
&:hover { background-color: lighten($bg_color, 10%); }
|
||||
}
|
||||
}
|
||||
*/ }
|
||||
.sidebar:backdrop {
|
||||
background-color: #fafafa; }
|
||||
.sidebar:selected {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user