diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index a30ac2a622..d367684f4b 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -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; -} diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index 56b7f68b57..a31a443df1 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -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! */ diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index 99453bb3c0..f9eca09ea9 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -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! */