summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorraveit65 <[email protected]>2015-04-19 16:55:05 +0200
committerraveit65 <[email protected]>2015-04-19 16:55:05 +0200
commit9c573cb30d46dd49dd706a74a4fc1797a5041803 (patch)
treeade8141be7872c185bb747eb9125066a9de9eb14
parentcb7102ebe4e10ab82fa0b2982de07b37f8b9583e (diff)
downloadmate-themes-9c573cb30d46dd49dd706a74a4fc1797a5041803.tar.bz2
mate-themes-9c573cb30d46dd49dd706a74a4fc1797a5041803.tar.xz
Traditional themes GTK+-3.16: improve overshoot/undershoot function
-rw-r--r--desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css183
-rw-r--r--desktop-themes/TraditionalGreen/gtk-3.0/gtk.css10
-rw-r--r--desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css183
-rw-r--r--desktop-themes/TraditionalOk/gtk-3.0/gtk.css10
-rw-r--r--desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css183
-rw-r--r--desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css10
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);