diff options
author | Lapo Calamandrei <calamandrei@gmail.com> | 2016-11-07 17:12:21 +0100 |
---|---|---|
committer | Lapo Calamandrei <calamandrei@gmail.com> | 2016-11-07 18:12:42 +0100 |
commit | c4a4fe32ea6021ab68ba8ebec702b4ea967971f9 (patch) | |
tree | 5724a95401be7f020ac1f4c5dfd86f6c00ce2a7a | |
parent | e470567fd0f85a73fb7658146962c590bc729a1e (diff) | |
download | gtk+-c4a4fe32ea6021ab68ba8ebec702b4ea967971f9.tar.gz |
Adwaita: no more -gtk-gradient(), really
the undershoot is drawn with a radial-gradient now.
-rw-r--r-- | gtk/theme/Adwaita/_drawing.scss | 41 | ||||
-rw-r--r-- | gtk/theme/Adwaita/gtk-contained-dark.css | 48 | ||||
-rw-r--r-- | gtk/theme/Adwaita/gtk-contained.css | 48 |
3 files changed, 60 insertions, 77 deletions
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index 6e808b3e77..be410b567c 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -524,51 +524,34 @@ // normal, backdrop // - $_small_gradient_length: 5%; - $_big_gradient_length: 100%; + $_small_gradient_length: 3%; + $_big_gradient_length: 50%; - $_position: center top; $_small_gradient_size: 100% $_small_gradient_length; $_big_gradient_size: 100% $_big_gradient_length; - @if $p==bottom { - $_position: center bottom; - $_linear_gradient_direction: to top; - } - - @else if $p==right { - $_position: right center; - $_small_gradient_size: $_small_gradient_length 100%; - $_big_gradient_size: $_big_gradient_length 100%; - } - - @else if $p==left { - $_position: left center; + @if $p==right or $p==left { $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } $_small_gradient_color: $c; - $_big_gradient_color: $c; + $_big_gradient_color: transparentize($c, 0.93); @if $c==$fg_color { $_small_gradient_color: darken($borders_color, 10%); - $_big_gradient_color: $fg_color; + $_big_gradient_color: transparentize($fg_color, 0.93); @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } } - $_small_gradient: -gtk-gradient(radial, - $_position, 0, - $_position, 0.5, - to($_small_gradient_color), - to(transparentize($_small_gradient_color, 1))); + $_small_gradient: radial-gradient(ellipse farthest-side at $p, + $_small_gradient_color 85%, + transparentize($_small_gradient_color, 1)); - $_big_gradient: -gtk-gradient(radial, - $_position, 0, - $_position, 0.6, - from(transparentize($_big_gradient_color, 0.93)), - to(transparentize($_big_gradient_color, 1))); + $_big_gradient: radial-gradient(ellipse farthest-side at $p, + $_big_gradient_color, + transparentize($_big_gradient_color, 1)); @if $t==normal { background-image: $_small_gradient, $_big_gradient; @@ -581,7 +564,7 @@ } background-repeat: no-repeat; - background-position: $_position; + background-position: $p; background-color: transparent; // reset some properties to be sure to not inherit them somehow border: none; // diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 4ecb17de06..b2c3fb0548 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -3794,66 +3794,66 @@ actionbar > revealer > box { scrolledwindow viewport.frame { border-style: none; } scrolledwindow overshoot.top { - background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0))); - background-size: 100% 5%, 100% 100%; + background-image: radial-gradient(ellipse farthest-side at top, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at top, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); + background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; - background-position: center top; + background-position: top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.top:backdrop { - background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#202425), to(rgba(32, 36, 37, 0))); - background-size: 100% 5%; + background-image: radial-gradient(ellipse farthest-side at top, #202425 85%, rgba(32, 36, 37, 0)); + background-size: 100% 3%; background-repeat: no-repeat; - background-position: center top; + background-position: top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom { - background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0))); - background-size: 100% 5%, 100% 100%; + background-image: radial-gradient(ellipse farthest-side at bottom, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); + background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; - background-position: center bottom; + background-position: bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom:backdrop { - background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#202425), to(rgba(32, 36, 37, 0))); - background-size: 100% 5%; + background-image: radial-gradient(ellipse farthest-side at bottom, #202425 85%, rgba(32, 36, 37, 0)); + background-size: 100% 3%; background-repeat: no-repeat; - background-position: center bottom; + background-position: bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left { - background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0))); - background-size: 5% 100%, 100% 100%; + background-image: radial-gradient(ellipse farthest-side at left, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at left, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); + background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; - background-position: left center; + background-position: left; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left:backdrop { - background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#202425), to(rgba(32, 36, 37, 0))); - background-size: 5% 100%; + background-image: radial-gradient(ellipse farthest-side at left, #202425 85%, rgba(32, 36, 37, 0)); + background-size: 3% 100%; background-repeat: no-repeat; - background-position: left center; + background-position: left; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right { - background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0))); - background-size: 5% 100%, 100% 100%; + background-image: radial-gradient(ellipse farthest-side at right, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at right, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); + background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; - background-position: right center; + background-position: right; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right:backdrop { - background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#202425), to(rgba(32, 36, 37, 0))); - background-size: 5% 100%; + background-image: radial-gradient(ellipse farthest-side at right, #202425 85%, rgba(32, 36, 37, 0)); + background-size: 3% 100%; background-repeat: no-repeat; - background-position: right center; + background-position: right; background-color: transparent; border: none; box-shadow: none; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 5c814878c0..29db4e89fa 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -3825,66 +3825,66 @@ actionbar > revealer > box { scrolledwindow viewport.frame { border-style: none; } scrolledwindow overshoot.top { - background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#9d9d99), to(rgba(157, 157, 153, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0))); - background-size: 100% 5%, 100% 100%; + background-image: radial-gradient(ellipse farthest-side at top, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at top, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); + background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; - background-position: center top; + background-position: top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.top:backdrop { - background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#c0c0bd), to(rgba(192, 192, 189, 0))); - background-size: 100% 5%; + background-image: radial-gradient(ellipse farthest-side at top, #c0c0bd 85%, rgba(192, 192, 189, 0)); + background-size: 100% 3%; background-repeat: no-repeat; - background-position: center top; + background-position: top; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom { - background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#9d9d99), to(rgba(157, 157, 153, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0))); - background-size: 100% 5%, 100% 100%; + background-image: radial-gradient(ellipse farthest-side at bottom, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); + background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; - background-position: center bottom; + background-position: bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.bottom:backdrop { - background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#c0c0bd), to(rgba(192, 192, 189, 0))); - background-size: 100% 5%; + background-image: radial-gradient(ellipse farthest-side at bottom, #c0c0bd 85%, rgba(192, 192, 189, 0)); + background-size: 100% 3%; background-repeat: no-repeat; - background-position: center bottom; + background-position: bottom; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left { - background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#9d9d99), to(rgba(157, 157, 153, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0))); - background-size: 5% 100%, 100% 100%; + background-image: radial-gradient(ellipse farthest-side at left, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at left, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); + background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; - background-position: left center; + background-position: left; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.left:backdrop { - background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#c0c0bd), to(rgba(192, 192, 189, 0))); - background-size: 5% 100%; + background-image: radial-gradient(ellipse farthest-side at left, #c0c0bd 85%, rgba(192, 192, 189, 0)); + background-size: 3% 100%; background-repeat: no-repeat; - background-position: left center; + background-position: left; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right { - background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#9d9d99), to(rgba(157, 157, 153, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0))); - background-size: 5% 100%, 100% 100%; + background-image: radial-gradient(ellipse farthest-side at right, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at right, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); + background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; - background-position: right center; + background-position: right; background-color: transparent; border: none; box-shadow: none; } scrolledwindow overshoot.right:backdrop { - background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#c0c0bd), to(rgba(192, 192, 189, 0))); - background-size: 5% 100%; + background-image: radial-gradient(ellipse farthest-side at right, #c0c0bd 85%, rgba(192, 192, 189, 0)); + background-size: 3% 100%; background-repeat: no-repeat; - background-position: right center; + background-position: right; background-color: transparent; border: none; box-shadow: none; } |