kevin/gnome-shell-dark-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update the theme against gnome 46.0

Browse source
This commit is contained in:
Kevin MacMartin 2024-03-25 13:34:36 -04:00
parent 3f513d5363
commit 0d88cff006
49 changed files with 2222 additions and 4426 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
gnome-shell-dark-laptop.scss
View file

@ -1,4 +1,5 @@
$variant: 'dark'; $variant: 'dark';
$contrast: 'normal';
$laptop: true; $laptop: true;
@import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_colors"; //use gtk colors

1
gnome-shell-dark.scss
View file

@ -1,4 +1,5 @@
$variant: 'dark'; $variant: 'dark';
$contrast: 'normal';
$laptop: false; $laptop: false;
@import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_colors"; //use gtk colors

77
gnome-shell-sass/_colors.scss
View file

@ -1,61 +1,53 @@
// When color definition differs for dark and light variant, //
// it gets @if-ed depending on $variant // Main color definitions
//
// When color definition differs for dark and light variant, it gets @if-ed depending on $variant
@import '_palette.scss'; @import '_palette.scss';
@import '_default-colors.scss';
$is_highcontrast:false;
// base color for light theme // global colors
$_dark_base_color: desaturate($dark_4, 100%); $base_color: if($variant == 'light', $light_1, $_base_color_dark);
$bg_color: if($variant == 'light', $_base_color_light, lighten($base_color, 5%));
$fg_color: if($variant == 'light', $_base_color_dark, $light_1);
$base_color: if($variant == 'light', $light_1, $_dark_base_color); // OSD elements
$bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%)); $osd_fg_color: $light_1;
$fg_color: if($variant == 'light', $_dark_base_color, white); $osd_bg_color: lighten($_base_color_dark, 5%);
$selected_fg_color: $light_1; // system elements (e.g. the overview) that are always dark
$selected_bg_color: $blue_3; $system_base_color: $_base_color_dark;
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%)); $system_fg_color: $_base_color_light;
$borders_color: if($variant == 'light', transparentize($fg_color, .85), transparentize($fg_color, .9)); // panel colors
$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_4);
$panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1);
// card elements
$card_bg_color: if($variant == 'light', $light_1, lighten($bg_color, 7%));
$card_shadow_color: if($variant == 'light', transparentize($dark_5, .97), transparent);
$card_shadow_border_color: if($variant == 'light', transparentize($dark_5, .91), transparent);
//
// Derived Colors
//
// colors based on the global defines above
// borders
$borders_color: transparentize($fg_color, $border_opacity);
$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); $outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); // osd colors
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
$warning_color: if($variant == 'light', $yellow_4, $yellow_3);
$error_color: if($variant == 'light', $red_4, $red_3);
$success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: $error_color;
// color definitions for OSD elements
$osd_fg_color: $light_1;
$osd_bg_color: lighten($_dark_base_color, 5%);
// derived osd colors
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
$osd_borders_color: transparentize($osd_fg_color, 0.9); $osd_borders_color: transparentize($osd_fg_color, 0.9);
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98); $osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2)); // system colors
// buttons
$button_mix_factor: if($variant == 'light', 12%, 9%);
// notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
// color definitions for system elements (e.g. the overview)
$system_base_color: $_dark_base_color; // always dark
$system_fg_color: $light_2;
// derived system colors
$system_bg_color: lighten($system_base_color, 5%); $system_bg_color: lighten($system_base_color, 5%);
$system_borders_color: transparentize($system_fg_color, .9); $system_borders_color: transparentize($system_fg_color, .9);
$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%); $system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
$system_overlay_bg_color: mix($system_base_color, $system_fg_color, 90%); // for non-transparent items, e.g. dash $system_overlay_bg_color: mix($system_base_color, $system_fg_color, 90%); // for non-transparent items, e.g. dash
// derived global colors
// insensitive state // insensitive state
$insensitive_fg_color: if($variant == 'light', mix($fg_color, $bg_color, 60%), mix($fg_color, $bg_color, 50%)); $insensitive_fg_color: if($variant == 'light', mix($fg_color, $bg_color, 60%), mix($fg_color, $bg_color, 50%));
$insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_bg_color: mix($bg_color, $base_color, 60%);
@ -72,3 +64,6 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color,
// active state // active state
$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%)); $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%)); $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%));

263
gnome-shell-sass/_common.scss
View file

@ -25,29 +25,41 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
/* Global Values */ /* Global Values */
// padding, margin and spacing // Base values of elements of the shell in their smallest "unit".
$base_padding: 6px; // These are used in calculations elsewhere to have elements in proportion
$base_margin: 4px; $base_font_size: 11pt; // font size
$base_padding: 6px; // internal padding of elements
$base_margin: 4px; // margin between elements
$base_border_radius: 8px; // radii on all elements
// border radii // Radius used to make sure elements that have rounded corners stay as such.
$base_border_radius: 8px; // This is a workaround for 50% not working.
$forced_circular_radius: 999px;
// radii of things that display over other things, e.g. popovers // radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px $modal_radius: $base_border_radius * 2;
// Chroma key to flag when a background-color is always occluded, not visible. // Chroma key to flag when a background-color is always occluded, not visible.
// This allows any box-shadow behind it to be rendered more efficiently by // This allows any box-shadow behind it to be rendered more efficiently by
// omitting the middle rectangle. // omitting the middle rectangle.
$invisible_occluded_bg_color: rgba(3,2,1,0); $invisible_occluded_bg_color: rgba(3,2,1,0);
// fonts // Fixed icon sizes
$base_font_size: 11; $base_icon_size: 16px;
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); $medium_icon_size: $base_icon_size * 1.5; // 24px
// icons
$base_icon_size: 1.09em;
$large_icon_size: $base_icon_size * 2; // 32px $large_icon_size: $base_icon_size * 2; // 32px
// $base_icon_size: 16px;
// Scaled values
// Used in elements that follow text scaling factors
$scaled_padding: to_em(6px); // same as $base_padding
// Used for symbolic icons that scale
$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
stage { stage {
@ -56,29 +68,31 @@ stage {
} }
/* Common Stylings */ /* Common Stylings */
%reset {
background: none;
box-shadow: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
}
// icon tiles // icon tiles
%tile { %tile {
border-radius: $base_border_radius * 2; // 16px border-radius: $base_border_radius * 2;
padding: $base_padding; padding: $base_padding;
spacing: $base_padding; spacing: $base_padding;
border: 2px solid transparent;
transition-duration: 200ms;
text-align: center; text-align: center;
color: inherit; transition-duration: 100ms;
@if $is_highcontrast {
border-color: $hc_inset_color;
}
} }
// normal button styling // common button styling
%button_common { %button_common {
border-radius: $base_border_radius; border-radius: $base_border_radius;
border-style: solid;
border-width: 1px;
font-weight: bold;
padding: $base_padding * .5 $base_padding * 4; padding: $base_padding * .5 $base_padding * 4;
font-weight: bold;
transition: border-width 300ms $ease_out_quad,
box-shadow 300ms $ease_out_quad;
} }
%button { %button {
@ -90,18 +104,67 @@ stage {
&:selected, &:selected,
&:active { @include button(active);} &:active { @include button(active);}
&:checked { @include button(checked);} &: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_common {
border-radius: $base_border_radius * 1.5;
padding: $scaled_padding * 2;
margin: $base_margin;
background-color: $card_bg_color;
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;
border: 1px solid transparent !important; // override of the button style needed here
@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);}
} }
@ -115,10 +178,10 @@ stage {
%entry { %entry {
@extend %entry_common; @extend %entry_common;
@include entry(normal, $c:$fg_color); @include entry(normal);
&:hover { @include entry(hover, $c:$fg_color);} &:hover { @include entry(hover);}
&:focus { @include entry(focus, $c:$fg_color);} &:focus { @include entry(focus);}
&:insensitive { @include entry(insensitive, $c:$fg_color);} &:insensitive { @include entry(insensitive);}
StLabel.hint-text { StLabel.hint-text {
color: transparentize($fg_color, 0.3); color: transparentize($fg_color, 0.3);
@ -134,33 +197,36 @@ stage {
&:ltr {margin-right: 1px;} &:ltr {margin-right: 1px;}
&:rtl {margin-left: 1px;} &:rtl {margin-left: 1px;}
@include button(normal, $c:$bubble_buttons_color); // needs a 1px adjustment to fit exactly into the outer radius
&:insensitive { @include button(insensitive, $c:$bubble_buttons_color);} $bubble_button_radius: $modal_radius - 1px;
&:focus { @include button(focus, $c:$bubble_buttons_color);}
&:hover { @include button(hover, $c:$bubble_buttons_color);} @include button(normal, $style: bubble);
&:active { @include button(active, $c:$bubble_buttons_color);} &:focus { @include button(focus, $style: bubble);}
&:checked { @include button(checked, $c:$bubble_buttons_color);} &: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 { &:first-child:ltr {
border-radius: 0 0 0 $modal_radius; border-radius: 0 0 0 $bubble_button_radius;
} }
&:last-child:ltr { &:last-child:ltr {
border-radius: 0 0 $modal_radius; border-radius: 0 0 $bubble_button_radius;
margin-right: 0 !important; margin-right: 0 !important;
} }
&:first-child:rtl { &:first-child:rtl {
border-radius: 0 0 $modal_radius; border-radius: 0 0 $bubble_button_radius;
} }
&:last-child:rtl { &:last-child:rtl {
border-radius: 0 0 0 $modal_radius; border-radius: 0 0 0 $bubble_button_radius;
margin-left: 0 !important; margin-left: 0 !important;
} }
&:first-child:last-child { &: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-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
} }
@ -172,11 +238,11 @@ stage {
border: 1px solid transparentize($light_1, 0.9); border: 1px solid transparentize($light_1, 0.9);
color: $light_1; color: $light_1;
border-radius: 99px; border-radius: $forced_circular_radius;
padding: $base_padding $base_padding * 2; padding: $base_padding $base_padding * 2;
text-align: center; text-align: center;
@if $is_highcontrast { @if $contrast == 'high' {
background-color: black; background-color: black;
border-color: $hc_inset_color; border-color: $hc_inset_color;
} }
@ -185,47 +251,47 @@ stage {
/* General Typography */ /* General Typography */
%large_title { %large_title {
font-weight: 300; font-weight: 300;
@include fontsize(24); @include fontsize(24pt);
} }
%title_1 { %title_1 {
font-weight: 800; font-weight: 800;
@include fontsize(20); @include fontsize(20pt);
} }
%title_2 { %title_2 {
font-weight: 800; font-weight: 800;
@include fontsize(15); @include fontsize(15pt);
} }
%title_3 { %title_3 {
font-weight: 700; font-weight: 700;
@include fontsize(15); @include fontsize(15pt);
} }
%title_4 { %title_4 {
font-weight: 700; font-weight: 700;
@include fontsize(13); @include fontsize(13pt);
} }
%heading { %heading {
font-weight: 700; font-weight: 700;
@include fontsize(11); @include fontsize(11pt);
} }
%caption_heading { %caption_heading {
font-weight: 700; font-weight: 700;
@include fontsize(9); @include fontsize(9pt);
} }
%caption { %caption {
font-weight: 400; font-weight: 400;
@include fontsize(9); @include fontsize(9pt);
} }
%smaller { %smaller {
font-weight: 400; font-weight: 400;
@include fontsize(8); @include fontsize(8pt);
} }
%monospace {font-family: monospace;} %monospace {font-family: monospace;}
@ -237,21 +303,20 @@ stage {
color: $osd_fg_color; color: $osd_fg_color;
background-color: $osd_bg_color; background-color: $osd_bg_color;
border: 1px solid $osd_outer_borders_color; border: 1px solid $osd_outer_borders_color;
border-radius: 999px; border-radius: $forced_circular_radius;
padding: $base_padding * 2; padding: $base_padding * 2;
@if $contrast == 'high' {
@if $is_highcontrast { @include draw_hc_inset($width: 2px,$border: true);
border: 2px solid $hc_inset_color;
} }
} }
// entries // entries
%osd_entry { %osd_entry {
@extend %entry_common; @extend %entry_common;
@include entry(normal, $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);} &:hover { @include entry(hover, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
&:focus { @include entry(focus, $c:$osd_fg_color);} &:focus { @include entry(focus, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
&:insensitive { @include entry(insensitive, $c:$osd_fg_color);} &: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); } StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
} }
@ -259,18 +324,22 @@ stage {
// buttons on OSD elements // buttons on OSD elements
%osd_button { %osd_button {
@extend %button_common; @extend %button_common;
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true); @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: 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, $always_dark: 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, $always_dark: 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, $always_dark: true);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);} &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
&:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);} &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
} }
%osd_button_flat { %osd_button_flat {
@extend %osd_button; @extend %button_common;
@include button(undecorated, $osd:true); @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);} &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
} }
/* System Elements */ /* System Elements */
@ -278,15 +347,14 @@ stage {
// entries // entries
%system_entry { %system_entry {
@extend %entry_common; @extend %entry_common;
@include entry(normal, $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);} &:hover { @include entry(hover, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
&:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);} &:focus { @include entry(focus, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
&:insensitive { @include entry(insensitive, $c:$system_fg_color);} &: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);} StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
} }
// buttons // buttons
%system_button { %system_button {
@include button(normal, $tc:$system_fg_color, $c:$system_bg_color); @include button(normal, $tc:$system_fg_color, $c:$system_bg_color);
@ -294,5 +362,30 @@ stage {
&:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);} &:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);}
&:hover { @include button(hover, $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);} &: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);}
} }
/* Lockscreen Elements */
// buttons
%lockscreen_button {
@extend %button_common;
@include button(normal, $tc:$system_fg_color, $style: lockscreen);
&:focus { @include button(focus, $tc:$system_fg_color, $style: lockscreen);}
&:hover { @include button(hover, $tc:$system_fg_color, $style: lockscreen);}
&:active { @include button(active, $tc:$system_fg_color, $style: lockscreen);}
&:checked { @include button(checked, $tc:$system_fg_color, $style: lockscreen);}
&:insensitive { @include button(insensitive, $tc:$system_fg_color, $style: lockscreen);}
}
// entries
%lockscreen_entry {
@extend %entry_common;
@include entry(normal, $c:$system_fg_color, $style: lockscreen, $always_dark: true);
&:hover { @include entry(hover, $c:$system_fg_color, $style: lockscreen, $always_dark: true);}
&:focus { @include entry(focus, $c:$system_fg_color, $style: lockscreen, $always_dark: true);}
&:insensitive { @include entry(insensitive, $c:$system_fg_color, $style: lockscreen, $always_dark: true);}
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
}

54
gnome-shell-sass/_default-colors.scss Normal file
View file

@ -0,0 +1,54 @@
// Named Colors
// base colors
$_base_color_dark: desaturate($dark_4, 100%);
$_base_color_light: desaturate($light_2, 100%);
// colors for destructive elements
$destructive_bg_color: if($variant == 'light', $red_3, $red_4);
$destructive_fg_color: $light_1;
$destructive_color: $destructive_bg_color;
// colors for levelbars, entries, labels and infobars
$success_bg_color: if($variant == 'light', $green_4, $green_5);
$success_fg_color: $light_1;
$success_color: $success_bg_color;
$warning_bg_color: if($variant == 'light', $yellow_4, $yellow_3);
$warning_fg_color: transparentize(black, .2);
$warning_color: $warning_bg_color;
$error_bg_color: if($variant == 'light', $red_3, $red_4);
$error_fg_color: $light_1;
$error_color: $error_bg_color;
// colors for selected or default elements
$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
$selected_fg_color: $light_1;
// link colors
$link_color: if($variant == 'light', $blue_4, $blue_2);
$link_visited_color: transparentize($link_color, .6);
// special cased widget definitions
$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;
// remove shadows
$shadow_color: transparent;
$text_shadow_color: transparent;
// less transparent focus color
$focus_border_color: transparentize($focus_color, 0.2);
}

656
gnome-shell-sass/_drawing.scss
View file

