075df42d01
- drop extraneous calendar-day style_class on week headings - fix wrong variable in insensitive button mixin - add some missing focus styles to calendar month header - fix the asset for today with-events in light theme - adjust HighContrast visuals for other month days - make pager buttons circular Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3102>
517 lines
13 KiB
SCSS
517 lines
13 KiB
SCSS
// Drawing mixins
|
|
|
|
// Function to convert px values to em
|
|
@function to_em($input, $base: 16px) {
|
|
// multiplied and divided by 1000 to make up for round() shortcoming
|
|
$em_value: ($input / $base) * 1.091 * 1000;
|
|
@return round($em_value) / 1000 * 1em;
|
|
}
|
|
|
|
// Boost the contrast of a color by mixing it with high contrast defined colors
|
|
@function hc_color_mix($c, $mc:$hc_mix_color, $mf:$hc_mix_factor) {
|
|
//
|
|
// $c: input color
|
|
// $mc: mix color, defined in High Contrast specific stylesheet
|
|
// $mf: mix factor (%), defined in High Contrast specific stylesheet
|
|
//
|
|
@return mix($c, $mc, $mf);
|
|
}
|
|
|
|
// Mixin to convert provided font size in pt to em units
|
|
@mixin fontsize($size, $base: 16px, $unit: pt) {
|
|
// if pt, convert into unitless value with the assumption: 1pt = 1.091px
|
|
$adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
|
|
$rounded_size: round($adjusted_size / $base) / 1000;
|
|
font-size: $rounded_size * 1em;
|
|
// font-size: round($size) + pt;
|
|
}
|
|
|
|
// Text entries
|
|
@mixin entry($t, $c, $fc:$selected_bg_color) {
|
|
//
|
|
// Entries drawing function
|
|
//
|
|
// $t: entry type
|
|
// $c: text color, used to derive background color of entries
|
|
//
|
|
// possible $t values: normal, focus, insensitive
|
|
//
|
|
transition-duration: 100ms;
|
|
|
|
@if $t==normal {
|
|
background-color: transparentize($c, 0.85);
|
|
color: transparentize($c,0.3);
|
|
|
|
@if $contrast == 'high' {
|
|
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
|
}
|
|
}
|
|
|
|
@if $t==focus {
|
|
background-color: mix(transparentize($c, 0.75), $fc, 95%);
|
|
box-shadow: inset 0 0 0 2px transparentize($fc, 0.3);
|
|
color: $c;
|
|
&:hover {}
|
|
}
|
|
|
|
@if $t==hover {
|
|
background-color: transparentize($c, 0.75);
|
|
}
|
|
|
|
@if $t==insensitive {
|
|
background-color:transparentize($c, 0.75);
|
|
color: transparentize($c, 0.5);
|
|
}
|
|
}
|
|
|
|
// On-screen Keyboard
|
|
@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) {
|
|
//
|
|
// Keyboard key drawing function
|
|
//
|
|
// $t: key type,
|
|
// $c: base key color for colored* types
|
|
// $tc: optional text color for colored* types
|
|
//
|
|
// possible $t values:
|
|
// normal, hover, active, checked, insensitive, undecorated
|
|
//
|
|
|
|
// normal key
|
|
@if $t==normal {
|
|
color: $tc;
|
|
background-color: lighten($c, 3%);
|
|
}
|
|
|
|
// focused key
|
|
@if $t==focus {
|
|
color: $tc;
|
|
background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
|
|
&:hover {
|
|
background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
|
|
}
|
|
&:active {
|
|
background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
|
|
}
|
|
}
|
|
|
|
// hover key
|
|
@else if $t==hover {
|
|
color: $tc;
|
|
background-color: lighten($c, 7%);
|
|
}
|
|
|
|
// active key
|
|
@else if $t==active {
|
|
color: $tc;
|
|
background-color: lighten($c, 10%);
|
|
}
|
|
|
|
// checked key
|
|
@else if $t==checked {
|
|
color: $tc;
|
|
background-color: lighten($c, 15%);
|
|
}
|
|
|
|
// insensitive key
|
|
@else if $t==insensitive {
|
|
color: $insensitive_fg_color;
|
|
background-color: $insensitive_bg_color;
|
|
}
|
|
|
|
// reset
|
|
@else if $t==undecorated {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Button drawing function
|
|
//
|
|
// $t: button type
|
|
//
|
|
// possible $t values:
|
|
// normal, focus, hover, active, checked, insensitive, default, undecorated,
|
|
//
|
|
// $c: button bg color, derived from bg_color
|
|
// $tc: button text color, derived from fg_color
|
|
//
|
|
// $flat: button has no styling
|
|
// $osd: button uses OSD styling
|
|
// $card: button uses card styling
|
|
//
|
|
|
|
@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false, $card: false){
|
|
|
|
// background color
|
|
$button_bg_color: mix($tc, $c, $button_mix_factor);
|
|
|
|
// background color override for OSD elements
|
|
@if $osd {
|
|
$button_bg_color: transparentize($tc, 0.9);
|
|
}
|
|
|
|
// background color override for card elements
|
|
@if $card {
|
|
$button_bg_color: $card_bg_color;
|
|
|
|
@if $contrast == 'high' {
|
|
$button_bg_color: hc_color_mix($card_bg_color);
|
|
}
|
|
}
|
|
|
|
// normal button
|
|
@if $t==normal {
|
|
color: $tc;
|
|
background-color: $button_bg_color;
|
|
@if $flat {
|
|
background-color: transparent;
|
|
}
|
|
@if $contrast == 'high' {
|
|
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
|
}
|
|
}
|
|
|
|
// focused button
|
|
@if $t==focus {
|
|
$focus_bg_color: mix($button_bg_color, $selected_bg_color, 90%);
|
|
color: $tc;
|
|
background-color: $focus_bg_color;
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
|
|
|
|
&:hover {
|
|
background-color: if($variant == 'light', darken($focus_bg_color, 3%), lighten($focus_bg_color, 3%));
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
|
|
}
|
|
&:active {
|
|
background-color: if($variant == 'light', darken($focus_bg_color, 6%), lighten($focus_bg_color, 6%));
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
|
|
}
|
|
|
|
// card style
|
|
@if $card {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
// hover button
|
|
@else if $t==hover {
|
|
$hover_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%));
|
|
color: $tc;
|
|
background-color: $hover_bg_color;
|
|
|
|
@if $contrast == 'high' {
|
|
background-color: hc_color_mix($hover_bg_color);
|
|
}
|
|
|
|
// card style
|
|
@if $card {
|
|
$card_hover_bg_color: mix($tc, $card_bg_color, 4%);
|
|
background-color: $card_hover_bg_color;
|
|
|
|
@if $contrast == 'high' {
|
|
background-color: hc_color_mix($card_hover_bg_color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// active button
|
|
@else if $t==active {
|
|
$active_bg_color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
|
|
color: $tc;
|
|
background-color: $active_bg_color;
|
|
|
|
@if $contrast == 'high' {
|
|
background-color: hc_color_mix($active_bg_color);
|
|
}
|
|
|
|
// card style
|
|
@if $card {
|
|
$card_active_bg_color: mix($tc, $card_bg_color, 7%);
|
|
background-color: $card_active_bg_color;
|
|
|
|
@if $contrast == 'high' {
|
|
background-color: hc_color_mix($card_active_bg_color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// checked button
|
|
@else if $t==checked {
|
|
$checked_bg_color:if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
|
|
color: $tc;
|
|
background-color: $checked_bg_color;
|
|
|
|
&:hover { background-color: lighten($checked_bg_color, 12%);}
|
|
&:active { background-color: lighten($checked_bg_color, 15%);}
|
|
|
|
@if $contrast == 'high' {
|
|
background-color: hc_color_mix($checked_bg_color);
|
|
&:hover { background-color: hc_color_mix(lighten($checked_bg_color, 12%));}
|
|
&:active { background-color: hc_color_mix(lighten($checked_bg_color, 15%));}
|
|
}
|
|
}
|
|
|
|
// insensitive button
|
|
@else if $t==insensitive {
|
|
color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
|
|
background-color: if($variant == 'light', transparentize($button_bg_color, .9), transparentize($button_bg_color, .95));
|
|
|
|
@if $contrast == 'high' {
|
|
// no border since it isn't sensitive
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
// default/suggested button
|
|
@else if $t==default {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
|
|
&:focus {
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important;
|
|
}
|
|
&:hover, &:focus {
|
|
background-color: lighten($selected_bg_color, 5%);
|
|
color: lighten($selected_fg_color, 5%);
|
|
}
|
|
&:active {
|
|
background-color: darken($selected_bg_color, 7%);
|
|
color: darken($selected_fg_color, 7%);
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive);
|
|
background-color: transparentize($selected_bg_color, .5);
|
|
color: transparentize($selected_fg_color, .5);
|
|
}
|
|
}
|
|
|
|
// reset (unstyled button)
|
|
@else if $t==undecorated {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
|
|
&:insensitive {
|
|
@include button(insensitive);
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Helper mixin for button-like elements with an icon
|
|
@mixin tile_button($color, $flat: true) {
|
|
@extend %tile;
|
|
color: $color;
|
|
|
|
// focus-color
|
|
$fc: mix($selected_bg_color, $color, 90%);
|
|
|
|
@if $flat {
|
|
background-color: transparent;
|
|
&:hover { background-color: transparentize($color, .88);}
|
|
&:highlighted, &:focus {
|
|
background-color: transparentize($fc, .84);
|
|
&:hover {
|
|
background-color: transparentize($fc, .68);
|
|
}
|
|
}
|
|
} @else {
|
|
background-color: transparentize($color, .84);
|
|
&:hover { background-color: transparentize($color, .72);}
|
|
&:highlighted, &:focus {
|
|
background-color: transparentize(mix($fc, $color, 20%), .84);
|
|
&:hover {
|
|
background-color: transparentize(mix($fc, $color, 20%), .68);
|
|
}
|
|
}
|
|
}
|
|
|
|
// bit of a hack to have nice high contrast
|
|
@if $contrast == 'high' {
|
|
@if $flat {
|
|
&:hover {
|
|
box-shadow: inset 999px 0 0 0 transparentize($color, .92);
|
|
}
|
|
&:highlighted, &:focus {
|
|
box-shadow: inset 999px 0 0 0 transparentize($fc, .8);
|
|
}
|
|
} @else {
|
|
box-shadow: inset 999px 0 0 0 transparentize($color, .92);
|
|
border-color: transparentize($color, .44);
|
|
&:highlighted, &:focus {
|
|
box-shadow: inset 999px 0 0 0 transparentize($fc, .8);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:highlighted, &:focus {
|
|
border-color: transparentize($fc, .3);
|
|
}
|
|
|
|
&:active {
|
|
background-color: transparentize($color, .76);
|
|
&:focus {
|
|
background-color: transparentize($fc, .68);
|
|
}
|
|
}
|
|
|
|
&:selected,
|
|
&:checked {
|
|
background-color: transparentize($color, .81);
|
|
&:active { background-color: transparentize($color, .78);}
|
|
&:hover { background-color: transparentize($color, .75);}
|
|
}
|
|
|
|
&:drop {
|
|
border-color: transparentize($selected_bg_color, .2);
|
|
background-color: transparentize($selected_bg_color, .8);
|
|
}
|
|
}
|
|
|
|
// styling for elements within popovers that look like notifications
|
|
@mixin card($flat: false) {
|
|
@extend %card;
|
|
|
|
@if $flat {
|
|
@include button(undecorated, $card: false);
|
|
&:hover {@include button(hover, $card: false);}
|
|
&:active {@include button(active, $card: false);}
|
|
} @else {
|
|
@include button(normal, $card: true);
|
|
&:hover {@include button(hover, $card: true);}
|
|
&:active {@include button(active, $card: true);}
|
|
}
|
|
&:focus {@include button(focus, $card: true);}
|
|
&:insensitive {
|
|
@include button(insensitive, $card: true);
|
|
}
|
|
}
|
|
|
|
// styling for all menuitems in popovers
|
|
@mixin menuitem($bg, $flat: true) {
|
|
|
|
// lighten the background color always
|
|
$bg: lighten($bg,5%);
|
|
|
|
font-weight: normal;
|
|
spacing: $base_padding;
|
|
transition-duration: 100ms;
|
|
padding: $base_padding * 1.5 $base_padding * 2;
|
|
|
|
@if $flat {
|
|
@include button(undecorated);
|
|
} @else {
|
|
@include button(normal, $c:$bg);
|
|
}
|
|
&:focus,
|
|
&:hover {
|
|
@include button(hover, $c:$bg);
|
|
}
|
|
&:active {@include button(active, $c:$bg);}
|
|
&:checked {@include button(checked, $c:$bg);}
|
|
}
|
|
|
|
//
|
|
// Panel menu/button drawing function
|
|
//
|
|
// $bg: background color, derived from $panel_fg_color
|
|
// $fg: foreground color, also derived from $panel_fg_color
|
|
//
|
|
// $flat: if true, the button is filled instead of transparent
|
|
// $highlighted_child: if true, applies some special overrides for to a
|
|
// child element, see _panel.scss for details
|
|
// $child_class: class name of the child element
|
|
//
|
|
|
|
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
|
|
|
|
transition-duration: 150ms;
|
|
margin: 3px;
|
|
border: 1px solid transparent;
|
|
border-radius: $forced_circular_radius;
|
|
|
|
font-weight: bold;
|
|
background-color: transparent;
|
|
color: $fg;
|
|
|
|
@if $flat {
|
|
box-shadow: none;
|
|
|
|
&:active, &:focus, &:checked {
|
|
background-color: transparentize($fg, 0.75);
|
|
&:hover {
|
|
background-color: transparentize($fg, 0.65);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: transparentize($fg, 0.8);
|
|
}
|
|
|
|
} @else {
|
|
background-color: transparentize($bg, 0.2);
|
|
|
|
@if $contrast == 'high' {
|
|
border-color: $hc_inset_color;
|
|
}
|
|
|
|
&:active, &:focus, &:checked {
|
|
background-color: $bg;
|
|
&:hover {
|
|
background-color: transparentize($bg, 0.05);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: transparentize($bg, 0.1);
|
|
}
|
|
}
|
|
|
|
@if $contrast == 'high' {
|
|
&:hover, &:active, &:focus, &:checked {
|
|
border-color: $hc_inset_color;
|
|
}
|
|
}
|
|
|
|
// some overrides to style a child element
|
|
@if $highlighted_child {
|
|
background: none !important;
|
|
border: none !important;
|
|
|
|
#{$child_class} {
|
|
transition-duration: 150ms;
|
|
border-radius: $forced_circular_radius;
|
|
|
|
// use box-shadow instead of border
|
|
@if $contrast == 'high' {
|
|
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
|
}
|
|
}
|
|
|
|
&:active, &:focus {
|
|
background: none;
|
|
box-shadow: none !important;
|
|
|
|
#{$child_class} {
|
|
background-color: transparentize($fg, 0.75);
|
|
|
|
&:hover {
|
|
background-color: transparentize($fg, 0.65) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: none !important;
|
|
#{$child_class} {
|
|
background-color: transparentize($fg, 0.8);
|
|
}
|
|
}
|
|
}
|
|
}
|