[gtk+/scrollable-indicator] Adwaita: scrollbar styling overhaul

From: Lapo Calamandrei <lapo src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+/scrollable-indicator] Adwaita: scrollbar styling overhaul
Date: Wed, 12 Nov 2014 12:06:02 +0000 (UTC)
commit 07537641f571c352629ace4853f51d591170744b
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Nov 6 23:57:40 2014 +0100

    Adwaita: scrollbar styling overhaul
    
      - finally added the missing border;
      - proper backdrop state styling;
      - tweaked overlay indicator;
      - sidebar special casing gone for now.

 gtk/resources/theme/Adwaita/_colors.scss           |    4 +
 gtk/resources/theme/Adwaita/_common.scss           |  140 +++++++++++++++-----
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |  142 +++++++++++++-------
 gtk/resources/theme/Adwaita/gtk-contained.css      |  142 +++++++++++++-------
 4 files changed, 295 insertions(+), 133 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_colors.scss b/gtk/resources/theme/Adwaita/_colors.scss
index a3bcbaa..acb5038 100644
--- a/gtk/resources/theme/Adwaita/_colors.scss
+++ b/gtk/resources/theme/Adwaita/_colors.scss
@@ -16,6 +16,8 @@ $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($se
 $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), 
lighten($selected_bg_color,10%));
 $top_hilight: $borders_edge;
 
