[gtk+] Adwaita: scrollbar style rewrite

From: Lapo Calamandrei <lapo src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+] Adwaita: scrollbar style rewrite
Date: Sat, 5 Mar 2016 00:43:27 +0000 (UTC)
commit 0c987f94c8a870a154288b52322066bf2cae9a1c
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Sat Mar 5 01:39:13 2016 +0100

    Adwaita: scrollbar style rewrite
    
    works correctly with the new gadgettified GtkRange Cosimo nicelly
    delivered, as a bonus steppers are styled for overlay indicator
    usage as well.

 gtk/theme/Adwaita/_colors.scss           |    6 +-
 gtk/theme/Adwaita/_common.scss           |  203 +++++++++++++++-------------
 gtk/theme/Adwaita/gtk-contained-dark.css |  212 +++++++++++++++++++-----------
 gtk/theme/Adwaita/gtk-contained.css      |  212 +++++++++++++++++++-----------
 4 files changed, 382 insertions(+), 251 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 75caa4a..17f7498 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 cba757f..08be694 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');
-    }
+  // slider
+  slider {
+    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: $scrollbar_slider_hover_color; }
+
+    &:hover:active { background-color: $scrollbar_slider_active_color; }
+
+    &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
+
+    &:disabled { background-color: transparent; }
+  }
+
+  &.fine-tune slider {
+    min-width: 4px;
+    min-height: 4px;
+    border-width: 6px;
   }
 
   &.overlay-indicator {
-    &:not(.dragging):not(.hovering) { // Overlay scrolling 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);
-        background-clip: padding-box;
+        border: 1px solid if($variant == 'light', white, black);
       }
 
-      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;
+      button {
         min-width: 5px;
-      }
-
-      &.horizontal slider {
-        margin-left: $_slider_margin - 1px;
-        margin-right: $_slider_margin - 1px;
         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;
       }
-    }
-
-    &.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 {
-    background-color: mix($fg_color, $bg_color, 60%);
+      &.horizontal {
+        slider {
+          margin: 0 2px;
+          min-width: $_slider_min_lenght;
+        }
 
-    &:hover { background-color: mix($fg_color, $bg_color, 80%); }
+        button {
+          margin: 1px 2px;
+          min-width: 5px;
+        }
+      }
 
-    &:hover:active { background-color: if($variant=='light', darken($selected_bg_color, 10%), 
lighten($selected_bg_color, 10%));}
+      &.vertical {
+        slider {
+          margin: 2px 0;
+          min-height: $_slider_min_lenght;
+        }
 
-    &:backdrop { background-color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); }
+        button {
+          margin: 2px 1px;
+          min-height: 5px;
+        }
+      }
+    }
 
-    &:disabled { background-color: transparent; }
+    &.dragging,
+    &.hovering { opacity: 0.8; }
   }
 
+  &.horizontal slider { min-width: $_slider_min_lenght; }
 
-  // sizing
-  slider {
-    border-radius: 100px;
-    margin: $_slider_margin;
-  }
+  &.vertical slider { min-height: $_slider_min_lenght; }
 
-  &.fine-tune slider { margin: $_slider_fine_tune_margin; }
+  // button styling
+  button {
+    padding: 0;
+    min-width: 14px;
+    min-height: 14px;
+    border-style: none;
+    border-radius: 0;
+    transition-property: min-height, min-width, color;
 
-  &.vertical {
-    slider {
-      margin-left: 1px + $_slider_margin;
-      min-height: 42px;
-      min-width: 6px;
+    @include button(undecorated);
+    color: $scrollbar_slider_color;
 
-      &:dir(rtl) {
-        margin-left: $_slider_margin;
-        margin-right: 1px + $_slider_margin;
-      }
+    &: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;
 
-    &.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;
+      &:disabled {
+        @include button(undecorated);
+        color: transparentize($backdrop_scrollbar_slider_color, 0.8);
       }
     }
+  }
 
-    trough {
-      border-left-style: solid;
-
-      &:dir(rtl) {
-        border-left-style: none;
-        border-right-style: solid;
-      }
+  // button icons
+  &.vertical {
+    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 a5d4d8f..b5dbb17 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 c8e7a51..d34513b 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; }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]