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

Adwaita: overshoot style tweaks

Browse Source 
Trying to make it visible on the dark variant.
This commit is contained in:
Lapo Calamandrei 2014-11-14 15:37:02 +01:00
parent 2d1c7b8937
commit a30a54a521
3 changed files with 60 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
gtk/resources/theme/Adwaita/_drawing.scss
View File

@ -499,7 +499,7 @@
}
@mixin overshoot($p, $t:normal, $c:$borders_color) {
@mixin overshoot($p, $t:normal, $c:$fg_color) {
//
// overshoot
//
@ -514,13 +514,12 @@
// normal, backdrop
//
$_radial_gradient_length: 4%;
$_linear_gradient_length: 70%;
$_small_gradient_length: 5%;
$_big_gradient_length: 120%;
$_position: center top;
$_linear_gradient_direction: to bottom;
$_radial_gradient_size: 100% $_radial_gradient_length;
$_linear_gradient_size: 100% $_linear_gradient_length;
$_small_gradient_size: 100% $_small_gradient_length;
$_big_gradient_size: 100% $_big_gradient_length;
@if $p==bottom {
$_position: center bottom;
@ -529,41 +528,46 @@
@else if $p==right {
$_position: right center;
$_linear_gradient_direction: to left;
$_radial_gradient_size: $_radial_gradient_length 100%;
$_linear_gradient_size: $_linear_gradient_length 100%;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
@else if $p==left {
$_position: left center;
$_linear_gradient_direction: to right;
$_radial_gradient_size: $_radial_gradient_length 100%;
$_linear_gradient_size: $_linear_gradient_length 100%;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
$_color: $c;
$_small_gradient_color: $c;
$_big_gradient_color: $c;
@if $t==backdrop {
$_color: if($c==$borders_color, $backdrop_borders_color, $c);
@if $c==$fg_color {
$_small_gradient_color: darken($borders_color, 10%);
$_big_gradient_color: $fg_color;
@if $t==backdrop { $_small_graident_color: $backdrop_borders_color; }
}
$_radial_gradient: -gtk-gradient(radial,
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.5,
to($_color),
to(transparentize($_color, 1)));
to($_small_gradient_color),
to(transparentize($_small_gradient_color, 1)));
$_linear_gradient: linear-gradient($_linear_gradient_direction, transparentize($_color, 0.85),
transparentize($_color, 1));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.6,
from(transparentize($_big_gradient_color, 0.9)),
to(transparentize($_big_gradient_color, 1)));
@if $t==normal {
background-image: $_radial_gradient, $_linear_gradient;
background-size: $_radial_gradient_size, $_linear_gradient_size;
background-image: $_small_gradient, $_big_gradient;
background-size: $_small_gradient_size, $_big_gradient_size;
}
@else if $t==backdrop {
background-image: $_radial_gradient;
background-size: $_radial_gradient_size;
background-image: $_small_gradient;
background-size: $_small_gradient_size;
}
background-repeat: no-repeat;

32
gtk/resources/theme/Adwaita/gtk-contained-dark.css
View File

@ -74,64 +74,64 @@
background-color: rgba(33, 93, 156, 0.2); }
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to bottom, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
background-size: 100% 4%, 100% 70%;
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.1)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 120%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 100% 4%;
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to top, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
background-size: 100% 4%, 100% 70%;
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.1)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 120%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 100% 4%;
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 4, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to right, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
background-size: 4% 100%, 70% 100%;
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.1)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 120% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 4% 100%;
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to left, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
background-size: 4% 100%, 70% 100%;
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.1)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 120% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 4% 100%;
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;

32
gtk/resources/theme/Adwaita/gtk-contained.css
View File

@ -74,64 +74,64 @@
background-color: rgba(74, 144, 217, 0.2); }
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to bottom, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
background-size: 100% 4%, 100% 70%;
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.1)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 120%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 4%;
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#878787), to(rgba(135, 135, 135, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to top, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
background-size: 100% 4%, 100% 70%;
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.1)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 120%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 4%;
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#878787), to(rgba(135, 135, 135, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to right, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
background-size: 4% 100%, 70% 100%;
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.1)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 120% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 4% 100%;
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#878787), to(rgba(135, 135, 135, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to left, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
background-size: 4% 100%, 70% 100%;
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.1)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 120% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 4% 100%;
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#878787), to(rgba(135, 135, 135, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;