240 lines
7.2 KiB
SCSS
240 lines
7.2 KiB
SCSS
@function gtkalpha($c,$a) {
|
|
@return unquote("alpha(#{$c},#{$a})");
|
|
}
|
|
|
|
@function gtkmix($c1,$c2,$r) {
|
|
$ratio: 1 - $r / 100%; // match SCSS mix()
|
|
@return unquote("mix(#{$c1},#{$c2},#{$ratio})");
|
|
}
|
|
|
|
@function gtkshade($c,$s) {
|
|
@return unquote("shade(#{$c},#{$s})");
|
|
}
|
|
|
|
@function gtkcolor($c) {
|
|
@return unquote("@#{$c}");
|
|
}
|
|
|
|
// 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);
|
|
|
|
|
|
|
|
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
$asset_suffix: if($variant=='dark', '-dark', '');
|
|
$backdrop_transition: none; //200ms ease-out;
|
|
|
|
$button_transition: none; //all 20ms $ease-out-quad;
|
|
|
|
// radii
|
|
|
|
$entry_radius: 0px;
|
|
$button_radius: 3px;
|
|
$window_radius: $button_radius + 3;
|
|
$popover_radius: $button_radius + 4;
|
|
$menu_radius: 5px;
|
|
$tab_radius: 9999px;
|
|
$card_radius: $button_radius + 4; //for libadwaita
|
|
|
|
|
|
|
|
$button_min_height: 24px;
|
|
$button_min_width: 16px;
|
|
$button_padding: $_btn_pad;
|
|
$button_border_width: 1px;
|
|
$button_border: $button_border_width solid;
|
|
|
|
$text_shadow_hover: 0 0 5px currentColor;
|
|
$text_shadow_lighted: 0 0 5px currentColor;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// -------------------- Functions and mixins
|
|
|
|
|
|
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@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_highlight_color($c) {
|
|
//
|
|
// calculate the right top hilight color for buttons (the brighter, the brighter)
|
|
//
|
|
// $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;
|
|
|
|
}
|
|
|
|
|
|
@function button_shadow_color($c) {
|
|
//
|
|
// calculate the right top shadow color for buttons (the darker, the darker)
|
|
//
|
|
// $c: base color;
|
|
//
|
|
@if lightness($c)<5% { @return black; }
|
|
@else if lightness($c)<10% { @return transparentize(black, 0.15); }
|
|
@else if lightness($c)<20% { @return transparentize(black, 0.35); }
|
|
@else if lightness($c)<50% { @return transparentize(black, 0.5); }
|
|
@else if lightness($c)<60% { @return transparentize(black, 0.65); }
|
|
@else { @return transparentize(black, 0.7); }
|
|
|
|
}
|
|
|
|
$highlight_color: button_highlight_color($window_bg);
|
|
$shadow_color: button_shadow_color($window_bg);
|
|
$shadow_hard_color: opacify($shadow_color, 1);
|
|
|
|
$button_highlight_color: button_highlight_color($button_bg);
|
|
$button_shadow_color: button_shadow_color($button_bg);
|
|
|
|
|
|
|
|
@function button_curve_well_contrasted($bg:$button_bg, $direction:bottom, $intensity:1) {
|
|
$intensityCapped: max(0, min(4, $intensity)); //between 0 and 4
|
|
$bright_color: button_highlight_color($bg);
|
|
$dark_color: button_shadow_color($bg);
|
|
@return linear-gradient(
|
|
to $direction,
|
|
gtkalpha($bright_color, (0.15 * $intensityCapped) ),
|
|
gtkalpha($bright_color, 0) 50%,
|
|
gtkalpha($dark_color, 0) 50%,
|
|
gtkalpha($dark_color, (0.25 * $intensityCapped)));
|
|
}
|
|
|
|
|
|
$button_shadow_normal:
|
|
0 3px 3px -3px $button_shadow_color,
|
|
inset 0 2px 1px -1px $button_highlight_color,
|
|
inset 0 -2px 1px -1px $button_shadow_color;
|
|
$button_shadow_pressed: //note: it lacks intentionally the highlight of the pressed text color in the bottom, because it has to be taken locally.
|
|
0 3px 1px -2px gtkalpha($button_highlight_color, 0.4),
|
|
inset 0 2px 2px 1px $button_shadow_color,
|
|
inset 0 -1px 2px -1px $button_shadow_color;
|
|
$text_shadow_lighted: 0 0 3px currentColor;
|
|
$ridge_shadow:
|
|
0px -2px 2px 0 $highlight_color,
|
|
2px -1px 2px 0 gtkalpha($highlight_color, 0.5),
|
|
-2px -1px 2px 0 gtkalpha($highlight_color, 0.5),
|
|
inset 0px -1px 1px 0 $highlight_color,
|
|
inset 0px 2px 2px 1px $shadow_color,
|
|
0px 2px 2px -1px $shadow_color,
|
|
0px 3px 4px -1px $shadow_color;
|
|
|
|
$_wm_border: $selected_bg_color; //if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
|
|
$_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize(black, 0.25));
|
|
|
|
$window_bs:
|
|
0 5px 9px 1px transparentize(black, 0.3),
|
|
0 0 5px 1px $_wm_border,
|
|
0 3px 6px 2px transparentize(black, 1);
|
|
|
|
|
|
$window_backdrop_bs:
|
|
0 5px 9px 1px transparentize(black, 0.5),
|
|
0 3px 6px 2px transparentize(black, 0.3);
|
|
|
|
|
|
|
|
@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!)
|
|
//
|
|
$bevel_width: 7%;
|
|
$gradient: linear-gradient(to top, darken($c, 30%), darken($c, 2%) $bevel_width, lighten($c, 1%) (100% - $bevel_width), lighten($c, 30%) 100%);
|
|
|
|
//@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; }
|
|
|
|
}
|
|
|
|
|
|
|
|
// -------------------- General common elements
|
|
|
|
%selected_items {
|
|
background-color: $selected_bg_color;
|
|
|
|
//box-shadow: 0 0 5px 0 $selected_bg_color; it would be great, but it causes too many visual artifacts
|
|
|
|
@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%); }
|
|
}
|
|
}
|
|
}
|