b9359f4f07
- improves hover style; fixes #5765 - adds missing high contrast borders - bumps colors for visibility Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2441>
334 lines
9.3 KiB
SCSS
334 lines
9.3 KiB
SCSS
// Drawing mixins
|
|
|
|
// generic drawing of more complex things
|
|
|
|
@function draw_widget_edge($c:$borders_edge) {
|
|
// outer highlight "used" on most widgets
|
|
@return 0 1px $c;
|
|
}
|
|
|
|
// provide font size in rem, with px fallback
|
|
@mixin fontsize($size: 24, $base: 16) {
|
|
font-size: round($size) + pt;
|
|
//font-size: ($size / $base) * 1rem;
|
|
}
|
|
|
|
@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
|
|
//
|
|
// Helper function to stack up to 4 box-shadows;
|
|
//
|
|
@if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
|
|
@else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
|
|
@else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
|
|
@else { box-shadow: $shadow1; }
|
|
}
|
|
|
|
// entries
|
|
|
|
@mixin entry($t, $fc:$selected_bg_color) {
|
|
//
|
|
// Entries drawing function
|
|
//
|
|
// $t: entry type
|
|
// $fc: focus color
|
|
//
|
|
// possible $t values:
|
|
// normal, focus, insensitive
|
|
//
|
|
|
|
@if $t==normal {
|
|
background-color: lighten($bg_color, 5%);
|
|
color: transparentize($fg_color,0.3);
|
|
border: 2px solid lighten($bg_color, 5%);
|
|
}
|
|
|
|
@if $t==focus {
|
|
background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
|
|
border-color: $fc;
|
|
color: $fg_color;
|
|
&:hover {}
|
|
}
|
|
|
|
@if $t==hover {
|
|
background-color:lighten($hover_bg_color, 5%);
|
|
border-color:lighten($hover_bg_color, 5%);
|
|
color: transparentize($fg_color,0.3);
|
|
}
|
|
|
|
@if $t==insensitive {
|
|
background-color:lighten($insensitive_bg_color, 5%);
|
|
border-color: lighten($insensitive_bg_color, 5%);
|
|
color: $insensitive_fg_color;
|
|
}
|
|
}
|
|
|
|
// 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, insensitive, insensitive-active,
|
|
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
|
|
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, 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,
|
|
// $c: base button colors, derived from fg_color
|
|
// $tc: base button colors, derived from fg_color
|
|
//
|
|
// 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
|
|
//
|
|
// since buttons are all flat an borderless now the mixin is simpler
|
|
|
|
@mixin button($t, $tc:$fg_color, $c:$bg_color) {
|
|
|
|
$button_bg_color: mix($tc, $c, $button_mix_factor);
|
|
transition-duration: 100ms;
|
|
|
|
// normal button
|
|
@if $t==normal {
|
|
color: $tc;
|
|
background-color: $button_bg_color;
|
|
@if $is_highcontrast == "true" {
|
|
box-shadow: inset 0 0 0 1px $button_inset_color;
|
|
}
|
|
}
|
|
|
|
// focused button
|
|
@if $t==focus {
|
|
color: $tc;
|
|
background-color: mix($button_bg_color, $selected_bg_color, 90%);
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
|
|
&:hover {
|
|
background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
|
|
}
|
|
&:active {
|
|
background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
|
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
|
|
}
|
|
}
|
|
|
|
// hover button
|
|
@else if $t==hover {
|
|
color: $tc;
|
|
background-color: lighten($button_bg_color, 3%);
|
|
|
|
@if $is_highcontrast == "true" {
|
|
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%);
|
|
background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%);
|
|
}
|
|
}
|
|
|
|
// active button
|
|
@else if $t==active {
|
|
color: $tc;
|
|
background-color: lighten($button_bg_color, 6%);
|
|
@if $is_highcontrast == "true" {
|
|
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%);
|
|
background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%);
|
|
}
|
|
}
|
|
|
|
// checked button
|
|
@else if $t==checked {
|
|
color: $tc;
|
|
background-color: lighten($button_bg_color, 9%);
|
|
@if $is_highcontrast == "true" {
|
|
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%);
|
|
background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%);
|
|
}
|
|
&:hover { background-color: lighten($button_bg_color, 12%);}
|
|
&:active { background-color: lighten($button_bg_color, 15%);}
|
|
}
|
|
|
|
// insensitive button
|
|
@else if $t==insensitive {
|
|
color: transparentize($tc, 0.5);
|
|
background-color: transparentize($tc, .95);
|
|
@if $is_highcontrast == "true" {
|
|
box-shadow: inset 0 0 0 1px transparentize($button_inset_color, 0.5);
|
|
}
|
|
}
|
|
|
|
// default/suggested button
|
|
@else if $t==default {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
box-shadow: none;
|
|
&:focus {
|
|
box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
|
|
}
|
|
&: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
|
|
@else if $t==undecorated {
|
|
background-color: transparent;
|
|
background-color: none;
|
|
box-shadow: none;
|
|
&:insensitive {
|
|
@include button(insensitive);
|
|
background-color: transparent;
|
|
color: transparentize($selected_fg_color, .5);
|
|
}
|
|
}
|
|
}
|
|
|
|
// tile
|
|
@mixin tile_button($color, $flat: true) {
|
|
@extend %tile;
|
|
@if $flat {
|
|
background-color: transparent;
|
|
} @else {
|
|
background-color: transparentize($color, .84);
|
|
}
|
|
&:hover { background-color: transparentize($color, .9);}
|
|
&:selected, &:focus {
|
|
background-color: transparentize($color, .87);
|
|
&:hover { background-color: transparentize($color, .84);}
|
|
&:active { background-color: transparentize($color, .87);}
|
|
}
|
|
&:active { background-color: transparentize($color, .84);}
|
|
&:outlined, &:checked {
|
|
background-color: transparentize($color, .81);
|
|
&:active { background-color: transparentize($color, .78);}
|
|
&:hover { background-color: transparentize($color, .75);}
|
|
}
|
|
&:drop {
|
|
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
|
|
background-color: transparentize($selected_bg_color, .8);
|
|
}
|
|
}
|
|
|
|
// overview icon, dash, app grid
|
|
@mixin overview_icon($color, $flat: true) {
|
|
transition-duration: 400ms;
|
|
.overview-icon { @extend %tile; }
|
|
@if $flat {
|
|
.overview-icon { background-color: transparent;}
|
|
} @else {
|
|
.overview-icon { background-color: transparentize($color, .81);}
|
|
}
|
|
&:hover .overview-icon { background-color: transparentize($color, .9);}
|
|
|
|
&:selected .overview-icon,
|
|
&:focus .overview-icon {
|
|
background-color: transparentize($color, .87);
|
|
&:hover .overview-icon { background-color: transparentize($color, .84);}
|
|
&:active .overview-icon { background-color: transparentize($color, .87);}
|
|
}
|
|
&:active .overview-icon { background-color: transparentize($color, .84);}
|
|
&:outlined .overview-icon,
|
|
&:checked .overview-icon {
|
|
background-color: transparentize($color, .81);
|
|
&:active .overview-icon { background-color: transparentize($color, .78);}
|
|
&:hover .overview-icon { background-color: transparentize($color, .75);}
|
|
}
|
|
&:drop .overview-icon {
|
|
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
|
|
background-color: transparentize($selected_bg_color, .8);
|
|
}
|
|
}
|
|
|
|
// styling for elements within popovers that look like notifications
|
|
@mixin card($flat: false) {
|
|
border-radius: $base_border_radius;
|
|
margin: $base_margin;
|
|
box-shadow: 0 1px 1px 0 $shadow_color;
|
|
|
|
@if $flat {
|
|
@include button(undecorated);
|
|
box-shadow: none !important;
|
|
} @else {
|
|
@include button(normal, $c:$card_bg_color);
|
|
}
|
|
|
|
&:focus {
|
|
@include button(focus, $c:$card_bg_color);
|
|
}
|
|
|
|
&:hover {
|
|
@include button(hover, $c:$card_bg_color);
|
|
}
|
|
|
|
&:active {
|
|
@include button(active, $c:$card_bg_color);
|
|
}
|
|
}
|