fix laggy scrollbar in gnome-terminal

8 files changed, 441 insertions, 836 deletions

diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css
index ac96b2d..87ceb4e 100644
--- a/common/gtk-3.0/3.20/gtk-dark.css
+++ b/common/gtk-3.0/3.20/gtk-dark.css
@@ -1779,127 +1779,73 @@ notebook {
         notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover {
           color: #5294E2; }
 
-* {
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false; }
-
-scrollbar button,
-.scrollbar button {
-  border: none; }
-
-scrollbar.vertical button.down,
-.scrollbar.vertical button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
-
-scrollbar.vertical button.up,
-.scrollbar.vertical button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
-
-scrollbar.horizontal button.down,
-.scrollbar.horizontal button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
-
-scrollbar.horizontal button.up,
-.scrollbar.horizontal button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering),
-.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
-    margin: 0;
-    background-color: #a5abb5;
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    background-clip: padding-box; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
-    border-style: none;
-    background-color: transparent; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
-    min-width: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
-    min-height: 4px;
-    margin-left: 2px;
-    margin-right: 2px; }
-
-scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering,
-.scrollbar.overlay-indicator.dragging,
-.scrollbar.overlay-indicator.hovering {
-  opacity: 0.99; }
-
-scrollbar trough,
-.scrollbar trough {
+scrollbar {
   background-color: #3e434f;
-  border: 1px none #2b2e39; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  background-color: #767b87; }
-  scrollbar slider:hover,
-  scrollbar .slider:hover,
-  .scrollbar slider:hover,
-  .scrollbar .slider:hover {
-    background-color: #676b78; }
-  scrollbar slider:hover:active,
-  scrollbar .slider:hover:active,
-  .scrollbar slider:hover:active,
-  .scrollbar .slider:hover:active {
-    background-color: #5294E2; }
-  scrollbar slider:disabled,
-  scrollbar .slider:disabled,
-  .scrollbar slider:disabled,
-  .scrollbar .slider:disabled {
+  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 #2b2e39; }
+  scrollbar.bottom {
+    border-top: 1px solid #2b2e39; }
+  scrollbar.left {
+    border-right: 1px solid #2b2e39; }
+  scrollbar.right {
+    border-left: 1px solid #2b2e39; }
+  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 slider {
+    min-width: 6px;
+    min-height: 6px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    background-clip: padding-box;
+    background-color: #767b87; }
+    scrollbar slider:hover {
+      background-color: #676b78; }
+    scrollbar slider:hover:active {
+      background-color: #5294E2; }
+    scrollbar slider:disabled {
+      background-color: transparent; }
+  scrollbar.fine-tune slider {
+    min-width: 4px;
+    min-height: 4px; }
+  scrollbar.fine-tune.horizontal slider {
+    border-width: 5px 4px; }
+  scrollbar.fine-tune.vertical slider {
+    border-width: 4px 5px; }
+  scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    opacity: 0.4;
+    border-color: transparent;
     background-color: transparent; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  border-radius: 100px;
-  margin: 3px; }
-
-scrollbar.vertical.fine-tune slider,
-.scrollbar.vertical.fine-tune slider {
-  min-width: 4px;
-  margin: 4px; }
-
-scrollbar.vertical slider,
-.scrollbar.vertical slider {
-  min-height: 42px;
-  min-width: 6px;
-  margin: 3px; }
-
-scrollbar.vertical trough:dir(ltr),
-.scrollbar.vertical trough:dir(ltr) {
-  border-left-style: solid; }
-
-scrollbar.vertical trough:dir(rtl),
-.scrollbar.vertical trough:dir(rtl) {
-  border-right-style: solid; }
-
-scrollbar.horizontal.fine-tune slider,
-.scrollbar.horizontal.fine-tune slider {
-  min-height: 4px;
-  margin: 4px; }
-
-scrollbar.horizontal slider,
-scrollbar.horizontal .slider,
-.scrollbar.horizontal slider,
-.scrollbar.horizontal .slider {
-  min-height: 6px;
-  min-width: 42px;
-  margin-top: 3px; }
-
-scrollbar.horizontal trough,
-.scrollbar.horizontal trough {
-  border-top-style: solid; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
+      margin: 0;
+      min-width: 4px;
+      min-height: 4px;
+      background-color: #a5abb5;
+      border: 1px solid rgba(0, 0, 0, 0.3); }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+      margin: 0 2px;
+      min-width: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+      margin: 2px 0;
+      min-height: 40px; }
+  scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
+    opacity: 0.99; }
+  scrollbar.horizontal slider {
+    min-width: 40px; }
+  scrollbar.vertical slider {
+    min-height: 40px; }
 
 switch {
   font: 1;
@@ -3141,12 +3087,6 @@ modelbutton.flat:selected arrow, treeview.view:selected, treeview.view:selected:
 terminal-window notebook > header.top > tabs > tab:checked {
   box-shadow: inset 0 -1px #2b2e39; }
 
-terminal-window scrollbar.vertical slider {
-  margin-left: 3px; }
-
-terminal-window scrollbar trough {
-  border-width: 0; }
-
 terminal-window notebook > header.top {
   padding-top: 3px;
   box-shadow: inset 0 1px #262a33, inset 0 -1px #2b2e39; }
diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css
index 83db1c3..e89f368 100644
--- a/common/gtk-3.0/3.20/gtk-darker.css
+++ b/common/gtk-3.0/3.20/gtk-darker.css
@@ -1778,127 +1778,73 @@ notebook {
         notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover {
           color: #5294E2; }
 
-* {
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false; }
-
-scrollbar button,
-.scrollbar button {
-  border: none; }
-
-scrollbar.vertical button.down,
-.scrollbar.vertical button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
-
-scrollbar.vertical button.up,
-.scrollbar.vertical button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
-
-scrollbar.horizontal button.down,
-.scrollbar.horizontal button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
-
-scrollbar.horizontal button.up,
-.scrollbar.horizontal button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering),
-.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
-    margin: 0;
-    background-color: #8a8e96;
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    background-clip: padding-box; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
-    border-style: none;
-    background-color: transparent; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
-    min-width: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
-    min-height: 4px;
-    margin-left: 2px;
-    margin-right: 2px; }
-
-scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering,
-.scrollbar.overlay-indicator.dragging,
-.scrollbar.overlay-indicator.hovering {
-  opacity: 0.99; }
-
-scrollbar trough,
-.scrollbar trough {
+scrollbar {
   background-color: #fcfcfc;
-  border: 1px none #dcdfe3; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  background-color: #b8babf; }
-  scrollbar slider:hover,
-  scrollbar .slider:hover,
-  .scrollbar slider:hover,
-  .scrollbar .slider:hover {
-    background-color: #c7c9cd; }
-  scrollbar slider:hover:active,
-  scrollbar .slider:hover:active,
-  .scrollbar slider:hover:active,
-  .scrollbar .slider:hover:active {
-    background-color: #5294E2; }
-  scrollbar slider:disabled,
-  scrollbar .slider:disabled,
-  .scrollbar slider:disabled,
-  .scrollbar .slider:disabled {
+  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 #dcdfe3; }
+  scrollbar.bottom {
+    border-top: 1px solid #dcdfe3; }
+  scrollbar.left {
+    border-right: 1px solid #dcdfe3; }
+  scrollbar.right {
+    border-left: 1px solid #dcdfe3; }
+  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 slider {
+    min-width: 6px;
+    min-height: 6px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    background-clip: padding-box;
+    background-color: #b8babf; }
+    scrollbar slider:hover {
+      background-color: #c7c9cd; }
+    scrollbar slider:hover:active {
+      background-color: #5294E2; }
+    scrollbar slider:disabled {
+      background-color: transparent; }
+  scrollbar.fine-tune slider {
+    min-width: 4px;
+    min-height: 4px; }
+  scrollbar.fine-tune.horizontal slider {
+    border-width: 5px 4px; }
+  scrollbar.fine-tune.vertical slider {
+    border-width: 4px 5px; }
+  scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    opacity: 0.4;
+    border-color: transparent;
     background-color: transparent; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  border-radius: 100px;
-  margin: 3px; }
-
-scrollbar.vertical.fine-tune slider,
-.scrollbar.vertical.fine-tune slider {
-  min-width: 4px;
-  margin: 4px; }
-
-scrollbar.vertical slider,
-.scrollbar.vertical slider {
-  min-height: 42px;
-  min-width: 6px;
-  margin: 3px; }
-
-scrollbar.vertical trough:dir(ltr),
-.scrollbar.vertical trough:dir(ltr) {
-  border-left-style: solid; }
-
-scrollbar.vertical trough:dir(rtl),
-.scrollbar.vertical trough:dir(rtl) {
-  border-right-style: solid; }
-
-scrollbar.horizontal.fine-tune slider,
-.scrollbar.horizontal.fine-tune slider {
-  min-height: 4px;
-  margin: 4px; }
-
-scrollbar.horizontal slider,
-scrollbar.horizontal .slider,
-.scrollbar.horizontal slider,
-.scrollbar.horizontal .slider {
-  min-height: 6px;
-  min-width: 42px;
-  margin-top: 3px; }
-
-scrollbar.horizontal trough,
-.scrollbar.horizontal trough {
-  border-top-style: solid; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
+      margin: 0;
+      min-width: 4px;
+      min-height: 4px;
+      background-color: #8a8e96;
+      border: 1px solid rgba(255, 255, 255, 0.6); }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+      margin: 0 2px;
+      min-width: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+      margin: 2px 0;
+      min-height: 40px; }
+  scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
+    opacity: 0.99; }
+  scrollbar.horizontal slider {
+    min-width: 40px; }
+  scrollbar.vertical slider {
+    min-height: 40px; }
 
 switch {
   font: 1;
@@ -3140,12 +3086,6 @@ modelbutton.flat:selected arrow, treeview.view:selected, treeview.view:selected:
 terminal-window notebook > header.top > tabs > tab:checked {
   box-shadow: inset 0 -1px #dcdfe3; }
 
-terminal-window scrollbar.vertical slider {
-  margin-left: 3px; }
-
-terminal-window scrollbar trough {
-  border-width: 0; }
-
 terminal-window notebook > header.top {
   padding-top: 3px;
   box-shadow: inset 0 1px #262a33, inset 0 -1px #dcdfe3; }
diff --git a/common/gtk-3.0/3.20/gtk-solid-dark.css b/common/gtk-3.0/3.20/gtk-solid-dark.css
index d320cae..af746a3 100644
--- a/common/gtk-3.0/3.20/gtk-solid-dark.css
+++ b/common/gtk-3.0/3.20/gtk-solid-dark.css
@@ -1779,127 +1779,73 @@ notebook {
         notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover {
           color: #5294E2; }
 
-* {
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false; }
-
-scrollbar button,
-.scrollbar button {
-  border: none; }
-
-scrollbar.vertical button.down,
-.scrollbar.vertical button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
-
-scrollbar.vertical button.up,
-.scrollbar.vertical button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
-
-scrollbar.horizontal button.down,
-.scrollbar.horizontal button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
-
-scrollbar.horizontal button.up,
-.scrollbar.horizontal button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering),
-.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
-    margin: 0;
-    background-color: #a5abb5;
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    background-clip: padding-box; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
-    border-style: none;
-    background-color: transparent; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
-    min-width: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
-    min-height: 4px;
-    margin-left: 2px;
-    margin-right: 2px; }
-
-scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering,
-.scrollbar.overlay-indicator.dragging,
-.scrollbar.overlay-indicator.hovering {
-  opacity: 0.99; }
-
-scrollbar trough,
-.scrollbar trough {
+scrollbar {
   background-color: #3e434f;
-  border: 1px none #2b2e39; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  background-color: #767b87; }
-  scrollbar slider:hover,
-  scrollbar .slider:hover,
-  .scrollbar slider:hover,
-  .scrollbar .slider:hover {
-    background-color: #676b78; }
-  scrollbar slider:hover:active,
-  scrollbar .slider:hover:active,
-  .scrollbar slider:hover:active,
-  .scrollbar .slider:hover:active {
-    background-color: #5294E2; }
-  scrollbar slider:disabled,
-  scrollbar .slider:disabled,
-  .scrollbar slider:disabled,
-  .scrollbar .slider:disabled {
+  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 #2b2e39; }
+  scrollbar.bottom {
+    border-top: 1px solid #2b2e39; }
+  scrollbar.left {
+    border-right: 1px solid #2b2e39; }
+  scrollbar.right {
+    border-left: 1px solid #2b2e39; }
+  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 slider {
+    min-width: 6px;
+    min-height: 6px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    background-clip: padding-box;
+    background-color: #767b87; }
+    scrollbar slider:hover {
+      background-color: #676b78; }
+    scrollbar slider:hover:active {
+      background-color: #5294E2; }
+    scrollbar slider:disabled {
+      background-color: transparent; }
+  scrollbar.fine-tune slider {
+    min-width: 4px;
+    min-height: 4px; }
+  scrollbar.fine-tune.horizontal slider {
+    border-width: 5px 4px; }
+  scrollbar.fine-tune.vertical slider {
+    border-width: 4px 5px; }
+  scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    opacity: 0.4;
+    border-color: transparent;
     background-color: transparent; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  border-radius: 100px;
-  margin: 3px; }
-
-scrollbar.vertical.fine-tune slider,
-.scrollbar.vertical.fine-tune slider {
-  min-width: 4px;
-  margin: 4px; }
-
-scrollbar.vertical slider,
-.scrollbar.vertical slider {
-  min-height: 42px;
-  min-width: 6px;
-  margin: 3px; }
-
-scrollbar.vertical trough:dir(ltr),
-.scrollbar.vertical trough:dir(ltr) {
-  border-left-style: solid; }
-
-scrollbar.vertical trough:dir(rtl),
-.scrollbar.vertical trough:dir(rtl) {
-  border-right-style: solid; }
-
-scrollbar.horizontal.fine-tune slider,
-.scrollbar.horizontal.fine-tune slider {
-  min-height: 4px;
-  margin: 4px; }
-
-scrollbar.horizontal slider,
-scrollbar.horizontal .slider,
-.scrollbar.horizontal slider,
-.scrollbar.horizontal .slider {
-  min-height: 6px;
-  min-width: 42px;
-  margin-top: 3px; }
-
-scrollbar.horizontal trough,
-.scrollbar.horizontal trough {
-  border-top-style: solid; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
+      margin: 0;
+      min-width: 4px;
+      min-height: 4px;
+      background-color: #a5abb5;
+      border: 1px solid rgba(0, 0, 0, 0.3); }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+      margin: 0 2px;
+      min-width: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+      margin: 2px 0;
+      min-height: 40px; }
+  scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
+    opacity: 0.99; }
+  scrollbar.horizontal slider {
+    min-width: 40px; }
+  scrollbar.vertical slider {
+    min-height: 40px; }
 
 switch {
   font: 1;
@@ -3141,12 +3087,6 @@ modelbutton.flat:selected arrow, treeview.view:selected, treeview.view:selected:
 terminal-window notebook > header.top > tabs > tab:checked {
   box-shadow: inset 0 -1px #2b2e39; }
 
-terminal-window scrollbar.vertical slider {
-  margin-left: 3px; }
-
-terminal-window scrollbar trough {
-  border-width: 0; }
-
 terminal-window notebook > header.top {
   padding-top: 3px;
   box-shadow: inset 0 1px #262a33, inset 0 -1px #2b2e39; }
diff --git a/common/gtk-3.0/3.20/gtk-solid-darker.css b/common/gtk-3.0/3.20/gtk-solid-darker.css
index 559549e..3651180 100644
--- a/common/gtk-3.0/3.20/gtk-solid-darker.css
+++ b/common/gtk-3.0/3.20/gtk-solid-darker.css
@@ -1778,127 +1778,73 @@ notebook {
         notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover {
           color: #5294E2; }
 
-* {
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false; }
-
-scrollbar button,
-.scrollbar button {
-  border: none; }
-
-scrollbar.vertical button.down,
-.scrollbar.vertical button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
-
-scrollbar.vertical button.up,
-.scrollbar.vertical button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
-
-scrollbar.horizontal button.down,
-.scrollbar.horizontal button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
-
-scrollbar.horizontal button.up,
-.scrollbar.horizontal button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering),
-.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
-    margin: 0;
-    background-color: #8a8e96;
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    background-clip: padding-box; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
-    border-style: none;
-    background-color: transparent; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
-    min-width: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
-    min-height: 4px;
-    margin-left: 2px;
-    margin-right: 2px; }
-
-scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering,
-.scrollbar.overlay-indicator.dragging,
-.scrollbar.overlay-indicator.hovering {
-  opacity: 0.99; }
-
-scrollbar trough,
-.scrollbar trough {
+scrollbar {
   background-color: #fcfcfc;
-  border: 1px none #dcdfe3; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  background-color: #b8babf; }
-  scrollbar slider:hover,
-  scrollbar .slider:hover,
-  .scrollbar slider:hover,
-  .scrollbar .slider:hover {
-    background-color: #c7c9cd; }
-  scrollbar slider:hover:active,
-  scrollbar .slider:hover:active,
-  .scrollbar slider:hover:active,
-  .scrollbar .slider:hover:active {
-    background-color: #5294E2; }
-  scrollbar slider:disabled,
-  scrollbar .slider:disabled,
-  .scrollbar slider:disabled,
-  .scrollbar .slider:disabled {
+  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 #dcdfe3; }
+  scrollbar.bottom {
+    border-top: 1px solid #dcdfe3; }
+  scrollbar.left {
+    border-right: 1px solid #dcdfe3; }
+  scrollbar.right {
+    border-left: 1px solid #dcdfe3; }
+  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 slider {
+    min-width: 6px;
+    min-height: 6px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    background-clip: padding-box;
+    background-color: #b8babf; }
+    scrollbar slider:hover {
+      background-color: #c7c9cd; }
+    scrollbar slider:hover:active {
+      background-color: #5294E2; }
+    scrollbar slider:disabled {
+      background-color: transparent; }
+  scrollbar.fine-tune slider {
+    min-width: 4px;
+    min-height: 4px; }
+  scrollbar.fine-tune.horizontal slider {
+    border-width: 5px 4px; }
+  scrollbar.fine-tune.vertical slider {
+    border-width: 4px 5px; }
+  scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    opacity: 0.4;
+    border-color: transparent;
     background-color: transparent; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  border-radius: 100px;
-  margin: 3px; }
-
-scrollbar.vertical.fine-tune slider,
-.scrollbar.vertical.fine-tune slider {
-  min-width: 4px;
-  margin: 4px; }
-
-scrollbar.vertical slider,
-.scrollbar.vertical slider {
-  min-height: 42px;
-  min-width: 6px;
-  margin: 3px; }
-
-scrollbar.vertical trough:dir(ltr),
-.scrollbar.vertical trough:dir(ltr) {
-  border-left-style: solid; }
-
-scrollbar.vertical trough:dir(rtl),
-.scrollbar.vertical trough:dir(rtl) {
-  border-right-style: solid; }
-
-scrollbar.horizontal.fine-tune slider,
-.scrollbar.horizontal.fine-tune slider {
-  min-height: 4px;
-  margin: 4px; }
-
-scrollbar.horizontal slider,
-scrollbar.horizontal .slider,
-.scrollbar.horizontal slider,
-.scrollbar.horizontal .slider {
-  min-height: 6px;
-  min-width: 42px;
-  margin-top: 3px; }
-
-scrollbar.horizontal trough,
-.scrollbar.horizontal trough {
-  border-top-style: solid; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
+      margin: 0;
+      min-width: 4px;
+      min-height: 4px;
+      background-color: #8a8e96;
+      border: 1px solid rgba(255, 255, 255, 0.6); }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+      margin: 0 2px;
+      min-width: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+      margin: 2px 0;
+      min-height: 40px; }
+  scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
+    opacity: 0.99; }
+  scrollbar.horizontal slider {
+    min-width: 40px; }
+  scrollbar.vertical slider {
+    min-height: 40px; }
 
 switch {
   font: 1;
@@ -3140,12 +3086,6 @@ modelbutton.flat:selected arrow, treeview.view:selected, treeview.view:selected:
 terminal-window notebook > header.top > tabs > tab:checked {
   box-shadow: inset 0 -1px #dcdfe3; }
 
-terminal-window scrollbar.vertical slider {
-  margin-left: 3px; }
-
-terminal-window scrollbar trough {
-  border-width: 0; }
-
 terminal-window notebook > header.top {
   padding-top: 3px;
   box-shadow: inset 0 1px #262a33, inset 0 -1px #dcdfe3; }
diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css
index 353da1e..c16b3ba 100644
--- a/common/gtk-3.0/3.20/gtk-solid.css
+++ b/common/gtk-3.0/3.20/gtk-solid.css
@@ -1782,127 +1782,73 @@ notebook {
         notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover {
           color: #5294E2; }
 
-* {
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false; }
-
-scrollbar button,
-.scrollbar button {
-  border: none; }
-
-scrollbar.vertical button.down,
-.scrollbar.vertical button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
-
-scrollbar.vertical button.up,
-.scrollbar.vertical button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
-
-scrollbar.horizontal button.down,
-.scrollbar.horizontal button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
-
-scrollbar.horizontal button.up,
-.scrollbar.horizontal button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering),
-.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
-    margin: 0;
-    background-color: #8a8e96;
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    background-clip: padding-box; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
-    border-style: none;
-    background-color: transparent; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
-    min-width: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
-    min-height: 4px;
-    margin-left: 2px;
-    margin-right: 2px; }
-
-scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering,
-.scrollbar.overlay-indicator.dragging,
-.scrollbar.overlay-indicator.hovering {
-  opacity: 0.99; }
-
-scrollbar trough,
-.scrollbar trough {
+scrollbar {
   background-color: #fcfcfc;
-  border: 1px none #dcdfe3; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  background-color: #b8babf; }
-  scrollbar slider:hover,
-  scrollbar .slider:hover,
-  .scrollbar slider:hover,
-  .scrollbar .slider:hover {
-    background-color: #c7c9cd; }
-  scrollbar slider:hover:active,
-  scrollbar .slider:hover:active,
-  .scrollbar slider:hover:active,
-  .scrollbar .slider:hover:active {
-    background-color: #5294E2; }
-  scrollbar slider:disabled,
-  scrollbar .slider:disabled,
-  .scrollbar slider:disabled,
-  .scrollbar .slider:disabled {
+  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 #dcdfe3; }
+  scrollbar.bottom {
+    border-top: 1px solid #dcdfe3; }
+  scrollbar.left {
+    border-right: 1px solid #dcdfe3; }
+  scrollbar.right {
+    border-left: 1px solid #dcdfe3; }
+  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 slider {
+    min-width: 6px;
+    min-height: 6px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    background-clip: padding-box;
+    background-color: #b8babf; }
+    scrollbar slider:hover {
+      background-color: #c7c9cd; }
+    scrollbar slider:hover:active {
+      background-color: #5294E2; }
+    scrollbar slider:disabled {
+      background-color: transparent; }
+  scrollbar.fine-tune slider {
+    min-width: 4px;
+    min-height: 4px; }
+  scrollbar.fine-tune.horizontal slider {
+    border-width: 5px 4px; }
+  scrollbar.fine-tune.vertical slider {
+    border-width: 4px 5px; }
+  scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    opacity: 0.4;
+    border-color: transparent;
     background-color: transparent; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  border-radius: 100px;
-  margin: 3px; }
-
-scrollbar.vertical.fine-tune slider,
-.scrollbar.vertical.fine-tune slider {
-  min-width: 4px;
-  margin: 4px; }
-
-scrollbar.vertical slider,
-.scrollbar.vertical slider {
-  min-height: 42px;
-  min-width: 6px;
-  margin: 3px; }
-
-scrollbar.vertical trough:dir(ltr),
-.scrollbar.vertical trough:dir(ltr) {
-  border-left-style: solid; }
-
-scrollbar.vertical trough:dir(rtl),
-.scrollbar.vertical trough:dir(rtl) {
-  border-right-style: solid; }
-
-scrollbar.horizontal.fine-tune slider,
-.scrollbar.horizontal.fine-tune slider {
-  min-height: 4px;
-  margin: 4px; }
-
-scrollbar.horizontal slider,
-scrollbar.horizontal .slider,
-.scrollbar.horizontal slider,
-.scrollbar.horizontal .slider {
-  min-height: 6px;
-  min-width: 42px;
-  margin-top: 3px; }
-
-scrollbar.horizontal trough,
-.scrollbar.horizontal trough {
-  border-top-style: solid; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
+      margin: 0;
+      min-width: 4px;
+      min-height: 4px;
+      background-color: #8a8e96;
+      border: 1px solid rgba(255, 255, 255, 0.6); }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+      margin: 0 2px;
+      min-width: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+      margin: 2px 0;
+      min-height: 40px; }
+  scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
+    opacity: 0.99; }
+  scrollbar.horizontal slider {
+    min-width: 40px; }
+  scrollbar.vertical slider {
+    min-height: 40px; }
 
 switch {
   font: 1;
@@ -3144,12 +3090,6 @@ modelbutton.flat:selected arrow, treeview.view:selected, treeview.view:selected:
 terminal-window notebook > header.top > tabs > tab:checked {
   box-shadow: inset 0 -1px #dcdfe3; }
 
-terminal-window scrollbar.vertical slider {
-  margin-left: 3px; }
-
-terminal-window scrollbar trough {
-  border-width: 0; }
-
 terminal-window notebook > header.top {
   padding-top: 3px;
   box-shadow: inset 0 1px #d4d5db, inset 0 -1px #dcdfe3; }
diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css
index 9776266..fafb64f 100644
--- a/common/gtk-3.0/3.20/gtk.css
+++ b/common/gtk-3.0/3.20/gtk.css
@@ -1782,127 +1782,73 @@ notebook {
         notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover {
           color: #5294E2; }
 
-* {
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false; }
-
-scrollbar button,
-.scrollbar button {
-  border: none; }
-
-scrollbar.vertical button.down,
-.scrollbar.vertical button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
-
-scrollbar.vertical button.up,
-.scrollbar.vertical button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
-
-scrollbar.horizontal button.down,
-.scrollbar.horizontal button.down {
-  -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
-
-scrollbar.horizontal button.up,
-.scrollbar.horizontal button.up {
-  -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
-
-scrollbar.overlay-indicator:not(.dragging):not(.hovering),
-.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
-  opacity: 0.4; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
-    margin: 0;
-    background-color: #8a8e96;
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    background-clip: padding-box; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
-    border-style: none;
-    background-color: transparent; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
-    min-width: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px; }
-  scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider,
-  .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
-    min-height: 4px;
-    margin-left: 2px;
-    margin-right: 2px; }
-
-scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering,
-.scrollbar.overlay-indicator.dragging,
-.scrollbar.overlay-indicator.hovering {
-  opacity: 0.99; }
-
-scrollbar trough,
-.scrollbar trough {
+scrollbar {
   background-color: #fcfcfc;
-  border: 1px none #dcdfe3; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  background-color: #b8babf; }
-  scrollbar slider:hover,
-  scrollbar .slider:hover,
-  .scrollbar slider:hover,
-  .scrollbar .slider:hover {
-    background-color: #c7c9cd; }
-  scrollbar slider:hover:active,
-  scrollbar .slider:hover:active,
-  .scrollbar slider:hover:active,
-  .scrollbar .slider:hover:active {
-    background-color: #5294E2; }
-  scrollbar slider:disabled,
-  scrollbar .slider:disabled,
-  .scrollbar slider:disabled,
-  .scrollbar .slider:disabled {
+  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 #dcdfe3; }
+  scrollbar.bottom {
+    border-top: 1px solid #dcdfe3; }
+  scrollbar.left {
+    border-right: 1px solid #dcdfe3; }
+  scrollbar.right {
+    border-left: 1px solid #dcdfe3; }
+  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 slider {
+    min-width: 6px;
+    min-height: 6px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    background-clip: padding-box;
+    background-color: #b8babf; }
+    scrollbar slider:hover {
+      background-color: #c7c9cd; }
+    scrollbar slider:hover:active {
+      background-color: #5294E2; }
+    scrollbar slider:disabled {
+      background-color: transparent; }
+  scrollbar.fine-tune slider {
+    min-width: 4px;
+    min-height: 4px; }
+  scrollbar.fine-tune.horizontal slider {
+    border-width: 5px 4px; }
+  scrollbar.fine-tune.vertical slider {
+    border-width: 4px 5px; }
+  scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    opacity: 0.4;
+    border-color: transparent;
     background-color: transparent; }
-
-scrollbar slider,
-scrollbar .slider,
-.scrollbar slider,
-.scrollbar .slider {
-  border-radius: 100px;
-  margin: 3px; }
-
-scrollbar.vertical.fine-tune slider,
-.scrollbar.vertical.fine-tune slider {
-  min-width: 4px;
-  margin: 4px; }
-
-scrollbar.vertical slider,
-.scrollbar.vertical slider {
-  min-height: 42px;
-  min-width: 6px;
-  margin: 3px; }
-
-scrollbar.vertical trough:dir(ltr),
-.scrollbar.vertical trough:dir(ltr) {
-  border-left-style: solid; }
-
-scrollbar.vertical trough:dir(rtl),
-.scrollbar.vertical trough:dir(rtl) {
-  border-right-style: solid; }
-
-scrollbar.horizontal.fine-tune slider,
-.scrollbar.horizontal.fine-tune slider {
-  min-height: 4px;
-  margin: 4px; }
-
-scrollbar.horizontal slider,
-scrollbar.horizontal .slider,
-.scrollbar.horizontal slider,
-.scrollbar.horizontal .slider {
-  min-height: 6px;
-  min-width: 42px;
-  margin-top: 3px; }
-
-scrollbar.horizontal trough,
-.scrollbar.horizontal trough {
-  border-top-style: solid; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
+      margin: 0;
+      min-width: 4px;
+      min-height: 4px;
+      background-color: #8a8e96;
+      border: 1px solid rgba(255, 255, 255, 0.6); }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+      margin: 0 2px;
+      min-width: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+      margin: 2px 0;
+      min-height: 40px; }
+  scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
+    opacity: 0.99; }
+  scrollbar.horizontal slider {
+    min-width: 40px; }
+  scrollbar.vertical slider {
+    min-height: 40px; }
 
 switch {
   font: 1;
@@ -3144,12 +3090,6 @@ modelbutton.flat:selected arrow, treeview.view:selected, treeview.view:selected:
 terminal-window notebook > header.top > tabs > tab:checked {
   box-shadow: inset 0 -1px #dcdfe3; }
 
-terminal-window scrollbar.vertical slider {
-  margin-left: 3px; }
-
-terminal-window scrollbar trough {
-  border-width: 0; }
-
 terminal-window notebook > header.top {
   padding-top: 3px;
   box-shadow: inset 0 1px #d4d5db, inset 0 -1px #dcdfe3; }
diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss
index f7b9d54..c709235 100644
--- a/common/gtk-3.0/3.20/sass/_applications.scss
+++ b/common/gtk-3.0/3.20/sass/_applications.scss
@@ -11,12 +11,6 @@ terminal-window notebook {
 //
 terminal-window {
 
-  scrollbar {
-    &.vertical slider { margin-left: 3px; }
-
-    trough { border-width: 0; }
-  }
-
   notebook {
     > header.top {
       padding-top: 3px;
diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss
index b024f0f..42c4211 100644
--- a/common/gtk-3.0/3.20/sass/_common.scss
+++ b/common/gtk-3.0/3.20/sass/_common.scss
@@ -1866,15 +1866,23 @@ notebook {
 //
 $_scrollbar_bg_color: darken($base_color, 1%);
 
-scrollbar,
-.scrollbar {
+scrollbar {
+  $_slider_min_length: 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;
+
+  // 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; }
 
   button { border: none; }
 
@@ -1888,32 +1896,55 @@ scrollbar,
     &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
   }
 
+  // slider
+  slider {
+    min-width: 6px;
+    min-height: 6px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    background-clip: padding-box;
+    background-color: mix($fg_color, $bg_color, 40%);
+
+    &:hover { background-color: mix($fg_color, $bg_color, 30%); }
+
+    &:hover:active { background-color: $selected_bg_color;}
+
+    &:disabled { background-color: transparent; }
+  }
+
+  &.fine-tune {
+    slider {
+      min-width: 4px;
+      min-height: 4px;
+    }
+
+    &.horizontal slider { border-width: 5px 4px; }
+    &.vertical slider { border-width: 4px 5px; }
+  }
+
   &.overlay-indicator {
-    &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
+    &:not(.dragging):not(.hovering) {
       opacity: 0.4;
+      border-color: transparent;
+      background-color: transparent;
 
       slider {
         margin: 0;
+        min-width: 4px;
+        min-height: 4px;
         background-color: mix($fg_color, $bg_color, 70%);
         border: 1px solid if($variant == 'light', transparentize(white, 0.4), transparentize(black, 0.7));
-        background-clip: padding-box;
       }
 
-      trough {
-        border-style: none;
-        background-color: transparent;
+      &.horizontal slider {
+        margin: 0 2px;
+        min-width: $_slider_min_length;
       }
 
       &.vertical slider {
-        min-width: 4px;
-        margin-top: $_slider_margin - 1px;
-        margin-bottom: $_slider_margin - 1px;
-      }
-
-      &.horizontal slider {
-        min-height: 4px;
-        margin-left: $_slider_margin - 1px;
-        margin-right: $_slider_margin - 1px;
+        margin: 2px 0;
+        min-height: $_slider_min_length;
       }
     }
 
@@ -1921,68 +1952,8 @@ scrollbar,
     &.hovering { opacity: 0.99; }
   }
 
-  // trough coloring
-  trough {
-    background-color: $_scrollbar_bg_color;
-    border: 1px none $borders_color;
-  }
-
-  // slider coloring
-  slider,
-  .slider {
-    background-color: mix($fg_color, $bg_color, 40%);
-
-    &:hover { background-color: mix($fg_color, $bg_color, 30%); }
-
-    &:hover:active { background-color: $selected_bg_color;}
-
-    &:disabled {
-      background-color: transparent;
-    }
-  }
-
-  // sizing
-  slider,
-  .slider {
-    border-radius: 100px;
-    margin: $_slider_margin;
-  }
-
-  &.vertical {
-
-    &.fine-tune slider {
-      min-width: 4px;
-      margin: $_slider_fine_tune_margin;
-    }
-
-    slider {
-      min-height: 42px;
-      min-width: 6px;
-      margin: $_slider_margin;
-    }
-
-    trough {
-      &:dir(ltr) { border-left-style: solid; }
-      &:dir(rtl) { border-right-style: solid; }
-    }
-  }
-
-  &.horizontal {
-
-    &.fine-tune slider {
-      min-height: 4px;
-      margin: $_slider_fine_tune_margin;
-    }
-
-    slider,
-    .slider {
-      min-height: 6px;
-      min-width: 42px;
-      margin-top: $_slider_margin;
-    }
-
-    trough { border-top-style: solid; }
-  }
+  &.horizontal slider { min-width: $_slider_min_length; }
+  &.vertical slider { min-height: $_slider_min_length; }
 }
 
 //