@ -1,355 +1,378 @@
//
// Drawing functions
//
// 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);
}
// 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 // Drawing mixins
//
// generic drawing of more complex things // Draw the inset for High Contrast elements
@mixin draw_hc_inset($width: 1px, $ic: $hc_inset_color, $border: false, $no_inset: false) {
//
// $width width of the inset, in pixels
// $ic color of the inset
//
// $border if true, use a border instead of a box-shadow to draw inset
// $no_inset if true, override the mixin to not draw an iset
//
@function draw_widget_edge($c:$outer_borders_color) { box-shadow: inset 0 0 0 $width $ic;
// outer highlight "used" on most widgets
@return 0 1px $c; // draw inset as border
@if $border {
border: $width solid $ic;
box-shadow: none;
} }
// provide font size in rem, with px fallback // don't draw an inset at all
@mixin fontsize($size: 24, $base: 16) { @if $no_inset {
font-size: round($size) + pt; box-shadow: none;
//font-size: ($size / $base) * 1rem; border: none;
}
} }
@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { // Draw the focus ring
// @mixin focus_ring($width: 2px, $fc: $focus_border_color, $border: false) {
// Helper function to stack up to 4 box-shadows; box-shadow: inset 0 0 0 $width $fc !important;
// @if $border {
@if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } border:$width solid $fc !important;
@else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } box-shadow: none;
@else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } }
@else { box-shadow: $shadow1; }
} }
// 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 // Function to fill the background of a panel button
@mixin entry($t, $c, $fc:$selected_bg_color) { @mixin panel_button_fill($bg) {
// // use a box-shadow to fill the background
// Entries drawing function // this is done because panel buttons use a transparent border to fake padding
// box-shadow: inset 0 0 0 100px $bg;
// $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 { // Text entries drawing function
background-color: transparentize($c, 0.85); @mixin entry($type, $c:$fg_color, $bc:$bg_color, $style: null, $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
//
// entry colors
$entry_fg_color: $c;
$entry_bg_color: mix($c, $bc, $background_mix_factor);
$entry_focus_color: $focus_color;
// entry color overrides for lockscreen style
@if $style == 'lockscreen' {
$entry_bg_color: transparentize($c, .9);
$entry_focus_color: transparentize($entry_fg_color, 0.6);
@if $contrast == 'high' {
$entry_focus_color: transparentize($entry_fg_color, 0.3);
}
}
// 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); color: transparentize($c, 0.3);
}
@if $is_highcontrast { // focus styles
box-shadow: inset 0 0 0 1px $hc_inset_color; @if $type == 'focus' {
@include focus_ring();
background-color: focus_bg_color($entry_bg_color);
color: $entry_fg_color;
// lockscreen style
@if $style == 'lockscreen' {
@include focus_ring($fc:$entry_focus_color);
background-color: focus_bg_color($entry_bg_color, $fc:$entry_focus_color);
} }
} }
@if $t==focus { // hover styles
background-color: mix(transparentize($c, 0.75), $fc, 95%); @if $type == 'hover' {
box-shadow: inset 0 0 0 2px transparentize($fc, 0.3); background-color: $hover_entry_bg_color;
color: $c; color: $entry_fg_color;
&:hover {}
} }
@if $t==hover { // insensitive styles
background-color: transparentize($c, 0.75); @if $type == 'insensitive' {
} background-color: $insensitive_entry_bg_color;
color: transparentize($entry_fg_color, 0.5);
@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, 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 // Button drawing function
@mixin button($type, $tc:$fg_color, $c:$bg_color, $style: null, $always_dark: false) {
// //
// $t: button type, // $type: button type, possible values:
// $c: base button colors, derived from fg_color // - normal, focus, hover, active, checked, insensitive, default, undecorated
// $tc: base button colors, derived from fg_color // $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
// //
// 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, $flat: false, $osd: false) { // mix input colors to get button background color
$button_bg_color: mix($tc, $c, $background_mix_factor);
$button_bg_color: mix($tc, $c, $button_mix_factor); // background color override for card elements
transition-duration: 100ms; @if $style == 'card' { $button_bg_color: $card_bg_color;}
// 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 $osd { // background color adjustment factors
$button_bg_color: transparentize($tc, 0.9); // 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 // button base state background colors
@if $t==normal { $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));
// button extended state background colors
$active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));
$checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));
$checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_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);
// extended
$active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
$checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
$checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
}
// background color override for buttons that use transparency
// styles: notification bubbles, lockscreen
@if $style == 'bubble' or $style == 'lockscreen' {
$button_bg_color: transparentize($tc, .9);
$hover_button_bg_color: transparentize($tc, .87);
$active_button_bg_color: transparentize($tc, .84);
$active_hover_button_bg_color: transparentize($tc, .81);
}
// 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($no_inset: true);
}
}
// normal style
@if $type == 'normal' {
color: $tc; color: $tc;
background-color: $button_bg_color; background-color: $button_bg_color;
@if $flat {
background-color: transparent;
}
@if $is_highcontrast {
box-shadow: inset 0 0 0 1px $hc_inset_color;
}
}
// focused button // no inset in High Contrast when the style is flat
@if $t==focus { @if $style == 'flat' and $contrast == 'high' {
color: $tc; @include draw_hc_inset($no_inset: true);
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 // hover button
@else if $t==hover { @else if $type == 'hover' {
color: $tc; color: $tc;
background-color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%)); background-color: $hover_button_bg_color;
@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 // active button
@else if $t==active { @else if $type == 'active' {
color: $tc; color: $tc;
background-color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%)); background-color: $active_button_bg_color;
@if $is_highcontrast == "true" { &:hover { background-color: $active_hover_button_bg_color;}
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%); &:focus {
background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%); // otherwise use focus bg color mixin
$bg: focus_bg_color($active_button_bg_color);
background-color: $bg;
} }
} }
// checked button // checked button
@else if $t==checked { @else if $type == 'checked' {
color: $tc; color: $tc;
background-color: if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%)); background-color: $checked_button_bg_color;
@if $is_highcontrast == "true" { &:hover { background-color: $checked_hover_button_bg_color;}
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%); &:active { background-color: $checked_active_button_bg_color;}
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 // insensitive button
@else if $t==insensitive { @else if $type == 'insensitive' {
color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95)); color: $insensitive_button_fg_color;
} background-color: $insensitive_button_bg_color;
// default/suggested button // no outline in High Contrast for insensitive buttons
@else if $t==default { @if $contrast == 'high' {
background-color: $selected_bg_color; @include draw_hc_inset($no_inset: true);
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 // focused button
@else if $t==undecorated { @else if $type == 'focus' {
color: $tc;
@include focus_ring();
// use a different focus ring color for default style
@if $style == 'default' {
@include focus_ring($fc:$selected_borders_color);
}
// change background color if style is flat
@if $style == 'flat' {
$button_bg_color: transparentize($button_bg_color, 0.75);
}
background-color: focus_bg_color($button_bg_color);
&:hover {
background-color: focus_bg_color($hover_button_bg_color);
}
}
// reset (unstyled button)
@else if $type == 'undecorated' {
background-color: transparent; background-color: transparent;
background-color: none; border-color: transparent;
box-shadow: none; box-shadow: none;
&:insensitive { &:insensitive {
@include button(insensitive); background-color: transparent !important;
background-color: transparent;
} }
} }
} }
// tile // 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; @extend %tile;
@if $flat {
background-color: transparent; @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);}
&:highlighted,&:selected,
&:checked { @include button(checked, $tc:$fg, $c:$bg, $always_dark: $system);}
&:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $always_dark: $system);}
} @else { } @else {
background-color: transparentize($color, .84); @include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);
@if $is_highcontrast { &:focus { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack &: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);}
} &:highlighted,&:selected,
&:hover { background-color: transparentize($color, .9);} &:checked { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
&:selected, &:focus { &:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
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 { &:drop {
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
background-color: transparentize($selected_bg_color, .8); background-color: transparentize($selected_bg_color, .8);
} box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
}
// 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, .93); }
}
&:hover .overview-icon { background-color: transparentize($color, .87);}
&: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*1.5;
margin: $base_margin;
@if $flat {
@include button(undecorated);
box-shadow: none !important;
} @else {
@include button(normal);
}
&:hover {@include button(hover);}
&:active {@include button(active);}
&:focus {@include button(focus);}
&:insensitive {
@include button(insensitive);
@if $flat {
background-color: transparent;
}
} }
} }
// styling for all menuitems in popovers // 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 // lighten the background color always
$bg: lighten($bg,5%); $bg: lighten($bg,5%);
font-weight: normal; @if $style == 'flat' {
spacing: $base_padding;
transition-duration: 100ms;
padding: $base_padding*1.5 $base_padding*2;
@if $flat {
@include button(undecorated); @include button(undecorated);
box-shadow: none !important;
} @else { } @else {
@include button(normal, $c:$bg); @include button(normal, $c:$bg);
} }
@ -359,85 +382,84 @@
} }
&:active {@include button(active, $c:$bg);} &:active {@include button(active, $c:$bg);}
&:checked {@include button(checked, $c:$bg);} &:checked {@include button(checked, $c:$bg);}
&:insensitive {@include button(insensitive, $c:$bg);}
} }
//
// Panel menu/button drawing function // Panel menu/button drawing function
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"", $border_radius: 3px) {
// //
// $bg: background color, derived from $panel_fg_color // $bg: background color, derived from $panel_fg_color
// $fg: foreground color, also derived from $panel_fg_color // $fg: foreground color, also derived from $panel_fg_color
// $style: can be set to 'filled' if button uses a colored background
// //
// $flat: if true, the button is filled instead of transparent
// $highlighted_child: if true, applies some special overrides for to a // $highlighted_child: if true, applies some special overrides for to a
// child element, see _panel.scss for details // child element, see _panel.scss for details
// $child_class: class name of the child element // $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:"", $border_radius: 3px) {
transition-duration: 150ms; transition-duration: 150ms;
border: 3px solid transparent; border: 3px solid transparent;
background-color: transparent;
border-radius: $border_radius; border-radius: $border_radius;
font-weight: bold; font-weight: bold;
background-color: transparent;
color: $fg; color: $fg;
@if $flat { // background fill defines
box-shadow: none; $fill: transparent;
$hover_fill: transparentize($fg, .83);
$active_fill: transparentize($fg, .72);
$active_hover_fill: transparentize($fg, .68);
&:active, &:focus, &:checked { @if $style == 'filled' {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75); $fill: $bg;
&:hover { $hover_fill: if($variant == 'light', darken($bg, 5%), lighten($bg, 5%));
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65); $active_fill: if($variant == 'light', darken($bg, 9%), lighten($bg, 9%));
$active_hover_fill: if($variant == 'light', darken($bg, 11%), lighten($bg, 11%));
} }
@include panel_button_fill($fill);
&:focus, &:hover {
@include panel_button_fill($hover_fill);
} }
&:active, &:checked {
@include panel_button_fill($active_fill);
&:hover{ &:hover{
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8); @include panel_button_fill($active_hover_fill);
}
} @else {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.2);
&:active, &:focus, &:checked {
box-shadow: inset 0 0 0 100px $bg;
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.1);
} }
} }
// some overrides to style a child element // some overrides to style a child element
@if $highlighted_child { @if $highlighted_child {
box-shadow: none !important;
// remove the common styles from the parent
background: none !important;
box-shadow: none !important;
border: none !important;
// add them to the child
#{$child_class} { #{$child_class} {
transition-duration: 150ms; transition-duration: 150ms;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: $border_radius; border-radius: $border_radius;
} }
&:active, &:focus, &:checked { &:focus, &:hover {
box-shadow: none !important;
#{$child_class} { #{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75); @include panel_button_fill($hover_fill);
}
}
&:active, &:checked {
#{$child_class} {
@include panel_button_fill($active_fill);
&:hover { &:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important; @include panel_button_fill($active_hover_fill);
} }
}
}
&:hover {
box-shadow: none !important;
#{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
} }
} }
} }

105
gnome-shell-sass/_high-contrast-colors.scss
View file

@ -1,74 +1,81 @@
// When color definition differs for dark and light variant, //
// it gets @if ed depending on $variant // High Contrast theme definitions
//
// this is an always dark theme, so no 'light' theme conditions
@import '_palette.scss'; @import '_palette.scss';
@import '_default-colors.scss';
$is_highcontrast:true; // global colors
$base_color: $dark_5;
$bg_color: lighten($base_color, 10%);
$fg_color: $light_1;
$base_color: if($variant == 'light', $light_1, $dark_5); // OSD elements
$bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%));
$fg_color: if($variant == 'light', transparentize($dark_5, .2), $light_1);
$selected_fg_color: $light_1;
$selected_bg_color: $blue_3;
$selected_borders_color: darken($selected_bg_color, 20%);
$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7));
$outer_borders_color: $borders_color;
$link_color: lighten($selected_bg_color,20%);
$link_visited_color: lighten($selected_bg_color,10%);
$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
$error_color: if($variant == 'light', $red_3, $red_4);
$success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: $error_color;
// color definitions for OSD elements
$osd_fg_color: $light_1; $osd_fg_color: $light_1;
$osd_bg_color: $base_color; $osd_bg_color: $base_color;
// derived osd colors // system elements
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
$osd_borders_color: transparentize($osd_fg_color, 0.8);
$osd_outer_borders_color: $osd_borders_color;
$shadow_color: rgba(0,0,0,0);
// button
$button_mix_factor: 20%;
// notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
// color definitions for system elements
$system_base_color: $dark_5; $system_base_color: $dark_5;
$system_fg_color: $light_1; $system_fg_color: $light_1;
// derived system colors // panel colors
$panel_bg_color: $dark_5;
$panel_fg_color: $light_1;
// card elements
$card_bg_color: $bg_color;
$card_shadow_color: transparent;
$card_shadow_border_color: $card_bg_color;
//
// Derived Colors
//
// colors based on the global defines above
// borders
$borders_color: transparentize($fg_color, $border_opacity);
$outer_borders_color: $borders_color;
// osd colors
$osd_borders_color: transparentize($osd_fg_color, 0.8);
$osd_outer_borders_color: $osd_borders_color;
// system colors
$system_bg_color: lighten($system_base_color, 5%); $system_bg_color: lighten($system_base_color, 5%);
$system_borders_color: transparentize($system_fg_color, .9); $system_borders_color: transparentize($system_fg_color, .9);
$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%); $system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
$system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%); $system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%);
// derived global colors
// insensitive state // insensitive state
$insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_fg_color: $fg_color;
$insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: $borders_color; $insensitive_borders_color: $borders_color;
// checked state // checked state
$checked_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 18%)); $checked_bg_color: lighten($bg_color, 18%);
$checked_fg_color: if($variant=='light', darken($fg_color, 12%), lighten($fg_color, 18%)); $checked_fg_color: lighten($fg_color, 18%);
// hover state // hover state
$hover_bg_color: if($variant=='light', darken($bg_color, 8%), lighten($bg_color, 20%)); $hover_bg_color: lighten($bg_color, 20%);
$hover_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 20%)); $hover_fg_color: lighten($fg_color, 20%);
// active state // active state
$active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 22%)); $active_bg_color: lighten($bg_color, 22%);
$active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%)); $active_fg_color: lighten($fg_color, 22%);
// inset colour for high contrast // selection colors
$hc_inset_color: transparentize($fg_color, 0.7); $selected_borders_color: lighten($selected_bg_color, 30%);
//
// High Contrast specific definitions
//
// color for outline drawn onto all elements (may be a border or a box-shadow)
$hc_inset_color: transparentize($fg_color, 0.6);
// color used in a mixin in _drawing to boost a color's contrast
$hc_mix_color: $light_1;
// the mix factor used to boost contrast of a color in the above mixin
$hc_mix_factor: 87%;

1
gnome-shell-sass/_widgets.scss
View file

@ -21,7 +21,6 @@
@import 'widgets/ibus-popup'; @import 'widgets/ibus-popup';
// Notifications // Notifications
@import 'widgets/notifications'; @import 'widgets/notifications';
@import 'widgets/hotplug';
// Dialogs // Dialogs
@import 'widgets/dialogs'; @import 'widgets/dialogs';
// OSDs // OSDs

149
gnome-shell-sass/widgets/_app-grid.scss
View file

