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

Adwaita: no more -gtk-gradient()

Browse Source 
the only place where it was used was the `needs attention` dot
which is now drawn using radial-gradient().
This commit is contained in:
Lapo Calamandrei 2016-11-05 16:16:37 +01:00
parent a5b967ed31
commit f4c6994e57
3 changed files with 16 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
gtk/theme/Adwaita/_common.scss
View File

@ -419,21 +419,8 @@ treeview entry {
$_dot_color: if($variant=='light', $selected_bg_color,
lighten($selected_bg_color,15%));
@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%); }
}
%button,
@ -796,19 +783,15 @@ button {
}
%needs_attention {
// the dot is drawn by using two radial gradient, the first one is the actuall dot, the other
// simulates the shadow labels and icons normally have in buttons.
animation: needs_attention 150ms ease-in;
$_dot_shadow: _text_shadow_color();
$_dot_shadow_r: if($variant=='light',0.5,0.45);
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($_dot_color),
to(transparent)),
-gtk-gradient(radial,
center center, 0,
center center, $_dot_shadow_r,
to($_dot_shadow),
to(transparent));
$_dot_shadow: _text_shadow_color(); // shadow color
$_dot_shadow_r: if($variant == 'light', 70%, 69%); // the radii of the shadow is different in
// dark variant to dim the intensity a bit
background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color,1 ) 70%),
radial-gradient($_dot_shadow 68%, transparentize($_dot_shadow, 1) $_dot_shadow_r);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;

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

@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
***********/
@keyframes needs_attention {
from {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#3583d5), to(transparent)); }
background-image: radial-gradient(#3583d5 0%, rgba(53, 131, 213, 0) 0%); }
to {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)); } }
background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%); } }
notebook > header > tabs > arrow, button.titlebutton,
button {
min-height: 24px;
@ -1188,7 +1188,7 @@ button.needs-attention > label,
.stack-switcher >
button.needs-attention > image, stacksidebar row.needs-attention > label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.82745)), to(transparent));
background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%), radial-gradient(rgba(0, 0, 0, 0.82745) 68%, transparent 69%);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 2px; }

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

@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
***********/
@keyframes needs_attention {
from {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#4a90d9), to(transparent)); }
background-image: radial-gradient(#4a90d9 0%, rgba(74, 144, 217, 0) 0%); }
to {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)); } }
background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%); } }
notebook > header > tabs > arrow, button.titlebutton,
button {
min-height: 24px;
@ -1191,7 +1191,7 @@ button.needs-attention > label,
.stack-switcher >
button.needs-attention > image, stacksidebar row.needs-attention > label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent));
background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%), radial-gradient(rgba(255, 255, 255, 0.76923) 68%, rgba(255, 255, 255, 0) 70%);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }