Change scrollbars to classic big ones

[j1warren]

Hi, I prefer the scrollbars as they were in 2018, so for my Ubuntu 20.04 with gnome 3.36 I made changes (see below). Now 22.04 with Gnome 42 is coming, so I wanted to ask if there's better way to do it with current Plano source?

Also, currently my changes don't tell Gnome that scrollbars are bigger, so the strip for them is still small, so the UI elements may take some space for themselves under scrollbars. Is there some way to change that?

commit b0168e823a575d825c25e1e6358e5d183ed941ee Date: Fri Aug 14 13:28:59 2020 +0200

--- ./plano-theme_orig/gtk/src/Plano/gtk-3.0/_common.scss
+++ ./plano-theme/gtk/src/Plano/gtk-3.0/_common.scss
@@ -2590,7 +2590,7 @@
 //------------//
 scrollbar {
   $_slider_min_length: 40px;
-  $_button_size: 14px;
+  $_button_size: 18px;

   // enable steppers
   @at-root * {
@@ -2600,19 +2600,20 @@

   background-color: $scrollbar_bg_color;
   transition: $shorter_duration $ease-out-quad;
+  border-width: 0;

   // 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; }

   // slider
   slider {
-    min-width: 8px;
-    min-height: 8px;
+    min-width: $_button_size; //8px;
+    min-height: $_button_size; //8px;
     margin: -1px;
-    border: 4px solid transparent;
+    border: 1px solid transparent; //4px
     border-radius: 0;
     background-clip: padding-box;
     background-color: $scrollbar_slider_color;
@@ -2629,12 +2630,12 @@

   &.fine-tune {
     slider {
-      min-width: 6px;
-      min-height: 6px;
-    }
-
-    &.horizontal slider { border-width: 5px 4px; }
-    &.vertical slider { border-width: 4px 5px; }
+      min-width: $_button_size; //6px;
+      min-height: $_button_size; //6px;
+    }
+
+    &.horizontal slider { border-width: 0;} //5px 4px; }
+    &.vertical slider { border-width: 0;} //4px 5px; }
   }

   &.overlay-indicator {
@@ -2645,10 +2646,10 @@

       slider {
         margin: 0;
-        min-width: 4px;
-        min-height: 4px;
+        min-width: $_button_size; //4px;
+        min-height: $_button_size; //4px;
         background-color: $fg_color;
-        border: 1px solid if($variant == 'light', white, black);
+        border: 0px solid if($variant == 'light', white, black);
       }

       button {
@@ -2663,24 +2664,24 @@

       &.horizontal {
         slider {
-          margin: 0 2px;
+          margin: 0 0px;//2px
           min-width: $_slider_min_length;
         }

         button {
-          margin: 0px -1px; //1px 2px;
+          margin: -1px; //1px 2px;
           min-width: $_button_size;
         }
       }

       &.vertical {
         slider {
-          margin: 2px 0;
+          margin: 0px 0;//2px
           min-height: $_slider_min_length;
         }

         button {
-          margin: -1px 0px; //2px 1px;
+          margin: -1px; //2px 1px;
           min-height: $_button_size;
         }
       }