Hight Contrast: scrollbars

https://bugzilla.gnome.org/show_bug.cgi?id=763797
This commit is contained in:
Jakub Steiner 2016-03-18 13:53:30 +01:00
parent b88020ec92
commit a076df852b
4 changed files with 425 additions and 132 deletions

View File

@ -16,6 +16,11 @@ $borders_color: mix($bg_color,$fg_color,50%);
$borders_edge: if($variant == 'light', #fff, #000);
$link_color: $selected_bg_color;
$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 95%), mix($base_color, $bg_color, 60%));
$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%));
$suggested_color: #4a90d9;
$warning_color: #f57900;
$error_color: #cc0000;
@ -38,6 +43,8 @@ $backdrop_bg_color: $bg_color;
$backdrop_fg_color: $fg_color;
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($fg_color, $bg_color, 30%);
$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
//apps rely on some named colors to be exported
/* GTK NAMED COLORS */

View File

@ -1765,82 +1765,178 @@ notebook {
/**************
* Scrollbars *
**************/
scrollbar {
background-clip: padding-box;
background-image: none;
border-style: solid;
-GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;
-GtkRange-slider-width: 20;
-GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
// sadly can't be in '.slider'
// where it belongs
$_slider_min_length: 40px;
trough { @extend junction; }
$_slider_margin: 3px;
$_slider_fine_tune_margin: 4px;
button {
border: none;
// disable steppers
@at-root * {
-GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;
}
& slider {
border-radius: 20px;
border: 5px solid transparent; //margin
background-color: mix($bg_color, $fg_color, 50%);
&:backdrop, &:disabled {
background-color: mix($bg_color, $fg_color, 90%);
}
&:hover {
background-color: mix($bg_color, $fg_color, 30%);
}
&:hover:active {
background-color: $selected_bg_color;
}
&.fine-tune {
border-width: 8px;
&:hover:active {
background-color: $selected_bg_color;
}
}
background-color: $scrollbar_bg_color;
transition: 300ms $ease-out-quad;
// 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; }
&:backdrop {
background-color: $backdrop_scrollbar_bg_color;
border-color: $backdrop_borders_color;
}
// slider
slider {
min-width: 14px;
min-height: 14px;
margin: -1px;
border: 4px solid transparent;
border-radius: 12px;
background-clip: padding-box;
background-color: $scrollbar_slider_color;
&:hover { background-color: $scrollbar_slider_hover_color; }
&:hover:active { background-color: $scrollbar_slider_active_color; }
&:backdrop { background-color: $backdrop_scrollbar_slider_color; }
&:disabled { background-color: transparent; }
}
&.fine-tune {
slider {
min-width: 4px;
min-height: 4px;
}
&.horizontal slider { border-width: 5px 4px; }
&.vertical slider { border-width: 4px 5px; }
}
&.overlay-indicator {
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
&:not(.dragging):not(.hovering) {
border-color: transparent;
opacity: 0.4;
-GtkRange-slider-width: 5px;
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;
border: 1px solid white;
background-clip: padding-box;
border-radius: 100%;
border: 1px solid if($variant == 'light', white, black);
-gtk-icon-source: none;
}
trough {
border-style: none;
background-color: transparent;
&.horizontal {
slider {
margin: 0 2px;
min-width: $_slider_min_length;
}
button {
margin: 1px 2px;
min-width: 5px;
}
}
// w/o the following margin tweaks the slider shrinks when hovering/dragging
&.vertical slider {
margin-top: $_slider_margin - 1px;
margin-bottom: $_slider_margin - 1px;
}
&.vertical {
slider {
margin: 2px 0;
min-height: $_slider_min_length;
}
&.horizontal slider {
margin-left: $_slider_margin - 1px;
margin-right: $_slider_margin - 1px;
button {
margin: 2px 1px;
min-height: 5px;
}
}
}
&.dragging,
&.hovering { opacity: 0.7; }
&.hovering { opacity: 0.8; }
}
&.horizontal slider { min-width: $_slider_min_length; }
&.vertical slider { min-height: $_slider_min_length; }
// button styling
button {
padding: 0;
min-width: 12px;
min-height: 12px;
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 {
button {
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
}
}
&.horizontal {
button {
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
}
}
}
treeview ~ scrollbar.vertical {
border-top: 1px solid $borders_color;
margin-top: -1px;
}
/**********
* Switch *

View File

@ -1891,48 +1891,147 @@ notebook {
* Scrollbars *
**************/
scrollbar {
background-clip: padding-box;
background-image: none;
border-style: solid;
-GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;
-GtkRange-slider-width: 20;
-GtkScrollbar-min-slider-length: 42; }
scrollbar button {
border: none; }
background-color: #0a0a0a;
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 gray; }
scrollbar.bottom {
border-top: 1px solid gray; }
scrollbar.left {
border-right: 1px solid gray; }
scrollbar.right {
border-left: 1px solid gray; }
scrollbar:backdrop {
background-color: black;
border-color: #737373; }
scrollbar slider {
border-radius: 20px;
border: 5px solid transparent;
background-color: gray; }
scrollbar slider:backdrop, scrollbar slider:disabled {
background-color: #1a1a1a; }
min-width: 14px;
min-height: 14px;
margin: -1px;
border: 4px solid transparent;
border-radius: 12px;
background-clip: padding-box;
background-color: #999999; }
scrollbar slider:hover {
background-color: #b3b3b3; }
background-color: #cccccc; }
scrollbar slider:hover:active {
background-color: #aaa; }
scrollbar slider.fine-tune {
border-width: 8px; }
scrollbar slider.fine-tune:hover:active {
background-color: #aaa; }
background-color: #c4c4c4; }
scrollbar slider:backdrop {
background-color: #666666; }
scrollbar slider:disabled {
background-color: transparent; }
scrollbar.fine-tune slider {
min-width: 4px;
min-height: 4px; }
scrollbar.fine-tune.horizontal slider {
border-width: 5px 4px; }
scrollbar.fine-tune.vertical slider {
border-width: 4px 5px; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
border-color: transparent;
opacity: 0.4;
-GtkRange-slider-width: 5px; }
background-color: transparent; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
margin: 0;
min-width: 3px;
min-height: 3px;
background-color: #fff;
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; }
border: 1px solid black; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
min-width: 5px;
min-height: 5px;
background-color: #fff;
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-left: 2px;
margin-right: 2px; }
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.7; }
opacity: 0.8; }
scrollbar.horizontal slider {
min-width: 40px; }
scrollbar.vertical slider {
min-height: 40px; }
scrollbar button {
padding: 0;
min-width: 12px;
min-height: 12px;
border-style: none;
border-radius: 0;
transition-property: min-height, min-width, color;
border-width: 2px;
border-style: solid;
color: #fff;
background-color: transparent;
background-image: none;
border-color: transparent;
color: #999999; }
scrollbar button:hover {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: transparent;
background-image: none;
border-color: transparent;
color: #cccccc; }
scrollbar button:active, scrollbar button:checked {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: transparent;
background-image: none;
border-color: transparent;
color: #c4c4c4; }
scrollbar button:disabled {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: transparent;
background-image: none;
border-color: transparent;
color: rgba(153, 153, 153, 0.2); }
scrollbar button:backdrop {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: transparent;
background-image: none;
border-color: transparent;
color: #666666; }
scrollbar button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: transparent;
background-image: none;
border-color: transparent;
color: rgba(102, 102, 102, 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"); }
treeview ~ scrollbar.vertical {
border-top: 1px solid gray;
margin-top: -1px; }
/**********
* Switch *
@ -2672,16 +2771,12 @@ scrolledwindow undershoot.right {
background-position: right center;
border: none;
box-shadow: none; }
placessidebar junction, placessidebar scrollbar trough, scrollbar placessidebar trough,
scrolledwindow junction,
scrolledwindow scrollbar trough,
scrollbar scrolledwindow trough {
placessidebar junction,
scrolledwindow junction {
border-color: transparent;
background-color: black; }
placessidebar junction:backdrop, placessidebar scrollbar trough:backdrop, scrollbar placessidebar trough:backdrop,
scrolledwindow junction:backdrop,
scrolledwindow scrollbar trough:backdrop,
scrollbar scrolledwindow trough:backdrop {
placessidebar junction:backdrop,
scrolledwindow junction:backdrop {
background-color: transparent; }
separator, placessidebar .view separator, placessidebar textview text separator, textview placessidebar text separator, placessidebar iconview separator,

View File

@ -1895,48 +1895,147 @@ notebook {
* Scrollbars *
**************/
scrollbar {
background-clip: padding-box;
background-image: none;
border-style: solid;
-GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;
-GtkRange-slider-width: 20;
-GtkScrollbar-min-slider-length: 42; }
scrollbar button {
border: none; }
background-color: #f2f2f2;
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 gray; }
scrollbar.bottom {
border-top: 1px solid gray; }
scrollbar.left {
border-right: 1px solid gray; }
scrollbar.right {
border-left: 1px solid gray; }
scrollbar:backdrop {
background-color: #f7f7f7;
border-color: #8d8d8d; }
scrollbar slider {
border-radius: 20px;
border: 5px solid transparent;
background-color: gray; }
scrollbar slider:backdrop, scrollbar slider:disabled {
background-color: #e6e6e6; }
min-width: 14px;
min-height: 14px;
margin: -1px;
border: 4px solid transparent;
border-radius: 12px;
background-clip: padding-box;
background-color: #666666; }
scrollbar slider:hover {
background-color: #4d4d4d; }
background-color: #333333; }
scrollbar slider:hover:active {
background-color: #000; }
scrollbar slider.fine-tune {
border-width: 8px; }
scrollbar slider.fine-tune:hover:active {
background-color: #000; }
background-color: black; }
scrollbar slider:backdrop {
background-color: #999999; }
scrollbar slider:disabled {
background-color: transparent; }
scrollbar.fine-tune slider {
min-width: 4px;
min-height: 4px; }
scrollbar.fine-tune.horizontal slider {
border-width: 5px 4px; }
scrollbar.fine-tune.vertical slider {
border-width: 4px 5px; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
border-color: transparent;
opacity: 0.4;
-GtkRange-slider-width: 5px; }
background-color: transparent; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
margin: 0;
min-width: 3px;
min-height: 3px;
background-color: #000;
border: 1px solid white; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
min-width: 5px;
min-height: 5px;
background-color: #000;
background-clip: padding-box;
border-radius: 100%;
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; }
-gtk-icon-source: none; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
margin-left: 2px;
margin-right: 2px; }
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.7; }
opacity: 0.8; }
scrollbar.horizontal slider {
min-width: 40px; }
scrollbar.vertical slider {
min-height: 40px; }
scrollbar button {
padding: 0;
min-width: 12px;
min-height: 12px;
border-style: none;
border-radius: 0;
transition-property: min-height, min-width, color;
border-width: 2px;
border-style: solid;
color: #000;
background-color: transparent;
background-image: none;
border-color: transparent;
color: #666666; }
scrollbar button:hover {
border-width: 2px;
border-style: solid;
color: #000;
background-color: transparent;
background-image: none;
border-color: transparent;
color: #333333; }
scrollbar button:active, scrollbar button:checked {
border-width: 2px;
border-style: solid;
color: #000;
background-color: transparent;
background-image: none;
border-color: transparent;
color: black; }
scrollbar button:disabled {
border-width: 2px;
border-style: solid;
color: #000;
background-color: transparent;
background-image: none;
border-color: transparent;
color: rgba(102, 102, 102, 0.2); }
scrollbar button:backdrop {
border-width: 2px;
border-style: solid;
color: #000;
background-color: transparent;
background-image: none;
border-color: transparent;
color: #999999; }
scrollbar button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: #000;
background-color: transparent;
background-image: none;
border-color: transparent;
color: rgba(153, 153, 153, 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"); }
treeview ~ scrollbar.vertical {
border-top: 1px solid gray;
margin-top: -1px; }
/**********
* Switch *
@ -2679,16 +2778,12 @@ scrolledwindow undershoot.right {
background-position: right center;
border: none;
box-shadow: none; }
placessidebar junction, placessidebar scrollbar trough, scrollbar placessidebar trough,
scrolledwindow junction,
scrolledwindow scrollbar trough,
scrollbar scrolledwindow trough {
placessidebar junction,
scrolledwindow junction {
border-color: transparent;
background-color: #f2f2f2; }
placessidebar junction:backdrop, placessidebar scrollbar trough:backdrop, scrollbar placessidebar trough:backdrop,
scrolledwindow junction:backdrop,
scrolledwindow scrollbar trough:backdrop,
scrollbar scrolledwindow trough:backdrop {
placessidebar junction:backdrop,
scrolledwindow junction:backdrop {
background-color: transparent; }
separator, placessidebar .view separator, placessidebar textview text separator, textview placessidebar text separator, placessidebar iconview separator,