@ -1,13 +1,14 @@
/* App Grid */ /* App Grid */
$app_icon_size: 96px; $app_icon_size: 96px;
$app_folder_size: 720px;
// app icons // app icons
.icon-grid { .icon-grid {
row-spacing: $base_padding * 2; row-spacing: $base_padding * 2;
column-spacing: $base_padding * 2; column-spacing: $base_padding * 2;
max-row-spacing: $base_padding * 7; max-row-spacing: $base_padding * 6;
max-column-spacing: $base_padding * 7; max-column-spacing: $base_padding * 6;
page-padding-top: $base_padding * 4; page-padding-top: $base_padding * 4;
page-padding-bottom: $base_padding * 4; page-padding-bottom: $base_padding * 4;
page-padding-left: $base_padding * 3; page-padding-left: $base_padding * 3;
@ -16,41 +17,69 @@ $app_icon_size: 96px;
/* App Icons */ /* App Icons */
// Icon tiles in the app grid // items in the app grid and dash
.app-well-app { .overview-tile {
@include overview_icon($system_fg_color); @include tile_button($bg:$system_base_color);
.overview-icon { // override the %tile style
padding: $base_padding*2;
border-radius: $base_border_radius*3; border-radius: $base_border_radius*3;
color: $system_fg_color; padding: $base_padding * 2;
}
.overview-icon.overview-icon-with-label { // the icon itself
.overview-icon {
// item with a label
&.overview-icon-with-label {
> StBoxLayout { > StBoxLayout {
spacing: $base_padding; spacing: $base_padding;
} }
} }
} }
// app folders
.app-well-app.app-folder {
@include overview_icon($system_fg_color, $flat: false);
} }
// expanded folder // app folders
.app-folder {
@include tile_button($bg:$system_base_color, $raised: true);
}
// Running app indicator (also shown in dash)
.app-grid-running-dot {
height: 5px;
width: 5px;
border-radius:5px;
background-color: $system_fg_color;
@if $contrast == 'high' {
margin-bottom: 4px;
} @else {
margin-bottom: 2px;
}
}
.app-folder-dialog-container {
// pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
padding-top: $panel_height;
}
// Expanded app folder dialog
.app-folder-dialog { .app-folder-dialog {
width: $app_folder_size;
height: $app_folder_size;
border-radius: $modal_radius * 4; border-radius: $modal_radius * 4;
background-color: $system_overlay_bg_color; background-color: $system_overlay_bg_color;
padding: $base_padding*2; color: $system_fg_color;
box-shadow:inset 0 0 0 1px $system_borders_color;
@if $is_highcontrast { @if $contrast == 'high' {
padding: 0 2px;
box-shadow: inset 0 0 0 2px $hc_inset_color; 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 { & .folder-name-container {
padding: 24px 36px 0; padding: $base_padding * 4 $base_padding * 6;
spacing: 12px; padding-bottom: 0;
& .folder-name-label, & .folder-name-label,
& .folder-name-entry { & .folder-name-entry {
@ -58,50 +87,30 @@ $app_icon_size: 96px;
} }
& .folder-name-entry { & .folder-name-entry {
@extend %system_entry;
width: 12em; width: 12em;
color: $system_fg_color !important;
}
/* FIXME: this is to keep the label in sync with the entry */
& .folder-name-label { padding: 5px 7px; color: $system_fg_color; }
& .edit-folder-button {
@extend %button;
padding: 0;
width: 36px;
height: 36px;
border-radius: 99px;
& > StIcon { icon-size: $base_icon_size }
} }
} }
& .icon-grid { & .icon-button {
row-spacing: $base_padding * 2; @include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);
column-spacing: $base_padding * 5; &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);}
page-padding-top: 0; &:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);}
page-padding-bottom: 0;
page-padding-left: 0;
page-padding-right: 0;
} }
& .page-indicators { & .page-indicators {
margin-bottom: 18px; margin-bottom: $base_padding * 4;
}
} }
.app-folder-dialog-container { & .page-navigation-arrow {
padding: $base_padding*2; @include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);
width: 720px; &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);}
height: 720px; &:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);}
} }
// Running app indicator (also shown in dash) & .overview-tile {
.app-well-app-running-dot { @include tile_button($bg:$system_overlay_bg_color);
height: 5px; }
width: 5px;
border-radius:5px;
margin-bottom: 8px;
background-color: $system_fg_color;
} }
// Rename popup for app folders // Rename popup for app folders
@ -113,15 +122,16 @@ $app_icon_size: 96px;
} }
// App Grid pagination indicators // App Grid pagination indicators
$page_indicator_size: 10px;
.page-indicator { .page-indicator {
padding: $base_padding $base_padding * 2 0; padding: $base_padding $base_padding * 2 0;
transition-duration:400ms; transition-duration:400ms;
.page-indicator-icon { .page-indicator-icon {
width: 10px; width: $page_indicator_size;
height: 10px; height: $page_indicator_size;
border-radius: 10px; // the same as height&width border-radius: $forced_circular_radius;
background-color: white; background-color: $system_fg_color;
transition-duration: 400ms; transition-duration: 400ms;
} }
} }
@ -134,13 +144,14 @@ $app_icon_size: 96px;
.system-action-icon { .system-action-icon {
background-color: transparentize($system_fg_color,.9); background-color: transparentize($system_fg_color,.9);
color: $system_fg_color; color: $system_fg_color;
border-radius: 99px; border-radius: $forced_circular_radius;
icon-size: $app_icon_size * 0.5; icon-size: $app_icon_size * 0.5;
@if $is_highcontrast { @if $contrast == 'high' {
box-shadow: inset 0 0 0 2px $hc_inset_color; box-shadow: inset 0 0 0 2px $hc_inset_color;
} }
} }
// page navigation
.page-navigation-hint { .page-navigation-hint {
&.dnd { &.dnd {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
@ -164,20 +175,16 @@ $app_icon_size: 96px;
} }
.page-navigation-arrow { .page-navigation-arrow {
margin: 6px; margin: $base_padding;
padding: 18px; padding: $base_padding * 3;
width: 24px; width: $medium_icon_size;
height: 24px; height: $medium_icon_size;
border-radius: 99px; border-radius: $forced_circular_radius;
transition-duration: 100ms; transition-duration: 100ms;
> StIcon { color: $system_fg_color;} > StIcon { color: $system_fg_color;}
@if $is_highcontrast { @include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);
@include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5)); &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);}
} &:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);}
&: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));}
} }

13
gnome-shell-sass/widgets/_base.scss
View file

@ -9,10 +9,19 @@
// Outline for low res icons // Outline for low res icons
.lowres-icon { .lowres-icon {
icon-shadow: 0 1px 2px rgba(black, 0.3); icon-shadow: 0 1px 2px rgba(black, 0.2);
} }
// Dropshadow for large icons // Dropshadow for large icons
.icon-dropshadow { .icon-dropshadow {
icon-shadow: 0 1px 5px rgba(black, 0.8); icon-shadow: 0 2px 4px rgba(black, 0.4);
@if $contrast == 'high' {
icon-shadow: none;
background-color: $osd_bg_color;
padding: $base_padding * 2;
border-radius: $modal_radius;
border: 2px solid $hc_inset_color;
margin: $base_padding * 3;
}
} }

34
gnome-shell-sass/widgets/_buttons.scss
View file

@ -1,19 +1,39 @@
/* Buttons */ /* Buttons */
.button { .button {
@extend %button; // that's it @extend %button;
min-height: 22px; // 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 { .icon-button {
@extend .button; // same style as buttons @extend %button;
border-radius: 99px; border-radius: $forced_circular_radius; // is circular
padding: $base_padding*2; padding: $scaled_padding * 2;
min-height: 16px; min-height: $scalable_icon_size;
StIcon { StIcon {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
// default style
&.default {
@extend %default_button;
}
// flat style
&.flat {
@extend %flat_button;
}
} }

216
gnome-shell-sass/widgets/_calendar.scss
View file

@ -2,25 +2,31 @@
// overall menu // overall menu
#calendarArea { #calendarArea {
padding: $base_padding - 2px; padding: $base_margin;
} }
// Calendar menu side column .datemenu-popover {
border-radius: $base_border_radius * 1.5 + $base_padding * 3;
}
// calendar menu side column
.datemenu-calendar-column { .datemenu-calendar-column {
spacing: $base_padding; spacing: $base_padding;
&:ltr {padding-left: $base_padding;} &:ltr { margin-left: $base_padding;}
&:rtl {padding-right: $base_padding;} &:rtl { margin-right: $base_padding;}
.datemenu-displays-box {spacing: $base_padding;} .datemenu-displays-box {
spacing: $base_padding;
}
} }
/* today button (the date) */ // today button (the date)
.datemenu-today-button { .datemenu-today-button {
@include card(flat); @extend %card_flat;
padding: $base_padding * 1.5; padding: $base_padding * 1.5;
// weekday label // weekday label
.day-label { .day-label {
@extend %heading; font-weight: bold;
} }
// date label // date label
@ -29,10 +35,11 @@
} }
} }
/* Calendar */ // the mini calendar
.calendar { .calendar {
@include card(flat); @extend %card_flat;
margin-top: 0; margin-top: 0;
padding: 0;
// month header // month header
.calendar-month-header { .calendar-month-header {
@ -40,23 +47,25 @@
// prev/next month icons // prev/next month icons
.calendar-change-month-back StIcon, .calendar-change-month-back StIcon,
.calendar-change-month-forward StIcon { .calendar-change-month-forward StIcon {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
} }
// month label // month label
.calendar-month-label { .calendar-month-label {
@extend %heading; @extend %heading;
@extend %flat_button;
color: $fg_color !important;
padding: 8px 0; padding: 8px 0;
width: 10em;
border-radius: $forced_circular_radius;
text-align: center;
} }
.pager-button { .pager-button {
@extend .button, .flat; @extend .icon-button, .flat;
padding: 0 !important; height: 2.6em;
height: 32px; width: 2.6em;
width: 32px; padding: 0;
margin: 2px;
border-radius: $base_border_radius;
transition-duration: 100ms;
} }
} }
@ -64,41 +73,48 @@
.calendar-day { .calendar-day {
@extend %numeric; @extend %numeric;
@extend %smaller; @extend %smaller;
@extend .button, .flat; @extend %flat_button;
border-radius: $forced_circular_radius;
border-radius: 99px; height: 3em;
height: 3em !important; width: 3em;
width: 3em !important;
margin: 2px; margin: 2px;
padding: 0 !important; padding: 0;
font-weight: 600; font-weight: bold;
text-align: center; text-align: center;
transition-duration: 100ms;
// day of week heading
&.calendar-day-heading {
background-color: transparent;
color: $insensitive_fg_color;
height: 0.93em !important; // force heading to be smaller height
padding-top: $base_padding !important;
margin-bottom: 0;
border-radius: 9px;
}
&.calendar-weekday {} &.calendar-weekday {}
&.calendar-weekend { &.calendar-weekend {
color: $insensitive_fg_color; color: $insensitive_fg_color;
@if $contrast == 'high' {
font-style: italic;
}
} }
&.calendar-other-month { &.calendar-other-month {
color: transparentize($insensitive_fg_color, 0.7) !important; color: transparentize($fg_color, 0.5);
font-weight: normal; font-weight: normal;
&.calendar-weekend {
color: transparentize($fg_color, 0.5);
@if $contrast == 'high' {
color: $fg_color;
}
}
@if $contrast == 'high' {
color: $fg_color;
font-style: italic; // differentiate with a font-style instead of text color
}
} }
&.calendar-today { &.calendar-today {
@extend .button, .default; @extend %default_button;
color: $selected_fg_color; /* override weekends */ // override colors above for when today is a weekend
color: $selected_fg_color !important;
&.calendar-day-with-events {
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
}
} }
&.calendar-day-with-events { &.calendar-day-with-events {
@ -107,41 +123,62 @@
} }
} }
// day of week heading
.calendar-day-heading {
@extend %numeric;
@extend %smaller;
@extend %flat_button;
font-weight: bold;
text-align: center;
margin: $base_margin;
padding: $base_padding * 0.5 $base_padding;
border-radius: $base_border_radius;
}
// week number style // week number style
.calendar-week-number { .calendar-week-number {
@include fontsize($base_font_size - 4); @extend %smaller;
font-weight: bold; font-weight: bold;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
text-align: center; text-align: center;
margin: 6px; margin: $base_padding;
padding: 0 $base_padding; padding: 0 $base_padding;
border-radius: 3px; border-radius: $base_border_radius * 0.5;
background-color: transparentize($fg_color, 0.9); background-color: transparentize($insensitive_fg_color, .8);
color: $insensitive_fg_color; color: $insensitive_fg_color;
@if $is_highcontrast {
border:1px solid $hc_inset_color;
}
} }
} }
/* Events */ // common style for the date menu widgets
.events-button,
.world-clocks-button,
.weather-button {
@extend %card;
}
// events
.events-button { .events-button {
@include card;
padding: $base_padding * 2;
.events-box { .events-box {
spacing: $base_padding;
}
.events-list {
spacing: 2 * $base_padding;
color: $fg_color;
}
// event title
.events-title { .events-title {
@extend %heading; @extend %heading;
margin-bottom: $base_margin; color: $insensitive_fg_color;
padding-bottom: $base_padding;
}
// list of events
.events-list {
spacing: $base_padding;
// container for an event
.event-box {
spacing: $base_padding;
border-radius: $base_border_radius;
.event-summary {
@extend %heading;
} }
.event-time { .event-time {
@ -151,32 +188,41 @@
} }
} }
/* World clocks */ .event-placeholder {
.world-clocks-button { color: $insensitive_fg_color;
@include card; font-style: italic;
padding: $base_padding * 2;
.world-clocks-grid {
spacing-rows: $base_padding;
spacing-columns: $base_padding * 2;
} }
}
}
}
// world clocks
.world-clocks-button {
// title // title
.world-clocks-header { .world-clocks-header {
@extend %heading; @extend %heading;
color: $insensitive_fg_color; color: $insensitive_fg_color;
// change style when no world clocks are configured
&.no-world-clocks {
color: $fg_color;
} }
}
// clocks
.world-clocks-grid {
spacing-rows: $base_padding;
spacing-columns: $base_padding * 2;
// city label // city label
.world-clocks-city { .world-clocks-city {
color: $fg_color;
} }
// timezone time // timezone time
.world-clocks-time { .world-clocks-time {
@extend %heading;
@extend %numeric; @extend %numeric;
color: $fg_color; font-weight: bold;
&:ltr {text-align: right;} &:ltr {text-align: right;}
&:rtl {text-align: left;} &:rtl {text-align: left;}
@ -189,47 +235,53 @@
color: $insensitive_fg_color; color: $insensitive_fg_color;
} }
} }
}
/* Weather */ // weather
.weather-button { .weather-button {
@include card;
padding: $base_padding * 2;
.weather-box { .weather-box {
spacing: $base_padding + $base_margin; spacing: $base_padding;
}
// header
.weather-header-box { .weather-header-box {
spacing: $base_padding; spacing: $base_padding;
}
.weather-header { .weather-header {
color: $insensitive_fg_color;
@extend %heading; @extend %heading;
color: $insensitive_fg_color;
// change style when no location is configured
&.no-location {
color: $fg_color;
}
&.location { &.location {
font-weight: normal; font-weight: normal;
} }
} }
}
// weather items
.weather-grid { .weather-grid {
spacing-rows: $base_padding; spacing-rows: $base_padding;
spacing-columns: $base_padding * 2; spacing-columns: $base_padding * 2;
}
.weather-forecast-time { .weather-forecast-time {
@extend %numeric; @extend %numeric;
@extend %caption; @include fontsize(10pt);
color: darken($fg_color,30%);
padding-top: 0.2em; padding-top: 0.2em;
padding-bottom: 0.4em; padding-bottom: 0.4em;
} }
.weather-forecast-icon { .weather-forecast-icon {
icon-size: $large_icon_size; icon-size: $large_scalable_icon_size;
margin-bottom: $base_margin;
} }
.weather-forecast-temp { .weather-forecast-temp {
@extend %heading; @extend %numeric;
font-weight: bold;
}
}
} }
} }

