diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss index 75caa4aac9..17f74989ad 100644 --- a/gtk/theme/Adwaita/_colors.scss +++ b/gtk/theme/Adwaita/_colors.scss @@ -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%)); diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index cba757fa26..08be69444b 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -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 * **********/ diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index a5d4d8f886..b5dbb17653 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -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; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index c8e7a51276..d34513bf14 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -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; }