style: Refactor the button and entry drawing css
- use a single button mixin for all buttons with a saner 'style' parameter - rework the entry mixins to be similar to the buttons' - clear out all unused or deprecated mixins - create some drawing functions for focus ring and high contrast inset - replace instances of old mixins with the new Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3109>
This commit is contained in:
Sam Hewitt
Marge Bot
parent
76abf806e4
commit
a917644fad
@ -38,9 +38,6 @@ $card_shadow_border_color: if($variant == 'light', transparentize($dark_5, .91),
|
||||
$borders_color: transparentize($fg_color, $border_opacity);
|
||||
$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
|
||||
|
||||
// buttons in notifications
|
||||
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
|
||||
|
||||
// osd colors
|
||||
$osd_borders_color: transparentize($osd_fg_color, 0.9);
|
||||
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
|
||||
@ -67,3 +64,6 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color,
|
||||
// active state
|
||||
$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
|
||||
$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
|
||||
|
||||
// selection colors
|
||||
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
|
||||
@ -25,7 +25,7 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
||||
|
||||
/* Global Values */
|
||||
|
||||
// Base values of elemetns of the shell in their smallest "unit".
|
||||
// Base values of elements of the shell in their smallest "unit".
|
||||
// These are used in calculations elsewhere to have elements in proportion
|
||||
$base_font_size: 11pt; // font size
|
||||
$base_padding: 6px; // internal padding of elements
|
||||
@ -58,6 +58,8 @@ $scalable_icon_size: to_em(16px);
|
||||
$medium_scalable_icon_size: $scalable_icon_size * 1.5;
|
||||
$large_scalable_icon_size: $scalable_icon_size * 2;
|
||||
|
||||
// animation definition
|
||||
$ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
|
||||
// Stage
|
||||
stage {
|
||||
@ -72,26 +74,17 @@ stage {
|
||||
border-radius: $base_border_radius * 2;
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color:transparent;
|
||||
transition-duration: 200ms;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
// common button styling
|
||||
%button_common {
|
||||
border-radius: $base_border_radius;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
font-weight: bold;
|
||||
padding: $base_padding * .5 $base_padding * 4;
|
||||
transition-duration: 100ms;
|
||||
font-weight: bold;
|
||||
transition: border-width 300ms $ease_out_quad,
|
||||
box-shadow 300ms $ease_out_quad;
|
||||
}
|
||||
|
||||
%button {
|
||||
@ -103,22 +96,36 @@ stage {
|
||||
&:selected,
|
||||
&:active { @include button(active);}
|
||||
&:checked { @include button(checked);}
|
||||
&.default { @include button(default);}
|
||||
}
|
||||
|
||||
&.flat {
|
||||
@include button(normal, $flat:true);
|
||||
&:focus { @include button(focus, $flat:true);}
|
||||
&:hover { @include button(hover, $flat:true);}
|
||||
&:insensitive { @include button(insensitive, $flat:true);}
|
||||
&:selected,
|
||||
&:active { @include button(active, $flat:true);}
|
||||
&:checked { @include button(checked, $flat:true);}
|
||||
&.default { @include button(default, $flat:false);}
|
||||
}
|
||||
%flat_button {
|
||||
@include button(normal, $style: flat);
|
||||
&:focus { @include button(focus, $style: flat);}
|
||||
&:hover { @include button(hover, $style: flat);}
|
||||
&:insensitive { @include button(insensitive, $style: flat);}
|
||||
&:selected,
|
||||
&:active { @include button(active, $style: flat);}
|
||||
&:checked { @include button(checked, $style: flat);}
|
||||
}
|
||||
|
||||
%default_button {
|
||||
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
|
||||
&:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
&:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
}
|
||||
|
||||
// items in popover menus
|
||||
%menuitem {
|
||||
font-weight: normal;
|
||||
spacing: $base_padding;
|
||||
transition-duration: 100ms;
|
||||
padding: $base_padding * 1.5 $base_padding * 2;
|
||||
}
|
||||
|
||||
// common style for card elements
|
||||
%card {
|
||||
%card_common {
|
||||
border-radius: $base_border_radius * 1.5;
|
||||
padding: $scaled_padding * 2;
|
||||
margin: $base_margin;
|
||||
@ -126,6 +133,29 @@ stage {
|
||||
box-shadow: 0 1px 2px 0 $card_shadow_color;
|
||||
// bit of a hack here with border since we can't have double box-shadow
|
||||
border: 1px solid $card_shadow_border_color;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
%card {
|
||||
@extend %card_common;
|
||||
@include button(normal, $style: card);
|
||||
&:hover { @include button(hover, $style: card);}
|
||||
&:active { @include button(active, $style: card);}
|
||||
&:focus { @include button(focus, $style: card);}
|
||||
&:insensitive { @include button(insensitive, $style: card);}
|
||||
}
|
||||
|
||||
%card_flat {
|
||||
@extend %card_common;
|
||||
@include button(undecorated, $style: flat);
|
||||
&:hover { @include button(hover, $style: flat);}
|
||||
&:active { @include button(active, $style: flat);}
|
||||
&:focus { @include button(focus, $style: card);}
|
||||
&:insensitive { @include button(insensitive, $style: card);}
|
||||
}
|
||||
|
||||
|
||||
@ -139,10 +169,10 @@ stage {
|
||||
|
||||
%entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$fg_color);
|
||||
&:hover { @include entry(hover, $c:$fg_color);}
|
||||
&:focus { @include entry(focus, $c:$fg_color);}
|
||||
&:insensitive { @include entry(insensitive, $c:$fg_color);}
|
||||
@include entry(normal);
|
||||
&:hover { @include entry(hover);}
|
||||
&:focus { @include entry(focus);}
|
||||
&:insensitive { @include entry(insensitive);}
|
||||
|
||||
StLabel.hint-text {
|
||||
color: transparentize($fg_color, 0.3);
|
||||
@ -155,36 +185,36 @@ stage {
|
||||
padding: $base_padding * 2;
|
||||
font-weight: bold !important;
|
||||
|
||||
&:ltr {margin-right: 1px;}
|
||||
&:rtl {margin-left: 1px;}
|
||||
// needs a 1px adjustment to fit exactly into the outer radius
|
||||
$bubble_button_radius: $modal_radius - 1px;
|
||||
|
||||
@include button(normal, $c:$bubble_buttons_color);
|
||||
&:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
|
||||
&:focus { @include button(focus, $c:$bubble_buttons_color);}
|
||||
&:hover { @include button(hover, $c:$bubble_buttons_color);}
|
||||
&:active { @include button(active, $c:$bubble_buttons_color);}
|
||||
&:checked { @include button(checked, $c:$bubble_buttons_color);}
|
||||
@include button(normal, $style: bubble);
|
||||
&:focus { @include button(focus, $style: bubble);}
|
||||
&:hover { @include button(hover, $style: bubble);}
|
||||
&:active { @include button(active, $style: bubble);}
|
||||
&:checked { @include button(checked, $style: bubble);}
|
||||
&:insensitive { @include button(insensitive, $style: bubble);}
|
||||
|
||||
&:first-child:ltr {
|
||||
border-radius: 0 0 0 $modal_radius;
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
}
|
||||
|
||||
&:last-child:ltr {
|
||||
border-radius: 0 0 $modal_radius;
|
||||
border-radius: 0 0 $bubble_button_radius;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:rtl {
|
||||
border-radius: 0 0 $modal_radius;
|
||||
border-radius: 0 0 $bubble_button_radius;
|
||||
}
|
||||
|
||||
&:last-child:rtl {
|
||||
border-radius: 0 0 0 $modal_radius;
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: 0 0 $modal_radius $modal_radius;
|
||||
border-radius: 0 0 $bubble_button_radius $bubble_button_radius;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
@ -263,20 +293,18 @@ stage {
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: $base_padding * 2;
|
||||
border: 2px solid transparent;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
@include draw_hc_inset($width: 2px,$border: true);
|
||||
}
|
||||
}
|
||||
|
||||
// entries
|
||||
%osd_entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$osd_fg_color,);
|
||||
&:hover { @include entry(hover, $c:$osd_fg_color);}
|
||||
&:focus { @include entry(focus, $c:$osd_fg_color);}
|
||||
&:insensitive { @include entry(insensitive, $c:$osd_fg_color);}
|
||||
@include entry(normal, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);
|
||||
&:hover { @include entry(hover, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
|
||||
&:focus { @include entry(focus, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
|
||||
&:insensitive { @include entry(insensitive, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
|
||||
|
||||
StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
|
||||
}
|
||||
@ -284,18 +312,22 @@ stage {
|
||||
// buttons on OSD elements
|
||||
%osd_button {
|
||||
@extend %button_common;
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);
|
||||
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
|
||||
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
}
|
||||
|
||||
%osd_button_flat {
|
||||
@extend %osd_button;
|
||||
@include button(undecorated, $osd:true);
|
||||
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
@extend %button_common;
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);
|
||||
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
}
|
||||
|
||||
/* System Elements */
|
||||
@ -303,15 +335,14 @@ stage {
|
||||
// entries
|
||||
%system_entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$system_fg_color,);
|
||||
&:hover { @include entry(hover, $c:$system_fg_color);}
|
||||
&:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);}
|
||||
&:insensitive { @include entry(insensitive, $c:$system_fg_color);}
|
||||
@include entry(normal, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);
|
||||
&:hover { @include entry(hover, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
|
||||
&:focus { @include entry(focus, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
|
||||
&:insensitive { @include entry(insensitive, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
|
||||
|
||||
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
|
||||
}
|
||||
|
||||
|
||||
// buttons
|
||||
%system_button {
|
||||
@include button(normal, $tc:$system_fg_color, $c:$system_bg_color);
|
||||
@ -319,5 +350,5 @@ stage {
|
||||
&:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
}
|
||||
|
||||
@ -23,29 +23,32 @@ $error_fg_color: $light_1;
|
||||
$error_color: $error_bg_color;
|
||||
|
||||
// colors for selected or default elements
|
||||
$selected_bg_color: if($variant == 'light', $blue_3, $blue_4);
|
||||
$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
|
||||
$selected_fg_color: $light_1;
|
||||
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%));
|
||||
|
||||
// link colors
|
||||
$link_color: if($variant == 'light', $blue_3, $blue_4);
|
||||
$link_color: if($variant == 'light', $blue_4, $blue_2);
|
||||
$link_visited_color: transparentize($link_color, .6);
|
||||
|
||||
// special cased widget definitions
|
||||
$button_mix_factor: if($variant == 'light', 12%, 9%);
|
||||
$border_opacity: if($variant == 'light', .85, .9);
|
||||
$background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
|
||||
$border_opacity: if($variant == 'light', .85, .9); // change the border opacity in different variants
|
||||
|
||||
// shadows
|
||||
$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
|
||||
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
|
||||
|
||||
// focus colors
|
||||
$focus_color: $selected_bg_color;
|
||||
$focus_border_color: transparentize($focus_color, 0.5);
|
||||
|
||||
// High Contrast overrides
|
||||
@if $contrast == 'high' {
|
||||
// increase border opacity
|
||||
$border_opacity: .5;
|
||||
// increase the button mix factor
|
||||
$button_mix_factor: 20%;
|
||||
// remove shadows
|
||||
$shadow_color: transparent;
|
||||
$text_shadow_color: transparent;
|
||||
// less transparent focus color
|
||||
$focus_border_color: transparentize($focus_color, 0.2);
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
// Drawing mixins
|
||||
//
|
||||
// Drawing functions
|
||||
//
|
||||
|
||||
// Function to convert px values to em
|
||||
@function to_em($input, $base: 16px) {
|
||||
@ -17,6 +19,33 @@
|
||||
@return mix($c, $mc, $mf);
|
||||
}
|
||||
|
||||
// Function to mix the color and make the focus background
|
||||
@function focus_bg_color($bg, $fc:$focus_color) {
|
||||
@return mix($fc, $bg, 5%);
|
||||
}
|
||||
|
||||
//
|
||||
// Drawing mixins
|
||||
//
|
||||
|
||||
// Draw the inset for High Contrast elements
|
||||
@mixin draw_hc_inset($width: 1px, $fc: $hc_inset_color, $border: false) {
|
||||
box-shadow: inset 0 0 0 $width $fc;
|
||||
@if $border {
|
||||
border: $width solid $fc;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Draw the focus ring
|
||||
@mixin focus_ring($width: 2px, $fc: $focus_border_color, $border: false) {
|
||||
box-shadow: inset 0 0 0 $width $fc !important;
|
||||
@if $border {
|
||||
border:$width solid $fc !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
@ -26,384 +55,274 @@
|
||||
// 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;
|
||||
// Text entries drawing function
|
||||
@mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) {
|
||||
//
|
||||
// $type: entry type, possible values: normal, focus, hover, insensitive
|
||||
// $c: text color
|
||||
// $bc: background color
|
||||
// $always_dark: override the light theme check to use dark colors, true or false
|
||||
//
|
||||
|
||||
@if $t==normal {
|
||||
background-color: transparentize($c, 0.85);
|
||||
// background color
|
||||
$entry_bg_color: mix($c, $bc, $background_mix_factor);
|
||||
|
||||
// background color adjustment factors
|
||||
// the % a color is lightened or darkened for button states
|
||||
$hover_factor: 4%;
|
||||
$insensitive_factor: 3%;
|
||||
|
||||
// entry state background colors
|
||||
$hover_entry_bg_color: if($variant == 'light', darken($entry_bg_color, $hover_factor), lighten($entry_bg_color, $hover_factor));
|
||||
$insensitive_entry_bg_color: if($variant == 'light', lighten($entry_bg_color, $insensitive_factor), darken($entry_bg_color, $insensitive_factor));
|
||||
|
||||
// override entry background colours if element is always dark
|
||||
@if $always_dark {
|
||||
$hover_entry_bg_color: lighten($entry_bg_color, $hover_factor);
|
||||
$insensitive_entry_bg_color: darken($entry_bg_color, $insensitive_factor);
|
||||
}
|
||||
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
|
||||
// normal
|
||||
@if $type == 'normal' {
|
||||
background-color: $entry_bg_color;
|
||||
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);
|
||||
// focus styles
|
||||
@if $type == 'focus' {
|
||||
@include focus_ring();
|
||||
background-color: focus_bg_color($entry_bg_color);
|
||||
color: $c;
|
||||
&:hover {}
|
||||
}
|
||||
|
||||
@if $t==hover {
|
||||
background-color: transparentize($c, 0.75);
|
||||
// hover styles
|
||||
@if $type == 'hover' {
|
||||
background-color: $hover_entry_bg_color;
|
||||
color: $c;
|
||||
}
|
||||
|
||||
@if $t==insensitive {
|
||||
background-color:transparentize($c, 0.75);
|
||||
// insensitive styles
|
||||
@if $type == 'insensitive' {
|
||||
background-color: $insensitive_entry_bg_color;
|
||||
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($type, $tc:$fg_color, $c:$bg_color, $style: null, $always_dark: false) {
|
||||
//
|
||||
// $type: button type, possible 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
|
||||
// $style: button style, possible values: card, bubble, flat, default
|
||||
// $always_dark: override the light theme check to use dark colors, true or false
|
||||
//
|
||||
|
||||
@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);
|
||||
}
|
||||
// mix input colors to get button background color
|
||||
$button_bg_color: mix($tc, $c, $background_mix_factor);
|
||||
|
||||
// background color override for card elements
|
||||
@if $card {
|
||||
$button_bg_color: $card_bg_color;
|
||||
@if $style == 'card' { $button_bg_color: $card_bg_color;}
|
||||
// background color override for buttons in notifications
|
||||
@if $style == 'bubble' { $button_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 10%));}
|
||||
// background color mix override for flat style; the button bg color is the background color input
|
||||
@if $style == 'flat' { $button_bg_color: $c;}
|
||||
// background color mix override for default button style
|
||||
@if $style == 'default' { $button_bg_color: $c;}
|
||||
|
||||
@if $contrast == 'high' {
|
||||
$button_bg_color: hc_color_mix($card_bg_color);
|
||||
}
|
||||
// background color adjustment factors
|
||||
// the % a color is lightened or darkened for button states
|
||||
$hover_factor: 4%;
|
||||
$active_factor: 9%;
|
||||
$checked_factor: 8%;
|
||||
$insensitive_factor: 3%;
|
||||
|
||||
// flat style overrides
|
||||
@if $style == 'flat' {
|
||||
$hover_factor: 7%; // stronger factor in flat style
|
||||
}
|
||||
|
||||
// normal button
|
||||
@if $t==normal {
|
||||
// button state background colors
|
||||
$hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
|
||||
$active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
|
||||
$checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
|
||||
$insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
|
||||
|
||||
// override button background colours if element is always dark
|
||||
@if $always_dark {
|
||||
$hover_button_bg_color: lighten($button_bg_color, $hover_factor);
|
||||
$active_button_bg_color: lighten($button_bg_color, $active_factor);
|
||||
$checked_button_bg_color: lighten($button_bg_color, $checked_factor);
|
||||
$insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
|
||||
}
|
||||
|
||||
// flat style overrides
|
||||
@if $style == 'flat' {
|
||||
$insensitive_button_bg_color: $button_bg_color;
|
||||
}
|
||||
|
||||
// high contrast overrides
|
||||
@if $contrast == 'high' {
|
||||
// override button background colors for high contrast
|
||||
$button_bg_color: hc_color_mix($button_bg_color);
|
||||
$hover_button_bg_color: hc_color_mix($hover_button_bg_color);
|
||||
$active_button_bg_color: hc_color_mix($active_button_bg_color);
|
||||
$checked_button_bg_color: hc_color_mix($checked_button_bg_color);
|
||||
|
||||
// also draw the inset border
|
||||
@include draw_hc_inset();
|
||||
|
||||
// duplicate flat bg color for High Contrast
|
||||
@if $style == 'flat' {
|
||||
$button_bg_color: $c;
|
||||
}
|
||||
|
||||
@if $style == 'default' {
|
||||
@include draw_hc_inset($width:0px);
|
||||
}
|
||||
}
|
||||
|
||||
// normal style
|
||||
@if $type == '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%));
|
||||
@else if $type == 'hover' {
|
||||
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);
|
||||
}
|
||||
}
|
||||
background-color: $hover_button_bg_color;
|
||||
}
|
||||
|
||||
// active button
|
||||
@else if $t==active {
|
||||
$active_bg_color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
|
||||
@else if $type == 'active' {
|
||||
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);
|
||||
}
|
||||
background-color: $active_button_bg_color;
|
||||
&:hover { background-color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));}
|
||||
&:focus {
|
||||
// otherwise use focus bg color mixin
|
||||
$bg: focus_bg_color($active_button_bg_color);
|
||||
background-color: $bg;
|
||||
}
|
||||
}
|
||||
|
||||
// checked button
|
||||
@else if $t==checked {
|
||||
$checked_bg_color:if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
|
||||
@else if $type == 'checked' {
|
||||
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%));}
|
||||
}
|
||||
background-color: $checked_button_bg_color;
|
||||
&:hover { background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));}
|
||||
&:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($active_button_bg_color, $active_factor));}
|
||||
}
|
||||
|
||||
// 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));
|
||||
@else if $type == 'insensitive' {
|
||||
$insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
|
||||
color: $insensitive_button_fg_color;
|
||||
background-color: $insensitive_button_bg_color;
|
||||
&:hover { background-color: if($variant == 'light', darken($insensitive_button_bg_color, $hover_factor), lighten($insensitive_button_bg_color, $hover_factor));}
|
||||
|
||||
// no outline in High Contrast for insensitive buttons
|
||||
@if $contrast == 'high' {
|
||||
// no border since it isn't sensitive
|
||||
box-shadow: none;
|
||||
@include draw_hc_inset($fc:transparent);
|
||||
}
|
||||
}
|
||||
|
||||
// default/suggested button
|
||||
@else if $t==default {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
// focused button
|
||||
@else if $type == 'focus' {
|
||||
color: $tc;
|
||||
@include focus_ring();
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important;
|
||||
// use a different focus ring color for default style
|
||||
@if $style == 'default' {
|
||||
@include focus_ring($fc:$selected_borders_color);
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background-color: lighten($selected_bg_color, 5%);
|
||||
color: lighten($selected_fg_color, 5%);
|
||||
// change background color if style is flat
|
||||
@if $style == 'flat' {
|
||||
$button_bg_color: transparentize($button_bg_color, 0.75);
|
||||
}
|
||||
&: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);
|
||||
|
||||
background-color: focus_bg_color($button_bg_color);
|
||||
|
||||
&:hover {
|
||||
background-color: focus_bg_color($hover_button_bg_color);
|
||||
}
|
||||
}
|
||||
|
||||
// reset (unstyled button)
|
||||
@else if $t==undecorated {
|
||||
@else if $type == '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) {
|
||||
@mixin tile_button($fg:$system_fg_color, $bg:$system_bg_color, $raised: false, $system: true) {
|
||||
//
|
||||
// $fg: foreground color
|
||||
// $bg: background color
|
||||
//
|
||||
// $raised: uses raised style, true or false
|
||||
// $system: uses system styles, true or false
|
||||
//
|
||||
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
@if $raised {
|
||||
@include button(normal, $tc:$fg, $c:$bg, $always_dark: $system);
|
||||
&:focus { @include button(focus, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
&:hover { @include button(hover, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
&:active { @include button(active, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
&:selected,
|
||||
&:checked { @include button(checked, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
&:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
} @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);
|
||||
}
|
||||
}
|
||||
@include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);
|
||||
&:focus { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
&:hover { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
&:active { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
&:selected,
|
||||
&:checked { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
&:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
|
||||
&: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);}
|
||||
&:highlighted {
|
||||
// brighter background color than other states
|
||||
$bg: transparentize($fg, 0.8);
|
||||
@include button(active, $tc:$fg, $c:$bg, $always_dark: $system);
|
||||
}
|
||||
|
||||
&: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);
|
||||
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
|
||||
}
|
||||
}
|
||||
|
||||
// styling for all menuitems in popovers
|
||||
@mixin menuitem($bg, $flat: true) {
|
||||
@mixin menuitem($bg, $style: flat) {
|
||||
|
||||
// extend common styles
|
||||
@extend %menuitem;
|
||||
|
||||
// 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 {
|
||||
@if $style == 'flat' {
|
||||
@include button(undecorated);
|
||||
} @else {
|
||||
@include button(normal, $c:$bg);
|
||||
@ -416,20 +335,19 @@
|
||||
&: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:"") {
|
||||
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: flat, $highlighted_child: false, $child_class:"") {
|
||||
//
|
||||
// $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
|
||||
//
|
||||
|
||||
// common styles
|
||||
transition-duration: 150ms;
|
||||
margin: 3px;
|
||||
border: 1px solid transparent;
|
||||
@ -437,9 +355,10 @@
|
||||
|
||||
font-weight: bold;
|
||||
background-color: transparent;
|
||||
|
||||
color: $fg;
|
||||
|
||||
@if $flat {
|
||||
@if $style == 'flat' {
|
||||
box-shadow: none;
|
||||
|
||||
&:active, &:focus, &:checked {
|
||||
@ -456,7 +375,7 @@
|
||||
} @else {
|
||||
background-color: transparentize($bg, 0.2);
|
||||
|
||||
@if $contrast == 'high' {
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
|
||||
@ -489,7 +408,7 @@
|
||||
|
||||
// use box-shadow instead of border
|
||||
@if $contrast == 'high' {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -37,9 +37,6 @@ $card_shadow_border_color: $card_bg_color;
|
||||
$borders_color: transparentize($fg_color, $border_opacity);
|
||||
$outer_borders_color: $borders_color;
|
||||
|
||||
// buttons in notifications
|
||||
$bubble_buttons_color: lighten($bg_color, 5%);
|
||||
|
||||
// osd colors
|
||||
$osd_borders_color: transparentize($osd_fg_color, 0.8);
|
||||
$osd_outer_borders_color: $osd_borders_color;
|
||||
@ -67,6 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%);
|
||||
$active_bg_color: lighten($bg_color, 22%);
|
||||
$active_fg_color: lighten($fg_color, 22%);
|
||||
|
||||
// selection colors
|
||||
$selected_borders_color: lighten($selected_bg_color, 30%);
|
||||
|
||||
//
|
||||
// High Contrast specific definitions
|
||||
|
||||
@ -19,7 +19,7 @@ $app_folder_size: 720px;
|
||||
|
||||
// items in the app grid and dash
|
||||
.overview-tile {
|
||||
@include tile_button($system_fg_color);
|
||||
@include tile_button($bg:$system_base_color);
|
||||
|
||||
// override the %tile style
|
||||
border-radius: $base_border_radius*3;
|
||||
@ -38,7 +38,7 @@ $app_folder_size: 720px;
|
||||
|
||||
// app folders
|
||||
.app-folder {
|
||||
@include tile_button($system_fg_color, $flat: false);
|
||||
@include tile_button($bg:$system_base_color, $raised: true);
|
||||
}
|
||||
|
||||
// Running app indicator (also shown in dash)
|
||||
@ -47,10 +47,11 @@ $app_folder_size: 720px;
|
||||
width: 5px;
|
||||
border-radius:5px;
|
||||
background-color: $system_fg_color;
|
||||
margin-bottom: 2px;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
margin-bottom: 4px;
|
||||
} @else {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,12 +67,14 @@ $app_folder_size: 720px;
|
||||
|
||||
border-radius: $modal_radius * 4;
|
||||
background-color: $system_overlay_bg_color;
|
||||
box-shadow: inset 0 0 0 1px $system_borders_color;
|
||||
padding: 0 1px;
|
||||
color: $system_fg_color;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
padding: 0 2px;
|
||||
box-shadow: inset 0 0 0 2px $hc_inset_color;
|
||||
} @else {
|
||||
padding: 0 1px;
|
||||
box-shadow: inset 0 0 0 1px $system_borders_color;
|
||||
}
|
||||
|
||||
& .folder-name-container {
|
||||
@ -84,6 +87,7 @@ $app_folder_size: 720px;
|
||||
}
|
||||
|
||||
& .folder-name-entry {
|
||||
@extend %system_entry;
|
||||
width: 12em;
|
||||
}
|
||||
}
|
||||
@ -91,10 +95,12 @@ $app_folder_size: 720px;
|
||||
& .page-indicators {
|
||||
margin-bottom: $base_padding * 4;
|
||||
}
|
||||
|
||||
& .overview-tile {
|
||||
@include tile_button($bg:$system_overlay_bg_color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Rename popup for app folders
|
||||
.rename-folder-popup {
|
||||
.rename-folder-popup-item {
|
||||
@ -166,11 +172,7 @@ $page_indicator_size: 10px;
|
||||
|
||||
> StIcon { color: $system_fg_color;}
|
||||
|
||||
@if $contrast == 'high' {
|
||||
@include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5));
|
||||
}
|
||||
|
||||
&:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));}
|
||||
&:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));}
|
||||
&:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));}
|
||||
@include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat);
|
||||
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat);}
|
||||
&:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat);}
|
||||
}
|
||||
|
||||
@ -4,6 +4,15 @@
|
||||
@extend %button;
|
||||
// uses scalable value since it's a text element
|
||||
min-height: to_em(22px);
|
||||
|
||||
// default style
|
||||
&.default {
|
||||
@extend %default_button;
|
||||
}
|
||||
// flat style
|
||||
&.flat {
|
||||
@extend %flat_button;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
@ -17,4 +26,14 @@
|
||||
icon-size: $scalable_icon_size;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
// default style
|
||||
&.default {
|
||||
@extend %default_button;
|
||||
}
|
||||
|
||||
// flat style
|
||||
&.flat {
|
||||
@extend %flat_button;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
/* today button (the date) */
|
||||
.datemenu-today-button {
|
||||
@include card($flat: true);
|
||||
@extend %card_flat;
|
||||
padding: $base_padding * 1.5;
|
||||
|
||||
// weekday label
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
/* Calendar */
|
||||
.calendar {
|
||||
@include card($flat: true);
|
||||
@extend %card_flat;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
// month label
|
||||
.calendar-month-label {
|
||||
@extend %heading;
|
||||
@extend .button, .flat;
|
||||
@extend %flat_button;
|
||||
color: $fg_color !important;
|
||||
padding: 8px 0;
|
||||
width: 10em;
|
||||
@ -67,7 +67,7 @@
|
||||
.calendar-day {
|
||||
@extend %numeric;
|
||||
@extend %smaller;
|
||||
@extend .button, .flat;
|
||||
@extend %flat_button;
|
||||
border-radius: $forced_circular_radius;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
&.calendar-today {
|
||||
@extend .default;
|
||||
@extend %default_button;
|
||||
border: none;
|
||||
&.calendar-day-with-events {
|
||||
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
|
||||
@ -109,7 +109,7 @@
|
||||
.calendar-day-heading {
|
||||
@extend %numeric;
|
||||
@extend %smaller;
|
||||
@extend .button, .flat;
|
||||
@extend %flat_button;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: $base_margin;
|
||||
@ -128,17 +128,16 @@
|
||||
border-radius: $base_border_radius * 0.5;
|
||||
background-color: transparentize($insensitive_fg_color, .8);
|
||||
color: $insensitive_fg_color;
|
||||
border: 1px solid transparent;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Events */
|
||||
.events-button {
|
||||
@include card;
|
||||
@extend %card;
|
||||
|
||||
.events-box {
|
||||
spacing: $base_padding;
|
||||
@ -163,7 +162,7 @@
|
||||
|
||||
/* World clocks */
|
||||
.world-clocks-button {
|
||||
@include card;
|
||||
@extend %card;
|
||||
|
||||
.world-clocks-grid {
|
||||
spacing-rows: $base_padding;
|
||||
@ -201,7 +200,7 @@
|
||||
|
||||
/* Weather */
|
||||
.weather-button {
|
||||
@include card;
|
||||
@extend %card;
|
||||
|
||||
.weather-box {
|
||||
spacing: $base_padding + $base_margin;
|
||||
|
||||
@ -16,11 +16,13 @@ $dash_border_radius: $modal_radius + $dash_padding;
|
||||
.dash-background {
|
||||
background-color: $dash_background_color;
|
||||
border-radius: $dash_border_radius;
|
||||
border: 2px solid transparent;
|
||||
padding: $dash_padding * 2 $dash_padding; // padding is uneven
|
||||
padding-top: $dash_padding * 2;
|
||||
padding-bottom: $dash_padding * 2;
|
||||
padding-left: $dash_padding + 2px; // padding is uneven and needs hardcoded values
|
||||
padding-right: $dash_padding + 2px;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
@include draw_hc_inset($width: 2px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,17 +41,9 @@ $dash_border_radius: $modal_radius + $dash_padding;
|
||||
height: $dash_placeholder_size;
|
||||
}
|
||||
|
||||
// app icons
|
||||
.show-apps,
|
||||
.overview-tile {
|
||||
// inherits styles from _app-grid.css
|
||||
}
|
||||
|
||||
// button to show app grid
|
||||
.show-apps {
|
||||
@include tile_button($system_fg_color);
|
||||
}
|
||||
|
||||
.show-apps, .overview-tile {
|
||||
@include tile_button($bg:$dash_background_color);
|
||||
margin: $base_margin * 0.5;
|
||||
padding: $base_padding;
|
||||
border-radius: $base_border_radius * 2;}
|
||||
|
||||
@ -40,12 +40,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||
border-radius: $key_border_radius;
|
||||
box-shadow: 0 1px 0 0 $shadow_color;
|
||||
|
||||
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
|
||||
@include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
|
||||
|
||||
&:focus { @include keyboard_key(focus);}
|
||||
&:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
|
||||
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
|
||||
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
|
||||
&:focus { @include button(focus);}
|
||||
&:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
|
||||
&:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
&:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
|
||||
&:grayed { //FIXMEy
|
||||
background-color: darken($bg_color, 3%);
|
||||
@ -55,10 +55,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||
|
||||
// non-character keys
|
||||
&.default-key {
|
||||
@include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
|
||||
&:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
|
||||
&:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
|
||||
&:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
|
||||
@include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
|
||||
&:hover { @include button(hover, $c:$default_key_bg_color, $tc:$osd_fg_color);}
|
||||
&:active { @include button(active, $c:$default_key_bg_color, $tc:$osd_fg_color);}
|
||||
&:checked { @include button(checked, $c:$default_key_bg_color, $tc:$osd_fg_color);}
|
||||
border-radius: $key_border_radius;
|
||||
|
||||
// keys that may be latched: ctrl/alt/shift
|
||||
@ -70,10 +70,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||
|
||||
// enter key is suggested-action
|
||||
&.enter-key {
|
||||
@include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
|
||||
&:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
|
||||
&:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
|
||||
&:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
|
||||
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
|
||||
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
|
||||
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
|
||||
&:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
|
||||
border-radius: $key_border_radius;
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
@ -106,12 +106,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||
padding: $base_padding;
|
||||
|
||||
.keyboard-key {
|
||||
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
|
||||
@include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
|
||||
|
||||
&:focus { @include keyboard_key(focus);}
|
||||
&:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
|
||||
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
|
||||
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
|
||||
&:focus { @include button(focus);}
|
||||
&:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
|
||||
&:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
&:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
|
||||
border-radius:$key_border_radius;
|
||||
}
|
||||
@ -148,11 +148,11 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||
border-radius: 4px;
|
||||
padding: 0px $base_padding * 3;
|
||||
|
||||
@include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
|
||||
@include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color);
|
||||
|
||||
&:focus { @include keyboard_key(focus);}
|
||||
&:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
|
||||
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
|
||||
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
|
||||
&:focus { @include button(focus);}
|
||||
&:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
|
||||
&:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
&:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
}
|
||||
}
|
||||
|
||||
@ -157,7 +157,7 @@ $_gdm_dialog_width: 23em;
|
||||
|
||||
// %system_entry style override to have neutral focus color with wallpaper background
|
||||
.login-dialog-prompt-entry {
|
||||
&:focus { @include entry(focus, $c:$system_fg_color, $fc:transparentize($system_fg_color, 0.5));}
|
||||
&:focus { @include entry(focus, $c:$system_fg_color);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
.lg-extension {
|
||||
@include card;
|
||||
@extend %card;
|
||||
}
|
||||
|
||||
.lg-extension-name {
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
|
||||
// message bubbles
|
||||
.message {
|
||||
@include card;
|
||||
@extend %card;
|
||||
padding: 0 !important;
|
||||
|
||||
// icon container
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9);
|
||||
|
||||
@if $contrast == 'high' {
|
||||
box-shadow:inset 0 0 0 1px $hc_inset_color;
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ $notification_banner_width: 34em;
|
||||
margin: $base_margin;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border: 1px solid $hc_inset_color;
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
|
||||
.notification-actions {
|
||||
|
||||
@ -72,11 +72,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
}
|
||||
|
||||
&.screen-recording-indicator {
|
||||
@include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $flat: false);
|
||||
@include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null);
|
||||
}
|
||||
|
||||
&.screen-sharing-indicator {
|
||||
@include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false);
|
||||
@include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null);
|
||||
}
|
||||
|
||||
// clock
|
||||
@ -106,11 +106,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
// unfortunate duplication to keep indicator style in these states
|
||||
.panel-button {
|
||||
&.screen-recording-indicator {
|
||||
@include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $flat: false);
|
||||
@include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null);
|
||||
}
|
||||
|
||||
&.screen-sharing-indicator {
|
||||
@include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false);
|
||||
@include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
|
||||
// submenu specific styles
|
||||
.popup-menu-item {
|
||||
border-radius: 0;
|
||||
@include menuitem($bg:$submenu_bg_color, $flat:false);
|
||||
@include menuitem($bg:$submenu_bg_color);
|
||||
border-top-width:0;
|
||||
|
||||
&:last-child {
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
}
|
||||
|
||||
.quick-toggle {
|
||||
&:checked { @include button(default, $c:$selected_bg_color); }
|
||||
background-color: none;
|
||||
&:checked { @extend %default_button;}
|
||||
|
||||
& > StBoxLayout { spacing: $base_padding * 1.5; }
|
||||
|
||||
@ -62,7 +63,7 @@
|
||||
border-color: transparentize($fg_color, .75);
|
||||
|
||||
&:checked {
|
||||
@include button(default, $c:$selected_bg_color);
|
||||
@extend %default_button;
|
||||
border-color: $selected_borders_color;
|
||||
}
|
||||
|
||||
@ -90,7 +91,7 @@
|
||||
}
|
||||
|
||||
.quick-toggle-menu {
|
||||
@include card;
|
||||
@extend %card;
|
||||
|
||||
&:insensitive {
|
||||
// override insensitive style on submenu
|
||||
@ -170,7 +171,7 @@
|
||||
.keyboard-brightness-level {
|
||||
spacing: $base_padding;
|
||||
|
||||
.button:checked { @include button(default, $c:$selected_bg_color); }
|
||||
.button:checked { @extend %default_button; }
|
||||
}
|
||||
|
||||
// background apps
|
||||
|
||||
@ -87,7 +87,7 @@ $screenshot_ui_button_red: $red_4;
|
||||
spacing: $base_padding * 0.5;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@ $screenshot_ui_button_red: $red_4;
|
||||
border-radius: $forced_circular_radius;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
|
||||
> StIcon { icon-size: $base_icon_size;}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
%search_section_content_item {
|
||||
@include tile_button($system_fg_color);
|
||||
@include tile_button($bg:$system_overlay_bg_color);
|
||||
border-radius: $base_border_radius * 1.65;
|
||||
}
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ $switcher_radius: $modal_radius + $switcher_padding;
|
||||
|
||||
// each item in the list
|
||||
.item-box {
|
||||
@include tile_button($osd_fg_color);
|
||||
@include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
|
||||
// override %tile style so mouse doesn't steal focus
|
||||
&:hover {background: none;}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user