GreenLaguna GTK+-3.16: fix scrollbars and overshoot function

2 files changed, 226 insertions, 32 deletions

diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css
index e9577c3d..35844a2f 100644
--- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css
+++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css
@@ -138,6 +138,12 @@
 
 @define-color osd_trough_bg alpha(@osd_button_fg, 0.10);
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
+@define-color overshoot_bg_color alpha (@theme_selected_bg_color, 0.15);
+@define-color overshoot_backdrop_bg_color #C8FA96;
 
 @define-color wm_a shade(@theme_bg_color, 1.3);
 @define-color wm_b @theme_bg_color;
diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
index d9b73930..2c19679d 100644
--- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
@@ -142,11 +142,6 @@
  * Miscellaneous *
  *****************/
 
-/* displays at end of mouse scrolling */
-.overshoot {
-	background-color: alpha (@theme_bg_color, 0.35);
-}
-
 .content-view.view.rubberband,
 .view.rubberband,
 .rubberband {
@@ -158,6 +153,168 @@
 	border-radius: 2px;
 }
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
+/* displays at end of mouse scrolling */
+.overshoot.top {
+    background-image: -gtk-gradient(radial,
+                                    center top, 0,
+                                    center top, 0.5,
+                                    to(@overshoot_bg_color),
+                                    to(rgba(158, 179, 137, 0)));
+    background-size: 100% 20%, 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+.overshoot.top:backdrop {
+    background-image: -gtk-gradient(radial,
+                                    center top, 0,
+                                    center top, 0.5,
+                                    to(@overshoot_backdrop_bg_color),
+                                    to(rgba(137, 145, 131, 0)));
+    background-size: 100% 20%;
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+.overshoot.bottom {
+    background-image: -gtk-gradient(radial,
+                                    center bottom, 0,
+                                    center bottom, 0.5,
+                                    to(@overshoot_bg_color),
+                                    to(rgba(158, 179, 137, 0)));
+    background-size: 100% 20%, 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+.overshoot.bottom:backdrop {
+    background-image: -gtk-gradient(radial,
+                                    center bottom, 0,
+                                    center bottom, 0.5,
+                                    to(@overshoot_backdrop_bg_color),
+                                    to(rgba(137, 145, 131, 0)));
+    background-size: 100% 20%;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+.overshoot.left {
+    background-image: -gtk-gradient(radial,
+                                    left center, 0,
+                                    left center, 0.5,
+                                    to(@overshoot_bg_color),
+                                    to(rgba(158, 179, 137, 0)));
+    background-size: 20% 100%, 100% 100%;
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+.overshoot.left:backdrop {
+    background-image: -gtk-gradient(radial,
+                                    left center, 0,
+                                    left center, 0.5,
+                                    to(@overshoot_backdrop_bg_color),
+                                    to(rgba(137, 145, 131, 0)));
+    background-size: 20% 100%;
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+.overshoot.right {
+    background-image: -gtk-gradient(radial,
+                                    right center, 0,
+                                    right center, 0.5,
+                                    to(@overshoot_bg_color),
+                                    to(rgba(158, 179, 137, 0)));
+    background-size: 20% 100%, 100% 100%;
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+.overshoot.right:backdrop {
+    background-image: -gtk-gradient(radial,
+                                    right center, 0,
+                                    right center, 0.5,
+                                    to(@overshoot_backdrop_bg_color),
+                                    to(rgba(137, 145, 131, 0)));
+    background-size: 20% 100%;
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+/* result is disable undershoot */
+.undershoot.top {
+    background-color: transparent;
+    background-image: linear-gradient(to left,
+                                      rgba(255, 255, 255, 0.2) 50%,
+                                      rgba(0, 0, 0, 0.2) 50%);
+    background-size: 10px 0px;
+    background-repeat: repeat-x;
+    background-origin: content-box;
+    background-position: center top;
+}
+
+.undershoot.bottom {
+    background-color: transparent;
+    background-image: linear-gradient(to left,
+                                      rgba(255, 255, 255, 0.2) 50%,
+                                      rgba(0, 0, 0, 0.2) 50%);
+    background-size: 10px 0px;
+    background-repeat: repeat-x;
+    background-origin: content-box;
+    background-position: center bottom;
+}
+
+.undershoot.left {
+    background-color: transparent;
+    background-image: linear-gradient(to top,
+                                      rgba(255, 255, 255, 0.2) 50%,
+                                      rgba(0, 0, 0, 0.2) 50%);
+    background-size: 0px 10px;
+    background-repeat: repeat-y;
+    background-origin: content-box;
+    background-position: left center;
+}
+
+.undershoot.right {
+    background-color: transparent;
+    background-image: linear-gradient(to top,
+                                      rgba(255, 255, 255, 0.2) 50%,
+                                      rgba(0, 0, 0, 0.2) 50%);
+    background-size: 0px 10px;
+    background-repeat: repeat-y;
+    background-origin: content-box;
+    background-position: right center;
+}
+
 /****************
  * Floating Bar *
  ****************/
@@ -1163,11 +1320,26 @@ GtkTreeMenu .menuitem * {
 	-GtkRange-trough-under-steppers: 0;
 }
 
-.scrollbar.trough {
-	background-color: transparent;
+.scrollbar.trough.vertical {
+	background-color: shade(@theme_bg_color, 0.95);
 	background-image: none;
-	border-style: none;
-	border-width: 0px;
+	border-style: solid;
+	border-width: 1px;
+	border-top: 0px;
+	border-bottom: 0px;
+    border-color: shade(@theme_bg_color, 0.75);
+	border-radius: 0px;
+}
+
+.scrollbar.trough.horizontal {
+	background-color: shade(@theme_bg_color, 0.95);
+	background-image: none;
+	border-style: solid;
+	border-width: 1px;
+	border-left: 0px;
+	border-right: 0px;
+    border-color: shade(@theme_bg_color, 0.75);
+	border-radius: 0px;
 }
 
 .scrollbar.slider {
@@ -1253,22 +1425,37 @@ GtkTreeMenu .menuitem * {
 }
 
 .scrollbar.button,
-.scrollbar.button.horizontal,
 .scrollbar.button.vertical {
 	color: @theme_fg_color; /*@internal_element_color*/
 	border-image: none;
-	border-style: none;
-	border-width: 0px;
+	border-style: solid;
+    border-color: shade(@theme_bg_color, 0.75);
+	border-radius: 0px;
+	border-width: 1px;
+	border-top: 0px;
+	border-bottom: 0px;
 	background-image: none;
-	background-color: transparent;
+	background-color: shade(@theme_bg_color, 0.9);
+}
+
+.scrollbar.button.horizontal {
+	color: @theme_fg_color; /*@internal_element_color*/
+	border-image: none;
+	border-style: solid;
+    border-color: shade(@theme_bg_color, 0.75);
+	border-radius: 0px;
+	border-width: 1px;
+	border-left: 0px;
+	border-right: 0px;
+	background-image: none;
+	background-color: shade(@theme_bg_color, 0.9);
 }
 
 .scrollbar.button:hover,
 .scrollbar.button.horizontal:hover,
 .scrollbar.button.vertical:hover {
 	background-image: none;
-	background-color: @theme_main_color;
-	/*border-color: shade(@highlighted_border, 1.1);*/
+	background-color: shade(@theme_bg_color, 1.01);
 	color: shade(@highlighted_border, 0.8);
 }
 
@@ -1277,7 +1464,6 @@ GtkTreeMenu .menuitem * {
 	background-image: linear-gradient(to top,
 	                                  shade(@theme_bg_color, 1.6),
 	                                  shade(@toolbar_gradient_base, 0.88));
-	/*border-color: shade(@highlighted_border, 1.1);*/
 	border-image: none;
 	color: @theme_fg_color;
 	border-image: none;
@@ -1293,12 +1479,10 @@ GtkTreeMenu .menuitem * {
 
 .scrollbar.button:insensitive {
 	background-image: none;
-	background-color: @theme_bg_color;
-	color: transparent;
-	/*border-color: alpha(@internal_element_color, 0.3);*/
-	/* does Nautilus need these? */
-	/*border-radius: 4px;
-	border-width: 1px;*/
+	background-color: @insensitive_bg_color;
+	color: @insensitive_fg_color;
+	border-radius: 0px;
+	border-width: 0px;
 }
 
 .scrollbar.slider:insensitive {
@@ -2926,6 +3110,20 @@ GtkInfoBar {
 	text-shadow: none;
 }
 
+/***********
+ * Sidebar *
+ ***********/
+.sidebar,
+GtkPlacesSidebar.sidebar .view {
+    -gtk-icon-style: regular;
+	background-color: shade(@theme_bg_color, 1.03);
+}
+
+.sidebar:backdrop {
+    background-color: shade(@theme_bg_color, 1.03);
+}
+
+
 .sidebar.separator,
 .sidebar.separator:hover {
 	color: alpha(@frame_color, 0.6);
@@ -3210,16 +3408,6 @@ NemoWindow .sidebar .frame {
 	border-width: 0px;
 }
 
-NautilusWindow .sidebar .scrollbar.button,
-NemoWindow .sidebar .scrollbar.button {
-	color: transparent;
-}
-
-NautilusWindow .sidebar .scrollbar.button:hover,
-NemoWindow .sidebar .scrollbar.button:hover {
-	color: @theme_fg_color;
-}
-
 NautilusPlacesSidebar .cell:selected,
 NautilusPlacesSidebar *.cell:selected,
 NemoPlacesSidebar .cell:selected,