theme: simplify button drawing

- the original style was built on OSD colors and the conditionals no longer made any sense. In Adwaita:gtk the color conditionals special case the color buttons (warning and suggested tinting). This does not exist in the shell
This commit is contained in:
Jakub Steiner 2019-05-30 11:29:36 +02:00
parent 3bac00dc72
commit e4e55f9013
2 changed files with 16 additions and 37 deletions

View File

@ -64,9 +64,9 @@ stage {
border-right-width: 1px; border-right-width: 1px;
@include button(normal, $c:$bubble_bg_color, $tc:$bubble_fg_color); @include button(normal, $c:$bubble_bg_color, $tc:$bubble_fg_color);
&:insensitive { @include button(insensitive, $c:$bubble_bg_color, $tc:$bubble_fg_color); } &:insensitive { @include button(insensitive, $c:$bubble_bg_color, $tc:$bubble_fg_color); }
&:hover { @include button(hover, $c:$bubble_bg_color, $tc:$bubble_fg_color); } &:hover { @include button(hover, $c:$bubble_hover_bg_color, $tc:$bubble_fg_color); }
&:focus { @include button(focus, $c:$bubble_bg_color, $tc:$bubble_fg_color); } &:focus { @include button(focus, $c:$bubble_hover_bg_color, $tc:$bubble_fg_color); }
&:active { @include button(active, $c:$bubble_bg_color, $tc:$bubble_fg_color); } &:active { @include button(active, $c:$bubble_active_bg_color, $tc:$bubble_active_fg_color); }
padding: 12px; padding: 12px;
border-top: 1px solid $bubble_borders_color; border-top: 1px solid $bubble_borders_color;

View File

@ -108,7 +108,7 @@
} }
} }
@mixin button($t, $c:$osd_bg_color, $tc:$fg_color, $edge: $borders_edge) { @mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) {
// //
// Button drawing function // Button drawing function
// //
@ -134,9 +134,9 @@
// normal button // normal button
// //
color: if($bubble_bg_color, $tc, $osd_fg_color); color: $tc;
background-color: if($osd_bg_color or $bubble_bg_color, $c, transparentize($c, 0.5)); background-color: $c;
border-color: $osd_borders_color; border-color: $borders_color;
box-shadow: none; box-shadow: none;
text-shadow: 0 1px black; text-shadow: 0 1px black;
icon-shadow: 0 1px black; icon-shadow: 0 1px black;
@ -145,7 +145,7 @@
// //
// focused button // focused button
// //
color: if($bubble_bg_color, $tc, $osd_fg_color); color: $tc;
text-shadow: 0 1px black; text-shadow: 0 1px black;
icon-shadow: 0 1px black; icon-shadow: 0 1px black;
box-shadow: inset 0px 0px 0px 1px $selected_bg_color; box-shadow: inset 0px 0px 0px 1px $selected_bg_color;
@ -155,23 +155,9 @@
// //
// active osd button // active osd button
// //
$_bg: $c; color: $tc;
$_fg: white; border-color: $borders_color;
$_bc: $osd_borders_color; background-color: $c;
@if $c==$osd_bg_color {
$_bg: lighten($osd_bg_color,3%);
}
@else if $c==$bubble_bg_color {
$_bg: $bubble_hover_bg_color;
$_fg: $bubble_fg_color;
$_bc: $bubble_borders_color;
}
@else {
$_bg: transparentize($c, 0.3);
}
color: $_fg;
border-color: $_bc;
background-color: $_bg;
box-shadow: none; box-shadow: none;
text-shadow: 0 1px black; text-shadow: 0 1px black;
icon-shadow: 0 1px black; icon-shadow: 0 1px black;
@ -181,24 +167,17 @@
// //
// active osd button // active osd button
// //
color: if($c==$bubble_bg_color, $bubble_active_fg_color, white); color: $tc;
border-color: if($c==$bubble_bg_color, $bubble_borders_color, $osd_borders_color); border-color: $borders_color;
background-color: if($c==$bubble_bg_color, $bubble_active_bg_color, $selected_bg_color); background-color: $c;
// This should be none, but it's creating some issues with borders, so to
// workaround it for now, use inset wich goes through a different code path.
// see https://bugzilla.gnome.org/show_bug.cgi?id=752934
text-shadow: none; text-shadow: none;
icon-shadow: none; icon-shadow: none;
} }
@else if $t==insensitive { @else if $t==insensitive {
//
// insensitive osd button
//
$_bg: transparentize(mix($insensitive_fg_color,if($c==$bubble_bg_color, $bubble_bg_color, $osd_bg_color), 20%),0.3);
color: $insensitive_fg_color; color: $insensitive_fg_color;
border-color: if($c==$bubble_bg_color, $bubble_borders_color, $osd_borders_color); border-color: $insensitive_borders_color;
background-color: $_bg; background-color: $insensitive_bg_color;
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
icon-shadow: none; icon-shadow: none;