forked from AuroraMiddleware/gtk
Adwaita: initial overlay indicator styling
This commit is contained in:
Lapo Calamandrei
parent
1f3f933edf
commit
d781599b0d
@ -1873,7 +1873,7 @@ column-header.button.dnd { // for treeview-like derive widgets
|
||||
background-clip: padding-box;
|
||||
background-image: none;
|
||||
border-style: solid;
|
||||
-GtkRange-trough-border: 0;
|
||||
-GtkRange-trough-border: 1;
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
-GtkRange-slider-width: 13;
|
||||
@ -1886,27 +1886,63 @@ column-header.button.dnd { // for treeview-like derive widgets
|
||||
.button {
|
||||
border: none;
|
||||
}
|
||||
&.trough { @extend .scrollbars-junction; }
|
||||
&.slider {
|
||||
|
||||
.trough {
|
||||
@extend .scrollbars-junction;
|
||||
&.right { border-right: 1px solid $borders_color; }
|
||||
}
|
||||
|
||||
.slider {
|
||||
border-radius: 20px;
|
||||
border: 3px solid transparent; //margin :/
|
||||
background-color: mix($bg_color, $fg_color, 70%);
|
||||
&:hover {
|
||||
background-color: mix($bg_color, $fg_color, 50%);
|
||||
}
|
||||
&:prelight:active {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
&:prelight:active { background-color: $selected_bg_color; }
|
||||
}
|
||||
&:backdrop, &:insensitive {
|
||||
|
||||
&:backdrop,
|
||||
&:insensitive {
|
||||
background-color: mix($bg_color, $fg_color, 90%);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar &.overlay-indicator,
|
||||
&.overlay-indicator { // overlay scrollbars
|
||||
-GtkRange-slider-width: 8px;
|
||||
|
||||
.slider {
|
||||
border-width: 2px;
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
}
|
||||
|
||||
.trough {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.hovering,
|
||||
&.dragging {
|
||||
-GtkRange-slider-width: 15px;
|
||||
|
||||
.slider {
|
||||
border-width: 3px;
|
||||
background-color: transparentize($fg_color, 0.7);
|
||||
&:active { background-color: $fg_color; }
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3166,25 +3202,3 @@ GtkVolumeButton.button { padding: 8px; }
|
||||
.monospace {
|
||||
font: Monospace;
|
||||
}
|
||||
|
||||
/* Overlay scrollbars */
|
||||
|
||||
.scrollbar.overlay-indicator.dragging,
|
||||
.scrollbar.overlay-indicator.hovering {
|
||||
-GtkRange-slider-width: 15;
|
||||
}
|
||||
|
||||
.scrollbar.overlay-indicator.dragging.trough,
|
||||
.scrollbar.overlay-indicator.hovering.trough {
|
||||
background-color: transparentize(black, 0.9);
|
||||
}
|
||||
|
||||
.sidebar .scrollbar.overlay-indicator,
|
||||
.scrollbar.overlay-indicator {
|
||||
-GtkRange-slider-width: 10;
|
||||
}
|
||||
|
||||
.sidebar .scrollbar.overlay-indicator .trough,
|
||||
.scrollbar.overlay-indicator.trough {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -2410,7 +2410,7 @@ column-header .titlebar .button.titlebutton,
|
||||
background-clip: padding-box;
|
||||
background-image: none;
|
||||
border-style: solid;
|
||||
-GtkRange-trough-border: 0;
|
||||
-GtkRange-trough-border: 1;
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
-GtkRange-slider-width: 13;
|
||||
@ -2421,29 +2421,49 @@ column-header .titlebar .button.titlebutton,
|
||||
.scrollbar .titlebar .button.titlebutton,
|
||||
.titlebar .scrollbar .button.titlebutton {
|
||||
border: none; }
|
||||
.scrollbar.slider {
|
||||
.scrollbar .trough.right {
|
||||
border-right: 1px solid #1c1f1f; }
|
||||
.scrollbar .slider {
|
||||
border-radius: 20px;
|
||||
border: 3px solid transparent;
|
||||
background-color: #6f7372; }
|
||||
.scrollbar.slider:hover {
|
||||
.scrollbar .slider:hover {
|
||||
background-color: #939695; }
|
||||
.scrollbar.slider:prelight:active {
|
||||
.scrollbar .slider:prelight:active {
|
||||
background-color: #215d9c; }
|
||||
.scrollbar.slider.fine-tune {
|
||||
.scrollbar .slider.fine-tune {
|
||||
border-width: 5px; }
|
||||
.scrollbar.slider.fine-tune:prelight:active {
|
||||
.scrollbar .slider.fine-tune:prelight:active {
|
||||
background-color: #215d9c; }
|
||||
.scrollbar.slider:backdrop, .scrollbar.slider:insensitive {
|
||||
.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 {
|
||||
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); }
|
||||
|
||||
.scrollbars-junction, .scrollbar.trough,
|
||||
.scrollbars-junction, .scrollbar .trough,
|
||||
.scrollbars-junction.frame,
|
||||
.frame.scrollbar.trough {
|
||||
.scrollbar .frame.trough {
|
||||
border-color: transparent;
|
||||
background-color: #2d3232; }
|
||||
.scrollbars-junction:backdrop, .scrollbar.trough:backdrop,
|
||||
.scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
|
||||
.scrollbars-junction.frame:backdrop,
|
||||
.frame.scrollbar.trough:backdrop {
|
||||
.scrollbar .frame.trough:backdrop {
|
||||
background-color: transparent; }
|
||||
|
||||
/**********
|
||||
@ -4270,23 +4290,6 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
|
||||
.monospace {
|
||||
font: Monospace; }
|
||||
|
||||
/* Overlay scrollbars */
|
||||
.scrollbar.overlay-indicator.dragging,
|
||||
.scrollbar.overlay-indicator.hovering {
|
||||
-GtkRange-slider-width: 15; }
|
||||
|
||||
.scrollbar.overlay-indicator.dragging.trough,
|
||||
.scrollbar.overlay-indicator.hovering.trough {
|
||||
background-color: rgba(0, 0, 0, 0.1); }
|
||||
|
||||
.sidebar .scrollbar.overlay-indicator,
|
||||
.scrollbar.overlay-indicator {
|
||||
-GtkRange-slider-width: 10; }
|
||||
|
||||
.sidebar .scrollbar.overlay-indicator .trough,
|
||||
.scrollbar.overlay-indicator.trough {
|
||||
background-color: transparent; }
|
||||
|
||||
/* GTK NAMED COLORS
|
||||
----------------
|
||||
use responsibly! */
|
||||
|
||||
@ -2407,7 +2407,7 @@ column-header .titlebar .button.titlebutton,
|
||||
background-clip: padding-box;
|
||||
background-image: none;
|
||||
border-style: solid;
|
||||
-GtkRange-trough-border: 0;
|
||||
-GtkRange-trough-border: 1;
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
-GtkRange-slider-width: 13;
|
||||
@ -2418,29 +2418,49 @@ column-header .titlebar .button.titlebutton,
|
||||
.scrollbar .titlebar .button.titlebutton,
|
||||
.titlebar .scrollbar .button.titlebutton {
|
||||
border: none; }
|
||||
.scrollbar.slider {
|
||||
.scrollbar .trough.right {
|
||||
border-right: 1px solid #a1a1a1; }
|
||||
.scrollbar .slider {
|
||||
border-radius: 20px;
|
||||
border: 3px solid transparent;
|
||||
background-color: #b3b5b6; }
|
||||
.scrollbar.slider:hover {
|
||||
.scrollbar .slider:hover {
|
||||
background-color: #8d9091; }
|
||||
.scrollbar.slider:prelight:active {
|
||||
.scrollbar .slider:prelight:active {
|
||||
background-color: #4a90d9; }
|
||||
.scrollbar.slider.fine-tune {
|
||||
.scrollbar .slider.fine-tune {
|
||||
border-width: 5px; }
|
||||
.scrollbar.slider.fine-tune:prelight:active {
|
||||
.scrollbar .slider.fine-tune:prelight:active {
|
||||
background-color: #4a90d9; }
|
||||
.scrollbar.slider:backdrop, .scrollbar.slider:insensitive {
|
||||
.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 {
|
||||
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); }
|
||||
|
||||
.scrollbars-junction, .scrollbar.trough,
|
||||
.scrollbars-junction, .scrollbar .trough,
|
||||
.scrollbars-junction.frame,
|
||||
.frame.scrollbar.trough {
|
||||
.scrollbar .frame.trough {
|
||||
border-color: transparent;
|
||||
background-color: #e0e0e0; }
|
||||
.scrollbars-junction:backdrop, .scrollbar.trough:backdrop,
|
||||
.scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
|
||||
.scrollbars-junction.frame:backdrop,
|
||||
.frame.scrollbar.trough:backdrop {
|
||||
.scrollbar .frame.trough:backdrop {
|
||||
background-color: transparent; }
|
||||
|
||||
/**********
|
||||
@ -4432,23 +4452,6 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
|
||||
.monospace {
|
||||
font: Monospace; }
|
||||
|
||||
/* Overlay scrollbars */
|
||||
.scrollbar.overlay-indicator.dragging,
|
||||
.scrollbar.overlay-indicator.hovering {
|
||||
-GtkRange-slider-width: 15; }
|
||||
|
||||
.scrollbar.overlay-indicator.dragging.trough,
|
||||
.scrollbar.overlay-indicator.hovering.trough {
|
||||
background-color: rgba(0, 0, 0, 0.1); }
|
||||
|
||||
.sidebar .scrollbar.overlay-indicator,
|
||||
.scrollbar.overlay-indicator {
|
||||
-GtkRange-slider-width: 10; }
|
||||
|
||||
.sidebar .scrollbar.overlay-indicator .trough,
|
||||
.scrollbar.overlay-indicator.trough {
|
||||
background-color: transparent; }
|
||||
|
||||
/* GTK NAMED COLORS
|
||||
----------------
|
||||
use responsibly! */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user