From d5160d6482bdabaedb340d98cbfc904c7df77006 Mon Sep 17 00:00:00 2001 From: Kalev Lember Date: Mon, 15 Feb 2021 22:00:34 +0100 Subject: [PATCH] Backport upstream patch to further tweak scrollbar transitions and size --- ...waita-Scrollbar-transitions-and-size.patch | 214 ++++++++++++++++++ gtk3.spec | 2 + 2 files changed, 216 insertions(+) create mode 100644 0003-Adwaita-Scrollbar-transitions-and-size.patch diff --git a/0003-Adwaita-Scrollbar-transitions-and-size.patch b/0003-Adwaita-Scrollbar-transitions-and-size.patch new file mode 100644 index 0000000..28cb234 --- /dev/null +++ b/0003-Adwaita-Scrollbar-transitions-and-size.patch @@ -0,0 +1,214 @@ +From ca34428d177cbe5044c11e12b1bd9ef5e045c917 Mon Sep 17 00:00:00 2001 +From: Jakub Steiner +Date: Mon, 15 Feb 2021 12:53:36 +0100 +Subject: [PATCH 3/3] Adwaita: Scrollbar transitions and size + + - tone down the size of the controller again + - transition between the indicator and control fluidly + +Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/1886 +--- + gtk/theme/Adwaita/_common.scss | 13 ++++++++----- + gtk/theme/Adwaita/gtk-contained-dark.css | 4 ++-- + gtk/theme/Adwaita/gtk-contained.css | 4 ++-- + gtk/theme/HighContrast/gtk-contained-inverse.css | 16 ++++++++++------ + gtk/theme/HighContrast/gtk-contained.css | 16 ++++++++++------ + 5 files changed, 32 insertions(+), 21 deletions(-) + +diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss +index 581da9ef45..fc994b0962 100644 +--- a/gtk/theme/Adwaita/_common.scss ++++ b/gtk/theme/Adwaita/_common.scss +@@ -2640,6 +2640,8 @@ notebook { + **************/ + scrollbar { + $_slider_min_length: 40px; ++ $_slider_width: 8px; ++ $_scrollbar_transition: all 300ms $ease-out-quad; + + // disable steppers + @at-root * { +@@ -2648,7 +2650,7 @@ scrollbar { + } + + background-color: $scrollbar_bg_color; +- transition: 300ms $ease-out-quad; ++ transition: $_scrollbar_transition; + + // scrollbar border + &.top { border-bottom: 1px solid $borders_color; } +@@ -2664,13 +2666,14 @@ scrollbar { + + // slider + slider { +- min-width: 10px; +- min-height: 10px; ++ min-width: $_slider_width; ++ min-height: $_slider_width; + margin: -1px; + border: 4px solid transparent; + border-radius: 10px; + background-clip: padding-box; + background-color: $scrollbar_slider_color; ++ transition: $_scrollbar_transition; + + &:hover { background-color: $scrollbar_slider_hover_color; } + +@@ -2683,8 +2686,8 @@ scrollbar { + + &.fine-tune { + slider { +- min-width: 6px; +- min-height: 6px; ++ min-width: $_slider_width - 2; ++ min-height: $_slider_width - 2; + } + + &.horizontal slider { border-width: 6px 4px; } +diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css +index 9bb4c1c2fb..25482cf750 100644 +--- a/gtk/theme/Adwaita/gtk-contained-dark.css ++++ b/gtk/theme/Adwaita/gtk-contained-dark.css +@@ -970,7 +970,7 @@ notebook > stack:not(:only-child) { background-color: #2d2d2d; } + notebook > stack:not(:only-child):backdrop { background-color: #303030; } + + /************** Scrollbars * */ +-scrollbar { background-color: #313131; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } ++scrollbar { background-color: #313131; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + + * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; } + +@@ -984,7 +984,7 @@ scrollbar.right { border-left: 1px solid #1b1b1b; } + + scrollbar:backdrop { background-color: #2d2d2d; border-color: #202020; transition: 200ms ease-out; } + +-scrollbar slider { min-width: 10px; min-height: 10px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #a4a4a3; } ++scrollbar slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #a4a4a3; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + + scrollbar slider:hover { background-color: #c9c9c7; } + +diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css +index 6a429b32f3..78844c1e7e 100644 +--- a/gtk/theme/Adwaita/gtk-contained.css ++++ b/gtk/theme/Adwaita/gtk-contained.css +@@ -978,7 +978,7 @@ notebook > stack:not(:only-child) { background-color: #ffffff; } + notebook > stack:not(:only-child):backdrop { background-color: #fcfcfc; } + + /************** Scrollbars * */ +-scrollbar { background-color: #cecece; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } ++scrollbar { background-color: #cecece; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + + * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; } + +@@ -992,7 +992,7 @@ scrollbar.right { border-left: 1px solid #cdc7c2; } + + scrollbar:backdrop { background-color: #efedec; border-color: #d5d0cc; transition: 200ms ease-out; } + +-scrollbar slider { min-width: 10px; min-height: 10px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #7e8182; } ++scrollbar slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #7e8182; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + + scrollbar slider:hover { background-color: #565b5c; } + +diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css +index 10115a8a08..9819e90b50 100644 +--- a/gtk/theme/HighContrast/gtk-contained-inverse.css ++++ b/gtk/theme/HighContrast/gtk-contained-inverse.css +@@ -1050,7 +1050,7 @@ notebook > stack:not(:only-child) { background-color: #2d2d2d; } + notebook > stack:not(:only-child):backdrop { background-color: #303030; } + + /************** Scrollbars * */ +-scrollbar { background-color: #313131; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } ++scrollbar { background-color: #313131; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + + * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; } + +@@ -1064,7 +1064,7 @@ scrollbar.right { border-left: 1px solid #686868; } + + scrollbar:backdrop { background-color: #2d2d2d; border-color: #202020; transition: 200ms ease-out; } + +-scrollbar slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: #a4a4a3; } ++scrollbar slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #a4a4a3; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + + scrollbar slider:hover { background-color: #c9c9c7; } + +@@ -1074,11 +1074,11 @@ scrollbar slider:backdrop { background-color: #5a5a59; } + + scrollbar slider:disabled { background-color: transparent; } + +-scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; } ++scrollbar.fine-tune slider { min-width: 6px; min-height: 6px; } + +-scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; } ++scrollbar.fine-tune.horizontal slider { border-width: 6px 4px; } + +-scrollbar.fine-tune.vertical slider { border-width: 4px 5px; } ++scrollbar.fine-tune.vertical slider { border-width: 4px 6px; } + + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; } + +@@ -1918,7 +1918,11 @@ decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9p + + decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(104, 104, 104, 0.9); transition: 200ms ease-out; } + +-.maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; } ++.maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; } ++ ++.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9); } ++ ++.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9); } + + .popup decoration { box-shadow: none; } + +diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css +index 5d95105101..0562e212bb 100644 +--- a/gtk/theme/HighContrast/gtk-contained.css ++++ b/gtk/theme/HighContrast/gtk-contained.css +@@ -1058,7 +1058,7 @@ notebook > stack:not(:only-child) { background-color: #ffffff; } + notebook > stack:not(:only-child):backdrop { background-color: #fcfcfc; } + + /************** Scrollbars * */ +-scrollbar { background-color: #cecece; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } ++scrollbar { background-color: #cecece; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + + * { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; } + +@@ -1072,7 +1072,7 @@ scrollbar.right { border-left: 1px solid #877b6e; } + + scrollbar:backdrop { background-color: #efedec; border-color: #d5d0cc; transition: 200ms ease-out; } + +-scrollbar slider { min-width: 6px; min-height: 6px; margin: -1px; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; background-color: #7e8182; } ++scrollbar slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; background-color: #7e8182; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + + scrollbar slider:hover { background-color: #565b5c; } + +@@ -1082,11 +1082,11 @@ scrollbar slider:backdrop { background-color: #cecfce; } + + scrollbar slider:disabled { background-color: transparent; } + +-scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; } ++scrollbar.fine-tune slider { min-width: 6px; min-height: 6px; } + +-scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; } ++scrollbar.fine-tune.horizontal slider { border-width: 6px 4px; } + +-scrollbar.fine-tune.vertical slider { border-width: 4px 5px; } ++scrollbar.fine-tune.vertical slider { border-width: 4px 6px; } + + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; } + +@@ -1934,7 +1934,11 @@ decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9p + + decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); transition: 200ms ease-out; } + +-.maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; } ++.maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; } ++ ++.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); } ++ ++.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); } + + .popup decoration { box-shadow: none; } + +-- +2.29.2 + diff --git a/gtk3.spec b/gtk3.spec index 7921112..a7d6369 100644 --- a/gtk3.spec +++ b/gtk3.spec @@ -29,6 +29,7 @@ Source0: http://download.gnome.org/sources/gtk+/3.24/gtk+-%{version}.tar.xz # Backported from upstream Patch1: 0001-imcontext-Fix-a-regression-in-Compose-file-parsing.patch Patch2: 0002-imcontext-Be-more-lenient-in-parsing-Compose.patch +Patch3: 0003-Adwaita-Scrollbar-transitions-and-size.patch BuildRequires: pkgconfig(atk) >= %{atk_version} BuildRequires: pkgconfig(atk-bridge-2.0) @@ -321,6 +322,7 @@ gtk-query-immodules-3.0-%{__isa_bits} --update-cache &>/dev/null || : %changelog * Mon Feb 15 2021 Kalev Lember - 3.24.25-2 - Backport upstream patches to fix regressions in Compose file parsing +- Backport upstream patch to further tweak scrollbar transitions and size * Fri Feb 12 2021 Kalev Lember - 3.24.25-1 - Update to 3.24.25