107
gnome-shell-sass/widgets/_dash.scss
View file

@ -4,13 +4,31 @@
$dash_background_color: $system_overlay_bg_color; $dash_background_color: $system_overlay_bg_color;
$dash_placeholder_size: 32px; $dash_placeholder_size: 32px;
$dash_padding: $base_padding*2; // 12px $dash_padding: $base_padding * 2;
$dash_edge_offset: $base_margin * 3;
$dash_border_radius: $modal_radius + $dash_padding; $dash_border_radius: $modal_radius + $dash_padding;
$dash_spacing: $base_margin * 0.5;
// container for the dash // container for the dash
#dash { #dash {
@extend %caption; margin-top: $dash_edge_offset;
margin-top: $dash_padding;
// background behind item container
.dash-background {
background-color: $dash_background_color;
border-radius: $dash_border_radius;
padding-top: $dash_padding;
padding-bottom: $dash_padding;
padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below
padding-right: $dash_padding - $dash_spacing;
@if $contrast == 'high' {
@include draw_hc_inset($width: 2px);
}
}
// items on the dash
.dash-item-container {
.placeholder { .placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@ -24,55 +42,54 @@ $dash_border_radius: $modal_radius + $dash_padding;
height: $dash_placeholder_size; height: $dash_placeholder_size;
} }
// Running app indicator (also shown in app grid) // IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
.app-well-app-running-dot { // as such the %tile style is overriden and button styles are applied to the child class .overview-icon
margin-bottom: 14px; // hardcoded .show-apps,
.overview-tile {
// remove styles
@extend %reset;
margin: 0 $dash_spacing;
padding-bottom: $dash_edge_offset; // align with other items
$fg:$system_fg_color;
$bg:$dash_background_color;
.overview-icon {
@extend %tile;
@include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);
}
&:focus .overview-icon { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
&:hover .overview-icon { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
&:active .overview-icon { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
&:checked .overview-icon { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
}
// running app dot
.app-grid-running-dot {
// manually position the dot within the dash item
margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
} }
} }
// background of the dash behind app icons // separator between pinned and running apps
.dash-background {
background-color: $dash_background_color;
border-radius: $dash_border_radius;
padding: $dash_padding;
spacing: $base_padding;
margin-bottom: $dash_padding;
@if $is_highcontrast {
border: 2px solid $hc_inset_color;
box-shadow:none;
}
}
// items on the dash
.dash-item-container {
> * {margin: 0 2px;}
&:ltr{&:first-child {margin-left: 0;}}
&:rtl{&:first-child {margin-right: 0;}}
// each app item on the dash
.app-well-app .overview-icon {
padding: $base_padding;
border-radius: $base_border_radius*2;
}
// show apps button
.show-apps { @include overview_icon($system_fg_color);}
.show-apps, .app-well-app {
padding-bottom: $dash_padding;
color: $system_fg_color;
}
}
// separator between favourites and running apps
.dash-separator { .dash-separator {
width: 1px; width: 1px;
margin: 0 $base_margin; margin-left:$base_margin;
margin-right:$base_margin;
background-color: $system_borders_color; background-color: $system_borders_color;
margin-bottom: $dash_padding;
@if $is_highcontrast { @if $contrast == 'high' {
width: 2px; width: 2px;
background-color: $hc_inset_color;
}
}
// make sure all dash components have same margin from screen edge
.dash-separator,
.dash-background {
margin-bottom: $dash_edge_offset;
} }
} }

36
gnome-shell-sass/widgets/_dialogs.scss
View file

@ -10,8 +10,8 @@
box-shadow: inset 0 0 0 1px $outer_borders_color; box-shadow: inset 0 0 0 1px $outer_borders_color;
.modal-dialog-content-box { .modal-dialog-content-box {
margin: 32px 40px; margin: $base_margin * 8 $base_margin * 10;
spacing: 32px; spacing: $base_margin * 8;
max-width: 28em; max-width: 28em;
} }
@ -32,7 +32,7 @@
/* Message Dialog */ /* Message Dialog */
.message-dialog-content { .message-dialog-content {
spacing: 18px; spacing: $base_padding * 3;
.message-dialog-title { .message-dialog-title {
text-align: center; text-align: center;
@ -45,7 +45,7 @@
/* Dialog List */ /* Dialog List */
.dialog-list { .dialog-list {
spacing: 18px; spacing: $base_padding * 3;
.dialog-list-title { .dialog-list-title {
text-align: center; text-align: center;
@ -71,8 +71,8 @@
/* Run Dialog */ /* Run Dialog */
.run-dialog { .run-dialog {
.modal-dialog-content-box { .modal-dialog-content-box {
margin-top: 24px; margin-top: $base_padding * 4;
margin-bottom: 14px; margin-bottom: $base_padding * 2;
} }
.run-dialog-entry { width: 20em; } .run-dialog-entry { width: 20em; }
.run-dialog-description { .run-dialog-description {
@ -88,25 +88,25 @@
width: 28em; width: 28em;
.modal-dialog-content-box { .modal-dialog-content-box {
margin-bottom: 24px; margin-bottom: $base_margin * 6;
} }
} }
.prompt-dialog-password-grid { .prompt-dialog-password-grid {
spacing-rows: 8px; spacing-rows: $base_margin * 2;
spacing-columns: 4px; spacing-columns: $base_margin;
.prompt-dialog-password-entry { .prompt-dialog-password-entry {
width: auto; width: auto;
// 4px (spacing) + 16px (spinner-width) // 4px (spacing) + 16px (spinner-width)
&:ltr { margin-left: 20px; } &:ltr { margin-left: $base_margin+$base_icon_size; }
&:rtl { margin-right: 20px; } &:rtl { margin-right: $base_margin+$base_icon_size; }
} }
} }
.prompt-dialog-password-layout { .prompt-dialog-password-layout {
spacing: 8px; spacing: $base_margin * 2;
} }
.prompt-dialog-password-entry { .prompt-dialog-password-entry {
@ -129,16 +129,16 @@
.polkit-dialog-user-layout { .polkit-dialog-user-layout {
text-align: center; text-align: center;
spacing: 8px; spacing: $base_margin * 2;
margin-bottom: 6px; margin-bottom: $base_padding;
.polkit-dialog-user-root-label { color: $warning_color; } .polkit-dialog-user-root-label { color: $warning_color; }
} }
/* Audio selection dialog */ /* Audio selection dialog */
.audio-device-selection-dialog { .audio-device-selection-dialog {
.modal-dialog-content-box { margin-bottom: 28px; } .modal-dialog-content-box { margin-bottom: $base_margin * 7; }
.audio-selection-box { spacing: 20px; } .audio-selection-box { spacing: $base_margin * 5; }
} }
.audio-selection-device { .audio-selection-device {
@ -151,8 +151,8 @@
} }
.audio-selection-device-box { .audio-selection-device-box {
padding: 20px; padding: $base_margin * 5;
spacing: 20px; spacing: $base_margin * 5;
} }
.audio-selection-device-icon { .audio-selection-device-icon {

10
gnome-shell-sass/widgets/_entries.scss
View file

@ -4,17 +4,17 @@ StEntry {
@extend %entry; @extend %entry;
StIcon.capslock-warning { StIcon.capslock-warning {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
warning-color: $warning_color; warning-color: $warning_color;
padding: 0 4px; padding: 0 $base_margin;
} }
StIcon.peek-password { StIcon.peek-password {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
padding: 0 4px; padding: 0 $base_margin;
} }
StLabel.hint-text { StLabel.hint-text {
margin-left: 2px; margin-left: $base_margin * 0.5;
} }
} }

10
gnome-shell-sass/widgets/_hotplug.scss
View file

@ -1,10 +0,0 @@
// hotplug
.hotplug-notification-item {
@extend %bubble_button;
}
.hotplug-notification-item-icon {
icon-size: 24px;
padding: 0 4px;
}

57
gnome-shell-sass/widgets/_keyboard.scss
View file

@ -1,7 +1,7 @@
/* On-screen Keyboard */ /* On-screen Keyboard */
$key_size: 1.2em; $key_size: 1.2em;
$key_border_radius: $base_border_radius + 4px; // 12px $key_border_radius: $base_border_radius * 1.25;
$key_bg_color: darken($osd_fg_color, 70%); $key_bg_color: darken($osd_fg_color, 70%);
// $default_key_bg_color: darken($key_bg_color, 4%); // $default_key_bg_color: darken($key_bg_color, 4%);
$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%)); $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
@ -31,8 +31,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// the keys // the keys
.keyboard-key { .keyboard-key {
@include fontsize($base_font_size + 5pt);
@include fontsize($base_font_size + 5);
font-weight: bold; font-weight: bold;
min-height: $key_size; min-height: $key_size;
min-width: $key_size; min-width: $key_size;
@ -41,12 +40,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
border-radius: $key_border_radius; border-radius: $key_border_radius;
box-shadow: 0 1px 0 0 $shadow_color; 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);} &:focus { @include button(focus);}
&:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); } &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
&:grayed { //FIXMEy &:grayed { //FIXMEy
background-color: darken($bg_color, 3%); background-color: darken($bg_color, 3%);
@ -56,10 +55,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// non-character keys // non-character keys
&.default-key { &.default-key {
@include keyboard_key(normal, $default_key_bg_color, $osd_fg_color); @include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
&:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);} &:hover { @include button(hover, $c:$default_key_bg_color, $tc:$osd_fg_color);}
&:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);} &:active { @include button(active, $c:$default_key_bg_color, $tc:$osd_fg_color);}
&:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);} &:checked { @include button(checked, $c:$default_key_bg_color, $tc:$osd_fg_color);}
border-radius: $key_border_radius; border-radius: $key_border_radius;
// keys that may be latched: ctrl/alt/shift // keys that may be latched: ctrl/alt/shift
@ -71,10 +70,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// enter key is suggested-action // enter key is suggested-action
&.enter-key { &.enter-key {
@include keyboard_key(normal, $selected_bg_color, $selected_fg_color); @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
&:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);} &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
&:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);} &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
&:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);} &:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
border-radius: $key_border_radius; border-radius: $key_border_radius;
color: $osd_fg_color; color: $osd_fg_color;
} }
@ -92,7 +91,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
} }
// size of icons on keys // size of icons on keys
StIcon { icon-size: 24px; } StIcon { icon-size: $medium_icon_size; }
} }
// long press on a key popup // long press on a key popup
@ -107,12 +106,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
padding: $base_padding; padding: $base_padding;
.keyboard-key { .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);} &:focus { @include button(focus);}
&:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); } &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
border-radius:$key_border_radius; border-radius:$key_border_radius;
} }
@ -136,7 +135,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// suggestions // suggestions
.word-suggestions { .word-suggestions {
@include fontsize($base_font_size + 1); @extend %title_4;
spacing: 12px; spacing: 12px;
min-height: 17pt; min-height: 17pt;
padding: $base_padding * 2; padding: $base_padding * 2;
@ -146,14 +145,14 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
StButton { StButton {
margin: 0 3px; margin: 0 3px;
min-width: 32px; min-width: 32px;
border-radius: $base_border_radius - 2px; border-radius: 4px;
padding: 0px $base_padding * 3; 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);} &:focus { @include button(focus);}
&:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); } &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
} }
} }

244
gnome-shell-sass/widgets/_login-lock.scss
View file

