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

HC: use radial-gradient() in place of -gtk-gradient().

Browse Source
This commit is contained in:
Lapo Calamandrei 2016-11-07 18:22:28 +01:00
parent c4a4fe32ea
commit 5af1e87f59
4 changed files with 45 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
gtk/theme/HighContrast/_common.scss
View File

@ -341,20 +341,8 @@ entry {
$_dot_color: $selected_bg_color;
@keyframes needs_attention {
from {
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.01,
to($_dot_color),
to(transparent));
}
to {
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($selected_bg_color),
to(transparent));
}
from { background-image: radial-gradient($_dot_color 0%, transparentize($_dot_color, 1) 0%); }
to { background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color, 1) 70%); }
}
@ -685,11 +673,7 @@ button {
%needs_attention {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($_dot_color),
to(transparent));
background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color,1 ) 70%);
background-size: 6px 6px;
background-repeat: no-repeat;

37
gtk/theme/HighContrast/_drawing.scss
View File

@ -291,48 +291,31 @@
$_small_gradient_length: 5%;
$_big_gradient_length: 100%;
$_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;
@if $p==right or $p==left {
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
@else if $p==left {
$_position: left center;
$_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, 50%);
$_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.5)),
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;
@ -345,7 +328,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; //

32
gtk/theme/HighContrast/gtk-contained-inverse.css
View File

@ -2632,73 +2632,73 @@ scrolledwindow viewport.frame {
border-style: none; }
placessidebar overshoot.top,
scrolledwindow overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: radial-gradient(ellipse farthest-side at top, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-position: top;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.top:backdrop,
scrolledwindow overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#737373), to(rgba(115, 115, 115, 0)));
background-image: radial-gradient(ellipse farthest-side at top, #737373 85%, rgba(115, 115, 115, 0));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-position: top;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.bottom,
scrolledwindow overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: radial-gradient(ellipse farthest-side at bottom, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-position: bottom;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.bottom:backdrop,
scrolledwindow overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#737373), to(rgba(115, 115, 115, 0)));
background-image: radial-gradient(ellipse farthest-side at bottom, #737373 85%, rgba(115, 115, 115, 0));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-position: bottom;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.left,
scrolledwindow overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: radial-gradient(ellipse farthest-side at left, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at left, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-position: left;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.left:backdrop,
scrolledwindow overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#737373), to(rgba(115, 115, 115, 0)));
background-image: radial-gradient(ellipse farthest-side at left, #737373 85%, rgba(115, 115, 115, 0));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-position: left;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.right,
scrolledwindow overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: radial-gradient(ellipse farthest-side at right, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at right, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-position: right;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.right:backdrop,
scrolledwindow overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#737373), to(rgba(115, 115, 115, 0)));
background-image: radial-gradient(ellipse farthest-side at right, #737373 85%, rgba(115, 115, 115, 0));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-position: right;
background-color: transparent;
border: none;
box-shadow: none; }

32
gtk/theme/HighContrast/gtk-contained.css
View File

@ -2639,73 +2639,73 @@ scrolledwindow viewport.frame {
border-style: none; }
placessidebar overshoot.top,
scrolledwindow overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
background-image: radial-gradient(ellipse farthest-side at top, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at top, rgba(0, 0, 0, 0.07), transparent);
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-position: top;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.top:backdrop,
scrolledwindow overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0)));
background-image: radial-gradient(ellipse farthest-side at top, #8d8d8d 85%, rgba(141, 141, 141, 0));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-position: top;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.bottom,
scrolledwindow overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
background-image: radial-gradient(ellipse farthest-side at bottom, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(0, 0, 0, 0.07), transparent);
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-position: bottom;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.bottom:backdrop,
scrolledwindow overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0)));
background-image: radial-gradient(ellipse farthest-side at bottom, #8d8d8d 85%, rgba(141, 141, 141, 0));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-position: bottom;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.left,
scrolledwindow overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
background-image: radial-gradient(ellipse farthest-side at left, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at left, rgba(0, 0, 0, 0.07), transparent);
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-position: left;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.left:backdrop,
scrolledwindow overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0)));
background-image: radial-gradient(ellipse farthest-side at left, #8d8d8d 85%, rgba(141, 141, 141, 0));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-position: left;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.right,
scrolledwindow overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
background-image: radial-gradient(ellipse farthest-side at right, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at right, rgba(0, 0, 0, 0.07), transparent);
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-position: right;
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.right:backdrop,
scrolledwindow overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0)));
background-image: radial-gradient(ellipse farthest-side at right, #8d8d8d 85%, rgba(141, 141, 141, 0));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-position: right;
background-color: transparent;
border: none;
box-shadow: none; }