Gtk+-3.16 BlackMATE: improve overshoot/undershoot function

2 files changed, 199 insertions, 11 deletions

diff --git a/desktop-themes/BlackMATE/gtk-3.0/gtk-main.css b/desktop-themes/BlackMATE/gtk-3.0/gtk-main.css
index 76074261..94209cc6 100644
--- a/desktop-themes/BlackMATE/gtk-3.0/gtk-main.css
+++ b/desktop-themes/BlackMATE/gtk-3.0/gtk-main.css
@@ -165,6 +165,13 @@
 @define-color scale_progress_border #1864b2;
 @define-color scale_progress_border_b #3e90e5;
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
+@define-color overshoot_bg_color alpha (@theme_selected_bg_color, 0.35);
+@define-color overshoot_backdrop_bg_color #F57900;
+
 @import url("gtk-widgets.css");
 @import url("gtk-widgets-assets-dark.css");
 @import url("unity.css");
diff --git a/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css b/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css
index d5e17d59..d72568ea 100644
--- a/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css
@@ -138,11 +138,6 @@
  * Miscellaneous *
  *****************/
 
-/* displays at end of mouse scrolling */
-.overshoot {
-	background-color: alpha (@theme_selected_bg_color, 0.35);
-}
-
 .content-view.view.rubberband,
 .view.rubberband,
 .rubberband {
@@ -3124,6 +3119,198 @@ GtkLabel {
 	color: alpha(@frame_color, 0.6);
 }
 
+/* Gtk-file-chooser-dialog */
+
+GtkFileChooserDialog GtkTreeView.view {
+    background-color: shade (@theme_bg_color, 1.08);
+}
+
+/************************
+ * 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(179, 165, 137, 0))),
+                      -gtk-gradient(radial,
+                                    center top, 0,
+                                    center top, 0.6,
+                                    from(rgba(87, 70, 56, 0.17)),
+                                    to(rgba(87, 70, 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(145, 139, 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(179, 165, 137, 0))),
+                      -gtk-gradient(radial,
+                                    center bottom, 0,
+                                    center bottom, 0.6,
+                                    from(rgba(87, 70, 56, 0.17)),
+                                    to(rgba(87, 70, 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(145, 139, 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(179, 165, 137, 0))),
+                      -gtk-gradient(radial,
+                                    left center, 0,
+                                    left center, 0.6,
+                                    from(rgba(87, 70, 56, 0.07)),
+                                    to(rgba(87, 70, 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(145, 139, 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(179, 165, 137, 0))),
+                      -gtk-gradient(radial,
+                                    right center, 0,
+                                    right center, 0.6,
+                                    from(rgba(87, 70, 56, 0.07)),
+                                    to(rgba(87, 70, 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(145, 139, 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;
+}
+
+/****************
+ * Applications *
+ ****************/
+
 ApDocView, /* Abiword */
 EogScrollView, /* Eog */
 CheeseThumbView /* Cheese */
@@ -3638,9 +3825,3 @@ NemoQueryEditor .toolbar .entry:focus {
 	text-shadow: none;
 }
 
-/* Gtk-file-chooser-dialog */
-
-GtkFileChooserDialog GtkTreeView.view {
-    background-color: shade (@theme_bg_color, 1.08);
-}
-