callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adwaita: .needs-attention dark variant style

Browse Source
This commit is contained in:
Lapo Calamandrei 2014-07-22 19:50:15 +02:00
parent 542e0db615
commit 80a1097060
4 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
gtk/resources/theme/Adwaita/_common.scss
View File

@ -248,13 +248,16 @@ GtkLabel {
* Buttons *
***********/
// stuff for .needs-attention
$_dot_color: if($variant=='light', $selected_bg_color,
lighten($selected_bg_color,15%));
@keyframes needs_attention {
from {
//background-size: 0 0, 0 0;
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.01,
to($selected_bg_color),
to($_dot_color),
to(transparent));
}
to {
@ -267,6 +270,7 @@ GtkLabel {
}
}
.button {
border-radius: 3px;
transition: all 200ms ease-out;
@ -394,19 +398,22 @@ GtkLabel {
&.needs-attention > GtkLabel,
&.needs-attention > GtkImage {
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($selected_bg_color),
to($_dot_color),
to(transparent)),
-gtk-gradient(radial,
center center, 0,
center center, 0.5,
to(white),
center center, $_dot_shadow_r,
to($_dot_shadow),
to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px;
@if $variant == 'light' { background-position: right 3px, right 4px; }
@else { background-position: right 3px, right 2px; }
&:backdrop { background-size: 6px 6px, 0 0;}
}
&.needs-attention:active > GtkLabel,

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

@ -93,6 +93,18 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
@function _border_color ($c) { @return darken($c,25%); } // colored buttons want the border form the base color
@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
//
// calculate the color of text shadows
//
// $tc is the text color
// $bg is the background color
//
$_lbg: lightness($bg)/100%;
@if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); }
@else { @return transparentize(black,$_lbg*0.8); }
}
@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
//
// helper function for the text emboss effect
@ -102,18 +114,15 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
// TODO: this functions needs a way to deal with special cases
//
$_lbg: lightness($bg)/100%;
$_shadow: _text_shadow_color($tc, $bg);
$_dark: transparentize(black,$_lbg*0.8);
$_bright: transparentize(white,1-$_lbg/($_lbg*1.3));
@if lightness($tc) < 50% {
text-shadow: 0 1px $_bright;
icon-shadow: 0 1px $_bright;
@if lightness($tc)<50% {
text-shadow: 0 1px $_shadow;
icon-shadow: 0 1px $_shadow;
}
@else {
text-shadow: 0 -1px $_dark;
icon-shadow: 0 -1px $_dark;
text-shadow: 0 -1px $_shadow;
icon-shadow: 0 -1px $_shadow;
}
}

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

@ -258,7 +258,7 @@
***********/
@keyframes needs_attention {
from {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#215d9c), to(transparent)); }
background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#3583d5), to(transparent)); }
to {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)); } }
@ -505,10 +505,10 @@
padding: 3px 6px; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent));
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.81176)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }
background-position: right 3px, right 2px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage {

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

@ -497,7 +497,7 @@
padding: 3px 6px; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
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(white), to(transparent));
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-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }