// Drawing mixins // generic drawing of more complex things //to allow some common mixins to know whether they've been called for a gtk3 or gtk4 widget, because there are some things that are different. $gtk: 4; @function _widget_edge($c:$borders_edge) { // outer highlight "used" on most widgets @if $c == none { @return none; } @else { @return 0 1px $c; } } @mixin _shadows($list...) { // // Helper mixin to stack up to box-shadows; // $shadows: null; @each $shadow in $list { @if $shadow!=none { $shadows: $shadows, $shadow; } } box-shadow: $shadows; } // entries @function entry_focus_border($fc:$selected_bg_color) { @if $variant == 'light' { @return $fc; } @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); } } @function entry_focus_shadow($fc:$selected_bg_color) { @return inset 0 0 0 1px $fc; } @mixin entry($t, $fc:$selected_bg_color, $edge: none) { // // Entries drawing function // // $t: entry type // $fc: focus color // $edge: set to none to not draw the bottom edge or specify a color to not // use the default one // // possible $t values: // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; // $_entry_shadow: 0 1px 2px transparentize($shadow_hard_color, 0.6); $_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1)); $_entry_edge: if($edge == none, none, _widget_edge($edge)); $_hilight_color: _button_hilight_color($bg_color); @if $t==normal { color: $text_color; border-color: $borders_color; background-color: $base_color; @include _shadows(entry_focus_shadow(transparentize($fc, 1)),inset $_entry_shadow, 0 1px $_hilight_color, $_entry_edge); // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. } @if $t==focus { @include _shadows(entry_focus_shadow($fc), inset $_entry_shadow, 0 1px $_hilight_color, $_entry_edge); border-color: entry_focus_border($fc); } @if $t==insensitive { color: $insensitive_fg_color; border-color: $insensitive_fg_color; background-color: $insensitive_bg_color; box-shadow: $_entry_edge; } @if $t==backdrop { color: $backdrop_text_color; border-color: $backdrop_borders_color; background-color: $backdrop_base_color; box-shadow: $_blank_edge; } @if $t==backdrop-insensitive { color: $backdrop_insensitive_color; border-color: $backdrop_borders_color; background-color: $insensitive_bg_color; box-shadow: $_blank_edge; } @if $t==osd { color: $osd_text_color; border-color: $osd_borders_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); background-clip: padding-box; @include _shadows($_entry_shadow);; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } @if $t==osd-focus { color: $osd_text_color; border-color: $selected_bg_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); background-clip: padding-box; @include _shadows(entry_focus_shadow($fc), $_entry_shadow); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } @if $t==osd-insensitive { color: $osd_insensitive_fg_color; border-color: $osd_borders_color; background-color: $osd_insensitive_bg_color; background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } @if $t==osd-backdrop { color: $osd_text_color; border-color: $osd_borders_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } } // buttons @import "../common/buttons.scss"; @mixin headerbar_fill($c:$headerbar_color, $hc:$top_hilight, $ov: none) { // // headerbar fill // // $c: base color // $hc: top highlight color // $ov: a background layer for background shorthand (hence no commas!) // $gradient: linear-gradient(to top, darken($c, 2%), lighten($c, 1%)); @if $variant == 'dark' { $gradient: linear-gradient(to top, lighten($c, 4%), lighten($c, 6%)); } @if $ov != none { background: $c $ov, $gradient; } @else { background: $c $gradient; } box-shadow: inset 0 1px $hc; // top highlight } @mixin overshoot($p, $t:normal, $c:$fg_color) { // // overshoot // // $p: position // $t: type // $c: base color // // possible $p values: // top, bottom, right, left // // possible $t values: // normal, backdrop // $_small_gradient_length: 5%; $_big_gradient_length: 100%; $_position: center top; $_small_gradient_size: 100% $_small_gradient_length; $_big_gradient_size: 100% $_big_gradient_length; @if $p==bottom { $_position: center bottom; $_linear_gradient_direction: to top; } @else if $p==right { $_position: right center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } @else if $p==left { $_position: left center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } $_small_gradient_color: $c; $_big_gradient_color: $c; @if $c==$fg_color { $_small_gradient_color: darken($borders_color, 10%); $_big_gradient_color: $fg_color; @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } } $_small_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.5, to($_small_gradient_color), to(transparentize($_small_gradient_color, 1))); $_big_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.6, from(transparentize($_big_gradient_color, 0.93)), to(transparentize($_big_gradient_color, 1))); @if $t==normal { background-image: $_small_gradient, $_big_gradient; background-size: $_small_gradient_size, $_big_gradient_size; } @else if $t==backdrop { background-image: $_small_gradient; background-size: $_small_gradient_size; } background-repeat: no-repeat; background-position: $_position; background-color: transparent; // reset some properties to be sure to not inherit them somehow border: none; // box-shadow: none; // } /*************************** * Check and Radio buttons * ***************************/ @import "../common/checkradios.scss";