From f30b5ec971d67c631f8b33fc5dd38f2ad6c8d7b1 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sun, 31 May 2015 22:26:05 +0530
Subject: [PATCH] Fix scrollbars

---
 gtk-3.0/scss/widgets/_button.scss    |  27 +++----
 gtk-3.0/scss/widgets/_scrollbar.scss | 115 ++++++++++++++++-----------
 2 files changed, 81 insertions(+), 61 deletions(-)

diff --git a/gtk-3.0/scss/widgets/_button.scss b/gtk-3.0/scss/widgets/_button.scss
index f54d96b..60c81cd 100755
--- a/gtk-3.0/scss/widgets/_button.scss
+++ b/gtk-3.0/scss/widgets/_button.scss
@@ -2,6 +2,8 @@
  ! Buttons
 **********/
 
+$shadow_strength: .3;	
+
 @include exports("button_extends") {
 	%button {
 		padding: $spacing ($spacing + 2px);
@@ -73,16 +75,13 @@
 }
 
 @mixin linked_button($bg) {
-	$border_strength: if(lightness($bg) > 50, 0, .1);
-	$shadow_strength: if(lightness($bg) > 50, 0, .1);
-
 	@extend %linked_button;
 
-	box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12 + $border_strength)),
+	box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12)),
 				0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
 
 	&:focus, &:hover {
-		box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12 + $border_strength)),
+		box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12)),
 					0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
 	}
 
@@ -90,7 +89,7 @@
 	&:active:focus, &:active:hover:focus,
 	&:checked, &:checked:hover,
 	&:checked:focus, &:checked:hover:focus {
-		box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12 + $border_strength)),
+		box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12)),
 					inset 0 1px alpha($dark_shadow, .07),
 					inset 0 -1px alpha($dark_shadow, .05);
 	}
@@ -120,28 +119,26 @@
 }
 
 @mixin button($bg, $fg) {
-	$border_strength: if(lightness($bg) > 50, 0, .1);
-	$shadow_strength: if(lightness($bg) > 50, 0, .1);
-
 	@extend %button;
-	@include linear-gradient(shade($bg, 1.2));
-	@include border(rgba(0,0,0,.12 + $border_strength));
+	@include linear-gradient(shade($bg, 1.3));
+	@include border(rgba(0,0,0,.12));
 
 	color: $fg;
 	box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
+	border-color: alpha($bg, 0);
 
 	&.flat {
-		border-color: transparent;
-		background-color: transparent;
+		border-color: alpha($bg, 0);
+		background-color: alpha($bg, 0);
 		background-image: none;
 		box-shadow: none;
 	}
 
 	&, &.flat {
 		&:focus, &:hover {
-			@include linear-gradient(shade($bg, 1.2));
-			@include border(rgba(0,0,0,.2 + $border_strength));
+			@include linear-gradient(shade($bg, 1.4));
 
+			border-color: alpha($bg, 0);
 			box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
 		}
 
diff --git a/gtk-3.0/scss/widgets/_scrollbar.scss b/gtk-3.0/scss/widgets/_scrollbar.scss
index 969ece6..bfc210e 100644
--- a/gtk-3.0/scss/widgets/_scrollbar.scss
+++ b/gtk-3.0/scss/widgets/_scrollbar.scss
@@ -3,61 +3,84 @@
 ************/
 
 @include exports("scrollbar") {
-	* {
-		-GtkRange-slider-width: 8;
-		-GtkRange-stepper-spacing: 0;
-		-GtkRange-trough-border: $spacing;
-		-GtkRange-trough-under-steppers: 1;
-		-GtkScrollbar-has-backward-stepper: false;
-		-GtkScrollbar-has-forward-stepper: false;
-		-GtkScrollbar-min-slider-length: 80;
-		-GtkScrolledWindow-scrollbar-spacing: 0;
-		-GtkScrolledWindow-scrollbars-within-bevel: 1;
-	}
+    * {
+        -GtkRange-slider-width: 8;
+        -GtkRange-stepper-spacing: 0;
+        -GtkRange-trough-border: 2;
+        -GtkRange-trough-under-steppers: 1;
+        -GtkScrollbar-has-backward-stepper: false;
+        -GtkScrollbar-has-forward-stepper: false;
+        -GtkScrollbar-min-slider-length: 80;
+        -GtkScrolledWindow-scrollbar-spacing: 0;
+        -GtkScrolledWindow-scrollbars-within-bevel: 1;
+    }
 
-	.scrollbar {
-		border: none;
-		padding: 0;
+    .scrollbar {
+        border: 0;
+        padding: 0;
 
-		&.button {
-			&, &:active, &:active:hover {
-				border-width: 0;
-				border-radius: 0;
-				background-color: transparent;
-				background-image: none;
-				color: shade($bg_color, 0.6);
-			}
-		}
+        &.button {
+            &, &:active, &:active:hover {
+                border-width: 0;
+                border-radius: 0;
+                background-color: transparent;
+                background-image: none;
+                color: alpha($fg_color, 0.5);
+            }
+        }
 
-		&.slider, &.slider.vertical {
-			border: none;
-			border-radius: $roundness;
-			background-color: mix($bg_color, $fg_color, 0.21);
+        &.slider, &.slider.vertical {
+            border: 0;
+            border-radius: $roundness;
+            background-color: shade($bg_color, 0.5);
 
-			&:hover { background-color: $selected_bg_color; }
+            &:hover { background-color: shade($bg_color, 0.3); }
 
-			&:active { background-color: shade($selected_bg_color, .9); }
+            &:active { background-color: $selected_bg_color; }
 
-			&.fine-tune:prelight:active { border: 2px solid transparent; }
-		}
-	}
+            &.fine-tune:prelight:active { border: 2px solid transparent; }
+        }
 
-	.scrollbars-junction,
-	.scrollbar.trough {
-		border: none;
-		border-radius: 0;
-		background-color: $bg_color;
-		background-image: none;
-	}
+        // overlay scrolling indicator
+        &.overlay-indicator {
+            &:not(.dragging):not(.hovering) {
+                opacity: 0.5;
 
-	/* overlay scrollbar */
-	OsThumb, OsScrollbar {
-		color: shade($bg_color, 0.7);
+                -GtkRange-slider-width: 4px;
 
-		&:selected { background-color: $selected_bg_color; }
+                .slider {
+                    margin: 0;
+                    background-color: $fg_color;
+                    background-clip: padding-box;
+                }
 
-		&:active { background-color: $selected_bg_color; }
+                .trough {
+                    border-style: none;
+                    background-color: transparent;
+                }
+            }
 
-		&:insensitive { background-color: shade($bg_color, 0.9); }
-	}
+            &.dragging, &.hovering { opacity: 0.7; }
+        }
+    }
+
+    .scrollbars-junction,
+    .scrollbars-junction.frame,
+    .scrollbar.trough {
+        border: 0;
+        border-radius: 0;
+        background-color: $bg_color;
+        background-image: none;
+    }
+
+    // ubuntu overlay scrollbars
+    OsThumb, OsScrollbar {
+        color: shade($bg_color, 0.7);
+
+        &:selected { background-color: $selected_bg_color; }
+
+        &:active { background-color: $selected_bg_color; }
+
+        &:insensitive { background-color: shade($bg_color, 0.9); }
+    }
 }