forked from AuroraMiddleware/gtk
9fe6bc0792
- HC got caught up on a condition made for color (suggested) buttons. the rule just made the slider a tag lighter on dark probably due to the overlaid AA making it stronger. Got rid of it for now, if someone cares enough we can reintroduce an exception (that doesn't break HC).
574 lines
17 KiB
SCSS
574 lines
17 KiB
SCSS
// Drawing mixins
|
|
|
|
// generic drawing of more complex things
|
|
|
|
@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:$focus_border_color) {
|
|
@return $fc;
|
|
}
|
|
|
|
@function entry_focus_shadow($fc:$focus_border_color) { @return inset 0 0 0 1px $fc; }
|
|
|
|
@mixin entry($t, $fc:$focus_border_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, block_cursor;
|
|
//
|
|
|
|
$_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1));
|
|
$_entry_edge: if($edge == none, none, _widget_edge($edge));
|
|
|
|
@if $t==normal {
|
|
color: $text_color;
|
|
border-color: $borders_color;
|
|
background-color: $base_color;
|
|
@include _shadows(entry_focus_shadow(transparentize($fc, 1)), $_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), $_entry_edge);
|
|
border-color: entry_focus_border($fc);
|
|
outline: none;
|
|
}
|
|
@if $t==insensitive {
|
|
color: $insensitive_fg_color;
|
|
border-color: $borders_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;
|
|
box-shadow: none;
|
|
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;
|
|
box-shadow: entry_focus_shadow($fc);
|
|
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;
|
|
}
|
|
@if $t==block_cursor {
|
|
color: $base_color;
|
|
background-color: $text_color;
|
|
}
|
|
}
|
|
|
|
// buttons
|
|
|
|
@function _border_color($c, $darker: false) {
|
|
@if $darker == true { @return darken($c, 20%); }
|
|
@else { @return darken($c, 10%); }
|
|
}
|
|
|
|
|
|
@function _button_hilight_color($c) {
|
|
//
|
|
// calculate the right top hilight color for buttons
|
|
//
|
|
// $c: base color;
|
|
//
|
|
@if lightness($c)>95% { @return white; }
|
|
@else if lightness($c)>90% { @return transparentize(white, 0.2); }
|
|
@else if lightness($c)>80% { @return transparentize(white, 0.5); }
|
|
@else if lightness($c)>50% { @return transparentize(white, 0.8); }
|
|
@else if lightness($c)>40% { @return transparentize(white, 0.9); }
|
|
@else { @return transparentize(white, 0.98); }
|
|
}
|
|
|
|
|
|
|
|
@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: none) {
|
|
//
|
|
// Button drawing function
|
|
//
|
|
// $t: button type,
|
|
// $c: base button color for colored* types
|
|
// $tc: optional text color for colored* types
|
|
// $edge: set to none to not draw the bottom edge or specify a color to not
|
|
// use the default one
|
|
//
|
|
// possible $t values:
|
|
// normal, hover, active, insensitive, insensitive-active,
|
|
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
|
|
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
|
|
//
|
|
// This mixin sets the $button_fill global variable which containts the button background-image
|
|
//
|
|
$_hilight_color: _button_hilight_color($c);
|
|
$_button_edge: if($edge == none, none, _widget_edge($edge));
|
|
$_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
|
|
$_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
|
|
|
|
@if $t==normal {
|
|
//
|
|
// normal button
|
|
//
|
|
color: $tc;
|
|
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);
|
|
$button_fill: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
|
|
linear-gradient(to top, darken($c,1%) 2px, $c)) !global;
|
|
background-image: $button_fill;
|
|
@include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow);
|
|
}
|
|
|
|
@else if $t==hover {
|
|
//
|
|
// hovered button
|
|
//
|
|
color: $tc;
|
|
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);
|
|
@if $variant == 'light' {
|
|
$button_fill: linear-gradient(to top, $c, lighten($c, 1%) 1px) !global;
|
|
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge, $_button_shadow);
|
|
}
|
|
@else {
|
|
$button_fill: linear-gradient(to top, darken($c,1%), lighten($c, 1%) 1px) !global;
|
|
@include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge, $_button_shadow);
|
|
}
|
|
background-image: $button_fill;
|
|
}
|
|
|
|
@if $t==normal-alt {
|
|
//
|
|
// normal button alternative look
|
|
//
|
|
color: $tc;
|
|
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color); //colored buttons
|
|
@if $variant == 'light' {
|
|
background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
|
|
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
|
|
$_button_edge, $_button_shadow);
|
|
}
|
|
@else {
|
|
background-image: linear-gradient(to bottom, darken($c, 3%) 20%, darken($c, 6%) 90%);
|
|
@include _shadows(inset 0 1px $_hilight_color,
|
|
$_button_edge, $_button_shadow);
|
|
}
|
|
}
|
|
|
|
@else if $t==hover-alt {
|
|
//
|
|
// hovered button alternative look
|
|
//
|
|
color: $tc;
|
|
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
|
@if $variant == 'light' {
|
|
$button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
|
|
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
|
|
$_button_edge, $_button_shadow);
|
|
}
|
|
@else {
|
|
$button_fill: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%) !global;
|
|
@include _shadows(inset 0 1px $_hilight_color,
|
|
$_button_edge, $_button_shadow);
|
|
}
|
|
background-image: $button_fill;
|
|
}
|
|
|
|
@else if $t==active {
|
|
//
|
|
// pushed button
|
|
//
|
|
color: $tc;
|
|
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
|
$button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global;
|
|
background-image: $button_fill;
|
|
@include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge);
|
|
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
@else if $t==insensitive {
|
|
//
|
|
// insensitive button
|
|
//
|
|
$_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
|
|
|
|
color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color);
|
|
border-color: if($c != $bg_color, _border_color($c), $insensitive_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
// white with 0 alpha to avoid an ugly transition, since no color means
|
|
// black with 0 alpha
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
|
|
}
|
|
|
|
@else if $t==insensitive-active {
|
|
//
|
|
// insensitive pushed button
|
|
//
|
|
$_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 6%));
|
|
$_bc: if($c != $bg_color, _border_color($c), $insensitive_borders_color);
|
|
|
|
color: if($c != $bg_color, mix($tc, $_bg, 60%), $insensitive_fg_color);
|
|
border-color: $_bc;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
// white with 0 alpha to avoid an ugly transition, since no color means
|
|
// black with 0 alpha
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
|
|
}
|
|
|
|
@else if $t==backdrop {
|
|
//
|
|
// backdrop button
|
|
//
|
|
$_bg: if($c != $bg_color, $c, $backdrop_bg_color);
|
|
$_bc: if($variant == 'light', $c, _border_color($c));
|
|
|
|
color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
|
|
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
}
|
|
|
|
@else if $t==backdrop-active {
|
|
//
|
|
// backdrop pushed button
|
|
//
|
|
$_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
|
|
$_bc: if($variant == 'light', $_bg ,_border_color($c));
|
|
|
|
color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
|
|
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
}
|
|
|
|
@else if $t==backdrop-insensitive {
|
|
//
|
|
// backdrop insensitive button
|
|
//
|
|
|
|
$_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
|
|
$_bc: if($variant == 'light', $_bg,_border_color($c));
|
|
|
|
color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
|
|
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
// white with 0 alpha to avoid an ugly transition, since no color means
|
|
// black with 0 alpha
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
}
|
|
|
|
@else if $t==backdrop-insensitive-active {
|
|
//
|
|
// backdrop insensitive pushed button
|
|
//
|
|
|
|
$_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
|
|
$_bc: if($variant == 'light', $_bg, _border_color($c));
|
|
|
|
color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
|
|
border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
}
|
|
|
|
@else if $t==osd {
|
|
//
|
|
// normal osd button
|
|
//
|
|
$_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
|
|
|
|
color: $osd_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: inset 0 1px transparentize(white, 0.9);
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
@else if $t==osd-hover {
|
|
//
|
|
// active osd button
|
|
//
|
|
$_bg: if($c != $bg_color, transparentize($c, 0.3), lighten($osd_bg_color, 12%));
|
|
|
|
color: white;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: inset 0 1px transparentize(white, 0.9);
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
@else if $t==osd-active {
|
|
//
|
|
// active osd button
|
|
//
|
|
$_bg: if($c != $bg_color, $c, $osd_borders_color);
|
|
|
|
color: white;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
@else if $t==osd-insensitive {
|
|
//
|
|
// insensitive osd button
|
|
//
|
|
color: $osd_insensitive_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($osd_insensitive_bg_color) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
@else if $t==osd-backdrop {
|
|
//
|
|
// backdrop osd button
|
|
//
|
|
$_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
|
|
|
|
color: $osd_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-color: transparent;
|
|
$button_fill: image($_bg) !global;
|
|
background-image: $button_fill;
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
@else if $t==undecorated {
|
|
//
|
|
// reset
|
|
//
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
$button_fill: none !global;
|
|
background-image: $button_fill;
|
|
|
|
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
|
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
}
|
|
|
|
@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: 3%;
|
|
$_big_gradient_length: 50%;
|
|
|
|
$_small_gradient_size: 100% $_small_gradient_length;
|
|
$_big_gradient_size: 100% $_big_gradient_length;
|
|
|
|
@if $p==right or $p==left {
|
|
$_small_gradient_size: $_small_gradient_length 100%;
|
|
$_big_gradient_size: $_big_gradient_length 100%;
|
|
}
|
|
|
|
$_small_gradient_color: $c;
|
|
$_big_gradient_color: transparentize($c, 0.93);
|
|
|
|
@if $c==$fg_color {
|
|
$_small_gradient_color: darken($borders_color, 10%);
|
|
$_big_gradient_color: transparentize($fg_color, 0.93);
|
|
|
|
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
|
|
}
|
|
|
|
$_small_gradient: radial-gradient(farthest-side at $p,
|
|
$_small_gradient_color 85%,
|
|
transparentize($_small_gradient_color, 1));
|
|
|
|
$_big_gradient: radial-gradient(farthest-side at $p,
|
|
$_big_gradient_color,
|
|
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: $p;
|
|
|
|
background-color: transparent; // reset some properties to be sure to not inherit them somehow
|
|
border: none; //
|
|
box-shadow: none; //
|
|
}
|
|
|
|
/***************************
|
|
* Check and Radio buttons *
|
|
***************************/
|
|
|
|
@mixin check($t, $c:$bg_color, $tc:$fg_color, $checked: false) {
|
|
// Check/Radio drawing function
|
|
//
|
|
// $t: check/radio type,
|
|
// $c: base button color for colored* types
|
|
// $tc: optional text color for colored* types
|
|
// $checked: bool to chose between checked/unchecked
|
|
//
|
|
// possible $t values:
|
|
// normal, hover, active, insensitive, backdrop, backdrop-insensitive
|
|
|
|
$_border_color: if($c==$checkradio_bg_color, $c, $alt_borders_color);
|
|
$_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7));
|
|
|
|
@if $t==normal {
|
|
background-clip: if($checked, border-box, padding-box);
|
|
background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
|
|
border-color: $_border_color;
|
|
box-shadow: 0 1px transparentize(black, 0.95);
|
|
color: $tc;
|
|
}
|
|
|
|
@if $t==hover {
|
|
background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%));
|
|
}
|
|
|
|
@if $t==active {
|
|
box-shadow: inset 0 1px if($variant == 'light', rgba(0, 0, 0, 0.2), black);
|
|
background-image: if($c == white, image(darken($c, 15%)), image(darken($c, 5%)));
|
|
}
|
|
|
|
@if $t==insensitive {
|
|
box-shadow: none;
|
|
color: transparentize($tc, 0.3);
|
|
}
|
|
|
|
@if $t==backdrop {
|
|
background-image: image($c);
|
|
box-shadow: none;
|
|
color: $tc;
|
|
}
|
|
|
|
@if $t==backdrop-insensitive {
|
|
box-shadow: none;
|
|
color: transparentize($tc, 0.3);
|
|
}
|
|
}
|