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

Adwaita: tweak radial-gradient()'s

Browse Source 
radial-gradient()'s are behaving, hence simplify the css.
This commit is contained in:
Lapo Calamandrei 2016-11-07 22:34:02 +01:00
parent 5b8646c6e8
commit 8d212ae5c2
4 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -419,8 +419,8 @@ treeview entry {
$_dot_color: if($variant=='light', $selected_bg_color,
lighten($selected_bg_color,15%));
@keyframes needs_attention {
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%); }
from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
}
%button,
@ -787,11 +787,9 @@ button {
// simulates the shadow labels and icons normally have in buttons.
animation: needs_attention 150ms ease-in;
$_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-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 )),
radial-gradient(farthest-side, $_dot_shadow 95%, transparentize($_dot_shadow, 1));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;

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

@ -545,11 +545,11 @@
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
}
$_small_gradient: radial-gradient(ellipse farthest-side at $p,
$_small_gradient: radial-gradient(farthest-side at $p,
$_small_gradient_color 85%,
transparentize($_small_gradient_color, 1));
$_big_gradient: radial-gradient(ellipse farthest-side at $p,
$_big_gradient: radial-gradient(farthest-side at $p,
$_big_gradient_color,
transparentize($_big_gradient_color, 1));

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

@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
***********/
@keyframes needs_attention {
from {
background-image: radial-gradient(#3583d5 0%, rgba(53, 131, 213, 0) 0%); }
background-image: radial-gradient(farthest-side, #3583d5 0%, rgba(53, 131, 213, 0) 0%); }
to {
background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%); } }
background-image: radial-gradient(farthest-side, #3583d5 95%, rgba(53, 131, 213, 0)); } }
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: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%), radial-gradient(rgba(0, 0, 0, 0.82745) 68%, transparent 69%);
background-image: radial-gradient(farthest-side, #3583d5 96%, rgba(53, 131, 213, 0)), radial-gradient(farthest-side, rgba(0, 0, 0, 0.82745) 95%, transparent);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 2px; }
@ -3794,7 +3794,7 @@ actionbar > revealer > box {
scrolledwindow viewport.frame {
border-style: none; }
scrolledwindow overshoot.top {
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-image: radial-gradient(farthest-side at top, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(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: top;
@ -3802,7 +3802,7 @@ scrolledwindow overshoot.top {
border: none;
box-shadow: none; }
scrolledwindow overshoot.top:backdrop {
background-image: radial-gradient(ellipse farthest-side at top, #202425 85%, rgba(32, 36, 37, 0));
background-image: radial-gradient(farthest-side at top, #202425 85%, rgba(32, 36, 37, 0));
background-size: 100% 3%;
background-repeat: no-repeat;
background-position: top;
@ -3810,7 +3810,7 @@ scrolledwindow overshoot.top {
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom {
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-image: radial-gradient(farthest-side at bottom, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(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: bottom;
@ -3818,7 +3818,7 @@ scrolledwindow overshoot.bottom {
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop {
background-image: radial-gradient(ellipse farthest-side at bottom, #202425 85%, rgba(32, 36, 37, 0));
background-image: radial-gradient(farthest-side at bottom, #202425 85%, rgba(32, 36, 37, 0));
background-size: 100% 3%;
background-repeat: no-repeat;
background-position: bottom;
@ -3826,7 +3826,7 @@ scrolledwindow overshoot.bottom {
border: none;
box-shadow: none; }
scrolledwindow overshoot.left {
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-image: radial-gradient(farthest-side at left, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(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;
@ -3834,7 +3834,7 @@ scrolledwindow overshoot.left {
border: none;
box-shadow: none; }
scrolledwindow overshoot.left:backdrop {
background-image: radial-gradient(ellipse farthest-side at left, #202425 85%, rgba(32, 36, 37, 0));
background-image: radial-gradient(farthest-side at left, #202425 85%, rgba(32, 36, 37, 0));
background-size: 3% 100%;
background-repeat: no-repeat;
background-position: left;
@ -3842,7 +3842,7 @@ scrolledwindow overshoot.left {
border: none;
box-shadow: none; }
scrolledwindow overshoot.right {
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-image: radial-gradient(farthest-side at right, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(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;
@ -3850,7 +3850,7 @@ scrolledwindow overshoot.right {
border: none;
box-shadow: none; }
scrolledwindow overshoot.right:backdrop {
background-image: radial-gradient(ellipse farthest-side at right, #202425 85%, rgba(32, 36, 37, 0));
background-image: radial-gradient(farthest-side at right, #202425 85%, rgba(32, 36, 37, 0));
background-size: 3% 100%;
background-repeat: no-repeat;
background-position: right;

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

@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
***********/
@keyframes needs_attention {
from {
background-image: radial-gradient(#4a90d9 0%, rgba(74, 144, 217, 0) 0%); }
background-image: radial-gradient(farthest-side, #4a90d9 0%, rgba(74, 144, 217, 0) 0%); }
to {
background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%); } }
background-image: radial-gradient(farthest-side, #4a90d9 95%, rgba(74, 144, 217, 0)); } }
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: 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-image: radial-gradient(farthest-side, #4a90d9 96%, rgba(74, 144, 217, 0)), radial-gradient(farthest-side, rgba(255, 255, 255, 0.76923) 95%, rgba(255, 255, 255, 0));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }
@ -3825,7 +3825,7 @@ actionbar > revealer > box {
scrolledwindow viewport.frame {
border-style: none; }
scrolledwindow overshoot.top {
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-image: radial-gradient(farthest-side at top, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(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: top;
@ -3833,7 +3833,7 @@ scrolledwindow overshoot.top {
border: none;
box-shadow: none; }
scrolledwindow overshoot.top:backdrop {
background-image: radial-gradient(ellipse farthest-side at top, #c0c0bd 85%, rgba(192, 192, 189, 0));
background-image: radial-gradient(farthest-side at top, #c0c0bd 85%, rgba(192, 192, 189, 0));
background-size: 100% 3%;
background-repeat: no-repeat;
background-position: top;
@ -3841,7 +3841,7 @@ scrolledwindow overshoot.top {
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom {
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-image: radial-gradient(farthest-side at bottom, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(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: bottom;
@ -3849,7 +3849,7 @@ scrolledwindow overshoot.bottom {
border: none;
box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop {
background-image: radial-gradient(ellipse farthest-side at bottom, #c0c0bd 85%, rgba(192, 192, 189, 0));
background-image: radial-gradient(farthest-side at bottom, #c0c0bd 85%, rgba(192, 192, 189, 0));
background-size: 100% 3%;
background-repeat: no-repeat;
background-position: bottom;
@ -3857,7 +3857,7 @@ scrolledwindow overshoot.bottom {
border: none;
box-shadow: none; }
scrolledwindow overshoot.left {
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-image: radial-gradient(farthest-side at left, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(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;
@ -3865,7 +3865,7 @@ scrolledwindow overshoot.left {
border: none;
box-shadow: none; }
scrolledwindow overshoot.left:backdrop {
background-image: radial-gradient(ellipse farthest-side at left, #c0c0bd 85%, rgba(192, 192, 189, 0));
background-image: radial-gradient(farthest-side at left, #c0c0bd 85%, rgba(192, 192, 189, 0));
background-size: 3% 100%;
background-repeat: no-repeat;
background-position: left;
@ -3873,7 +3873,7 @@ scrolledwindow overshoot.left {
border: none;
box-shadow: none; }
scrolledwindow overshoot.right {
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-image: radial-gradient(farthest-side at right, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(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;
@ -3881,7 +3881,7 @@ scrolledwindow overshoot.right {
border: none;
box-shadow: none; }
scrolledwindow overshoot.right:backdrop {
background-image: radial-gradient(ellipse farthest-side at right, #c0c0bd 85%, rgba(192, 192, 189, 0));
background-image: radial-gradient(farthest-side at right, #c0c0bd 85%, rgba(192, 192, 189, 0));
background-size: 3% 100%;
background-repeat: no-repeat;
background-position: right;