gtk 3.14: update scrollbar styling

7 files changed, 143 insertions, 78 deletions

diff --git a/common/gtk-3.0/3.14/gtk-contained-dark.css b/common/gtk-3.0/3.14/gtk-contained-dark.css
index 558e2b9..4405a9f 100644
--- a/common/gtk-3.0/3.14/gtk-contained-dark.css
+++ b/common/gtk-3.0/3.14/gtk-contained-dark.css
@@ -1564,18 +1564,29 @@ column-header .button, column-header .button:hover, column-header .button:active
   -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 11;
+  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42;
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1; }
   .scrollbar .button {
     border: none; }
+  .scrollbar.trough {
+    background-color: #3e434f;
+    border-left: 1px solid #2b2e39; }
+    .scrollbar.trough.horizontal {
+      border-left: none;
+      border-top: 1px solid #2b2e39; }
   .scrollbar.slider {
-    border-radius: 20px;
+    border-radius: 21px 20px 20px 21px;
     border: 3px solid transparent;
+    border-left-width: 4px;
     background-color: #767b87; }
+    .scrollbar.slider.horizontal {
+      border-radius: 21px 21px 20px 20px;
+      border-left-width: 3px;
+      border-top-width: 4px; }
     .scrollbar.slider:hover {
-      background-color: #a5abb5; }
+      background-color: #5f6470; }
     .scrollbar.slider:prelight:active {
       background-color: #5294E2; }
     .scrollbar.slider.fine-tune {
@@ -1585,11 +1596,10 @@ column-header .button, column-header .button:hover, column-header .button:active
     .scrollbar.slider:insensitive {
       background-color: transparent; }
 
-.scrollbars-junction, .scrollbar.trough,
-.scrollbars-junction.frame,
-.frame.scrollbar.trough {
+.scrollbars-junction,
+.scrollbars-junction.frame {
   border-color: transparent;
-  background-color: #404552; }
+  background-color: #3e434f; }
 
 /**********
  * Switch *
@@ -3356,8 +3366,7 @@ GraniteWidgetsStaticNotebook .frame {
   background-color: #5294E2; }
 
 .source-list .scrollbar.trough,
-.source-list .scrollbars-junction,
-.source-list .scrollbar.trough {
+.source-list .scrollbars-junction {
   border-image: none;
   border-color: transparent;
   background-color: #383C4A;
@@ -3831,9 +3840,8 @@ GeditFileBrowserWidget {
   background-color: rgba(53, 57, 69, 0.95); }
   .maximized GeditFileBrowserWidget {
     background-color: #353945; }
-  GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough,
-  GeditFileBrowserWidget .scrollbars-junction.frame,
-  GeditFileBrowserWidget .frame.scrollbar.trough {
+  GeditFileBrowserWidget .scrollbars-junction,
+  GeditFileBrowserWidget .scrollbars-junction.frame {
     border-color: transparent;
     background-color: transparent; }
   GeditFileBrowserWidget .horizontal {
diff --git a/common/gtk-3.0/3.14/gtk-contained-darker.css b/common/gtk-3.0/3.14/gtk-contained-darker.css
index d241efb..fc3a17e 100644
--- a/common/gtk-3.0/3.14/gtk-contained-darker.css
+++ b/common/gtk-3.0/3.14/gtk-contained-darker.css
@@ -1567,18 +1567,29 @@ column-header .button, column-header .button:hover, column-header .button:active
   -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 11;
+  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42;
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1; }
   .scrollbar .button {
     border: none; }
+  .scrollbar.trough {
+    background-color: #fcfcfc;
+    border-left: 1px solid #dcdfe3; }
+    .scrollbar.trough.horizontal {
+      border-left: none;
+      border-top: 1px solid #dcdfe3; }
   .scrollbar.slider {
-    border-radius: 20px;
+    border-radius: 21px 20px 20px 21px;
     border: 3px solid transparent;
+    border-left-width: 4px;
     background-color: #b8babf; }
+    .scrollbar.slider.horizontal {
+      border-radius: 21px 21px 20px 20px;
+      border-left-width: 3px;
+      border-top-width: 4px; }
     .scrollbar.slider:hover {
-      background-color: #8a8e96; }
+      background-color: #cfd1d4; }
     .scrollbar.slider:prelight:active {
       background-color: #5294E2; }
     .scrollbar.slider.fine-tune {
@@ -1588,11 +1599,10 @@ column-header .button, column-header .button:hover, column-header .button:active
     .scrollbar.slider:insensitive {
       background-color: transparent; }
 
-.scrollbars-junction, .scrollbar.trough,
-.scrollbars-junction.frame,
-.frame.scrollbar.trough {
+.scrollbars-junction,
+.scrollbars-junction.frame {
   border-color: transparent;
-  background-color: #ffffff; }
+  background-color: #fcfcfc; }
 
 /**********
  * Switch *
@@ -3359,8 +3369,7 @@ GraniteWidgetsStaticNotebook .frame {
   background-color: #5294E2; }
 
 .source-list .scrollbar.trough,
-.source-list .scrollbars-junction,
-.source-list .scrollbar.trough {
+.source-list .scrollbars-junction {
   border-image: none;
   border-color: transparent;
   background-color: #F5F6F7;
@@ -3824,9 +3833,8 @@ GeditFileBrowserWidget {
   background-color: rgba(53, 57, 69, 0.95); }
   .maximized GeditFileBrowserWidget {
     background-color: #353945; }
-  GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough,
-  GeditFileBrowserWidget .scrollbars-junction.frame,
-  GeditFileBrowserWidget .frame.scrollbar.trough {
+  GeditFileBrowserWidget .scrollbars-junction,
+  GeditFileBrowserWidget .scrollbars-junction.frame {
     border-color: transparent;
     background-color: transparent; }
   GeditFileBrowserWidget .horizontal {
diff --git a/common/gtk-3.0/3.14/gtk-contained-solid-dark.css b/common/gtk-3.0/3.14/gtk-contained-solid-dark.css
index 5431d03..8c7b56e 100644
--- a/common/gtk-3.0/3.14/gtk-contained-solid-dark.css
+++ b/common/gtk-3.0/3.14/gtk-contained-solid-dark.css
@@ -1564,18 +1564,29 @@ column-header .button, column-header .button:hover, column-header .button:active
   -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 11;
+  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42;
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1; }
   .scrollbar .button {
     border: none; }
+  .scrollbar.trough {
+    background-color: #3e434f;
+    border-left: 1px solid #2b2e39; }
+    .scrollbar.trough.horizontal {
+      border-left: none;
+      border-top: 1px solid #2b2e39; }
   .scrollbar.slider {
-    border-radius: 20px;
+    border-radius: 21px 20px 20px 21px;
     border: 3px solid transparent;
+    border-left-width: 4px;
     background-color: #767b87; }
+    .scrollbar.slider.horizontal {
+      border-radius: 21px 21px 20px 20px;
+      border-left-width: 3px;
+      border-top-width: 4px; }
     .scrollbar.slider:hover {
-      background-color: #a5abb5; }
+      background-color: #5f6470; }
     .scrollbar.slider:prelight:active {
       background-color: #5294E2; }
     .scrollbar.slider.fine-tune {
@@ -1585,11 +1596,10 @@ column-header .button, column-header .button:hover, column-header .button:active
     .scrollbar.slider:insensitive {
       background-color: transparent; }
 
-.scrollbars-junction, .scrollbar.trough,
-.scrollbars-junction.frame,
-.frame.scrollbar.trough {
+.scrollbars-junction,
+.scrollbars-junction.frame {
   border-color: transparent;
-  background-color: #404552; }
+  background-color: #3e434f; }
 
 /**********
  * Switch *
@@ -3356,8 +3366,7 @@ GraniteWidgetsStaticNotebook .frame {
   background-color: #5294E2; }
 
 .source-list .scrollbar.trough,
-.source-list .scrollbars-junction,
-.source-list .scrollbar.trough {
+.source-list .scrollbars-junction {
   border-image: none;
   border-color: transparent;
   background-color: #383C4A;
@@ -3831,9 +3840,8 @@ GeditFileBrowserWidget {
   background-color: #353945; }
   .maximized GeditFileBrowserWidget {
     background-color: #353945; }
-  GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough,
-  GeditFileBrowserWidget .scrollbars-junction.frame,
-  GeditFileBrowserWidget .frame.scrollbar.trough {
+  GeditFileBrowserWidget .scrollbars-junction,
+  GeditFileBrowserWidget .scrollbars-junction.frame {
     border-color: transparent;
     background-color: transparent; }
   GeditFileBrowserWidget .horizontal {
diff --git a/common/gtk-3.0/3.14/gtk-contained-solid-darker.css b/common/gtk-3.0/3.14/gtk-contained-solid-darker.css
index 3081334..a98bb19 100644
--- a/common/gtk-3.0/3.14/gtk-contained-solid-darker.css
+++ b/common/gtk-3.0/3.14/gtk-contained-solid-darker.css
@@ -1567,18 +1567,29 @@ column-header .button, column-header .button:hover, column-header .button:active
   -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 11;
+  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42;
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1; }
   .scrollbar .button {
     border: none; }
+  .scrollbar.trough {
+    background-color: #fcfcfc;
+    border-left: 1px solid #dcdfe3; }
+    .scrollbar.trough.horizontal {
+      border-left: none;
+      border-top: 1px solid #dcdfe3; }
   .scrollbar.slider {
-    border-radius: 20px;
+    border-radius: 21px 20px 20px 21px;
     border: 3px solid transparent;
+    border-left-width: 4px;
     background-color: #b8babf; }
+    .scrollbar.slider.horizontal {
+      border-radius: 21px 21px 20px 20px;
+      border-left-width: 3px;
+      border-top-width: 4px; }
     .scrollbar.slider:hover {
-      background-color: #8a8e96; }
+      background-color: #cfd1d4; }
     .scrollbar.slider:prelight:active {
       background-color: #5294E2; }
     .scrollbar.slider.fine-tune {
@@ -1588,11 +1599,10 @@ column-header .button, column-header .button:hover, column-header .button:active
     .scrollbar.slider:insensitive {
       background-color: transparent; }
 
-.scrollbars-junction, .scrollbar.trough,
-.scrollbars-junction.frame,
-.frame.scrollbar.trough {
+.scrollbars-junction,
+.scrollbars-junction.frame {
   border-color: transparent;
-  background-color: #ffffff; }
+  background-color: #fcfcfc; }
 
 /**********
  * Switch *
@@ -3359,8 +3369,7 @@ GraniteWidgetsStaticNotebook .frame {
   background-color: #5294E2; }
 
 .source-list .scrollbar.trough,
-.source-list .scrollbars-junction,
-.source-list .scrollbar.trough {
+.source-list .scrollbars-junction {
   border-image: none;
   border-color: transparent;
   background-color: #F5F6F7;
@@ -3824,9 +3833,8 @@ GeditFileBrowserWidget {
   background-color: #353945; }
   .maximized GeditFileBrowserWidget {
     background-color: #353945; }
-  GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough,
-  GeditFileBrowserWidget .scrollbars-junction.frame,
-  GeditFileBrowserWidget .frame.scrollbar.trough {
+  GeditFileBrowserWidget .scrollbars-junction,
+  GeditFileBrowserWidget .scrollbars-junction.frame {
     border-color: transparent;
     background-color: transparent; }
   GeditFileBrowserWidget .horizontal {
diff --git a/common/gtk-3.0/3.14/gtk-contained-solid.css b/common/gtk-3.0/3.14/gtk-contained-solid.css
index 901b99e..8b899bb 100644
--- a/common/gtk-3.0/3.14/gtk-contained-solid.css
+++ b/common/gtk-3.0/3.14/gtk-contained-solid.css
@@ -1567,18 +1567,29 @@ column-header .button, column-header .button:hover, column-header .button:active
   -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 11;
+  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42;
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1; }
   .scrollbar .button {
     border: none; }
+  .scrollbar.trough {
+    background-color: #fcfcfc;
+    border-left: 1px solid #dcdfe3; }
+    .scrollbar.trough.horizontal {
+      border-left: none;
+      border-top: 1px solid #dcdfe3; }
   .scrollbar.slider {
-    border-radius: 20px;
+    border-radius: 21px 20px 20px 21px;
     border: 3px solid transparent;
+    border-left-width: 4px;
     background-color: #b8babf; }
+    .scrollbar.slider.horizontal {
+      border-radius: 21px 21px 20px 20px;
+      border-left-width: 3px;
+      border-top-width: 4px; }
     .scrollbar.slider:hover {
-      background-color: #8a8e96; }
+      background-color: #cfd1d4; }
     .scrollbar.slider:prelight:active {
       background-color: #5294E2; }
     .scrollbar.slider.fine-tune {
@@ -1588,11 +1599,10 @@ column-header .button, column-header .button:hover, column-header .button:active
     .scrollbar.slider:insensitive {
       background-color: transparent; }
 
-.scrollbars-junction, .scrollbar.trough,
-.scrollbars-junction.frame,
-.frame.scrollbar.trough {
+.scrollbars-junction,
+.scrollbars-junction.frame {
   border-color: transparent;
-  background-color: #ffffff; }
+  background-color: #fcfcfc; }
 
 /**********
  * Switch *
@@ -3359,8 +3369,7 @@ GraniteWidgetsStaticNotebook .frame {
   background-color: #5294E2; }
 
 .source-list .scrollbar.trough,
-.source-list .scrollbars-junction,
-.source-list .scrollbar.trough {
+.source-list .scrollbars-junction {
   border-image: none;
   border-color: transparent;
   background-color: #F5F6F7;
@@ -3824,9 +3833,8 @@ GeditFileBrowserWidget {
   background-color: #353945; }
   .maximized GeditFileBrowserWidget {
     background-color: #353945; }
-  GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough,
-  GeditFileBrowserWidget .scrollbars-junction.frame,
-  GeditFileBrowserWidget .frame.scrollbar.trough {
+  GeditFileBrowserWidget .scrollbars-junction,
+  GeditFileBrowserWidget .scrollbars-junction.frame {
     border-color: transparent;
     background-color: transparent; }
   GeditFileBrowserWidget .horizontal {
diff --git a/common/gtk-3.0/3.14/gtk-contained.css b/common/gtk-3.0/3.14/gtk-contained.css
index d373e7f..1235099 100644
--- a/common/gtk-3.0/3.14/gtk-contained.css
+++ b/common/gtk-3.0/3.14/gtk-contained.css
@@ -1567,18 +1567,29 @@ column-header .button, column-header .button:hover, column-header .button:active
   -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 11;
+  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42;
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1; }
   .scrollbar .button {
     border: none; }
+  .scrollbar.trough {
+    background-color: #fcfcfc;
+    border-left: 1px solid #dcdfe3; }
+    .scrollbar.trough.horizontal {
+      border-left: none;
+      border-top: 1px solid #dcdfe3; }
   .scrollbar.slider {
-    border-radius: 20px;
+    border-radius: 21px 20px 20px 21px;
     border: 3px solid transparent;
+    border-left-width: 4px;
     background-color: #b8babf; }
+    .scrollbar.slider.horizontal {
+      border-radius: 21px 21px 20px 20px;
+      border-left-width: 3px;
+      border-top-width: 4px; }
     .scrollbar.slider:hover {
-      background-color: #8a8e96; }
+      background-color: #cfd1d4; }
     .scrollbar.slider:prelight:active {
       background-color: #5294E2; }
     .scrollbar.slider.fine-tune {
@@ -1588,11 +1599,10 @@ column-header .button, column-header .button:hover, column-header .button:active
     .scrollbar.slider:insensitive {
       background-color: transparent; }
 
-.scrollbars-junction, .scrollbar.trough,
-.scrollbars-junction.frame,
-.frame.scrollbar.trough {
+.scrollbars-junction,
+.scrollbars-junction.frame {
   border-color: transparent;
-  background-color: #ffffff; }
+  background-color: #fcfcfc; }
 
 /**********
  * Switch *
@@ -3359,8 +3369,7 @@ GraniteWidgetsStaticNotebook .frame {
   background-color: #5294E2; }
 
 .source-list .scrollbar.trough,
-.source-list .scrollbars-junction,
-.source-list .scrollbar.trough {
+.source-list .scrollbars-junction {
   border-image: none;
   border-color: transparent;
   background-color: #F5F6F7;
@@ -3824,9 +3833,8 @@ GeditFileBrowserWidget {
   background-color: rgba(53, 57, 69, 0.95); }
   .maximized GeditFileBrowserWidget {
     background-color: #353945; }
-  GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough,
-  GeditFileBrowserWidget .scrollbars-junction.frame,
-  GeditFileBrowserWidget .frame.scrollbar.trough {
+  GeditFileBrowserWidget .scrollbars-junction,
+  GeditFileBrowserWidget .scrollbars-junction.frame {
     border-color: transparent;
     background-color: transparent; }
   GeditFileBrowserWidget .horizontal {
diff --git a/common/gtk-3.0/3.14/sass/_common.scss b/common/gtk-3.0/3.14/sass/_common.scss
index 3a823f7..aaafff7 100644
--- a/common/gtk-3.0/3.14/sass/_common.scss
+++ b/common/gtk-3.0/3.14/sass/_common.scss
@@ -1844,6 +1844,8 @@ column-header.button.dnd { // for treeview-like derive widgets
  * Scrollbars *
  **************/
 
+$_scrollbar_bg_color: darken($base_color, 1%);
+
 .scrollbar {
   background-clip: padding-box;
   background-image: none;
@@ -1851,7 +1853,7 @@ column-header.button.dnd { // for treeview-like derive widgets
   -GtkRange-trough-border: 0;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 11;
+  -GtkRange-slider-width: 13;
   -GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
                                        // sadly can't be in '.slider'
                                        // where it belongs
@@ -1861,13 +1863,28 @@ column-header.button.dnd { // for treeview-like derive widgets
   .button {
     border: none;
   }
-  &.trough { @extend .scrollbars-junction; }
+  &.trough {
+    background-color: $_scrollbar_bg_color;
+    border-left: 1px solid $borders_color;
+
+    &.horizontal {
+      border-left: none;
+      border-top: 1px solid $borders_color;
+    }
+  }
   &.slider {
-    border-radius: 20px;
+    border-radius: 21px 20px 20px 21px;
     border: 3px solid transparent; //margin :/
-    background-color: mix($bg_color, $fg_color, 60%);
+    border-left-width: 4px;
+    background-color: mix($fg_color, $bg_color, 40%);
+
+    &.horizontal {
+      border-radius: 21px 21px 20px 20px;
+      border-left-width: 3px;
+      border-top-width: 4px;
+    }
     &:hover {
-      background-color: mix($bg_color, $fg_color, 30%);
+      background-color: mix($fg_color, $bg_color, 25%);
     }
     &:prelight:active {
       background-color: $selected_bg_color;
@@ -1887,7 +1904,7 @@ column-header.button.dnd { // for treeview-like derive widgets
 .scrollbars-junction,
 .scrollbars-junction.frame { // the small square between two scrollbars
   border-color: transparent;
-  background-color: $base_color;
+  background-color: $_scrollbar_bg_color;
 }