mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-16 21:50:34 +00:00
Adwaita: scrollbar style rewrite
works correctly with the new gadgettified GtkRange Cosimo nicelly delivered, as a bonus steppers are styled for overlay indicator usage as well.
This commit is contained in:
Lapo Calamandrei
parent
756ca38442
commit
0c987f94c8
@ -21,7 +21,10 @@ $menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20
|
||||
$popover_bg_color: $bg_color;
|
||||
$popover_hover_color: lighten($bg_color, 5%);
|
||||
|
||||
$scrollbar_bg_color: darken($bg_color, 7%);
|
||||
$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
|
||||
$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
|
||||
$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
|
||||
$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
|
||||
|
||||
$warning_color: #f57900;
|
||||
$error_color: #cc0000;
|
||||
@ -58,5 +61,6 @@ $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
|
||||
$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%);
|
||||
|
||||
$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
|
||||
$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
|
||||
|
||||
$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));
|
||||
|
||||
@ -2020,146 +2020,161 @@ notebook {
|
||||
* Scrollbars *
|
||||
**************/
|
||||
scrollbar {
|
||||
$_slider_min_lenght: 40px;
|
||||
|
||||
// disable steppers
|
||||
@at-root * {
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
}
|
||||
|
||||
$_slider_margin: 3px;
|
||||
$_slider_fine_tune_margin: 4px;
|
||||
background-color: $scrollbar_bg_color;
|
||||
transition: 300ms $ease-out-quad;
|
||||
|
||||
button { border: none; }
|
||||
// scrollbar border
|
||||
&.top { border-bottom: 1px solid $borders_color; }
|
||||
&.bottom { border-top: 1px solid $borders_color; }
|
||||
&.left { border-right: 1px solid $borders_color; }
|
||||
&.right { border-left: 1px solid $borders_color; }
|
||||
|
||||
&.vertical {
|
||||
button.down {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
}
|
||||
button.up {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||
}
|
||||
&:backdrop {
|
||||
background-color: $backdrop_scrollbar_bg_color;
|
||||
border-color: backdrop_borders_color;
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
button.down {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-right-symbolic');
|
||||
}
|
||||
button.up {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-left-symbolic');
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay-indicator {
|
||||
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
|
||||
opacity: 0.4;
|
||||
|
||||
slider {
|
||||
margin: 0;
|
||||
background-color: $fg_color;
|
||||
border: 1px solid if($variant==light, white, black);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
trough {
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// w/o the following margin tweaks the slider shrinks when hovering/dragging
|
||||
&.vertical slider {
|
||||
margin-top: $_slider_margin - 1px;
|
||||
margin-bottom: $_slider_margin - 1px;
|
||||
min-width: 5px;
|
||||
}
|
||||
|
||||
&.horizontal slider {
|
||||
margin-left: $_slider_margin - 1px;
|
||||
margin-right: $_slider_margin - 1px;
|
||||
min-height: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dragging,
|
||||
&.hovering { opacity: 0.7; }
|
||||
}
|
||||
|
||||
// trough coloring
|
||||
trough {
|
||||
background-color: $scrollbar_bg_color;
|
||||
border: 1px none $borders_color;
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_scrollbar_bg_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
}
|
||||
}
|
||||
|
||||
// slider coloring
|
||||
// slider
|
||||
slider {
|
||||
background-color: mix($fg_color, $bg_color, 60%);
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
margin: -1px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-clip: padding-box;
|
||||
background-color: $scrollbar_slider_color;
|
||||
|
||||
&:hover { background-color: mix($fg_color, $bg_color, 80%); }
|
||||
&:hover { background-color: $scrollbar_slider_hover_color; }
|
||||
|
||||
&:hover:active { background-color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));}
|
||||
&:hover:active { background-color: $scrollbar_slider_active_color; }
|
||||
|
||||
&:backdrop { background-color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); }
|
||||
&:backdrop { background-color: $backdrop_scrollbar_slider_color; }
|
||||
|
||||
&:disabled { background-color: transparent; }
|
||||
}
|
||||
|
||||
|
||||
// sizing
|
||||
slider {
|
||||
border-radius: 100px;
|
||||
margin: $_slider_margin;
|
||||
&.fine-tune slider {
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
&.fine-tune slider { margin: $_slider_fine_tune_margin; }
|
||||
&.overlay-indicator {
|
||||
&:not(.dragging):not(.hovering) {
|
||||
border: none;
|
||||
opacity: 0.4;
|
||||
background-color: transparent;
|
||||
|
||||
slider {
|
||||
margin: 0;
|
||||
min-width: 3px;
|
||||
min-height: 3px;
|
||||
background-color: $fg_color;
|
||||
border: 1px solid if($variant == 'light', white, black);
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
background-color: $fg_color;
|
||||
background-clip: padding-box;
|
||||
border-radius: 100%;
|
||||
border: 1px solid if($variant == 'light', white, black);
|
||||
-gtk-icon-source: none;
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
slider {
|
||||
margin: 0 2px;
|
||||
min-width: $_slider_min_lenght;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1px 2px;
|
||||
min-width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
slider {
|
||||
margin: 2px 0;
|
||||
min-height: $_slider_min_lenght;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 2px 1px;
|
||||
min-height: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dragging,
|
||||
&.hovering { opacity: 0.8; }
|
||||
}
|
||||
|
||||
&.horizontal slider { min-width: $_slider_min_lenght; }
|
||||
|
||||
&.vertical slider { min-height: $_slider_min_lenght; }
|
||||
|
||||
// button styling
|
||||
button {
|
||||
padding: 0;
|
||||
min-width: 14px;
|
||||
min-height: 14px;
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
transition-property: min-height, min-width, color;
|
||||
|
||||
@include button(undecorated);
|
||||
color: $scrollbar_slider_color;
|
||||
|
||||
&:hover {
|
||||
@include button(undecorated);
|
||||
color: $scrollbar_slider_hover_color;
|
||||
}
|
||||
&:active, &:checked {
|
||||
@include button(undecorated);
|
||||
color: $scrollbar_slider_active_color;
|
||||
}
|
||||
&:disabled {
|
||||
@include button(undecorated);
|
||||
color: transparentize($scrollbar_slider_color, 0.8);
|
||||
}
|
||||
&:backdrop {
|
||||
@include button(undecorated);
|
||||
color: $backdrop_scrollbar_slider_color;
|
||||
|
||||
&:disabled {
|
||||
@include button(undecorated);
|
||||
color: transparentize($backdrop_scrollbar_slider_color, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// button icons
|
||||
&.vertical {
|
||||
slider {
|
||||
margin-left: 1px + $_slider_margin;
|
||||
min-height: 42px;
|
||||
min-width: 6px;
|
||||
|
||||
&:dir(rtl) {
|
||||
margin-left: $_slider_margin;
|
||||
margin-right: 1px + $_slider_margin;
|
||||
}
|
||||
}
|
||||
|
||||
&.fine-tune slider {
|
||||
margin-left: 1px + $_slider_fine_tune_margin;
|
||||
|
||||
&:dir(rtl) {
|
||||
margin-left: $_slider_fine_tune_margin;
|
||||
margin-right: 1px + $_slider_fine_tune_margin;
|
||||
}
|
||||
}
|
||||
|
||||
trough {
|
||||
border-left-style: solid;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
}
|
||||
button {
|
||||
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
slider {
|
||||
margin-top: 1px + $_slider_margin;
|
||||
min-height: 6px;
|
||||
min-width: 42px;
|
||||
button {
|
||||
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
|
||||
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
|
||||
}
|
||||
|
||||
&.fine-tune slider { margin-top: 1px + $_slider_fine_tune_margin; }
|
||||
|
||||
trough { border-top-style: solid; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
**********/
|
||||
|
||||
@ -2177,85 +2177,141 @@ notebook > stack:not(:only-child) {
|
||||
/**************
|
||||
* Scrollbars *
|
||||
**************/
|
||||
* {
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false; }
|
||||
scrollbar button {
|
||||
border: none; }
|
||||
scrollbar.vertical button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
|
||||
scrollbar.vertical button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
|
||||
scrollbar.horizontal button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
|
||||
scrollbar.horizontal button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
|
||||
opacity: 0.4; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
|
||||
margin: 0;
|
||||
background-color: #eeeeec;
|
||||
border: 1px solid black;
|
||||
background-clip: padding-box; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
|
||||
border-style: none;
|
||||
background-color: transparent; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
min-width: 5px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
min-height: 5px; }
|
||||
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
|
||||
opacity: 0.7; }
|
||||
scrollbar trough {
|
||||
background-color: #282c2c;
|
||||
border: 1px none #1c1f1f; }
|
||||
scrollbar trough:backdrop {
|
||||
scrollbar {
|
||||
background-color: #313434;
|
||||
transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||
* {
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false; }
|
||||
scrollbar.top {
|
||||
border-bottom: 1px solid #1c1f1f; }
|
||||
scrollbar.bottom {
|
||||
border-top: 1px solid #1c1f1f; }
|
||||
scrollbar.left {
|
||||
border-right: 1px solid #1c1f1f; }
|
||||
scrollbar.right {
|
||||
border-left: 1px solid #1c1f1f; }
|
||||
scrollbar:backdrop {
|
||||
background-color: #323737;
|
||||
border-color: #1f2222; }
|
||||
scrollbar slider {
|
||||
background-color: #a6a8a7; }
|
||||
scrollbar slider:hover {
|
||||
background-color: #cacbc9; }
|
||||
scrollbar slider:hover:active {
|
||||
background-color: #2a76c6; }
|
||||
scrollbar slider:backdrop {
|
||||
background-color: #5d6262; }
|
||||
scrollbar slider:disabled {
|
||||
border-color: backdrop_borders_color; }
|
||||
scrollbar slider {
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
margin: -1px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-clip: padding-box;
|
||||
background-color: #a6a8a7; }
|
||||
scrollbar slider:hover {
|
||||
background-color: #cacbc9; }
|
||||
scrollbar slider:hover:active {
|
||||
background-color: #2a76c6; }
|
||||
scrollbar slider:backdrop {
|
||||
background-color: #5d6262; }
|
||||
scrollbar slider:disabled {
|
||||
background-color: transparent; }
|
||||
scrollbar.fine-tune slider {
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
border-width: 6px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
|
||||
border: none;
|
||||
opacity: 0.4;
|
||||
background-color: transparent; }
|
||||
scrollbar slider {
|
||||
border-radius: 100px;
|
||||
margin: 3px; }
|
||||
scrollbar.fine-tune slider {
|
||||
margin: 4px; }
|
||||
scrollbar.vertical slider {
|
||||
margin-left: 4px;
|
||||
min-height: 42px;
|
||||
min-width: 6px; }
|
||||
scrollbar.vertical slider:dir(rtl) {
|
||||
margin-left: 3px;
|
||||
margin-right: 4px; }
|
||||
scrollbar.vertical.fine-tune slider {
|
||||
margin-left: 5px; }
|
||||
scrollbar.vertical.fine-tune slider:dir(rtl) {
|
||||
margin-left: 4px;
|
||||
margin-right: 5px; }
|
||||
scrollbar.vertical trough {
|
||||
border-left-style: solid; }
|
||||
scrollbar.vertical trough:dir(rtl) {
|
||||
border-left-style: none;
|
||||
border-right-style: solid; }
|
||||
scrollbar.horizontal slider {
|
||||
margin-top: 4px;
|
||||
min-height: 6px;
|
||||
min-width: 42px; }
|
||||
scrollbar.horizontal.fine-tune slider {
|
||||
margin-top: 5px; }
|
||||
scrollbar.horizontal trough {
|
||||
border-top-style: solid; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
|
||||
margin: 0;
|
||||
min-width: 3px;
|
||||
min-height: 3px;
|
||||
background-color: #eeeeec;
|
||||
border: 1px solid black; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
background-color: #eeeeec;
|
||||
background-clip: padding-box;
|
||||
border-radius: 100%;
|
||||
border: 1px solid black;
|
||||
-gtk-icon-source: none; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
|
||||
margin: 0 2px;
|
||||
min-width: 40px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
|
||||
margin: 1px 2px;
|
||||
min-width: 5px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
|
||||
margin: 2px 0;
|
||||
min-height: 40px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
|
||||
margin: 2px 1px;
|
||||
min-height: 5px; }
|
||||
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
|
||||
opacity: 0.8; }
|
||||
scrollbar.horizontal slider {
|
||||
min-width: 40px; }
|
||||
scrollbar.vertical slider {
|
||||
min-height: 40px; }
|
||||
scrollbar button {
|
||||
padding: 0;
|
||||
min-width: 14px;
|
||||
min-height: 14px;
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
transition-property: min-height, min-width, color;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: #a6a8a7; }
|
||||
scrollbar button:hover {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: #cacbc9; }
|
||||
scrollbar button:active, scrollbar button:checked {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: #2a76c6; }
|
||||
scrollbar button:disabled {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: rgba(166, 168, 167, 0.2); }
|
||||
scrollbar button:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: #5d6262; }
|
||||
scrollbar button:backdrop:disabled {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: rgba(93, 98, 98, 0.2); }
|
||||
scrollbar.vertical button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
|
||||
scrollbar.vertical button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
|
||||
scrollbar.horizontal button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
|
||||
scrollbar.horizontal button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
@ -3367,7 +3423,7 @@ placessidebar junction,
|
||||
scrolledwindow junction {
|
||||
border-color: transparent;
|
||||
border-image: linear-gradient(to bottom, #1c1f1f 1px, transparent 1px) 0 0 0 1/0 1px stretch;
|
||||
background-color: #282c2c; }
|
||||
background-color: #313434; }
|
||||
placessidebar junction:dir(rtl),
|
||||
scrolledwindow junction:dir(rtl) {
|
||||
border-image-slice: 0 1 0 0; }
|
||||
|
||||
@ -2187,85 +2187,141 @@ notebook > stack:not(:only-child) {
|
||||
/**************
|
||||
* Scrollbars *
|
||||
**************/
|
||||
* {
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false; }
|
||||
scrollbar button {
|
||||
border: none; }
|
||||
scrollbar.vertical button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
|
||||
scrollbar.vertical button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
|
||||
scrollbar.horizontal button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
|
||||
scrollbar.horizontal button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
|
||||
opacity: 0.4; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
|
||||
margin: 0;
|
||||
background-color: #2e3436;
|
||||
border: 1px solid white;
|
||||
background-clip: padding-box; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
|
||||
border-style: none;
|
||||
background-color: transparent; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
min-width: 5px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
min-height: 5px; }
|
||||
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
|
||||
opacity: 0.7; }
|
||||
scrollbar trough {
|
||||
background-color: #d7d7d5;
|
||||
border: 1px none #9d9d99; }
|
||||
scrollbar trough:backdrop {
|
||||
scrollbar {
|
||||
background-color: #c3c4c4;
|
||||
transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||
* {
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false; }
|
||||
scrollbar.top {
|
||||
border-bottom: 1px solid #9d9d99; }
|
||||
scrollbar.bottom {
|
||||
border-top: 1px solid #9d9d99; }
|
||||
scrollbar.left {
|
||||
border-right: 1px solid #9d9d99; }
|
||||
scrollbar.right {
|
||||
border-left: 1px solid #9d9d99; }
|
||||
scrollbar:backdrop {
|
||||
background-color: #e1e1df;
|
||||
border-color: #a5a5a1; }
|
||||
scrollbar slider {
|
||||
background-color: #787c7d; }
|
||||
scrollbar slider:hover {
|
||||
background-color: #535859; }
|
||||
scrollbar slider:hover:active {
|
||||
background-color: #2a76c6; }
|
||||
scrollbar slider:backdrop {
|
||||
background-color: #c3c4c4; }
|
||||
scrollbar slider:disabled {
|
||||
border-color: backdrop_borders_color; }
|
||||
scrollbar slider {
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
margin: -1px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-clip: padding-box;
|
||||
background-color: #787c7d; }
|
||||
scrollbar slider:hover {
|
||||
background-color: #535859; }
|
||||
scrollbar slider:hover:active {
|
||||
background-color: #2a76c6; }
|
||||
scrollbar slider:backdrop {
|
||||
background-color: #c3c4c4; }
|
||||
scrollbar slider:disabled {
|
||||
background-color: transparent; }
|
||||
scrollbar.fine-tune slider {
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
border-width: 6px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
|
||||
border: none;
|
||||
opacity: 0.4;
|
||||
background-color: transparent; }
|
||||
scrollbar slider {
|
||||
border-radius: 100px;
|
||||
margin: 3px; }
|
||||
scrollbar.fine-tune slider {
|
||||
margin: 4px; }
|
||||
scrollbar.vertical slider {
|
||||
margin-left: 4px;
|
||||
min-height: 42px;
|
||||
min-width: 6px; }
|
||||
scrollbar.vertical slider:dir(rtl) {
|
||||
margin-left: 3px;
|
||||
margin-right: 4px; }
|
||||
scrollbar.vertical.fine-tune slider {
|
||||
margin-left: 5px; }
|
||||
scrollbar.vertical.fine-tune slider:dir(rtl) {
|
||||
margin-left: 4px;
|
||||
margin-right: 5px; }
|
||||
scrollbar.vertical trough {
|
||||
border-left-style: solid; }
|
||||
scrollbar.vertical trough:dir(rtl) {
|
||||
border-left-style: none;
|
||||
border-right-style: solid; }
|
||||
scrollbar.horizontal slider {
|
||||
margin-top: 4px;
|
||||
min-height: 6px;
|
||||
min-width: 42px; }
|
||||
scrollbar.horizontal.fine-tune slider {
|
||||
margin-top: 5px; }
|
||||
scrollbar.horizontal trough {
|
||||
border-top-style: solid; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
|
||||
margin: 0;
|
||||
min-width: 3px;
|
||||
min-height: 3px;
|
||||
background-color: #2e3436;
|
||||
border: 1px solid white; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
background-color: #2e3436;
|
||||
background-clip: padding-box;
|
||||
border-radius: 100%;
|
||||
border: 1px solid white;
|
||||
-gtk-icon-source: none; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
|
||||
margin: 0 2px;
|
||||
min-width: 40px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
|
||||
margin: 1px 2px;
|
||||
min-width: 5px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
|
||||
margin: 2px 0;
|
||||
min-height: 40px; }
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
|
||||
margin: 2px 1px;
|
||||
min-height: 5px; }
|
||||
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
|
||||
opacity: 0.8; }
|
||||
scrollbar.horizontal slider {
|
||||
min-width: 40px; }
|
||||
scrollbar.vertical slider {
|
||||
min-height: 40px; }
|
||||
scrollbar button {
|
||||
padding: 0;
|
||||
min-width: 14px;
|
||||
min-height: 14px;
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
transition-property: min-height, min-width, color;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: #787c7d; }
|
||||
scrollbar button:hover {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: #535859; }
|
||||
scrollbar button:active, scrollbar button:checked {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: #2a76c6; }
|
||||
scrollbar button:disabled {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: rgba(120, 124, 125, 0.2); }
|
||||
scrollbar button:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: #c3c4c4; }
|
||||
scrollbar button:backdrop:disabled {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: rgba(195, 196, 196, 0.2); }
|
||||
scrollbar.vertical button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
|
||||
scrollbar.vertical button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
|
||||
scrollbar.horizontal button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
|
||||
scrollbar.horizontal button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
|
||||
|
||||
/**********
|
||||
* Switch *
|
||||
@ -3398,7 +3454,7 @@ placessidebar junction,
|
||||
scrolledwindow junction {
|
||||
border-color: transparent;
|
||||
border-image: linear-gradient(to bottom, #9d9d99 1px, transparent 1px) 0 0 0 1/0 1px stretch;
|
||||
background-color: #d7d7d5; }
|
||||
background-color: #c3c4c4; }
|
||||
placessidebar junction:dir(rtl),
|
||||
scrolledwindow junction:dir(rtl) {
|
||||
border-image-slice: 0 1 0 0; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user