6 files changed, 570 insertions, 9 deletions
diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
index fc9d86aa..4713b54e 100644
--- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
@@ -208,12 +208,189 @@ GtkTreeView.separator,
 background-position: center;
 }
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
 /* displays at end of mouse scrolling */
-.overshoot,
-.sidebar.overshoot {
- background-color: alpha (@theme_selected_bg_color, 0.35);
+.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% 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))),
+ -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% 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))),
+ -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: 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))),
+ -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: 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: 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 *
 ****************/
diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css
index 572ae377..d8b92fae 100644
--- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css
@@ -428,6 +428,16 @@
 @define-color trough_gradient_a shade(@core_color_b, 0.81);
 @define-color trough_gradient_b shade(@core_color_b, 0.90);
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
+@define-color overshoot_bg_color alpha (@theme_selected_bg_color, 0.15);
+@define-color overshoot_backdrop_bg_color theme_selected_bg_color;
+
+/**********
+ * WM *
+ **********/
 
 @define-color wm_shadow alpha(black, 0.5);
 @define-color wm_border alpha(black,0.18);
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
index ca313915..8609b3d6 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
@@ -208,10 +208,187 @@ GtkTreeView.separator,
 background-position: center;
 }
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
 /* displays at end of mouse scrolling */
-.overshoot,
-.sidebar.overshoot {
- background-color: alpha (@theme_selected_bg_color, 0.35);
+.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% 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(131, 137, 145, 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(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% 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(131, 137, 145, 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(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: 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(131, 137, 145, 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(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: 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(131, 137, 145, 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;
 }
 
 /****************
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
index 544fc6e6..c2c429a9 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
@@ -428,6 +428,16 @@
 @define-color trough_gradient_a shade(@core_color_b, 0.81);
 @define-color trough_gradient_b shade(@core_color_b, 0.90);
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
+@define-color overshoot_bg_color alpha (@theme_selected_bg_color, 0.15);
+@define-color overshoot_backdrop_bg_color theme_selected_bg_color;
+
+/**********
+ * WM *
+ **********/
 
 @define-color wm_shadow alpha(black, 0.5);
 @define-color wm_border alpha(black,0.18);
diff --git a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
index f728987f..5388bcac 100644
--- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
@@ -208,10 +208,187 @@ GtkTreeView.separator,
 background-position: center;
 }
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
 /* displays at end of mouse scrolling */
-.overshoot,
-.sidebar.overshoot {
- background-color: alpha (@theme_selected_bg_color, 0.35);
+.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% 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(131, 137, 145, 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(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% 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(131, 137, 145, 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(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: 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(131, 137, 145, 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(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: 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(131, 137, 145, 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;
 }
 
 /****************
diff --git a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css
index c6b719fb..635ecc89 100644
--- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css
@@ -428,6 +428,16 @@
 @define-color trough_gradient_a shade(@core_color_b, 0.81);
 @define-color trough_gradient_b shade(@core_color_b, 0.90);
 
+/************************
+ * overshoot/undershoot *
+ ************************/
+
+@define-color overshoot_bg_color alpha (@theme_selected_bg_color, 0.35);
+@define-color overshoot_backdrop_bg_color theme_selected_bg_color;
+
+/**********
+ * WM *
+ **********/
 
 @define-color wm_shadow alpha(black, 0.5);
 @define-color wm_border alpha(black,0.18);