Menta themes GTK+-3.16: improve overshoot function

This fixes also overshoot in sidebar of zenity window (open file dialog)

4 files changed, 405 insertions, 22 deletions

diff --git a/desktop-themes/BlueMenta/gtk-3.0/gtk-main.css b/desktop-themes/BlueMenta/gtk-3.0/gtk-main.css
index e79d5c8a..aee1e6c4 100644
--- a/desktop-themes/BlueMenta/gtk-3.0/gtk-main.css
+++ b/desktop-themes/BlueMenta/gtk-3.0/gtk-main.css
@@ -176,6 +176,13 @@
 @define-color selection_menu_hover shade(@selection_menu_fg, 0.80);
 @define-color selection_menu_active shade(@selection_menu_fg, 0.60);
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
+@define-color overshoot_bg_color alpha (@theme_selected_bg_color, 0.55);
+@define-color overshoot_backdrop_bg_color #96C8FA;
+
 /**************
  * MATE Apps  *
  **************/
diff --git a/desktop-themes/BlueMenta/gtk-3.0/gtk-widgets.css b/desktop-themes/BlueMenta/gtk-3.0/gtk-widgets.css
index f57cd967..3c8eb0f7 100644
--- a/desktop-themes/BlueMenta/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/BlueMenta/gtk-3.0/gtk-widgets.css
@@ -192,12 +192,6 @@ GtkTextView {
 	border-radius: 0px;
 }
 
-/* displays at end of mouse scrolling */
-.overshoot,
-.sidebar.overshoot {
-	background-color: alpha (@theme_selected_bg_color, 0.35);
-}
-
 GtkStatusbar {
 	padding: 5px;
 	color: @theme_fg_color;
@@ -250,6 +244,188 @@ GtkTreeView.separator,
 	background-color: @theme_base_color;
 }
 
+/************************
+ * 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(137, 158, 179, 0))),
+                      -gtk-gradient(radial,
+                                    center top, 0,
+                                    center top, 0.6,
+                                    from(rgba(56, 73, 87, 0.17)),
+                                    to(rgba(56, 73, 87, 0)));
+    background-size: 100% 5%, 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(131, 137, 145, 0)));
+    background-size: 100% 5%;
+    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(137, 158, 179, 0))),
+                      -gtk-gradient(radial,
+                                    center bottom, 0,
+                                    center bottom, 0.6,
+                                    from(rgba(56, 73, 87, 0.17)),
+                                    to(rgba(56, 73, 87, 0)));
+    background-size: 100% 5%, 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(131, 137, 145, 0)));
+    background-size: 100% 5%;
+    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(137, 158, 179, 0))),
+                      -gtk-gradient(radial,
+                                    left center, 0,
+                                    left center, 0.6,
+                                    from(rgba(56, 73, 87, 0.07)),
+                                    to(rgba(56, 73, 87, 0)));
+    background-size: 5% 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(131, 137, 145, 0)));
+    background-size: 5% 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(137, 158, 179, 0))),
+                      -gtk-gradient(radial,
+                                    right center, 0,
+                                    right center, 0.6,
+                                    from(rgba(56, 73, 87, 0.07)),
+                                    to(rgba(56, 73, 87, 0)));
+    background-size: 5% 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(131, 137, 145, 0)));
+    background-size: 5% 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;
+}
+
 /****************
  * Text Entries *
  ****************/