@ -1,23 +1,32 @@
$_gdm_bg: $system_bg_color; $_gdm_bg: $system_base_color;
$_gdm_fg: $system_fg_color; $_gdm_fg: $system_fg_color;
$_gdm_dialog_width: 23em; $_gdm_dialog_width: 25em;
// common style for gdm and lockscreen // common style for login and lockscreen
.login-dialog, .login-dialog,
.unlock-dialog { .unlock-dialog {
color: $_gdm_fg;
.caps-lock-warning-label, .caps-lock-warning-label,
.login-dialog-message-warning { .login-dialog-message-warning {
color: $_gdm_fg; color: $_gdm_fg;
} }
.login-dialog-prompt-layout {
width: $_gdm_dialog_width;
spacing: $base_padding * 1.5;
}
} }
/* Login Dialog */ // GDM Login Dialog
// uses dark grey system styles
.login-dialog { .login-dialog {
background-color: $_gdm_bg; .login-dialog-prompt-entry {
@extend %system_entry;
}
} }
// buttons // buttons on login screen
.login-dialog-button { .login-dialog-button {
&.cancel-button, &.cancel-button,
@ -33,45 +42,84 @@ $_gdm_dialog_width: 23em;
} }
.login-dialog-button-box { .login-dialog-button-box {
width: $_gdm_dialog_width;
spacing: $base_padding * 2; spacing: $base_padding * 2;
} }
.conflicting-session-dialog-content {
spacing: 20px;
.conflicting-session-dialog-title {
text-align: center;
@extend %title_2;
margin-bottom: 5px;
}
.conflicting-session-dialog-desc {
text-align: center;
}
.conflicting-session-dialog-desc-warning {
text-align: center;
color: $warning_color;
}
}
.login-dialog-logo-bin { .login-dialog-logo-bin {
margin: 3em 0; margin: 3em 0;
} }
.login-dialog-banner { color: darken($_gdm_fg,10%); }
.login-dialog-banner-view { max-width: $_gdm_dialog_width; } .login-dialog-banner-view {
.login-dialog-message { text-align: center; } max-width: $_gdm_dialog_width;
.login-dialog-user-selection-box { padding: 100px 0px; }
.login-dialog-banner {
color: darken($_gdm_fg,10%);
}
}
.login-dialog-message {
text-align: center;
}
.login-dialog-user-selection-box {
// padding to ensure the box doesn't overlap the panel
padding-top: 4em;
padding-bottom: 8em;
}
.login-dialog-not-listed-label { .login-dialog-not-listed-label {
@include fontsize($base_font_size); @extend %heading;
font-weight: bold; padding: $base_padding;
color: darken($_gdm_fg,30%); }
padding: $base_padding*2;
.login-dialog-not-listed-button {
.login-dialog-not-listed-button:focus &, // use button styling
.login-dialog-not-listed-button:hover & { @extend %button_common;
color: $_gdm_fg; @include button(normal, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);
} &:focus { @include button(focus, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
.login-dialog-not-listed-button:focus & { &:hover { @include button(hover, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
text-decoration: underline; &:active { @include button(active, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
}
padding: 0 $base_padding;
margin: $base_padding;
}
// Authentication methods list
.login-dialog-auth-list-view {
-st-vfade-offset: 3em;
} }
.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
.login-dialog-auth-list { .login-dialog-auth-list {
spacing: 6px; spacing: $base_padding;
margin-left: 2em; margin-left: 2em;
} }
.login-dialog-auth-list-title { .login-dialog-auth-list-title {
margin-left: 2em; margin-left: 2em;
} }
.login-dialog-auth-list-item { .login-dialog-auth-list-item {
border-radius: $base_border_radius * 2; border-radius: $base_border_radius * 2;
padding: 4px; padding: $base_margin;
color: darken($_gdm_fg,30%); color: darken($_gdm_fg,30%);
&:focus, &:selected { &:focus, &:selected {
@ -81,84 +129,69 @@ $_gdm_dialog_width: 23em;
} }
.login-dialog-auth-list-label { .login-dialog-auth-list-label {
@include fontsize($base_font_size + 2); @extend %title_4;
font-weight: bold; &:ltr { padding-left: $base_padding * 2.5; text-align: left; }
padding-left: 15px; &:rtl { padding-right: $base_padding * 2.5; text-align: right; }
&:ltr { padding-left: 14px; text-align: left; }
&:rtl { padding-right: 14px; text-align: right; }
} }
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
// User list
.login-dialog-user-list-view {
width: $_gdm_dialog_width;
-st-vfade-offset: 3em;
.login-dialog-user-list { .login-dialog-user-list {
spacing: 12px; margin: 0 $base_margin * 2; // margin to account for scrollbar
width: $_gdm_dialog_width; spacing: $base_padding * 2;
.login-dialog-user-list-item { .login-dialog-user-list-item {
border-radius: $base_border_radius + 4px; // use button styling
padding: $base_padding; @extend %button_common;
background-color: transparentize($_gdm_fg, .95); @include button(normal, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);
color: $_gdm_fg; &:selected,
&:focus { @include button(focus, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
&:hover { @include button(hover, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
&:active { @include button(active, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
@if $is_highcontrast { border-radius: $modal_radius;
box-shadow:inset 0 0 0 1px $hc_inset_color;; padding: $base_padding * 1.5;
}
.user-widget .user-icon { // create border for indicating logged in user
border: 4px solid transparent; .user-icon {
border: 2px solid transparent;
} }
.login-dialog-timed-login-indicator { .login-dialog-timed-login-indicator {
height: 2px; height: 2px;
margin-top: 6px; margin-top: $base_padding;
background-color: darken($_gdm_fg, 30%); background-color: transparentize($_gdm_fg, .3);
}
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
}
&:expanded .login-dialog-user-list-item {
transition-duration: 300ms;
transition-timing-function: ease;
&:hover {
background-color: transparentize($_gdm_fg, .9);
color: $_gdm_fg;
}
&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:hover { background-color: lighten($selected_bg_color,5%); }
} }
&:logged-in { &:logged-in {
.user-widget .user-icon { // color border for logged-in user
.user-icon {
border-color: $selected_bg_color; border-color: $selected_bg_color;
StIcon {
background-color: transparentize($selected_bg_color, .7);
}
}
} }
} }
} }
} }
.login-dialog-prompt-layout { // Screen Shield
spacing: $base_padding*2; // a.k.a. the lockscreen, uses transparent styles
width: 26em;
}
.login-dialog-prompt-entry {
@extend %system_entry;
}
/* Screen Shield */
// a.k.a. the lockscreen
.unlock-dialog { .unlock-dialog {
background-color: transparent; background-color: transparent;
// %system_entry style override to have neutral focus color with wallpaper background
.login-dialog-prompt-entry { .login-dialog-prompt-entry {
&:focus { @include entry(focus, $c:$system_fg_color, $fc:transparentize($system_fg_color, 0.5));} @extend %lockscreen_entry;
}
.button,
.icon-button {
@extend %lockscreen_button;
} }
} }
@ -178,7 +211,7 @@ $_gdm_dialog_width: 23em;
.unlock-dialog-clock-time { .unlock-dialog-clock-time {
@extend %numeric; @extend %numeric;
@include fontsize(72); @include fontsize(72pt);
font-weight: 200; font-weight: 200;
} }
@ -205,8 +238,8 @@ $_gdm_dialog_width: 23em;
} }
.unlock-dialog-notifications-container { .unlock-dialog-notifications-container {
margin: 12px; margin: $base_margin * 3;
spacing: 6px; spacing: $base_padding;
width: $_gdm_dialog_width; width: $_gdm_dialog_width;
background-color: transparent; background-color: transparent;
@ -217,7 +250,7 @@ $_gdm_dialog_width: 23em;
.notification, .notification,
.unlock-dialog-notification-source { .unlock-dialog-notification-source {
padding: 12px 16px; padding: $base_margin * 3 $base_margin * 4;
border: none; border: none;
background-color: transparentize($_gdm_fg,0.9); background-color: transparentize($_gdm_fg,0.9);
color: $_gdm_fg; color: $_gdm_fg;
@ -227,44 +260,52 @@ $_gdm_dialog_width: 23em;
} }
} }
.unlock-dialog-notification-icon {
icon-size: $large_icon_size;
}
.unlock-dialog-notification-label { .unlock-dialog-notification-label {
padding-left: 12px; padding-left: $base_padding * 2;
padding-right: 0; padding-right: 0;
&:rtl { padding-right: 12px; padding-left: 0; } &:rtl { padding-right: $base_padding * 2; padding-left: 0; }
} }
.unlock-dialog-notification-count-text { .unlock-dialog-notification-count-text {
font-weight: bold; font-weight: bold;
padding: 0 12px; padding: 0 $base_padding * 2;
color: $_gdm_fg; color: $_gdm_fg;
background-color: transparentize($_gdm_fg, 0.9); background-color: transparentize($_gdm_fg, .9);
border-radius: 99px; border-radius: $forced_circular_radius;
} }
.login-dialog,
.unlock-dialog {
// User Widget // User Widget
.user-widget { .user-widget {
// common
.user-widget-label { .user-widget-label {
color: $_gdm_fg; color: $_gdm_fg;
} }
.user-icon {
background-color: transparentize($_gdm_fg, .87);
color: $_gdm_fg;
@if $contrast == 'high' {
background-color: transparentize($_gdm_fg, .7);
box-shadow:inset 0 0 0 1px $hc_inset_color;
}
}
// layout of the user list // layout of the user list
&.horizontal { &.horizontal {
spacing: $base_padding * 3; spacing: $base_padding * 3;
.user-widget-label { .user-widget-label {
@extend %title_3; @extend %title_3;
} }
.user-icon {
& StIcon {
padding: 12px;
icon-size: $base_icon_size*2;
width: $base_icon_size*3;
height: $base_icon_size*3;
background-color: transparentize($_gdm_fg, 0.9);
}
}
} }
// layout of the login prompt // layout of the login prompt
@ -281,9 +322,8 @@ $_gdm_dialog_width: 23em;
icon-size: $base_icon_size * 10; icon-size: $base_icon_size * 10;
& StIcon { & StIcon {
padding: 32px; padding: $base_padding * 4;
icon-size: $base_icon_size*4; }
background-color: transparentize($_gdm_fg, 0.9);
} }
} }
} }

11
gnome-shell-sass/widgets/_looking-glass.scss
View file

@ -9,13 +9,13 @@
border-radius: $modal_radius; border-radius: $modal_radius;
margin-top: $base_margin; margin-top: $base_margin;
border-top-width: 0; border: 2px solid transparent;
padding: $base_padding; padding: $base_padding;
spacing: $base_padding; spacing: $base_padding;
box-shadow: 0 2px 4px 0 $shadow_color; box-shadow: 0 2px 4px 0 $shadow_color;
@if $is_highcontrast { @if $contrast == 'high' {
border: 2px solid $hc_inset_color; border-color: $hc_inset_color;
background-color: $osd_bg_color; background-color: $osd_bg_color;
box-shadow:none; box-shadow:none;
} }
@ -54,7 +54,7 @@
StEntry { StEntry {
@extend %osd_entry; @extend %osd_entry;
min-height: 22px; min-height: to_em(22px);
} }
.shell-link { .shell-link {
@ -97,8 +97,7 @@
} }
.lg-extension { .lg-extension {
padding: $base_padding*2; @extend %card;
@include card;
} }
.lg-extension-name { .lg-extension-name {

180
gnome-shell-sass/widgets/_message-list.scss
View file

@ -12,11 +12,13 @@
.message-list-placeholder { .message-list-placeholder {
@extend %title_2; @extend %title_2;
color: $insensitive_fg_color; color: transparentize($fg_color, .75);
@if $contrast == 'high' {
color: transparentize($fg_color, .5);
}
// icon size and color // icon size and color
> StIcon { > StIcon {
icon-size: $base_icon_size*3; // 48px icon-size: 96px; // non-em asset size
margin-bottom: $base_margin * 3; margin-bottom: $base_margin * 3;
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
@ -24,24 +26,23 @@
} }
.message-list-sections { .message-list-sections {
spacing: $base_padding;
margin: 0;
padding-bottom: $base_padding;
// to account for scrollbar // to account for scrollbar
&:ltr {margin-right: $base_margin * 3; } &:ltr {margin-right: $base_margin * 3; }
&:rtl {margin-left: $base_margin * 3;} &:rtl {margin-left: $base_margin * 3;}
spacing: $base_padding * 2;
} }
.message-list-section, .message-list-section,
.message-list-section-list { .message-list-section-list {
spacing: $base_padding; spacing: $base_padding * 2;
} }
// do-not-disturb + clear button // do-not-disturb + clear button
.message-list-controls { .message-list-controls {
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_padding; padding: $base_padding * 2;
padding-bottom: $base_padding;
spacing: $base_padding; spacing: $base_padding;
@extend %heading; @extend %heading;
@ -62,73 +63,112 @@
// message bubbles // message bubbles
.message { .message {
@include card; @extend %card;
padding: 0;
margin: 0;
border-radius: $modal_radius;
// icon container // subtract side padding to accommodate the close button's border
.message-icon-bin { &:ltr { padding-right:-2px; };
padding: ($base_padding * 3); &:rtl { padding-left:-2px; };
&:ltr {padding-right:$base_padding;} // message header
&:rtl {padding-left:$base_padding;} .message-header {
padding: 0 $scaled_padding;
margin: $base_padding;
margin-bottom: 0;
spacing: $base_padding;
color: $insensitive_fg_color;
// icon size and color // header source icon
> StIcon { .message-source-icon {
icon-size: $large_icon_size; // 32px icon-size: $scalable_icon_size; // 16px
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
// fallback // box that contains the source icon, source name and timestamp of the message
> .fallback-app-icon { .message-header-content {
width: $base_icon_size; spacing: $base_padding;
height: $base_icon_size; min-height: to_em(24px);
} padding-bottom: $base_padding;
}
// content // header source title
.message-content { .message-source-title {
spacing: 4px;
padding: ($base_padding*1.5);
margin-bottom: $base_margin*2;
}
// title
.message-title {
font-weight: bold; font-weight: bold;
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-top: 0.57em;
} }
// secondary container in title box // Time label
.message-secondary-bin { .event-time {
padding: 0 $base_margin * 2; @extend %caption;
color: $insensitive_fg_color;
// notification time stamp // Add bottom padding to align the app name with the time horizontally
> .event-time { padding-bottom: to_em(1px);
color: transparentize($fg_color, 0.5);
@include fontsize($base_font_size - 2);
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-bottom: 0.13em;
&:ltr { text-align: right }; &:ltr { text-align: right };
&:rtl { text-align: left }; &:rtl { text-align: left };
} }
} }
// close button // buttons in the message header
.message-expand-button,
.message-close-button { .message-close-button {
@extend .icon-button;
color: $fg_color; color: $fg_color;
background-color: transparentize($fg_color, 0.8); background-color: transparentize($fg_color, .9);
border-radius: 99px; padding: 4px;
padding: $base_padding - 1px; &:hover { background-color: transparentize($fg_color, .81);}
margin: 1px; &:active,
&:hover {background-color: transparentize($fg_color, 0.7);} &:active:hover { background-color: transparentize($fg_color, .76);}
&:active {background-color: transparentize($fg_color, 0.8);} &:insensitive { background-color: transparentize($fg_color, .93);}
> StIcon { icon-size: $base_icon_size; }
} }
// body .message-expand-button {
.message-body {color: darken($fg_color, 10%);} padding: 6px;
&:ltr { margin-right: $base_padding; }
&:rtl { margin-left: $base_padding; }
}
}
// container for message contents
.message-box {
padding: $base_padding;
margin: $base_padding;
margin-top: 0;
spacing: $base_padding;
// icon of the message
.message-icon {
&:ltr { margin-right:$base_padding;}
&:rtl { margin-left:$base_padding;}
// icon size and color
icon-size: $base_icon_size * 3; // 48px
-st-icon-style: symbolic;
&.message-themed-icon {
border-radius: $forced_circular_radius; // is circular
background-color: transparentize($fg_color, 0.8);
icon-size: $base_icon_size;
min-width: $base_icon_size * 3;
min-height: $base_icon_size * 3;
}
}
// If the header isn't displayed we need more top margin
&:first-child {
margin-top: $base_padding * 2;
}
// text of the message
.message-content {
spacing: $base_margin;
// message title
.message-title {
font-weight: bold;
}
}
}
} }
// URLs in messages // URLs in messages
@ -139,12 +179,12 @@
/* Media Controls */ /* Media Controls */
.message-media-control { .message-media-control {
padding: 0 $base_padding * 3; padding: 0 $base_padding * 3;
margin: $base_padding*2 0;
border-radius: $base_border_radius; border-radius: $base_border_radius;
color: $fg_color; color: $fg_color;
border: 1px solid transparent;
@if $is_highcontrast { @if $contrast == 'high' {
border: 1px solid $hc_inset_color; border-color: $hc_inset_color;
margin: $base_padding * 2 2px; margin: $base_padding * 2 2px;
} }
@ -161,30 +201,22 @@
&:insensitive { &:insensitive {
color: lighten($insensitive_fg_color, 5%); color: lighten($insensitive_fg_color, 5%);
@if $is_highcontrast {
@if $contrast == 'high' {
border-color: transparent; border-color: transparent;
} }
} }
// fix margin for last button
&:last-child:ltr { margin-right: $base_margin*3; }
&:last-child:rtl { margin-left: $base_margin*3; }
& StIcon { icon-size: $base_icon_size; } & StIcon { icon-size: $base_icon_size; }
} }
.media-message {
// album-art // album-art
.media-message-cover-icon { .message-icon {
icon-size: $base_icon_size*3 !important; // 48px border-radius: $base_border_radius !important;
border-radius: $base_border_radius;
// when there is no artwork &.message-themed-icon {
&.fallback {
color: darken($fg_color, 17%);
background-color: $bg_color;
border: 1px solid transparent;
border-radius: $base_border_radius;
icon-size: $large_icon_size !important; // 32px icon-size: $large_icon_size !important; // 32px
padding: ($base_padding*2 + 2); // 16px }
} }
} }

16
gnome-shell-sass/widgets/_misc.scss
View file

@ -7,21 +7,21 @@
// User icon // User icon
.user-icon { .user-icon {
background-size: contain; background-size: contain;
border-radius: $forced_circular_radius;
icon-size: $base_icon_size * 4;
background-color: transparentize($osd_fg_color,0.95);
color: $osd_fg_color; color: $osd_fg_color;
border-radius: 99px;
icon-size: $base_icon_size * 4; // 64px
& StIcon { & StIcon {
background-color: transparentize($osd_fg_color,0.95); padding: $base_padding * 2;
border-radius: 99px;
padding: $base_padding * 2 ; // 12px
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
} }
&.user-avatar { &.user-avatar {
box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9); box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9);
@if $is_highcontrast {
box-shadow:inset 0 0 0 1px $hc_inset_color; @if $contrast == 'high' {
@include draw_hc_inset();
} }
} }
} }

47
gnome-shell-sass/widgets/_notifications.scss
View file

@ -11,50 +11,15 @@ $notification_banner_width: 34em;
border-radius: $modal_radius; border-radius: $modal_radius;
margin: $base_margin; margin: $base_margin;
.notification-actions { @if $contrast == 'high' {
@include draw_hc_inset();
}
}
.notification-buttons-bin {
spacing: 0; spacing: 0;
} }
.notification-button { .notification-button {
@extend %bubble_button; @extend %bubble_button;
} }
}
// counter
.summary-source-counter {
font-size: $base_font_size - 1pt;
font-weight: bold;
height: 1.6em;
width: 1.6em;
-shell-counter-overlap-x: 3px;
-shell-counter-overlap-y: 3px;
background-color: $selected_bg_color;
color: $selected_fg_color;
border: 2px solid $fg_color;
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
}
// chat bubbles
.chat-body { spacing: 5px; }
.chat-response { margin: 5px; }
.chat-log-message { color: darken($fg_color,10%); }
.chat-new-group { padding-top: 1em; }
.chat-received {
padding-left: 4px;
&:rtl { padding-left: 0px; padding-right: 4px; }
}
.chat-sent {
padding-left: 18pt;
color: lighten($fg_color, 15%);
&:rtl { padding-left: 0; padding-right: 18pt; }
}
.chat-meta-message {
padding-left: 4px;
@include fontsize($base_font_size - 2);
font-weight: bold;
color: lighten($fg_color,18%);
&:rtl { padding-left: 0; padding-right: 4px; }
}

28
gnome-shell-sass/widgets/_osd.scss
View file

@ -7,43 +7,45 @@ $osd_levelbar_height:6px;
@extend %heading; @extend %heading;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
spacing: $base_padding * 2; // 12px spacing: $base_padding * 2;
padding: $base_padding * 2 $base_padding * 3; padding: $base_padding * 2 $base_padding * 3;
& > * { spacing: 8px; } & > * { spacing: $base_margin * 2; }
margin-bottom: 4em; margin-bottom: 4em;
StIcon { icon-size: $large_icon_size;} StIcon { icon-size: $large_icon_size;}
StLabel { StLabel {
&:ltr { margin-right: 6px; } &:ltr { margin-right: $base_padding; }
&:rtl { margin-left: 6px; } &:rtl { margin-left: $base_padding; }
} }
.level { .level {
margin-bottom: 4px; margin-bottom: $base_margin;
&:first-child { margin-bottom: 0px; } &:first-child { margin-bottom: 0; }
height: $osd_levelbar_height; min-width: 160px;
min-width:$base_icon_size * 10;
-barlevel-height: $osd_levelbar_height; -barlevel-height: $osd_levelbar_height;
-barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9)); -barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
-barlevel-active-background-color: $osd_fg_color; -barlevel-active-background-color: $osd_fg_color;
-barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 3px; -barlevel-overdrive-separator-width: $base_padding * 0.5;
&:ltr { margin-right: 6px; } &:ltr { margin-right: $base_padding; }
&:rtl { margin-left: 6px; } &:rtl { margin-left: $base_padding; }
} }
} }
// Monitor number label // Monitor number label
.osd-monitor-label { .osd-monitor-label {
@extend %osd_panel; background-color: $selected_bg_color;
color: $selected_fg_color;
border-radius: $modal_radius; border-radius: $modal_radius;
font-size: 3em; font-size: 3em;
font-weight: bold; font-weight: bold;
font-feature-settings: "tnum";
margin: $base_margin * 3; margin: $base_margin * 3;
padding: $base_padding * 2;
text-align: center; text-align: center;
min-width: 1.3em; min-width: 1.5em;
} }
/* Pad OSD */ /* Pad OSD */

2
gnome-shell-sass/widgets/_overview.scss
View file

@ -9,5 +9,5 @@
} }
.overview-controls { .overview-controls {
padding-bottom: 32px; padding-bottom: $base_margin * 8;
} }

109
gnome-shell-sass/widgets/_panel.scss
View file

@ -1,13 +1,12 @@
/* Top Bar */ /* Top Bar */
// a.k.a. the panel // a.k.a. the panel
$privacy_indicator_color: $red_3; $privacy_indicator_color: if($variant == 'light', $orange_4, $red_3);
$recording_indicator_color: $red_3;
$panel_bg_color: if($variant == 'light', $light_3, $dark_4); $transparent_panel_fg_color: $light_1; // always white for transparent lock screens
$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%)); $system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview
$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
$panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels
$panel_height: 2.2em; $panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration $panel_transition_duration: 250ms; // same as the overview transition duration
@ -17,44 +16,49 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
height: $panel_height; height: $panel_height;
@extend %numeric; @extend %numeric;
transition-duration: $panel_transition_duration; transition-duration: $panel_transition_duration;
box-shadow: inset 0 -1px 0 0 $panel_border_color;
// panel menus // panel menus
.panel-button { .panel-button {
@include panel_button($bg: $panel_fg_color, $border_radius: 3px); @include panel_button();
-natural-hpadding: 6px; -natural-hpadding: 6px;
-minimum-hpadding: 4px; -minimum-hpadding: 4px;
// status area icons // status area icons
.system-status-icon { .system-status-icon {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
padding: ($base_padding - 1px) 0px ($base_padding - 1px) 0px; padding: 0;
margin: 0 $base_margin; margin: 0 $base_margin;
} }
.panel-status-indicators-box .system-status-icon,
.panel-status-menu-box .system-status-icon {
margin: 0;
}
// app menu icon // app menu icon
.app-menu-icon { .app-menu-icon {
-st-icon-style: symbolic; -st-icon-style: symbolic;
// dimensions of the icon are hardcoded // dimensions of the icon are hardcoded
} }
// reduce margin between icons in combined menu
.panel-status-menu-box,
.panel-status-indicators-box {
spacing: $base_margin;
> .system-status-icon {
padding: 0;
}
}
&#panelActivities { &#panelActivities {
-natural-hpadding: 10px; -natural-hpadding: 10px;
-minimum-hpadding: 8px; -minimum-hpadding: 8px;
& StBoxLayout { & StBoxLayout {
padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
spacing: 5px; spacing: 5px;
} }
& .workspace-dot { & .workspace-dot {
border-radius: 999px; border-radius: $forced_circular_radius;
min-width: 8px; min-width: $scalable_icon_size * 0.5;
min-height: 8px; min-height: $scalable_icon_size * 0.5;
background-color: $panel_fg_color; background-color: $panel_fg_color;
} }
} }
@ -63,11 +67,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator, &.screen-recording-indicator,
&.screen-sharing-indicator { &.screen-sharing-indicator {
StBoxLayout { StBoxLayout {
spacing: $base_padding; spacing: $scaled_padding;
} }
StIcon { StIcon {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
&:first-child { &:first-child {
margin-left: 3px; margin-left: 3px;
@ -76,11 +80,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
} }
&.screen-recording-indicator { &.screen-recording-indicator {
@include panel_button($screenshot_ui_button_red, $flat: false); @include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled);
} }
&.screen-sharing-indicator { &.screen-sharing-indicator {
@include panel_button($privacy_indicator_color, $flat: false); @include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled);
} }
// clock // clock
@ -88,7 +92,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// The clock display needs to have the background on .clock because // The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background // we want to exclude the do-not-disturb indicator from the background
// see _drawing.scss for override details // see _drawing.scss for override details
@include panel_button($highlighted_child: true, $child_class:".clock", $border_radius: 3px); @include panel_button($highlighted_child: true, $child_class: '.clock');
-natural-hpadding: 0px; -natural-hpadding: 0px;
-minimum-hpadding: 0px; -minimum-hpadding: 0px;
padding-left: 0px; padding-left: 0px;
@ -97,45 +101,66 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
.clock { .clock {
// the highlighted child // the highlighted child
} }
.messages-indicator {
icon-size: $scalable_icon_size;
}
} }
} }
// transparent panel on lock & login screens // transparent panel on overview, lock & login screens
&:overview,
&.unlock-screen, &.unlock-screen,
&.login-screen, &.login-screen {
&:overview {
background-color: transparent; background-color: transparent;
box-shadow: none;
// unfortunate duplication to keep indicator style in these states
.panel-button { .panel-button {
@include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $border_radius: 3px); &.screen-recording-indicator {
@include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled);
}
&.screen-sharing-indicator {
@include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled);
}
}
}
// use transparent text styles for lock & login screen panels
&.unlock-screen,
&.login-screen {
.panel-button {
@include panel_button($fg:$transparent_panel_fg_color);
// clock
&.clock-display {
@include panel_button($fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class: '.clock');
}
}
}
// use system text styles for overview panel
&:overview {
.panel-button {
@include panel_button($fg:$system_panel_fg_color);
&#panelActivities .workspace-dot { &#panelActivities .workspace-dot {
background-color: $panel_system_fg_color; background-color: $system_panel_fg_color;
} }
// clock // clock
&.clock-display { &.clock-display {
@include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock"); @include panel_button($fg:$system_panel_fg_color, $highlighted_child: true, $child_class: '.clock');
}
// unfortunate duplication so these indicators have styles
&.screen-recording-indicator {
@include panel_button($screenshot_ui_button_red, $flat: false);
}
&.screen-sharing-indicator {
@include panel_button($privacy_indicator_color, $flat: false);
} }
} }
} }
.panel-status-indicators-box { .panel-status-indicators-box {
spacing: 2px;
padding-right: 2px; padding-right: 2px;
padding-left: 3px; padding-left: 3px;
} }
.panel-status-indicators-box,
.panel-status-menu-box { .panel-status-menu-box {
spacing: 2px; spacing: 2px;
} }
@ -158,13 +183,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// App Menu // App Menu
#appMenu { #appMenu {
spacing: $base_padding; spacing: $scaled_padding;
.label-shadow { color: transparent; } .label-shadow { color: transparent; }
} }
#appMenu .panel-status-menu-box { #appMenu .panel-status-menu-box {
padding: 0 $base_padding; padding: 0 $scaled_padding;
spacing: $base_padding; spacing: $scaled_padding;
} }

