AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: no more -gtk-gradient(), really

Browse Source 
the undershoot is drawn with a radial-gradient now.
This commit is contained in:
Lapo Calamandrei 2016-11-07 17:12:21 +01:00
parent e470567fd0
commit c4a4fe32ea
3 changed files with 60 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
gtk/theme/Adwaita/_drawing.scss
View File

@ -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; //

48
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -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; }

48
gtk/theme/Adwaita/gtk-contained.css
View File

@ -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; }