AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-14 20:51:07 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: initial overlay indicator styling

Browse Source
This commit is contained in:
Lapo Calamandrei 2014-11-06 12:39:34 +01:00
parent 1f3f933edf
commit d781599b0d
3 changed files with 111 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
gtk/resources/theme/Adwaita/_common.scss
View File

@ -1873,7 +1873,7 @@ column-header.button.dnd { // for treeview-like derive widgets
background-clip: padding-box; background-clip: padding-box;
background-image: none; background-image: none;
border-style: solid; border-style: solid;
-GtkRange-trough-border: 0; -GtkRange-trough-border: 1;
-GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false; -GtkScrollbar-has-forward-stepper: false;
-GtkRange-slider-width: 13; -GtkRange-slider-width: 13;
@ -1886,27 +1886,63 @@ column-header.button.dnd { // for treeview-like derive widgets
.button { .button {
border: none; border: none;
} }
&.trough { @extend .scrollbars-junction; }
&.slider { .trough {
@extend .scrollbars-junction;
&.right { border-right: 1px solid $borders_color; }
}
.slider {
border-radius: 20px; border-radius: 20px;
border: 3px solid transparent; //margin :/ border: 3px solid transparent; //margin :/
background-color: mix($bg_color, $fg_color, 70%); background-color: mix($bg_color, $fg_color, 70%);
&:hover {
background-color: mix($bg_color, $fg_color, 50%); &:hover { background-color: mix($bg_color, $fg_color, 50%); }
}
&:prelight:active { &:prelight:active { background-color: $selected_bg_color; }
background-color: $selected_bg_color;
}
&.fine-tune { &.fine-tune {
border-width: 5px; border-width: 5px;
&:prelight:active { &:prelight:active { background-color: $selected_bg_color; }
background-color: $selected_bg_color;
}
} }
&:backdrop, &:insensitive {
&:backdrop,
&:insensitive {
background-color: mix($bg_color, $fg_color, 90%); 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 { .monospace {
font: 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;
}

59
gtk/resources/theme/Adwaita/gtk-contained-dark.css
View File

@ -2410,7 +2410,7 @@ column-header .titlebar .button.titlebutton,
background-clip: padding-box; background-clip: padding-box;
background-image: none; background-image: none;
border-style: solid; border-style: solid;
-GtkRange-trough-border: 0; -GtkRange-trough-border: 1;
-GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false; -GtkScrollbar-has-forward-stepper: false;
-GtkRange-slider-width: 13; -GtkRange-slider-width: 13;
@ -2421,29 +2421,49 @@ column-header .titlebar .button.titlebutton,
.scrollbar .titlebar .button.titlebutton, .scrollbar .titlebar .button.titlebutton,
.titlebar .scrollbar .button.titlebutton { .titlebar .scrollbar .button.titlebutton {
border: none; } border: none; }
.scrollbar.slider { .scrollbar .trough.right {
border-right: 1px solid #1c1f1f; }
.scrollbar .slider {
border-radius: 20px; border-radius: 20px;
border: 3px solid transparent; border: 3px solid transparent;
background-color: #6f7372; } background-color: #6f7372; }
.scrollbar.slider:hover { .scrollbar .slider:hover {
background-color: #939695; } background-color: #939695; }
.scrollbar.slider:prelight:active { .scrollbar .slider:prelight:active {
background-color: #215d9c; } background-color: #215d9c; }
.scrollbar.slider.fine-tune { .scrollbar .slider.fine-tune {
border-width: 5px; } border-width: 5px; }
.scrollbar.slider.fine-tune:prelight:active { .scrollbar .slider.fine-tune:prelight:active {
background-color: #215d9c; } background-color: #215d9c; }
.scrollbar.slider:backdrop, .scrollbar.slider:insensitive { .scrollbar .slider:backdrop, .scrollbar .slider:insensitive {
background-color: #4b5050; } 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, .scrollbars-junction.frame,
.frame.scrollbar.trough { .scrollbar .frame.trough {
border-color: transparent; border-color: transparent;
background-color: #2d3232; } background-color: #2d3232; }
.scrollbars-junction:backdrop, .scrollbar.trough:backdrop, .scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
.scrollbars-junction.frame:backdrop, .scrollbars-junction.frame:backdrop,
.frame.scrollbar.trough:backdrop { .scrollbar .frame.trough:backdrop {
background-color: transparent; } background-color: transparent; }
/********** /**********
@ -4270,23 +4290,6 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
.monospace { .monospace {
font: 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 /* GTK NAMED COLORS
---------------- ----------------
use responsibly! */ use responsibly! */

59
gtk/resources/theme/Adwaita/gtk-contained.css
View File

@ -2407,7 +2407,7 @@ column-header .titlebar .button.titlebutton,
background-clip: padding-box; background-clip: padding-box;
background-image: none; background-image: none;
border-style: solid; border-style: solid;
-GtkRange-trough-border: 0; -GtkRange-trough-border: 1;
-GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false; -GtkScrollbar-has-forward-stepper: false;
-GtkRange-slider-width: 13; -GtkRange-slider-width: 13;
@ -2418,29 +2418,49 @@ column-header .titlebar .button.titlebutton,
.scrollbar .titlebar .button.titlebutton, .scrollbar .titlebar .button.titlebutton,
.titlebar .scrollbar .button.titlebutton { .titlebar .scrollbar .button.titlebutton {
border: none; } border: none; }
.scrollbar.slider { .scrollbar .trough.right {
border-right: 1px solid #a1a1a1; }
.scrollbar .slider {
border-radius: 20px; border-radius: 20px;
border: 3px solid transparent; border: 3px solid transparent;
background-color: #b3b5b6; } background-color: #b3b5b6; }
.scrollbar.slider:hover { .scrollbar .slider:hover {
background-color: #8d9091; } background-color: #8d9091; }
.scrollbar.slider:prelight:active { .scrollbar .slider:prelight:active {
background-color: #4a90d9; } background-color: #4a90d9; }
.scrollbar.slider.fine-tune { .scrollbar .slider.fine-tune {
border-width: 5px; } border-width: 5px; }
.scrollbar.slider.fine-tune:prelight:active { .scrollbar .slider.fine-tune:prelight:active {
background-color: #4a90d9; } background-color: #4a90d9; }
.scrollbar.slider:backdrop, .scrollbar.slider:insensitive { .scrollbar .slider:backdrop, .scrollbar .slider:insensitive {
background-color: #d9dada; } 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, .scrollbars-junction.frame,
.frame.scrollbar.trough { .scrollbar .frame.trough {
border-color: transparent; border-color: transparent;
background-color: #e0e0e0; } background-color: #e0e0e0; }
.scrollbars-junction:backdrop, .scrollbar.trough:backdrop, .scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
.scrollbars-junction.frame:backdrop, .scrollbars-junction.frame:backdrop,
.frame.scrollbar.trough:backdrop { .scrollbar .frame.trough:backdrop {
background-color: transparent; } background-color: transparent; }
/********** /**********
@ -4432,23 +4452,6 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
.monospace { .monospace {
font: 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 /* GTK NAMED COLORS
---------------- ----------------
use responsibly! */ use responsibly! */