17
gnome-shell-sass/widgets/_popovers.scss
View file

@ -8,7 +8,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// the popover itself // the popover itself
.popup-menu-boxpointer { .popup-menu-boxpointer {
-arrow-rise: $base_margin+2px; // distance from the panel & screen edge -arrow-rise: $base_padding; // distance from the panel & screen edge
} }
// container of the popover menu // container of the popover menu
@ -40,7 +40,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
&:checked { &:checked {
border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important; border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important;
@if $is_highcontrast { @if $contrast == 'high' {
border: 1px solid $hc_inset_color; border: 1px solid $hc_inset_color;
border-bottom-width:0; border-bottom-width:0;
} }
@ -67,22 +67,23 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// symbolic icons in popover // symbolic icons in popover
.popup-menu-arrow, .popup-menu-arrow,
.popup-menu-icon { .popup-menu-icon {
icon-size: 16px !important; // for some reason the variable doesn't work here icon-size: $scalable_icon_size;
} }
// popover submenus // popover submenus
.popup-sub-menu { .popup-sub-menu {
border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px; border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px;
margin-bottom: $base_padding; margin-bottom: $base_padding;
border: 1px solid transparent;
@if $is_highcontrast { @if $contrast == 'high' {
border: 1px solid $hc_inset_color; border-color: $hc_inset_color;
} }
// submenu specific styles // submenu specific styles
.popup-menu-item { .popup-menu-item {
border-radius: 0; border-radius: 0;
@include menuitem($bg:$submenu_bg_color, $flat:false); @include menuitem($bg:$submenu_bg_color);
border-top-width:0; border-top-width:0;
&:last-child { &:last-child {
@ -103,8 +104,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// container for radio and check boxes // container for radio and check boxes
.popup-menu-ornament { .popup-menu-ornament {
icon-size: $base_icon_size !important; icon-size: $scalable_icon_size !important;
width: $base_icon_size; width: $scalable_icon_size;
} }
// separator // separator

89
gnome-shell-sass/widgets/_quick-settings.scss
View file

@ -13,15 +13,16 @@
} }
.quick-toggle, .quick-menu-toggle { .quick-toggle, .quick-menu-toggle {
border-radius: 99px; border-radius: $forced_circular_radius;
min-width: 12em; min-width: 12em;
max-width: 12em; max-width: 12em;
min-height: 48px; min-height: $scalable_icon_size * 3; // use icon size so the button scales
border:none; border:none;
} }
.quick-toggle { .quick-toggle {
&:checked { @include button(default, $c:$selected_bg_color); } background-color: none;
&:checked { @extend %default_button;}
& > StBoxLayout { spacing: $base_padding * 1.5; } & > StBoxLayout { spacing: $base_padding * 1.5; }
@ -35,11 +36,11 @@
.quick-toggle-title { font-weight: bold; } .quick-toggle-title { font-weight: bold; }
& StBoxLayout > .quick-toggle-subtitle { & StBoxLayout > .quick-toggle-subtitle {
@extend %caption;
font-weight: normal; font-weight: normal;
font-size: 12px;
} }
.quick-toggle-icon { icon-size: $base_icon_size; } .quick-toggle-icon { icon-size: $scalable_icon_size; }
} }
.quick-menu-toggle { .quick-menu-toggle {
@ -47,31 +48,31 @@
min-width: auto; min-width: auto;
max-width: auto; max-width: auto;
&:ltr { border-radius: 99px 0 0 99px; } &:ltr { border-radius: $forced_circular_radius 0 0 $forced_circular_radius; }
&:ltr > StBoxLayout { padding-right: $base_padding*1.5; } &:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
&:rtl { border-radius: 0 99px 99px 0; } &:rtl { border-radius: 0 $forced_circular_radius $forced_circular_radius 0; }
&:rtr > StBoxLayout { padding-left: $base_padding*1.5; } &:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
&:ltr:last-child { border-radius: 99px; } &:ltr:last-child { border-radius: $forced_circular_radius; }
&:rtl:last-child { border-radius: 99px; } &:rtl:last-child { border-radius: $forced_circular_radius; }
} }
& .quick-toggle-arrow { & .quick-toggle-arrow {
padding: $base_padding $base_padding*1.75; padding: $scaled_padding $scaled_padding * 1.75;
border-width: 0; border-width: 0;
border-color: transparentize($fg_color, .75); border-color: transparentize($fg_color, .75);
&:checked { &:checked {
@include button(default, $c:$selected_bg_color); @extend %default_button;
border-color: $selected_borders_color; border-color: $selected_borders_color;
} }
&:ltr { &:ltr {
border-radius: 0 99px 99px 0; border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
border-left-width: 1px; border-left-width: 1px;
} }
&:rtl { &:rtl {
border-radius: 99px 0 0 99px; border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
border-right-width: 1px; border-right-width: 1px;
} }
} }
@ -84,33 +85,36 @@
.slider-bin { .slider-bin {
&:focus {@include button(focus);} &:focus {@include button(focus);}
min-height: 16px; // slider size
padding: $base_padding; padding: $base_padding;
border-radius: 99px; border-radius: $forced_circular_radius;
} }
} }
.quick-toggle-menu { .quick-toggle-menu {
@include card; @extend %card;
// override some card styles &:insensitive {
background-color: $bg_color !important; // override insensitive style on submenu
color: $fg_color !important; @include button(normal);
}
border-radius: $base_border_radius * 3; border-radius: $base_border_radius * 3;
padding: $base_padding*2;
margin: $base_padding * 2 $base_padding * 3 0; margin: $base_padding * 2 $base_padding * 3 0;
.popup-menu-item > StIcon { -st-icon-style: symbolic; } .popup-menu-item > StIcon {
-st-icon-style: symbolic;
icon-size: $scalable_icon_size;
}
& .header { & .header {
spacing-rows: 0.5 * $base_padding; spacing-rows: $base_padding * 0.5;
spacing-columns: $base_padding * 2; spacing-columns: $base_padding * 2;
padding-bottom: 2 * $base_padding; padding-bottom: $base_padding * 2;
& .icon { & .icon {
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok icon-size: $medium_scalable_icon_size;
border-radius: 999px; border-radius: $forced_circular_radius;
padding: 1.5 * $base_padding; padding: 1.5 * $base_padding;
background-color: transparentize($fg_color, 0.8); background-color: transparentize($fg_color, 0.8);
@ -118,6 +122,14 @@
background-color: $selected_bg_color; background-color: $selected_bg_color;
color: $selected_fg_color; color: $selected_fg_color;
} }
// draw hc outline
@if $contrast == 'high' {
@include draw_hc_inset();
&.active {
@include draw_hc_inset($no_inset: true);
}
}
} }
& .title { & .title {
@ -134,7 +146,7 @@
} }
.quick-settings-system-item { .quick-settings-system-item {
& > StBoxLayout { spacing: 2 * $base_padding; } & > StBoxLayout { spacing: $base_padding * 2; }
& .power-item { & .power-item {
min-height: 0; min-height: 0;
@ -148,7 +160,7 @@
} }
.nm-network-item { .nm-network-item {
.wireless-secure-icon { icon-size: 0.5 * $base_icon_size; } .wireless-secure-icon { icon-size: $scalable_icon_size * 0.5; } // half-size symbolic
} }
.bt-device-item { .bt-device-item {
@ -164,23 +176,19 @@
.device-subtitle { color: transparentize($fg_color, 0.5); } .device-subtitle { color: transparentize($fg_color, 0.5); }
.keyboard-brightness-item .slider {
min-height: 16px;
}
.keyboard-brightness-level { .keyboard-brightness-level {
spacing: $base_padding; spacing: $base_padding;
.button:checked { @include button(default, $c:$selected_bg_color); } .button:checked { @extend %default_button; }
} }
// background apps // background apps
.background-apps-quick-toggle { .background-apps-quick-toggle {
min-height: 40px; min-height: to_em(40px);
background-color: transparent; background-color: transparent;
& StIcon { icon-size: $base_icon_size !important; } & StIcon { icon-size: $scalable_icon_size !important; }
} }
.background-app-item { .background-app-item {
@ -190,9 +198,14 @@
icon-size: $large_icon_size !important; icon-size: $large_icon_size !important;
-st-icon-style: regular !important; -st-icon-style: regular !important;
} }
& .close-button { & .icon-button {
@extend .icon-button;
padding: $base_padding; padding: $base_padding;
// override some background colors since it's a button on an already styled background
// FIXME: may need a generic drawing method for button in menu item in future
background-color: transparentize($fg_color, 0.87);
&:hover { background-color: transparentize($fg_color, 0.78);}
&:active { background-color: transparentize($fg_color, 0.69);}
} }
& .spinner { & .spinner {
padding: $base_padding; padding: $base_padding;

84
gnome-shell-sass/widgets/_screenshot.scss
View file

@ -1,24 +1,15 @@
// Screenshot UI // Screenshot UI
.icon-label-button-container {
spacing: $base_padding;
@extend %caption;
StIcon { icon-size: 32px;}
}
$screenshot_ui_panel_padding: $base_padding * 3; $screenshot_ui_panel_padding: $base_padding * 3;
$screenshot_ui_shot_cast_margin: 21px; $screenshot_ui_panel_border_radius: $modal_radius * 2;
$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin; $screenshot_ui_button_red: $red_4;
$screenshot_ui_shot_cast_spacing: 3px;
$screenshot_ui_button_red: $error_color;
.screenshot-ui-panel { .screenshot-ui-panel {
@extend %osd_panel; @extend %osd_panel;
border-radius: $screenshot_ui_panel_border_radius; border-radius: $screenshot_ui_panel_border_radius;
padding: $screenshot_ui_panel_padding; padding: $screenshot_ui_panel_padding;
// Reduce the bottom padding a little to accommodate the large capture button. // Reduce the bottom padding a little to accommodate the large capture button.
padding-bottom: $screenshot_ui_panel_padding - 6px; padding-bottom: $screenshot_ui_panel_padding - $base_padding;
margin-bottom: 4em; margin-bottom: 4em;
spacing: $base_padding * 2; spacing: $base_padding * 2;
} }
@ -26,36 +17,43 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-close-button { .screenshot-ui-close-button {
@extend .window-close; // copy window close button @extend .window-close; // copy window close button
padding: $base_padding !important; // but with more padding padding: $base_padding !important; // but with more padding
margin-top: 12px; margin-top: $base_margin * 3;
box-shadow: 0 2px 4px 0 $shadow_color; box-shadow: 0 2px 4px 0 $shadow_color;
&.left { margin-left: 12px;} &.left { margin-left: $base_margin * 3;}
&.right { margin-right: 12px;} &.right { margin-right: $base_margin * 3;}
} }
.screenshot-ui-type-button { .screenshot-ui-type-button {
@extend %osd_button_flat; @extend %osd_button_flat;
min-width: 48px; min-width: 48px;
padding: $base_padding * 2 $base_padding * 3 !important; padding: $base_padding * 2 $base_padding * 3;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding; border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
.icon-label-button-container {
@extend %caption;
spacing: $scaled_padding;
> StIcon { icon-size: $large_icon_size;}
}
} }
.screenshot-ui-capture-button { .screenshot-ui-capture-button {
width: 36px; width: $large_icon_size;
height: 36px; height: $large_icon_size;
border-radius: 99px; border-radius: $forced_circular_radius;
border: 4px $osd_fg_color; border: 4px $osd_fg_color;
padding: 4px; padding: $base_margin;
.screenshot-ui-capture-button-circle { .screenshot-ui-capture-button-circle {
background-color: $osd_fg_color; background-color: $osd_fg_color;
transition-duration: 200ms; transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color;} &:hover, &:focus { background-color: $hover_bg_color;}
border-radius: 99px; border-radius: $forced_circular_radius;
} }
&:hover, &:focus { &:hover, &:focus {
.screenshot-ui-capture-button-circle { .screenshot-ui-capture-button-circle {
background-color: darken($osd_fg_color, 15%); background-color: darken($osd_fg_color, 20%);
} }
} }
@ -84,32 +82,36 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-shot-cast-container { .screenshot-ui-shot-cast-container {
background-color: transparentize($osd_fg_color,0.9); background-color: transparentize($osd_fg_color,0.9);
border-radius: $modal_radius; border-radius: $forced_circular_radius;
padding: $screenshot_ui_shot_cast_spacing; padding: $base_padding * 0.5;
spacing: $screenshot_ui_shot_cast_spacing; spacing: $base_padding * 0.5;
&:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;} @if $contrast == 'high' {
&:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;} @include draw_hc_inset();
}
} }
// non-standard button style
.screenshot-ui-shot-cast-button { .screenshot-ui-shot-cast-button {
padding: $base_padding $base_padding * 2; padding: $base_padding $base_padding * 2;
background-color: transparent; background-color: transparent;
border-radius: $forced_circular_radius;
@if $contrast == 'high' {
@include draw_hc_inset();
}
> StIcon { icon-size: $base_icon_size;}
&:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);} &:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);}
&:active { background-color: transparentize($osd_fg_color, .5);} &:active { background-color: transparentize($osd_fg_color, .5);}
&:checked { background-color: $osd_fg_color; color: $osd_bg_color;} &:checked { background-color: $osd_fg_color; color: $osd_bg_color;}
&:insensitive { color: transparentize($osd_fg_color, 0.5);} &:insensitive { color: transparentize($osd_fg_color, 0.5);}
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
StIcon { icon-size: $base_icon_size;}
} }
.screenshot-ui-show-pointer-button { .screenshot-ui-show-pointer-button {
@extend %osd_button_flat; @extend %osd_button_flat;
border-radius: 99px; @extend .icon-button;
padding: $base_padding * 2 !important;
StIcon { icon-size: $base_icon_size;}
} }
.screenshot-ui-area-indicator-shade { .screenshot-ui-area-indicator-shade {
@ -127,15 +129,15 @@ $screenshot_ui_button_red: $error_color;
} }
.screenshot-ui-area-selector-handle { .screenshot-ui-area-selector-handle {
border-radius: 99px; border-radius: $forced_circular_radius;
background-color: white; background-color: white;
box-shadow: 0 1px 3px 2px $shadow_color; box-shadow: 0 1px 3px 2px $shadow_color;
width: 24px; width: $medium_icon_size;
height: 24px; height: $medium_icon_size;
} }
.screenshot-ui-window-selector { .screenshot-ui-window-selector {
background-color: $system_bg_color; background-color: $system_base_color;
.screenshot-ui-window-selector-window-container { .screenshot-ui-window-selector-window-container {
margin: 100px; margin: 100px;
@ -158,9 +160,9 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-window-selector-check { .screenshot-ui-window-selector-check {
transition-duration: 200ms; transition-duration: 200ms;
color: transparent; color: transparent;
border-radius: 99px; border-radius: $forced_circular_radius;
border-width: 12px; border-width: 12px;
icon-size: 24px; icon-size: $medium_icon_size;
} }
.screenshot-ui-window-selector-window { .screenshot-ui-window-selector-window {
@ -197,5 +199,5 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-tooltip { .screenshot-ui-tooltip {
@extend %tooltip; @extend %tooltip;
text-align: center; text-align: center;
-y-offset: 24px; -y-offset: $base_margin * 6;
} }

6
gnome-shell-sass/widgets/_search-entry.scss
View file

@ -1,6 +1,6 @@
// Search entry // Search entry
.search-entry { .search-entry {
border-radius: 99px; border-radius: $forced_circular_radius;
margin-top: $base_padding * 2; margin-top: $base_padding * 2;
margin-bottom: $base_padding; margin-bottom: $base_padding;
width: 24em; width: 24em;
@ -8,8 +8,8 @@
@extend %system_entry; @extend %system_entry;
.search-entry-icon { .search-entry-icon {
icon-size: $base_icon_size; icon-size: $scalable_icon_size;
margin-top: 2px; // center vertically margin-top: 2px; // center vertically
padding: 0 4px; padding: 0 $base_margin;
} }
} }

22
gnome-shell-sass/widgets/_search-results.scss
View file

@ -6,7 +6,7 @@
} }
#searchResultsContent { #searchResultsContent {
max-width: 1072px; max-width: 1044px;
} }
// search results sections "the boxes" // search results sections "the boxes"
@ -28,11 +28,16 @@
border-radius: $modal_radius * 1.5; border-radius: $modal_radius * 1.5;
padding: $base_padding * 2; padding: $base_padding * 2;
margin:0 $base_margin * 3; margin:0 $base_margin * 3;
border: 2px solid transparent;
@if $contrast == 'high' {
border-color: $hc_inset_color;
}
} }
%search_section_content_item { %search_section_content_item {
@include tile_button($system_fg_color); @include tile_button($bg:$system_overlay_bg_color);
border-radius: $base_border_radius+3px; border-radius: $base_border_radius * 1.65;
} }
// "no results" text // "no results" text
@ -48,7 +53,7 @@
// Search results with icons // Search results with icons
.grid-search-result { .grid-search-result {
@extend .app-well-app; @extend .overview-tile;
} }
// search result provider // search result provider
@ -86,11 +91,18 @@
// list item title (with leading icon) // list item title (with leading icon)
.list-search-result-title { .list-search-result-title {
spacing: $base_padding * 2; spacing: $base_padding * 2;
// font-weight: bold;
@if $contrast == 'high' {
font-weight: bold;
}
} }
// list item description // list item description
.list-search-result-description { .list-search-result-description {
color: $system_insensitive_fg_color; color: $system_insensitive_fg_color;
@if $contrast == 'high' {
color: $system_fg_color;
}
} }
} }

7
gnome-shell-sass/widgets/_slider.scss
View file

@ -1,6 +1,6 @@
/* Slider */ /* Slider */
$slider_size: 16px; $slider_size: $scalable_icon_size;
.slider { .slider {
// slider trough // slider trough
@ -19,4 +19,9 @@ $slider_size: 16px;
-slider-handle-radius: $slider_size * 0.5; // half the size of the size -slider-handle-radius: $slider_size * 0.5; // half the size of the size
-slider-handle-border-width: 0; -slider-handle-border-width: 0;
-slider-handle-border-color: transparent; // because 0 width -slider-handle-border-color: transparent; // because 0 width
// hc style
@if $contrast == 'high' {
-barlevel-background-color: transparentize($fg_color, 0.6);
}
} }

20
gnome-shell-sass/widgets/_switcher-popup.scss
View file

@ -2,7 +2,7 @@
// same as dash // same as dash
$switcher_padding: $base_padding * 2; $switcher_padding: $base_padding * 2;
$switcher_radius: $modal_radius + $switcher_padding;
// the full screen container of the switcher // the full screen container of the switcher
.switcher-popup { .switcher-popup {
@ -14,7 +14,7 @@ $switcher_padding: $base_padding*2;
.switcher-list { .switcher-list {
@extend %osd_panel; @extend %osd_panel;
padding: $switcher_padding; padding: $switcher_padding;
border-radius: $modal_radius+$switcher_padding; border-radius: $switcher_radius;
box-shadow: 0 8px 8px 0 $shadow_color; box-shadow: 0 8px 8px 0 $shadow_color;
// container for items in list // container for items in list
@ -24,11 +24,19 @@ $switcher_padding: $base_padding*2;
// each item in the list // each item in the list
.item-box { .item-box {
@include tile_button($osd_fg_color); @include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
// override over style so mouse doesn't steal focus // override %tile style so mouse doesn't steal focus
&:hover {background: none;} &:hover {background: none;}
@if $is_highcontrast {
box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2); // brighter than normal selected style
&:selected {
background-color: transparentize($osd_fg_color, 0.8);
}
@if $contrast == 'high' {
&:selected {
background-color: transparentize($osd_fg_color, 0.7);
}
} }
} }

4
gnome-shell-sass/widgets/_switches.scss
View file

@ -2,7 +2,7 @@
// these are equal to the size of the SVG assets // these are equal to the size of the SVG assets
$switch_height: 26px; $switch_height: 26px;
$switch_width: 48px; $switch_width: 46px;
.toggle-switch { .toggle-switch {
color: $fg_color; color: $fg_color;
@ -13,4 +13,6 @@ $switch_width: 48px;
&:checked { &:checked {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg")); background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
} }
& StIcon {icon-size: $base_icon_size;}
} }

28
gnome-shell-sass/widgets/_window-picker.scss
View file

@ -1,18 +1,10 @@
/* Window Picker */ /* Window Picker */
$window_picker_spacing: $base_padding; // 6px
$window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_label_color: transparentize($system_bg_color, 0.4);
$window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02); $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
$window_close_button_size: 30px;
$window_close_button_padding: 3px;
// Window picker // Window picker
.window-picker { .window-picker {
// Space between window thumbnails // Space between window thumbnails
spacing: $window_picker_spacing; spacing: $base_padding;
} }
// Window titles // Window titles
@ -24,14 +16,19 @@ $window_close_button_padding: 3px;
.window-close { .window-close {
background-color: $window_close_button_color; background-color: $window_close_button_color;
color: $system_fg_color; color: $system_fg_color;
border-radius: 99px; border-radius: $forced_circular_radius;
box-shadow: 0 2px 4px 0 $shadow_color; box-shadow: 0 2px 4px 0 $shadow_color;
padding: $window_close_button_padding; padding: $base_padding * 0.5;
height: $window_close_button_size; height: $large_icon_size;
width: $window_close_button_size; width: $large_icon_size;
transition-duration: 100ms; transition-duration: 100ms;
border: 2px solid transparent;
& StIcon { icon-size: 24px; } // uses non standard icon size @if $contrast == 'high' {
border-color: $hc_inset_color;
}
& StIcon { icon-size: $medium_icon_size; }
&:hover { &:hover {
background-color: lighten($window_close_button_color, 7%); background-color: lighten($window_close_button_color, 7%);
@ -41,9 +38,6 @@ $window_close_button_padding: 3px;
background-color: lighten($window_close_button_color, 13%); background-color: lighten($window_close_button_color, 13%);
} }
@if $is_highcontrast {
border:2px solid $outer_borders_color;
}
} }
.workspace-background { .workspace-background {

2
gnome-shell-sass/widgets/_workspace-switcher.scss
View file

@ -1,6 +1,6 @@
/* Workspace Switcher */ /* Workspace Switcher */
$ws_indicator_height: $large_icon_size; $ws_indicator_height: 48px;
$ws_dot_active: $ws_indicator_height / 3; $ws_dot_active: $ws_indicator_height / 3;
$ws_dot_inactive: $ws_indicator_height / 6; $ws_dot_inactive: $ws_indicator_height / 6;

2
gnome-shell-sass/widgets/_workspace-thumbnails.scss
View file

@ -12,7 +12,7 @@
border-radius: $base_border_radius * 0.5; border-radius: $base_border_radius * 0.5;
border: 1px solid transparent; border: 1px solid transparent;
@if $is_highcontrast { @if $contrast == 'high' {
border-color: $hc_inset_color; border-color: $hc_inset_color;
} }
} }

1
meson.build
View file

@ -17,7 +17,6 @@ theme_sources = files([
'gnome-shell-sass/widgets/_dash.scss', 'gnome-shell-sass/widgets/_dash.scss',
'gnome-shell-sass/widgets/_dialogs.scss', 'gnome-shell-sass/widgets/_dialogs.scss',
'gnome-shell-sass/widgets/_entries.scss', 'gnome-shell-sass/widgets/_entries.scss',
'gnome-shell-sass/widgets/_hotplug.scss',
'gnome-shell-sass/widgets/_ibus-popup.scss', 'gnome-shell-sass/widgets/_ibus-popup.scss',
'gnome-shell-sass/widgets/_keyboard.scss', 'gnome-shell-sass/widgets/_keyboard.scss',
'gnome-shell-sass/widgets/_login-lock.scss', 'gnome-shell-sass/widgets/_login-lock.scss',

265
patches/gnome-45.0-dark-theme.patch Normal file
View file

@ -0,0 +1,265 @@
From de447719bc49c92bb8f1a04115e4533b2430a524 Mon Sep 17 00:00:00 2001
From: Kevin MacMartin <prurigro@gmail.com>
Date: Mon, 25 Mar 2024 13:06:47 -0400
Subject: [PATCH] Dark theme
---
...ight.scss => gnome-shell-dark-laptop.scss} | 3 +-
data/theme/gnome-shell-dark.scss | 2 +
data/theme/gnome-shell-high-contrast.scss | 33 -------------
data/theme/gnome-shell-sass/_drawing.scss | 6 +--
data/theme/gnome-shell-sass/_palette.scss | 10 ++--
.../widgets/_corner-ripple.scss | 2 +-
.../gnome-shell-sass/widgets/_panel.scss | 49 ++++++++++++++-----
7 files changed, 50 insertions(+), 55 deletions(-)
rename data/theme/{gnome-shell-light.scss => gnome-shell-dark-laptop.scss} (83%)
delete mode 100644 data/theme/gnome-shell-high-contrast.scss
diff --git a/data/theme/gnome-shell-light.scss b/data/theme/gnome-shell-dark-laptop.scss
similarity index 83%
rename from data/theme/gnome-shell-light.scss
rename to data/theme/gnome-shell-dark-laptop.scss
index ae6fce7dd..e603503f6 100644
--- a/data/theme/gnome-shell-light.scss
+++ b/data/theme/gnome-shell-dark-laptop.scss
@@ -1,5 +1,6 @@
-$variant: 'light';
+$variant: 'dark';
+$laptop: true;
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";
diff --git a/data/theme/gnome-shell-dark.scss b/data/theme/gnome-shell-dark.scss
index 8ee499912..294ac6463 100644
--- a/data/theme/gnome-shell-dark.scss
+++ b/data/theme/gnome-shell-dark.scss
@@ -1,5 +1,7 @@
$variant: 'dark';
+$contrast: 'normal';
+$laptop: false;
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";
diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss
deleted file mode 100644
index 00f247e73..000000000
--- a/data/theme/gnome-shell-high-contrast.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-$variant: 'dark';
-
-@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors
-@import "gnome-shell-sass/_drawing";
-@import "gnome-shell-sass/_common";
-@import "gnome-shell-sass/_widgets";
-
-.toggle-switch { width: 48px; }
-.toggle-switch {
- background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
- &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
-}
-
-//force opaque panel
-#panel {
- &.login-screen,
- &.unlock-screen,
- &:overview {
- background-color: #000;
- }
-
- .panel-button {
- color: #fff !important;
- }
-}
-
-//thumbnail app icons no dropshadow and forced color
-.window-picker .icon-dropshadow {
- icon-shadow: none;
- background-color: $osd_bg_color;
- padding: $base_padding * 2;
- border-radius: $modal_radius;
-}
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 85f16fb3c..d9d6db986 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -373,11 +373,11 @@
// $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, $flat: true, $highlighted_child: false, $child_class:"", $border_radius: 3px) {
transition-duration: 150ms;
border: 3px solid transparent;
- border-radius: 99px;
+ border-radius: $border_radius;
font-weight: bold;
background-color: transparent;
@@ -419,7 +419,7 @@
#{$child_class} {
transition-duration: 150ms;
border: 3px solid transparent;
- border-radius: 99px;
+ border-radius: $border_radius;
}
&:active, &:focus, &:checked {
diff --git a/data/theme/gnome-shell-sass/_palette.scss b/data/theme/gnome-shell-sass/_palette.scss
index 78847d95a..8627513c6 100644
--- a/data/theme/gnome-shell-sass/_palette.scss
+++ b/data/theme/gnome-shell-sass/_palette.scss
@@ -39,8 +39,8 @@ $light_2: #f6f5f4;
$light_3: #deddda;
$light_4: #c0bfbc;
$light_5: #9a9996;
-$dark_1: #77767b;
-$dark_2: #5e5c64;
-$dark_3: #3d3846;
-$dark_4: #241f31;
-$dark_5: #000000;
\ No newline at end of file
+$dark_1: #777777;
+$dark_2: #5e5e5e;
+$dark_3: #3d3d3d;
+$dark_4: #242424;
+$dark_5: #000000;
diff --git a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
index 9aff43174..1760edaee 100644
--- a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
+++ b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
@@ -3,7 +3,7 @@
$ripple_size: 50px;
.ripple-box {
- background-color: rgba(255,255,255,0.2);
+ background-color: rgba(0,0,0,0);
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2);
// plus + 2px for the border (box-shadow)
width: $ripple_size + 2px;
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index f19c7c76e..1ad3a18d5 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -1,9 +1,9 @@
/* Top Bar */
// a.k.a. the panel
-$privacy_indicator_color: $orange_3;
+$privacy_indicator_color: $red_3;
-$panel_bg_color: if($variant == 'light', $light_3, $dark_5);
+$panel_bg_color: if($variant == 'light', $light_3, $dark_4);
$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
@@ -21,14 +21,14 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// panel menus
.panel-button {
- @include panel_button($panel_fg_color);
- -natural-hpadding: $base_padding * 2;
- -minimum-hpadding: $base_padding;
+ @include panel_button($bg: $panel_fg_color, $border_radius: 3px);
+ -natural-hpadding: 6px;
+ -minimum-hpadding: 4px;
// status area icons
.system-status-icon {
icon-size: $base_icon_size;
- padding: $base_padding - 1px;
+ padding: ($base_padding - 1px) 0px ($base_padding - 1px) 0px;
margin: 0 $base_margin;
}
@@ -44,7 +44,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
&#panelActivities {
- -natural-hpadding: $base_padding * 2.5;
+ -natural-hpadding: 10px;
+ -minimum-hpadding: 8px;
& StBoxLayout {
spacing: 5px;
@@ -67,6 +68,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
StIcon {
icon-size: $base_icon_size;
+
+ &:first-child {
+ margin-left: 3px;
+ }
}
}
@@ -83,7 +88,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background
// see _drawing.scss for override details
- @include panel_button($highlighted_child: true, $child_class:".clock");
+ @include panel_button($highlighted_child: true, $child_class:".clock", $border_radius: 3px);
+ -natural-hpadding: 0px;
+ -minimum-hpadding: 0px;
+ padding-left: 0px;
+ padding-right: 0px;
.clock {
// the highlighted child
@@ -99,7 +108,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
box-shadow: none;
.panel-button {
- @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color);
+ @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $border_radius: 3px);
&#panelActivities .workspace-dot {
background-color: $panel_system_fg_color;
@@ -121,14 +130,26 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
}
- .panel-status-indicators-box,
+ .panel-status-indicators-box {
+ spacing: 2px;
+ padding-right: 2px;
+ padding-left: 3px;
+ }
+
.panel-status-menu-box {
spacing: 2px;
}
// spacing between power icon and (optional) percentage label
.power-status.panel-status-indicators-box {
+ padding-left: 0px;
spacing: 0;
+
+ @if $laptop {
+ margin-bottom: 2px;
+ } @else {
+ margin-left: 2px;
+ }
}
// important privacy related indicators
@@ -151,7 +172,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
.clock-display-box {
spacing: 2px;
.clock {
- padding-left: $base_padding * 2;
- padding-right: $base_padding * 2;
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+
+ StIcon:last-child {
+ margin-right: 3px;
}
}
--
2.44.0

250
patches/gnome-46.0-dark-theme.patch Normal file
View file

@ -0,0 +1,250 @@
From 7698d02e99c01afc6451ec13dca730c1f0e100a1 Mon Sep 17 00:00:00 2001
From: Kevin MacMartin <prurigro@gmail.com>
Date: Mon, 25 Mar 2024 13:32:44 -0400
Subject: [PATCH] Dark theme
---
...ight.scss => gnome-shell-dark-laptop.scss} | 3 +-
data/theme/gnome-shell-dark.scss | 1 +
data/theme/gnome-shell-high-contrast.scss | 7 ----
data/theme/gnome-shell-sass/_colors.scss | 4 +-
data/theme/gnome-shell-sass/_drawing.scss | 6 +--
data/theme/gnome-shell-sass/_palette.scss | 10 ++---
.../widgets/_corner-ripple.scss | 2 +-
.../gnome-shell-sass/widgets/_panel.scss | 41 +++++++++++++++----
8 files changed, 48 insertions(+), 26 deletions(-)
rename data/theme/{gnome-shell-light.scss => gnome-shell-dark-laptop.scss} (84%)
delete mode 100644 data/theme/gnome-shell-high-contrast.scss
diff --git a/data/theme/gnome-shell-light.scss b/data/theme/gnome-shell-dark-laptop.scss
similarity index 84%
rename from data/theme/gnome-shell-light.scss
rename to data/theme/gnome-shell-dark-laptop.scss
index 22b8347..61925f9 100644
--- a/data/theme/gnome-shell-light.scss
+++ b/data/theme/gnome-shell-dark-laptop.scss
@@ -1,6 +1,7 @@
-$variant: 'light';
+$variant: 'dark';
$contrast: 'normal';
+$laptop: true;
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";
diff --git a/data/theme/gnome-shell-dark.scss b/data/theme/gnome-shell-dark.scss
index c1a330b..294ac64 100644
--- a/data/theme/gnome-shell-dark.scss
+++ b/data/theme/gnome-shell-dark.scss
@@ -1,6 +1,7 @@
$variant: 'dark';
$contrast: 'normal';
+$laptop: false;
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";
diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss
deleted file mode 100644
index a4394dd..0000000
--- a/data/theme/gnome-shell-high-contrast.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$variant: 'dark';
-$contrast: "high";
-
-@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors
-@import "gnome-shell-sass/_drawing";
-@import "gnome-shell-sass/_common";
-@import "gnome-shell-sass/_widgets";
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index ffd4e9f..9a5450a 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -21,7 +21,7 @@ $system_base_color: $_base_color_dark;
$system_fg_color: $_base_color_light;
// panel colors
-$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_5);
+$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_4);
$panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1);
// card elements
@@ -66,4 +66,4 @@ $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_colo
$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%));
\ No newline at end of file
+$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 5d56d4c..dd6f8a8 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -386,7 +386,7 @@
}
// Panel menu/button drawing function
-@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") {
+@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"", $border_radius: 3px) {
//
// $bg: background color, derived from $panel_fg_color
// $fg: foreground color, also derived from $panel_fg_color
@@ -400,7 +400,7 @@
transition-duration: 150ms;
border: 3px solid transparent;
background-color: transparent;
- border-radius: $forced_circular_radius;
+ border-radius: $border_radius;
font-weight: bold;
color: $fg;
@@ -444,7 +444,7 @@
#{$child_class} {
transition-duration: 150ms;
border: 3px solid transparent;
- border-radius: $forced_circular_radius;
+ border-radius: $border_radius;
}
&:focus, &:hover {
diff --git a/data/theme/gnome-shell-sass/_palette.scss b/data/theme/gnome-shell-sass/_palette.scss
index 78847d9..8627513 100644
--- a/data/theme/gnome-shell-sass/_palette.scss
+++ b/data/theme/gnome-shell-sass/_palette.scss
@@ -39,8 +39,8 @@ $light_2: #f6f5f4;
$light_3: #deddda;
$light_4: #c0bfbc;
$light_5: #9a9996;
-$dark_1: #77767b;
-$dark_2: #5e5c64;
-$dark_3: #3d3846;
-$dark_4: #241f31;
-$dark_5: #000000;
\ No newline at end of file
+$dark_1: #777777;
+$dark_2: #5e5e5e;
+$dark_3: #3d3d3d;
+$dark_4: #242424;
+$dark_5: #000000;
diff --git a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
index 9aff431..1760eda 100644
--- a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
+++ b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
@@ -3,7 +3,7 @@
$ripple_size: 50px;
.ripple-box {
- background-color: rgba(255,255,255,0.2);
+ background-color: rgba(0,0,0,0);
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2);
// plus + 2px for the border (box-shadow)
width: $ripple_size + 2px;
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 2a29eee..9b455a0 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -1,8 +1,8 @@
/* Top Bar */
// a.k.a. the panel
-$privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3);
-$recording_indicator_color: $red_4;
+$privacy_indicator_color: if($variant == 'light', $orange_4, $red_3);
+$recording_indicator_color: $red_3;
$transparent_panel_fg_color: $light_1; // always white for transparent lock screens
$system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview
@@ -20,13 +20,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// panel menus
.panel-button {
@include panel_button();
- -natural-hpadding: $base_padding * 2;
- -minimum-hpadding: $base_padding;
+ -natural-hpadding: 6px;
+ -minimum-hpadding: 4px;
// status area icons
.system-status-icon {
icon-size: $scalable_icon_size;
- padding: 0 $base_padding;
+ padding: 0;
margin: 0 $base_margin;
}
@@ -47,6 +47,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
&#panelActivities {
+ -natural-hpadding: 10px;
+ -minimum-hpadding: 8px;
+
& StBoxLayout {
padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
spacing: 5px;
@@ -69,6 +72,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
StIcon {
icon-size: $scalable_icon_size;
+
+ &:first-child {
+ margin-left: 3px;
+ }
}
}
@@ -86,6 +93,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// we want to exclude the do-not-disturb indicator from the background
// see _drawing.scss for override details
@include panel_button($highlighted_child: true, $child_class: '.clock');
+ -natural-hpadding: 0px;
+ -minimum-hpadding: 0px;
+ padding-left: 0px;
+ padding-right: 0px;
.clock {
// the highlighted child
@@ -144,6 +155,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
}
+ .panel-status-indicators-box {
+ padding-right: 2px;
+ padding-left: 3px;
+ }
+
.panel-status-indicators-box,
.panel-status-menu-box {
spacing: 2px;
@@ -151,7 +167,14 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// spacing between power icon and (optional) percentage label
.power-status.panel-status-indicators-box {
+ padding-left: 0px;
spacing: 0;
+
+ @if $laptop {
+ margin-bottom: 2px;
+ } @else {
+ margin-left: 2px;
+ }
}
// important privacy related indicators
@@ -174,7 +197,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
.clock-display-box {
spacing: 2px;
.clock {
- padding-left: $scaled_padding * 2;
- padding-right: $scaled_padding * 2;
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+
+ StIcon:last-child {
+ margin-right: 3px;
}
}
--
2.44.0

1
process-working-dark.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

1
process-working-light.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

3084
process-working.svg
View file

File diff suppressed because it is too large Load diff
Side by side

Before

Width:  |  Height:  |  Size: 98 KiB

1
toggle-off-hc.svg
View file

@ -1 +0,0 @@
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect ry="11" rx="11" y="299.18" x="30" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.4" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 703 B

2
toggle-off-light.svg
View file

@ -1 +1 @@
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect style="fill:#c0bfbc;stroke:none;stroke-width:1;marker:none" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="-24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect width="46" height="26" x="-46" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#c0bfbc;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="stroke:none;stroke-width:1;marker:none"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 547 B

After

Width:  |  Height:  |  Size: 539 B

2
toggle-off.svg
View file

@ -1 +1 @@
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.15000001" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="-24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none;fill:#fff;fill-opacity:1" fill="#f8f7f7"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect width="46" height="26" x="-46" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#fff;fill-opacity:.15;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#fff;fill-opacity:1;stroke:none;stroke-width:1;marker:none"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 592 B

After

Width:  |  Height:  |  Size: 578 B

1
toggle-on-hc.svg
View file

@ -1 +0,0 @@
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)" stroke="none"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g><path style="fill:#f8f7f7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-dashoffset:2" d="M14 7v12h-2V7Z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 518 B

2
toggle-on-light.svg
View file

@ -1 +1 @@
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3"/><rect ry="11" rx="11" y="294.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none;fill:#000;fill-opacity:.2" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="translate(0 -291.18)"><rect width="46" height="26" y="291.18" fill="#3081e3" ry="13" style="fill:#3584e4;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="stroke:none;stroke-width:1;marker:none"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 523 B

After

Width:  |  Height:  |  Size: 511 B

2
toggle-on.svg
View file

@ -1 +1 @@
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="fill:#fff;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="translate(0 -291.18)"><rect width="46" height="26" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#3584e4;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#fff;stroke:none;stroke-width:1;marker:none"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 541 B

After

Width:  |  Height:  |  Size: 533 B