145 lines
4.7 KiB
SCSS
145 lines
4.7 KiB
SCSS
@function gtkalpha($c,$a) {
|
|
@return unquote("alpha(#{$c},#{$a})");
|
|
}
|
|
|
|
// Optional compact sizes for buttons, headerbar and headerbar widgets
|
|
$_sizevariant: 'compact'; //either 'default', or compact otherwise
|
|
$_headerbar_height: if($_sizevariant=='default', 46px, 40px);
|
|
$_entry_height: if($_sizevariant=='default', 32px, 28px);
|
|
$_btn_pad: if($_sizevariant=='default', 4px 9px, 2px 6px);
|
|
$_hb_btn_pad: if($_sizevariant=='default', 6px, 5px);
|
|
$_img_btn_pad: if($_sizevariant=='default', 5px, 2px);
|
|
$_sel_menu_pad: if($_sizevariant=='default', 6px 10px, 4px 10px);
|
|
$_circ_btn_pad: if($_sizevariant=='default', 4px, 2px);
|
|
$_switch_margin: if($_sizevariant=='default', 10px, 7px);
|
|
|
|
$entry_radius: 0px;
|
|
|
|
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
$asset_suffix: if($variant=='dark', '-dark', '');
|
|
$backdrop_transition: 200ms ease-out;
|
|
|
|
$button_transition: all 500ms $ease-out-quad;
|
|
$button_radius: 3px;
|
|
$window_radius: $button_radius + 3;
|
|
$popover_radius: $button_radius + 4;
|
|
|
|
$tab_radius: $button_radius;
|
|
|
|
//added by me:
|
|
$button_min_height: 24px;
|
|
$button_min_width: 16px;
|
|
$button_padding: $_btn_pad;
|
|
$button_border_width: 1px;
|
|
$button_border: $button_border_width solid;
|
|
|
|
@function image_gloss_well_contrasted($bg, $direction:bottom) {
|
|
@return image_gloss( if( lightness($bg) > 30%, 'light', 'dark'), $direction );
|
|
}
|
|
|
|
@function image_gloss($var:$variant, $direction:bottom) {
|
|
@return linear-gradient(
|
|
to $direction,
|
|
transparentize(white, if($var == 'light', 0.1 ,0.7 )),
|
|
transparentize(white, if($var == 'light', 0.5 ,0.7 )) 50%,
|
|
transparentize(white, 1) 50%,
|
|
transparentize(white, if($var == 'light',0.7,0.85)) );
|
|
}
|
|
|
|
@function shadow($t:normal, $c:transparentize($shadow_hard_color, if($variant == 'light', 0.6, 0.3))) {
|
|
@if $t==active or $t==transparent {
|
|
@return 0 0 0 0 transparent;
|
|
} @else if $t==glow {
|
|
@return 0 0 3px 2px $c;
|
|
} @else if $t==glow-small {
|
|
@return 0 0 1px 1px $c;
|
|
} @else if $t==disabled or $t==insensitive {
|
|
@return 0px 1px 3px -1px $c;
|
|
} @else {
|
|
@return 0px 1px 3px 0 $c;
|
|
}
|
|
}
|
|
|
|
$menu_radius: 5px;
|
|
|
|
|
|
%selected_items {
|
|
background-color: $selected_bg_color;
|
|
|
|
@at-root %nobg_selected_items, & {
|
|
color: $selected_fg_color;
|
|
//background-color: $selected_bg_color;
|
|
@at-root %selected_items_disabled,
|
|
&:disabled { color: $insensitive_fg_color;} //mix($selected_fg_color, $selected_bg_color, 50%); }
|
|
|
|
@at-root %selected_items_backdrop,
|
|
&:backdrop {
|
|
// color: $backdrop_selected_fg_color;
|
|
// background-color: $backdrop_selected_bg_color;
|
|
|
|
// &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
|
}
|
|
}
|
|
}
|
|
|
|
@function _border_color($c, $darker: false) {
|
|
@if $darker == true { @return darken($c, 20%); }
|
|
@else { @return darken($c, 10%); }
|
|
}
|
|
|
|
@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); }
|
|
}
|
|
|
|
@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.15); }
|
|
@else if lightness($c)>80% { @return transparentize(white, 0.35); }
|
|
@else if lightness($c)>50% { @return transparentize(white, 0.5); }
|
|
@else if lightness($c)>40% { @return transparentize(white, 0.65); }
|
|
@else { @return transparentize(white, 0.7); }
|
|
//@return $top_hilight;
|
|
}
|
|
|
|
//these are copied from button, surely there is a better way to DRY
|
|
$hilight_color: _button_hilight_color($dark_fill);
|
|
$button_shadow_normal: inset 0 -1px 1px transparentize($shadow_hard_color, 0.6);
|
|
$button_shadow_pressed: inset 0 1px 2px transparentize($shadow_hard_color, 0.6);
|
|
|
|
@mixin draggable_bg_image($bg) {
|
|
//returns the image and its positioning, selecting between a white or black one, according to $bg (background color)
|
|
$icon_source: if(lightness($bg) > 50%, 'assets/draggable-black.svg', 'assets/draggable-white.svg');
|
|
background-image: url($icon_source);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.7rem;
|
|
}
|
|
|
|
@mixin headerbar_fill($c:$headerbar_bg_color, $ov: none) {
|
|
//
|
|
// headerbar fill
|
|
//
|
|
// $c: base color
|
|
// $ov: a background layer for background shorthand (hence no commas!)
|
|
//
|
|
$gradient: image($c); //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; }
|
|
|
|
} |