From 9c573cb30d46dd49dd706a74a4fc1797a5041803 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Sun, 19 Apr 2015 16:55:05 +0200 Subject: Traditional themes GTK+-3.16: improve overshoot/undershoot function --- .../TraditionalOkTest/gtk-3.0/gtk-widgets.css | 183 ++++++++++++++++++++- desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css | 10 ++ 2 files changed, 190 insertions(+), 3 deletions(-) (limited to 'desktop-themes/TraditionalOkTest') 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); -- cgit v1.2.1