@@ -867,7 +1043,7 @@ GtkLevelBar.vertical {
 }
 
 GtkScrolledWindow.frame {
-	-gtk-icon-style: regular;
+    -gtk-icon-style: regular;
 	border-style: solid;
 	border-color: @borders;
 	border-width: 1px;
@@ -888,7 +1064,7 @@ GtkScrolledWindow GtkViewport.frame {
 .button.menuitem.menubar,
 GtkColorButton.button,
 GtkComboBox.combobox-entry .button {
-	-gtk-icon-style: regular;
+    -gtk-icon-style: regular;
 	padding: 4px;
 }
 
@@ -2761,15 +2937,32 @@ GtkMessageDialog {
  * Sidebar *
  ***********/
 .sidebar,
-.sidebar .view {
-	-gtk-icon-style: regular;
+GtkPlacesSidebar.sidebar .view {
+    -gtk-icon-style: regular;
 	background-color: @sidebar_bg;
 }
 
+.sidebar:backdrop {
+    background-color: @sidebar_bg;
+}
+
+/*
+  GtkPlacesSidebar.sidebar .view .image {
+    color: #6b6f70; }
+    GtkPlacesSidebar.sidebar .view .image:selected {
+      color: #ecf3fb; }
+      GtkPlacesSidebar.sidebar .view .image:selected:backdrop {
+        color: #ecf3fb; }
+    GtkPlacesSidebar.sidebar .view .image:backdrop {
+      color: #adafb0; }
+  GtkPlacesSidebar.sidebar .view:backdrop {
+    color: #8d9091; }
+*/
+/*
 .sidebar .frame {
 	border-style: none;
 }
-
+*/
 .sidebar row:hover {
 	background-color: shade (@theme_selected_bg_color, 1.15);
 	color: shade (@theme_selected_bg_color, 0.35);
@@ -3881,7 +4074,7 @@ GtkTreeView.view.expander:checked {
 }
 
 GtkExpander {
-	-gtk-icon-style: regular;
+    -gtk-icon-style: regular;
 	-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
 }
 GtkExpander:dir(rtl) {
diff --git a/desktop-themes/Menta/gtk-3.0/gtk-main.css b/desktop-themes/Menta/gtk-3.0/gtk-main.css
index 1a00f46a..212d519b 100644
--- a/desktop-themes/Menta/gtk-3.0/gtk-main.css
+++ b/desktop-themes/Menta/gtk-3.0/gtk-main.css
@@ -176,6 +176,13 @@
 @define-color selection_menu_hover shade(@selection_menu_fg, 0.80);
 @define-color selection_menu_active shade(@selection_menu_fg, 0.60);
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
+@define-color overshoot_bg_color alpha (@theme_selected_bg_color, 0.55);
+@define-color overshoot_backdrop_bg_color #C8FA96;
+
 /**************
  * MATE Apps  *
  **************/
diff --git a/desktop-themes/Menta/gtk-3.0/gtk-widgets.css b/desktop-themes/Menta/gtk-3.0/gtk-widgets.css
index d913466d..30ac8184 100644
--- a/desktop-themes/Menta/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/Menta/gtk-3.0/gtk-widgets.css
@@ -192,12 +192,6 @@ GtkTextView {
 	border-radius: 0px;
 }
 
-/* displays at end of mouse scrolling */
-.overshoot,
-.sidebar.overshoot {
-	background-color: alpha (@theme_selected_bg_color, 0.35);
-}
-
 GtkStatusbar {
 	padding: 5px;
 	color: @theme_fg_color;
@@ -250,6 +244,188 @@ GtkTreeView.separator,
 	background-color: @theme_base_color;
 }
 
+/************************
+ * 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))),
+                      -gtk-gradient(radial,
+                                    center top, 0,
+                                    center top, 0.6,
+                                    from(rgba(73, 87, 56, 0.17)),
+                                    to(rgba(73, 87, 56, 0)));
+    background-size: 100% 5%, 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% 5%;
+    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))),
+                      -gtk-gradient(radial,
+                                    center bottom, 0,
+                                    center bottom, 0.6,
+                                    from(rgba(73, 87, 56, 0.17)),
+                                    to(rgba(73, 87, 56, 0)));
+    background-size: 100% 5%, 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% 5%;
+    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))),
+                      -gtk-gradient(radial,
+                                    left center, 0,
+                                    left center, 0.6,
+                                    from(rgba(73, 87, 56, 0.07)),
+                                    to(rgba(73, 87, 56, 0)));
+    background-size: 5% 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: 5% 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))),
+                      -gtk-gradient(radial,
+                                    right center, 0,
+                                    right center, 0.6,
+                                    from(rgba(73, 87, 56, 0.07)),
+                                    to(rgba(73, 87, 56, 0)));
+    background-size: 5% 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: 5% 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;
+}
+
 /****************
  * Text Entries *
  ****************/
@@ -867,7 +1043,7 @@ GtkLevelBar.vertical {
 }
 
 GtkScrolledWindow.frame {
-	-gtk-icon-style: regular;
+    -gtk-icon-style: regular;
 	border-style: solid;
 	border-color: @borders;
 	border-width: 1px;
@@ -888,7 +1064,7 @@ GtkScrolledWindow GtkViewport.frame {
 .button.menuitem.menubar,
 GtkColorButton.button,
 GtkComboBox.combobox-entry .button {
-	-gtk-icon-style: regular;
+    -gtk-icon-style: regular;
 	padding: 4px;
 }
 
@@ -2766,7 +2942,7 @@ GtkMessageDialog {
  ***********/
 .sidebar,
 .sidebar .view {
-	-gtk-icon-style: regular;
+    -gtk-icon-style: regular;
 	background-color: @sidebar_bg;
 }
 
@@ -3892,7 +4068,7 @@ GtkTreeView.view.expander:checked {
 }
 
 GtkExpander {
-	-gtk-icon-style: regular;
+    -gtk-icon-style: regular;
 	-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
 }
 GtkExpander:dir(rtl) {