GTK3: improve button's background and shadows

This commit is contained in:
Daniel Ruiz de Alegría 2021-08-12 21:02:21 +02:00
parent e4a214f296
commit 735dd5ff69
2 changed files with 17 additions and 10 deletions

View File

@ -193,11 +193,12 @@
// //
// normal button // normal button
// //
$light_c: lighten($c, 7%);
color: $tc; color: $tc;
outline-color: transparentize($tc, 0.7); outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c), $borders_color); border-color: if($c != $bg_color, _border_color($light_c), $borders_color);
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color); border-bottom-color: if($c != $bg_color, _border_color($light_c, true), $alt_borders_color);
background-image: image(lighten($c, 7%)), background-image: image($light_c),
$backimage; $backimage;
//@include _button_text_shadow($tc, $c); //@include _button_text_shadow($tc, $c);
@include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow); @include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow);

View File

@ -7,28 +7,34 @@
--- ---
> $_button_shadow: inset 0 -1px 0px transparentize(if($c != $bg_color, _border_color($c), $borders_color), .25), > $_button_shadow: inset 0 -1px 0px transparentize(if($c != $bg_color, _border_color($c), $borders_color), .25),
> 0 1px 2px transparentize($shadow_color, 0.03); > 0 1px 2px transparentize($shadow_color, 0.03);
199,200c200 194a196
> $light_c: lighten($c, 7%);
197,200c199,201
< border-color: if($c != $bg_color, _border_color($c), $borders_color);
< border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
< background-image: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c), < background-image: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
< linear-gradient(to top, darken($c,1%) 2px, $c)), < linear-gradient(to top, darken($c,1%) 2px, $c)),
--- ---
> background-image: image(lighten($c, 7%)), > border-color: if($c != $bg_color, _border_color($light_c), $borders_color);
202c202 > border-bottom-color: if($c != $bg_color, _border_color($light_c, true), $alt_borders_color);
> background-image: image($light_c),
202c203
< @include _button_text_shadow($tc, $c); < @include _button_text_shadow($tc, $c);
--- ---
> //@include _button_text_shadow($tc, $c); > //@include _button_text_shadow($tc, $c);
215c215 215c216
< background-image: linear-gradient(to top, $c, lighten($c, 1%) 1px), < background-image: linear-gradient(to top, $c, lighten($c, 1%) 1px),
--- ---
> background-image: image(darken($c, 4%)), > background-image: image(darken($c, 4%)),
217c217 217c218
< @include _button_text_shadow($tc, lighten($c, 6%)); < @include _button_text_shadow($tc, lighten($c, 6%));
--- ---
> //@include _button_text_shadow($tc, lighten($c, 6%)); > //@include _button_text_shadow($tc, lighten($c, 6%));
223c223 223c224
< @include _button_text_shadow($tc,lighten($c, 6%)); < @include _button_text_shadow($tc,lighten($c, 6%));
--- ---
> //@include _button_text_shadow($tc,lighten($c, 6%)); > //@include _button_text_shadow($tc,lighten($c, 6%));
235c235 235c236
< @include _button_text_shadow($tc, $c); < @include _button_text_shadow($tc, $c);
--- ---
> //@include _button_text_shadow($tc, $c); > //@include _button_text_shadow($tc, $c);