+$scrollbar_bg_color: darken($bg_color, 7%);
+
 $warning_color: #f57900;
 $error_color: #cc0000;
 $success_color: if($variant == 'light', #73d216, darken(#73d216,10%));
@@ -46,3 +48,5 @@ $backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color,
 $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
 $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
 $backdrop_sidebar_bg_color: lighten($backdrop_bg_color,5%);
+
+$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 7807223..5621575 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -1895,87 +1895,157 @@ column-header.button.dnd { // for treeview-like derive widgets
  **************/
 
 .scrollbar {
-  background-clip: padding-box;
-  background-image: none;
-  border-style: solid;
+  -GtkRange-slider-width: 13;
   -GtkRange-trough-border: 1;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
                                        // sadly can't be in '.slider'
                                        // where it belongs
-
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1;
+
   .button {
     border: none;
   }
 
+  // trough coloring
   .trough {
-    @extend .scrollbars-junction;
-    &.right { border-right: 1px solid $borders_color; }
+    background-color: $scrollbar_bg_color;
+    border: 1px none $borders_color;
+
+    &:backdrop {
+      background-color: $backdrop_scrollbar_bg_color;
+      border-color: $backdrop_borders_color;
+    }
   }
 
+  // slider coloring
+  %scrollbar_slider_coloring,
   .slider {
-    border-radius: 20px;
-    border: 3px solid transparent; //margin :/
+    border-color: transparent;
+    border-style: solid;
     background-color: mix($bg_color, $fg_color, 70%);
+    background-clip: padding-box; // needed since we use the borders as margins
 
     &:hover { background-color: mix($bg_color, $fg_color, 50%); }
 
     &:prelight:active { background-color: $selected_bg_color; }
 
-    &.fine-tune {
-      border-width: 5px;
-      &:prelight:active { background-color: $selected_bg_color; }
-    }
+    &:backdrop { background-color: mix($backdrop_bg_color, $backdrop_fg_color, 60%); }
 
-    &:backdrop,
     &:insensitive {
-      background-color: mix($bg_color, $fg_color, 90%);
+      background-color: transparent;
     }
   }
 
-  .sidebar &.overlay-indicator,
-  &.overlay-indicator {  // overlay scrollbars
+  &.overlay-indicator { // Overlay scrolling indicator
     -GtkRange-slider-width: 8px;
 
-    .slider {
+    &.vertical .slider,
+    &.horizontal .slider {
+      background-color: transparentize($fg_color, 0.7);
       border-width: 2px;
-      background-color: transparentize($fg_color, 0.8);
+      border-radius: 30px;
     }
 
     .trough {
+      border-color: transparent;
       background-color: transparent;
     }
 
-    &.hovering,
-    &.dragging {
-      -GtkRange-slider-width: 15px;
+    &.dragging,
+    &.hovering {
+      -GtkRange-slider-width: 13;
+
+      &.vertical {
+        @extend %scrollbar_vertical_sizing;
+
+        .slider {
+          @extend %scrollbar_slider_coloring;
+
+          border-width: 1px 1px 1px 2px; // see comments in the sizing part
+          &:dir(rtl) { border-width: 1px 2px 1px 1px; }
+        }
+      }
+
+      &.horizontal {
+        @extend %scrollbar_horizontal_sizing;
 
-      .slider { 
-        border-width: 3px;
-        background-color: transparentize($fg_color, 0.7);
-        &:active { background-color: $fg_color; }
+        .slider {
+          @extend %scrollbar_slider_coloring;
+
+          border-width: 2px 1px 1px 1px;
+         }
       }
 
       .trough {
-        border: none;     // to override sidebar styling
-        border-radius: 0; //
-        background-color: if($variant == 'light', transparentize($fg_color, 0.9),
-                                                  transparentize($fg_color, 0.95));
+        border-color: transparentize($borders_color, 0.3);
+        background-color: transparentize($scrollbar_bg_color, 0.3);
       }
     }
   }
-}
 
+  // sizing
+  %scrollbar_vertical_sizing,
+  &.vertical {
+    .slider {
+      border-width: 3px 3px 3px 4px; // This is used as a margin actually, it's uneven since the
+                                     // trough border needs to be compensated
+      border-radius: 6px;
+      border-top-left-radius: 7px 6px;    // uneven vertical/horizontal radius since borders are uneven
+      border-bottom-left-radius: 7px 6px; //
+
+      &.fine-tune { border-width: 4px 4px 4px 5px; }
+
+      &:dir(rtl) {
+        border-width: 3px 4px 3px 3px;
+        border-radius: 6px;
+        border-top-right-radius: 7px 6px;
+        border-bottom-right-radius: 7px 6px;
+
+        &.fine-tune { border-width: 4px 5px 4px 4px; }
+      }
+    }
+
+    .trough {
+      border-left-style: solid;
+
+      &:dir(rtl) {
+        border-left-style: none;
+        border-right-style: solid;
+      }
+    }
+  }
+
+  %scrollbar_horizontal_sizing,
+  &.horizontal {
+    .slider {
+      border-width: 4px 3px 3px 3px;
+      border-radius: 6px;
+      border-top-right-radius: 7px 5px; // This is actually bogus, to workaround a gtk+ border radius 
drawing issue
+      border-top-left-radius: 6px 7px;
+
+      &.fine-tune { border-width: 5px 4px 4px 4px; }
+    }
+
+    .trough { border-top-style: solid; }
+  }
+}
 
 .scrollbars-junction,
 .scrollbars-junction.frame { // the small square between two scrollbars
   border-color: transparent;
-  background-color: darken($bg_color, 5%);
-  &:backdrop { background-color: transparent; }
+  // the border image is used to add the missing dot between the borders, details, details, details...
+  border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
+  background-color: $scrollbar_bg_color;
+
+  &:dir(rtl) { border-image-slice: 0 1 0 0; }
+
+  &:backdrop {
+    border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
+    background-color: $backdrop_scrollbar_bg_color;
+  }
 }
 
 
@@ -2844,7 +2914,7 @@ GtkFileChooserDialog {
 .sidebar {
   border: none;
   background-color: $sidebar_bg_color;
-
+/*
   .scrollbar {
     &.trough {
       background-color: darken($bg_color,10%);
@@ -2858,7 +2928,7 @@ GtkFileChooserDialog {
       &:hover { background-color: lighten($bg_color, 10%); }
     }
   }
-
+*/
   &:backdrop {
     background-color: $backdrop_sidebar_bg_color;
   }
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 0b87129..864d91d 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -2424,13 +2424,10 @@ column-header .titlebar .button.titlebutton,
  * Scrollbars *
  **************/
 .scrollbar {
-  background-clip: padding-box;
-  background-image: none;
-  border-style: solid;
+  -GtkRange-slider-width: 13;
   -GtkRange-trough-border: 1;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42;
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1; }
@@ -2438,50 +2435,91 @@ column-header .titlebar .button.titlebutton,
   .scrollbar .titlebar .button.titlebutton,
   .titlebar .scrollbar .button.titlebutton {
     border: none; }
-  .scrollbar .trough.right {
-    border-right: 1px solid #1c1f1f; }
+  .scrollbar .trough {
+    background-color: #282c2c;
+    border: 1px none #1c1f1f; }
+    .scrollbar .trough:backdrop {
+      background-color: #323737;
+      border-color: #1e2222; }
+  .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical 
.slider, .scrollbar.overlay-indicator.dragging.horizontal .slider, 
.scrollbar.overlay-indicator.hovering.horizontal .slider,
   .scrollbar .slider {
-    border-radius: 20px;
-    border: 3px solid transparent;
-    background-color: #6f7372; }
+    border-color: transparent;
+    border-style: solid;
+    background-color: #6f7372;
+    background-clip: padding-box; }
+    .scrollbar.overlay-indicator.dragging.vertical .slider:hover, 
.scrollbar.overlay-indicator.hovering.vertical .slider:hover, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:hover, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:hover,
     .scrollbar .slider:hover {
       background-color: #939695; }
+    .scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, 
.scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active,
     .scrollbar .slider:prelight:active {
       background-color: #215d9c; }
-    .scrollbar .slider.fine-tune {
-      border-width: 5px; }
-      .scrollbar .slider.fine-tune:prelight:active {
-        background-color: #215d9c; }
-    .scrollbar .slider:backdrop, .scrollbar .slider:insensitive {
-      background-color: #4b5050; }
-  .sidebar .scrollbar.overlay-indicator, .scrollbar.overlay-indicator {
+    .scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, 
.scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop,
+    .scrollbar .slider:backdrop {
+      background-color: #5d6161; }
+    .scrollbar.overlay-indicator.dragging.vertical .slider:insensitive, 
.scrollbar.overlay-indicator.hovering.vertical .slider:insensitive, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:insensitive, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:insensitive,
+    .scrollbar .slider:insensitive {
+      background-color: transparent; }
+  .scrollbar.overlay-indicator {
     -GtkRange-slider-width: 8px; }
-    .sidebar .scrollbar.overlay-indicator .slider, .scrollbar.overlay-indicator .slider {
+    .scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider {
+      background-color: rgba(238, 238, 236, 0.3);
       border-width: 2px;
-      background-color: rgba(238, 238, 236, 0.2); }
-    .sidebar .scrollbar.overlay-indicator .trough, .scrollbar.overlay-indicator .trough {
+      border-radius: 30px; }
+    .scrollbar.overlay-indicator .trough {
+      border-color: transparent;
       background-color: transparent; }
-    .sidebar .scrollbar.overlay-indicator.hovering, .sidebar .scrollbar.overlay-indicator.dragging, 
.scrollbar.overlay-indicator.hovering, .scrollbar.overlay-indicator.dragging {
-      -GtkRange-slider-width: 15px; }
-      .sidebar .scrollbar.overlay-indicator.hovering .slider, .sidebar .scrollbar.overlay-indicator.dragging 
.slider, .scrollbar.overlay-indicator.hovering .slider, .scrollbar.overlay-indicator.dragging .slider {
-        border-width: 3px;
-        background-color: rgba(238, 238, 236, 0.3); }
-        .sidebar .scrollbar.overlay-indicator.hovering .slider:active, .sidebar 
.scrollbar.overlay-indicator.dragging .slider:active, .scrollbar.overlay-indicator.hovering .slider:active, 
.scrollbar.overlay-indicator.dragging .slider:active {
-          background-color: #eeeeec; }
-      .sidebar .scrollbar.overlay-indicator.hovering .trough, .sidebar .scrollbar.overlay-indicator.dragging 
.trough, .scrollbar.overlay-indicator.hovering .trough, .scrollbar.overlay-indicator.dragging .trough {
-        border: none;
-        border-radius: 0;
-        background-color: rgba(238, 238, 236, 0.05); }
-
-.scrollbars-junction, .scrollbar .trough,
-.scrollbars-junction.frame,
-.scrollbar .frame.trough {
+    .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering {
+      -GtkRange-slider-width: 13; }
+      .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical 
.slider {
+        border-width: 1px 1px 1px 2px; }
+        .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl) {
+          border-width: 1px 2px 1px 1px; }
+      .scrollbar.overlay-indicator.dragging.horizontal .slider, 
.scrollbar.overlay-indicator.hovering.horizontal .slider {
+        border-width: 2px 1px 1px 1px; }
+      .scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
+        border-color: rgba(28, 31, 31, 0.7);
+        background-color: rgba(40, 44, 44, 0.7); }
+  .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.vertical .slider {
+    border-width: 3px 3px 3px 4px;
+    border-radius: 6px;
+    border-top-left-radius: 7px 6px;
+    border-bottom-left-radius: 7px 6px; }
+    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider.fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider.fine-tune, .scrollbar.vertical .slider.fine-tune {
+      border-width: 4px 4px 4px 5px; }
+    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl), .scrollbar.vertical .slider:dir(rtl) {
+      border-width: 3px 4px 3px 3px;
+      border-radius: 6px;
+      border-top-right-radius: 7px 6px;
+      border-bottom-right-radius: 7px 6px; }
+      .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl).fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl).fine-tune, .scrollbar.vertical 
.slider:dir(rtl).fine-tune {
+        border-width: 4px 5px 4px 4px; }
+  .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .trough, .scrollbar.vertical .trough {
+    border-left-style: solid; }
+    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough:dir(rtl), .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .trough:dir(rtl), .scrollbar.vertical .trough:dir(rtl) {
+      border-left-style: none;
+      border-right-style: solid; }
+  .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar.horizontal .slider {
+    border-width: 4px 3px 3px 3px;
+    border-radius: 6px;
+    border-top-right-radius: 7px 5px;
+    border-top-left-radius: 6px 7px; }
+    .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider.fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .slider.fine-tune, .scrollbar.horizontal .slider.fine-tune {
+      border-width: 5px 4px 4px 4px; }
+  .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .trough, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .trough, .scrollbar.horizontal .trough {
+    border-top-style: solid; }
+
+.scrollbars-junction,
+.scrollbars-junction.frame {
   border-color: transparent;
-  background-color: #2d3232; }
-  .scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
-  .scrollbars-junction.frame:backdrop,
-  .scrollbar .frame.trough:backdrop {
-    background-color: transparent; }
+  border-image: linear-gradient(to bottom, #1c1f1f 1px, transparent 1px) 0 0 0 1/0 1px stretch;
+  background-color: #282c2c; }
+  .scrollbars-junction:dir(rtl),
+  .scrollbars-junction.frame:dir(rtl) {
+    border-image-slice: 0 1 0 0; }
+  .scrollbars-junction:backdrop,
+  .scrollbars-junction.frame:backdrop {
+    border-image-source: linear-gradient(to bottom, #1e2222 1px, transparent 1px);
+    background-color: #323737; }
 
 /**********
  * Switch *
@@ -3954,16 +3992,22 @@ GtkFileChooserDialog .dialog-action-box {
  ***********/
 .sidebar {
   border: none;
-  background-color: #454c4c; }
-  .sidebar .scrollbar.trough {
-    background-color: #212424;
-    border-radius: 6px;
-    border-width: 2px;
-    border-color: transparent; }
-  .sidebar .scrollbar.slider {
-    background-color: #454c4c; }
-    .sidebar .scrollbar.slider:hover {
-      background-color: #515a5a; }
+  background-color: #454c4c;
+  /*
+    .scrollbar {
+      &.trough {
+        background-color: darken($bg_color,10%);
+        border-radius: 6px;
+        border-width: 2px;
+        border-color: transparent;
+      }
+  
+      &.slider {
+        background-color: $sidebar_bg_color;
+        &:hover { background-color: lighten($bg_color, 10%); }
+      }
+    }
+  */ }
   .sidebar:backdrop {
     background-color: #454c4c; }
   .sidebar:selected {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index a1c326e..1b11c5c 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -2421,13 +2421,10 @@ column-header .titlebar .button.titlebutton,
  * Scrollbars *
  **************/
 .scrollbar {
-  background-clip: padding-box;
-  background-image: none;
-  border-style: solid;
+  -GtkRange-slider-width: 13;
   -GtkRange-trough-border: 1;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42;
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1; }
@@ -2435,50 +2432,91 @@ column-header .titlebar .button.titlebutton,
   .scrollbar .titlebar .button.titlebutton,
   .titlebar .scrollbar .button.titlebutton {
     border: none; }
-  .scrollbar .trough.right {
-    border-right: 1px solid #a1a1a1; }
+  .scrollbar .trough {
+    background-color: #dbdbdb;
+    border: 1px none #a1a1a1; }
+    .scrollbar .trough:backdrop {
+      background-color: #e5e5e5;
+      border-color: #a8a8a8; }
+  .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical 
.slider, .scrollbar.overlay-indicator.dragging.horizontal .slider, 
.scrollbar.overlay-indicator.hovering.horizontal .slider,
   .scrollbar .slider {
-    border-radius: 20px;
-    border: 3px solid transparent;
-    background-color: #b3b5b6; }
+    border-color: transparent;
+    border-style: solid;
+    background-color: #b3b5b6;
+    background-clip: padding-box; }
+    .scrollbar.overlay-indicator.dragging.vertical .slider:hover, 
.scrollbar.overlay-indicator.hovering.vertical .slider:hover, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:hover, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:hover,
     .scrollbar .slider:hover {
       background-color: #8d9091; }
+    .scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, 
.scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active,
     .scrollbar .slider:prelight:active {
       background-color: #4a90d9; }
-    .scrollbar .slider.fine-tune {
-      border-width: 5px; }
-      .scrollbar .slider.fine-tune:prelight:active {
-        background-color: #4a90d9; }
-    .scrollbar .slider:backdrop, .scrollbar .slider:insensitive {
-      background-color: #d9dada; }
-  .sidebar .scrollbar.overlay-indicator, .scrollbar.overlay-indicator {
+    .scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, 
.scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop,
+    .scrollbar .slider:backdrop {
+      background-color: #c6c7c8; }
+    .scrollbar.overlay-indicator.dragging.vertical .slider:insensitive, 
.scrollbar.overlay-indicator.hovering.vertical .slider:insensitive, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:insensitive, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:insensitive,
+    .scrollbar .slider:insensitive {
+      background-color: transparent; }
+  .scrollbar.overlay-indicator {
     -GtkRange-slider-width: 8px; }
-    .sidebar .scrollbar.overlay-indicator .slider, .scrollbar.overlay-indicator .slider {
+    .scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider {
+      background-color: rgba(46, 52, 54, 0.3);
       border-width: 2px;
-      background-color: rgba(46, 52, 54, 0.2); }
-    .sidebar .scrollbar.overlay-indicator .trough, .scrollbar.overlay-indicator .trough {
+      border-radius: 30px; }
+    .scrollbar.overlay-indicator .trough {
+      border-color: transparent;
       background-color: transparent; }
-    .sidebar .scrollbar.overlay-indicator.hovering, .sidebar .scrollbar.overlay-indicator.dragging, 
.scrollbar.overlay-indicator.hovering, .scrollbar.overlay-indicator.dragging {
-      -GtkRange-slider-width: 15px; }
-      .sidebar .scrollbar.overlay-indicator.hovering .slider, .sidebar .scrollbar.overlay-indicator.dragging 
.slider, .scrollbar.overlay-indicator.hovering .slider, .scrollbar.overlay-indicator.dragging .slider {
-        border-width: 3px;
-        background-color: rgba(46, 52, 54, 0.3); }
-        .sidebar .scrollbar.overlay-indicator.hovering .slider:active, .sidebar 
.scrollbar.overlay-indicator.dragging .slider:active, .scrollbar.overlay-indicator.hovering .slider:active, 
.scrollbar.overlay-indicator.dragging .slider:active {
-          background-color: #2e3436; }
-      .sidebar .scrollbar.overlay-indicator.hovering .trough, .sidebar .scrollbar.overlay-indicator.dragging 
.trough, .scrollbar.overlay-indicator.hovering .trough, .scrollbar.overlay-indicator.dragging .trough {
-        border: none;
-        border-radius: 0;
-        background-color: rgba(46, 52, 54, 0.1); }
-
-.scrollbars-junction, .scrollbar .trough,
-.scrollbars-junction.frame,
-.scrollbar .frame.trough {
+    .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering {
+      -GtkRange-slider-width: 13; }
+      .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical 
.slider {
+        border-width: 1px 1px 1px 2px; }
+        .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl) {
+          border-width: 1px 2px 1px 1px; }
+      .scrollbar.overlay-indicator.dragging.horizontal .slider, 
.scrollbar.overlay-indicator.hovering.horizontal .slider {
+        border-width: 2px 1px 1px 1px; }
+      .scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
+        border-color: rgba(161, 161, 161, 0.7);
+        background-color: rgba(219, 219, 219, 0.7); }
+  .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.vertical .slider {
+    border-width: 3px 3px 3px 4px;
+    border-radius: 6px;
+    border-top-left-radius: 7px 6px;
+    border-bottom-left-radius: 7px 6px; }
+    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider.fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider.fine-tune, .scrollbar.vertical .slider.fine-tune {
+      border-width: 4px 4px 4px 5px; }
+    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl), .scrollbar.vertical .slider:dir(rtl) {
+      border-width: 3px 4px 3px 3px;
+      border-radius: 6px;
+      border-top-right-radius: 7px 6px;
+      border-bottom-right-radius: 7px 6px; }
+      .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl).fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl).fine-tune, .scrollbar.vertical 
.slider:dir(rtl).fine-tune {
+        border-width: 4px 5px 4px 4px; }
+  .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .trough, .scrollbar.vertical .trough {
+    border-left-style: solid; }
+    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough:dir(rtl), .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .trough:dir(rtl), .scrollbar.vertical .trough:dir(rtl) {
+      border-left-style: none;
+      border-right-style: solid; }
+  .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar.horizontal .slider {
+    border-width: 4px 3px 3px 3px;
+    border-radius: 6px;
+    border-top-right-radius: 7px 5px;
+    border-top-left-radius: 6px 7px; }
+    .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider.fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .slider.fine-tune, .scrollbar.horizontal .slider.fine-tune {
+      border-width: 5px 4px 4px 4px; }
+  .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .trough, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .trough, .scrollbar.horizontal .trough {
+    border-top-style: solid; }
+
+.scrollbars-junction,
+.scrollbars-junction.frame {
   border-color: transparent;
-  background-color: #e0e0e0; }
-  .scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
-  .scrollbars-junction.frame:backdrop,
-  .scrollbar .frame.trough:backdrop {
-    background-color: transparent; }
+  border-image: linear-gradient(to bottom, #a1a1a1 1px, transparent 1px) 0 0 0 1/0 1px stretch;
+  background-color: #dbdbdb; }
+  .scrollbars-junction:dir(rtl),
+  .scrollbars-junction.frame:dir(rtl) {
+    border-image-slice: 0 1 0 0; }
+  .scrollbars-junction:backdrop,
+  .scrollbars-junction.frame:backdrop {
+    border-image-source: linear-gradient(to bottom, #a8a8a8 1px, transparent 1px);
+    background-color: #e5e5e5; }
 
 /**********
  * Switch *
@@ -4115,16 +4153,22 @@ GtkFileChooserDialog .dialog-action-box {
  ***********/
 .sidebar {
   border: none;
-  background-color: #fafafa; }
-  .sidebar .scrollbar.trough {
-    background-color: lightgray;
-    border-radius: 6px;
-    border-width: 2px;
-    border-color: transparent; }
-  .sidebar .scrollbar.slider {
-    background-color: #fafafa; }
-    .sidebar .scrollbar.slider:hover {
-      background-color: white; }
+  background-color: #fafafa;
+  /*
+    .scrollbar {
+      &.trough {
+        background-color: darken($bg_color,10%);
+        border-radius: 6px;
+        border-width: 2px;
+        border-color: transparent;
+      }
+  
+      &.slider {
+        background-color: $sidebar_bg_color;
+        &:hover { background-color: lighten($bg_color, 10%); }
+      }
+    }
+  */ }
   .sidebar:backdrop {
     background-color: #fafafa; }
   .sidebar:selected {
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]