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

Update the theme against gnome 46.0

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';
$contrast: 'normal';
$laptop: true;
@import "gnome-shell-sass/_colors"; //use gtk colors

1
gnome-shell-dark.scss
View File

@ -1,4 +1,5 @@
$variant: 'dark';
$contrast: 'normal';
$laptop: false;
@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 '_default-colors.scss';
$is_highcontrast:false;
// base color for light theme
$_dark_base_color: desaturate($dark_4, 100%);
// global colors
$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);
$bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%));
$fg_color: if($variant == 'light', $_dark_base_color, white);
// OSD elements
$osd_fg_color: $light_1;
$osd_bg_color: lighten($_base_color_dark, 5%);
$selected_fg_color: $light_1;
$selected_bg_color: $blue_3;
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%));
// system elements (e.g. the overview) that are always dark
$system_base_color: $_base_color_dark;
$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%));
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
$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 colors
$osd_borders_color: transparentize($osd_fg_color, 0.9);
$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));
// 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 colors
$system_bg_color: lighten($system_base_color, 5%);
$system_borders_color: transparentize($system_fg_color, .9);
$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
// derived global colors
// insensitive state
$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%);
@ -72,3 +64,6 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color,
// active state
$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
// selection colors
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));

265
gnome-shell-sass/_common.scss
View File

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

658
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
//
// 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) {
// outer highlight "used" on most widgets
@return 0 1px $c;
box-shadow: inset 0 0 0 $width $ic;
// draw inset as border
@if $border {
border: $width solid $ic;
box-shadow: none;
}
// don't draw an inset at all
@if $no_inset {
box-shadow: none;
border: none;
}
}
// provide font size in rem, with px fallback
@mixin fontsize($size: 24, $base: 16) {
font-size: round($size) + pt;
//font-size: ($size / $base) * 1rem;
// Draw the focus ring
@mixin focus_ring($width: 2px, $fc: $focus_border_color, $border: false) {
box-shadow: inset 0 0 0 $width $fc !important;
@if $border {
border:$width solid $fc !important;
box-shadow: none;
}
}
@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
//
// Helper function to stack up to 4 box-shadows;
//
@if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
@else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
@else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
@else { box-shadow: $shadow1; }
// 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;
}
// Function to fill the background of a panel button
@mixin panel_button_fill($bg) {
// use a box-shadow to fill the background
// this is done because panel buttons use a transparent border to fake padding
box-shadow: inset 0 0 0 100px $bg;
}
// Text entries
@mixin entry($t, $c, $fc:$selected_bg_color) {
//
// Entries drawing function
//
// $t: entry type
// $c: text color, used to derive background color of entries
//
// possible $t values: normal, focus, insensitive
//
transition-duration: 100ms;
// Text entries drawing function
@mixin entry($type, $c:$fg_color, $bc:$bg_color, $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
//
@if $t==normal {
background-color: transparentize($c, 0.85);
color: transparentize($c,0.3);
// entry colors
$entry_fg_color: $c;
$entry_bg_color: mix($c, $bc, $background_mix_factor);
$entry_focus_color: $focus_color;
@if $is_highcontrast {
box-shadow: inset 0 0 0 1px $hc_inset_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);
}
}
@if $t==focus {
background-color: mix(transparentize($c, 0.75), $fc, 95%);
box-shadow: inset 0 0 0 2px transparentize($fc, 0.3);
color: $c;
&:hover {}
// 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 $t==hover {
background-color: transparentize($c, 0.75);
@if $contrast == 'high' {
@include draw_hc_inset();
}
@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%);
// normal
@if $type == 'normal' {
background-color: $entry_bg_color;
color: transparentize($c, 0.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);
// focus styles
@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);
}
}
// hover key
@else if $t==hover {
color: $tc;
background-color: lighten($c, 7%);
// hover styles
@if $type == 'hover' {
background-color: $hover_entry_bg_color;
color: $entry_fg_color;
}
// 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;
// insensitive styles
@if $type == 'insensitive' {
background-color: $insensitive_entry_bg_color;
color: transparentize($entry_fg_color, 0.5);
}
}
//
// Button drawing function
//
// $t: button type,
// $c: base button colors, derived from fg_color
// $tc: base button colors, derived from fg_color
//
// possible $t values:
// normal, hover, active, insensitive, insensitive-active,
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
// since buttons are all flat an borderless now the mixin is simpler
@mixin button($type, $tc:$fg_color, $c:$bg_color, $style: null, $always_dark: false) {
//
// $type: button type, possible values:
// - normal, focus, hover, active, checked, insensitive, default, undecorated
// $c: button bg color, derived from bg_color
// $tc: button text color, derived from fg_color
// $style: button style, possible values: card, bubble, flat, default
// $always_dark: override the light theme check to use dark colors, true or false
//
@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false) {
// 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);
transition-duration: 100ms;
// background color override for card elements
@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 {
$button_bg_color: transparentize($tc, 0.9);
// background color adjustment factors
// the % a color is lightened or darkened for button states
$hover_factor: 4%;
$active_factor: 9%;
$checked_factor: 8%;
$insensitive_factor: 3%;
// flat style overrides
@if $style == 'flat' {
$hover_factor: 7%; // stronger factor in flat style
}
// normal button
@if $t==normal {
// button base state background colors
$hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
$active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
$checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
$insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
// 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;
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
@if $t==focus {
color: $tc;
background-color: mix($button_bg_color, $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
&:hover {
background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
}
&:active {
background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
// no inset in High Contrast when the style is flat
@if $style == 'flat' and $contrast == 'high' {
@include draw_hc_inset($no_inset: true);
}
}
// hover button
@else if $t==hover {
@else if $type == 'hover' {
color: $tc;
background-color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%));
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%);
background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%);
}
background-color: $hover_button_bg_color;
}
// active button
@else if $t==active {
@else if $type == 'active' {
color: $tc;
background-color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%);
background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%);
background-color: $active_button_bg_color;
&:hover { background-color: $active_hover_button_bg_color;}
&:focus {
// otherwise use focus bg color mixin
$bg: focus_bg_color($active_button_bg_color);
background-color: $bg;
}
}
// checked button
@else if $t==checked {
@else if $type == 'checked' {
color: $tc;
background-color: if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%);
background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%);
}
&:hover { background-color: lighten($button_bg_color, 12%);}
&:active { background-color: lighten($button_bg_color, 15%);}
background-color: $checked_button_bg_color;
&:hover { background-color: $checked_hover_button_bg_color;}
&:active { background-color: $checked_active_button_bg_color;}
}
// insensitive button
@else if $t==insensitive {
color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95));
}
@else if $type == 'insensitive' {
$insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
color: $insensitive_button_fg_color;
background-color: $insensitive_button_bg_color;
// default/suggested button
@else if $t==default {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:focus {
box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important;
}
&:hover, &:focus {
background-color: lighten($selected_bg_color, 5%);
color: lighten($selected_fg_color, 5%);
}
&:active {
background-color: darken($selected_bg_color, 7%);
color: darken($selected_fg_color, 7%);
}
&:insensitive {
@include button(insensitive);
background-color: transparentize($selected_bg_color, .5);
color: transparentize($selected_fg_color, .5);
// no outline in High Contrast for insensitive buttons
@if $contrast == 'high' {
@include draw_hc_inset($no_inset: true);
}
}
// reset
@else if $t==undecorated {
// focused button
@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: none;
border-color: transparent;
box-shadow: none;
&:insensitive {
@include button(insensitive);
background-color: transparent;
background-color: transparent !important;
}
}
}
// tile
@mixin tile_button($color, $flat: true) {
// Helper mixin for button-like elements with an icon
@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;
@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 {
background-color: transparentize($color, .84);
@if $is_highcontrast {
box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack
}
}
&:hover { background-color: transparentize($color, .9);}
&:selected, &:focus {
background-color: transparentize($color, .87);
&:hover { background-color: transparentize($color, .84);}
&:active { background-color: transparentize($color, .87);}
}
&:active { background-color: transparentize($color, .84);}
&:outlined, &:checked {
background-color: transparentize($color, .81);
&:active { background-color: transparentize($color, .78);}
&:hover { background-color: transparentize($color, .75);}
@include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);
&:focus { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
&:hover { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
&:active { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
&:highlighted,&:selected,
&:checked { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
&:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
}
&:drop {
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
background-color: transparentize($selected_bg_color, .8);
}
}
// overview icon, dash, app grid
@mixin overview_icon($color, $flat: true) {
transition-duration: 400ms;
.overview-icon {
@extend %tile;
}
@if $flat {
.overview-icon { background-color: transparent;}
} @else {
.overview-icon { background-color: transparentize($color, .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;
}
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
}
}
// styling for all menuitems in popovers
@mixin menuitem($bg, $flat: true) {
@mixin menuitem($bg, $style: flat) {
// extend common styles
@extend %menuitem;
// lighten the background color always
$bg: lighten($bg,5%);
font-weight: normal;
spacing: $base_padding;
transition-duration: 100ms;
padding: $base_padding*1.5 $base_padding*2;
@if $flat {
@if $style == 'flat' {
@include button(undecorated);
box-shadow: none !important;
} @else {
@include button(normal, $c:$bg);
}
@ -359,85 +382,84 @@
}
&:active {@include button(active, $c:$bg);}
&:checked {@include button(checked, $c:$bg);}
&:insensitive {@include button(insensitive, $c:$bg);}
}
//
// Panel menu/button drawing function
//
// $bg: background color, derived from $panel_fg_color
// $fg: foreground color, also derived from $panel_fg_color
//
// $flat: if true, the button is filled instead of transparent
// $highlighted_child: if true, applies some special overrides for to a
// child element, see _panel.scss for details
// $child_class: class name of the child element
//
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"", $border_radius: 3px) {
@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
// $style: can be set to 'filled' if button uses a colored background
//
// $highlighted_child: if true, applies some special overrides for to a
// child element, see _panel.scss for details
// $child_class: class name of the child element
//
transition-duration: 150ms;
border: 3px solid transparent;
background-color: transparent;
border-radius: $border_radius;
font-weight: bold;
background-color: transparent;
color: $fg;
@if $flat {
box-shadow: none;
// background fill defines
$fill: transparent;
$hover_fill: transparentize($fg, .83);
$active_fill: transparentize($fg, .72);
$active_hover_fill: transparentize($fg, .68);
&:active, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
&:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65);
}
}
@if $style == 'filled' {
$fill: $bg;
$hover_fill: if($variant == 'light', darken($bg, 5%), lighten($bg, 5%));
$active_fill: if($variant == 'light', darken($bg, 9%), lighten($bg, 9%));
$active_hover_fill: if($variant == 'light', darken($bg, 11%), lighten($bg, 11%));
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
}
@include panel_button_fill($fill);
} @else {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.2);
&:focus, &:hover {
@include panel_button_fill($hover_fill);
}
&:active, &:focus, &:checked {
box-shadow: inset 0 0 0 100px $bg;
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
}
}
&:active, &:checked {
@include panel_button_fill($active_fill);
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.1);
&:hover{
@include panel_button_fill($active_hover_fill);
}
}
// some overrides to style a child element
@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} {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: $border_radius;
}
&:active, &:focus, &:checked {
box-shadow: none !important;
&:focus, &:hover {
#{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
&:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important;
}
@include panel_button_fill($hover_fill);
}
}
&:hover {
box-shadow: none !important;
&:active, &:checked {
#{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
@include panel_button_fill($active_fill);
&:hover {
@include panel_button_fill($active_hover_fill);
}
}
}
}

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 '_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);
$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 elements
$osd_fg_color: $light_1;
$osd_bg_color: $base_color;
// 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.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 elements
$system_base_color: $dark_5;
$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_borders_color: transparentize($system_fg_color, .9);
$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
$system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%);
// derived global colors
// 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_borders_color: $borders_color;
// checked state
$checked_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 18%));
$checked_fg_color: if($variant=='light', darken($fg_color, 12%), lighten($fg_color, 18%));
$checked_bg_color: lighten($bg_color, 18%);
$checked_fg_color: lighten($fg_color, 18%);
// hover state
$hover_bg_color: if($variant=='light', darken($bg_color, 8%), lighten($bg_color, 20%));
$hover_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 20%));
$hover_bg_color: lighten($bg_color, 20%);
$hover_fg_color: lighten($fg_color, 20%);
// active state
$active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 22%));
$active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%));
$active_bg_color: lighten($bg_color, 22%);
$active_fg_color: lighten($fg_color, 22%);
// inset colour for high contrast
$hc_inset_color: transparentize($fg_color, 0.7);
// selection colors
$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';
// Notifications
@import 'widgets/notifications';
@import 'widgets/hotplug';
// Dialogs
@import 'widgets/dialogs';
// OSDs

163
gnome-shell-sass/widgets/_app-grid.scss
View File

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

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

@ -9,10 +9,19 @@
// Outline for low res icons
.lowres-icon {
icon-shadow: 0 1px 2px rgba(black, 0.3);
icon-shadow: 0 1px 2px rgba(black, 0.2);
}
// Dropshadow for large icons
.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 */
.button {
@extend %button; // that's it
min-height: 22px;
@extend %button;
// uses scalable value since it's a text element
min-height: to_em(22px);
// default style
&.default {
@extend %default_button;
}
// flat style
&.flat {
@extend %flat_button;
}
}
.icon-button {
@extend .button; // same style as buttons
@extend %button;
border-radius: 99px;
padding: $base_padding*2;
min-height: 16px;
border-radius: $forced_circular_radius; // is circular
padding: $scaled_padding * 2;
min-height: $scalable_icon_size;
StIcon {
icon-size: $base_icon_size;
icon-size: $scalable_icon_size;
-st-icon-style: symbolic;
}
// default style
&.default {
@extend %default_button;
}
// flat style
&.flat {
@extend %flat_button;
}
}

324
gnome-shell-sass/widgets/_calendar.scss
View File

@ -2,25 +2,31 @@
// overall menu
#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 {
spacing: $base_padding;
&:ltr {padding-left: $base_padding;}
&:rtl {padding-right: $base_padding;}
.datemenu-displays-box {spacing: $base_padding;}
&:ltr { margin-left: $base_padding;}
&:rtl { margin-right: $base_padding;}
.datemenu-displays-box {
spacing: $base_padding;
}
}
/* today button (the date) */
// today button (the date)
.datemenu-today-button {
@include card(flat);
@extend %card_flat;
padding: $base_padding * 1.5;
// weekday label
.day-label {
@extend %heading;
font-weight: bold;
}
// date label
@ -29,10 +35,11 @@
}
}
/* Calendar */
// the mini calendar
.calendar {
@include card(flat);
@extend %card_flat;
margin-top: 0;
padding: 0;
// month header
.calendar-month-header {
@ -40,23 +47,25 @@
// prev/next month icons
.calendar-change-month-back StIcon,
.calendar-change-month-forward StIcon {
icon-size: $base_icon_size;
icon-size: $scalable_icon_size;
}
// month label
.calendar-month-label {
@extend %heading;
@extend %flat_button;
color: $fg_color !important;
padding: 8px 0;
width: 10em;
border-radius: $forced_circular_radius;
text-align: center;
}
.pager-button {
@extend .button, .flat;
padding: 0 !important;
height: 32px;
width: 32px;
margin: 2px;
border-radius: $base_border_radius;
transition-duration: 100ms;
@extend .icon-button, .flat;
height: 2.6em;
width: 2.6em;
padding: 0;
}
}
@ -64,41 +73,48 @@
.calendar-day {
@extend %numeric;
@extend %smaller;
@extend .button, .flat;
border-radius: 99px;
height: 3em !important;
width: 3em !important;
@extend %flat_button;
border-radius: $forced_circular_radius;
height: 3em;
width: 3em;
margin: 2px;
padding: 0 !important;
font-weight: 600;
padding: 0;
font-weight: bold;
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-weekend {
color: $insensitive_fg_color;
@if $contrast == 'high' {
font-style: italic;
}
}
&.calendar-other-month {
color: transparentize($insensitive_fg_color, 0.7) !important;
color: transparentize($fg_color, 0.5);
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 {
@extend .button, .default;
color: $selected_fg_color; /* override weekends */
@extend %default_button;
// 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 {
@ -107,129 +123,165 @@
}
}
// 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
.calendar-week-number {
@include fontsize($base_font_size - 4);
@extend %smaller;
font-weight: bold;
font-feature-settings: "tnum";
text-align: center;
margin: 6px;
margin: $base_padding;
padding: 0 $base_padding;
border-radius: 3px;
background-color: transparentize($fg_color, 0.9);
border-radius: $base_border_radius * 0.5;
background-color: transparentize($insensitive_fg_color, .8);
color: $insensitive_fg_color;
}
}
@if $is_highcontrast {
border:1px solid $hc_inset_color;
// common style for the date menu widgets
.events-button,
.world-clocks-button,
.weather-button {
@extend %card;
}
// events
.events-button {
.events-box {
// event title
.events-title {
@extend %heading;
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 {
@extend %numeric;
@extend %caption;
color: $insensitive_fg_color;
}
}
.event-placeholder {
color: $insensitive_fg_color;
font-style: italic;
}
}
}
}
/* Events */
.events-button {
@include card;
padding: $base_padding * 2;
.events-box {
spacing: $base_padding;
}
.events-list {
spacing: 2 * $base_padding;
color: $fg_color;
}
.events-title {
@extend %heading;
margin-bottom: $base_margin;
}
.event-time {
@extend %numeric;
@extend %caption;
color: $insensitive_fg_color;
}
}
/* World clocks */
// world clocks
.world-clocks-button {
@include card;
padding: $base_padding * 2;
.world-clocks-grid {
spacing-rows: $base_padding;
spacing-columns: $base_padding * 2;
}
// title
.world-clocks-header {
@extend %heading;
color: $insensitive_fg_color;
}
// city label
.world-clocks-city {
color: $fg_color;
}
// timezone time
.world-clocks-time {
@extend %heading;
@extend %numeric;
color: $fg_color;
&:ltr {text-align: right;}
&:rtl {text-align: left;}
}
// timezone offset label
.world-clocks-timezone {
@extend %numeric;
@extend %caption;
color: $insensitive_fg_color;
}
}
/* Weather */
.weather-button {
@include card;
padding: $base_padding * 2;
.weather-box {
spacing: $base_padding + $base_margin;
}
.weather-header-box {
spacing: $base_padding;
}
.weather-header {
color: $insensitive_fg_color;
@extend %heading;
&.location {
font-weight: normal;
// change style when no world clocks are configured
&.no-world-clocks {
color: $fg_color;
}
}
.weather-grid {
// clocks
.world-clocks-grid {
spacing-rows: $base_padding;
spacing-columns: $base_padding * 2;
}
.weather-forecast-time {
@extend %numeric;
@extend %caption;
color: darken($fg_color,30%);
padding-top: 0.2em;
padding-bottom: 0.4em;
}
// city label
.world-clocks-city {
}
.weather-forecast-icon {
icon-size: $large_icon_size;
}
// timezone time
.world-clocks-time {
@extend %numeric;
font-weight: bold;
.weather-forecast-temp {
@extend %heading;
&:ltr {text-align: right;}
&:rtl {text-align: left;}
}
// timezone offset label
.world-clocks-timezone {
@extend %numeric;
@extend %caption;
color: $insensitive_fg_color;
}
}
}
// weather
.weather-button {
.weather-box {
spacing: $base_padding;
// header
.weather-header-box {
spacing: $base_padding;
.weather-header {
@extend %heading;
color: $insensitive_fg_color;
// change style when no location is configured
&.no-location {
color: $fg_color;
}
&.location {
font-weight: normal;
}
}
}
// weather items
.weather-grid {
spacing-rows: $base_padding;
spacing-columns: $base_padding * 2;
.weather-forecast-time {
@extend %numeric;
@include fontsize(10pt);
padding-top: 0.2em;
padding-bottom: 0.4em;
}
.weather-forecast-icon {
icon-size: $large_scalable_icon_size;
margin-bottom: $base_margin;
}
.weather-forecast-temp {
@extend %numeric;
font-weight: bold;
}
}
}
}

141
gnome-shell-sass/widgets/_dash.scss
View File

@ -4,75 +4,92 @@
$dash_background_color: $system_overlay_bg_color;
$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_spacing: $base_margin * 0.5;
// container for the dash
#dash {
@extend %caption;
margin-top: $dash_padding;
margin-top: $dash_edge_offset;
.placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
background-image:none;
background-size: contain;
height: $dash_placeholder_size;
}
.empty-dash-drop-target {
width: $dash_placeholder_size;
height: $dash_placeholder_size;
}
// Running app indicator (also shown in app grid)
.app-well-app-running-dot {
margin-bottom: 14px; // hardcoded
}
}
// background of the dash behind app icons
.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 {
// background behind item container
.dash-background {
background-color: $dash_background_color;
border-radius: $dash_border_radius;
padding-top: $dash_padding;
padding-bottom: $dash_padding;
color: $system_fg_color;
}
}
padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below
padding-right: $dash_padding - $dash_spacing;
// separator between favourites and running apps
.dash-separator {
width: 1px;
margin: 0 $base_margin;
background-color: $system_borders_color;
margin-bottom: $dash_padding;
@if $is_highcontrast {
width: 2px;
@if $contrast == 'high' {
@include draw_hc_inset($width: 2px);
}
}
// items on the dash
.dash-item-container {
.placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
background-image: none;
background-size: contain;
height: $dash_placeholder_size;
}
.empty-dash-drop-target {
width: $dash_placeholder_size;
height: $dash_placeholder_size;
}
// IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
// as such the %tile style is overriden and button styles are applied to the child class .overview-icon
.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
}
}
// separator between pinned and running apps
.dash-separator {
width: 1px;
margin-left:$base_margin;
margin-right:$base_margin;
background-color: $system_borders_color;
@if $contrast == 'high' {
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;
}
}

40
gnome-shell-sass/widgets/_dialogs.scss
View File

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

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

@ -4,17 +4,17 @@ StEntry {
@extend %entry;
StIcon.capslock-warning {
icon-size: $base_icon_size;
icon-size: $scalable_icon_size;
warning-color: $warning_color;
padding: 0 4px;
padding: 0 $base_margin;
}
StIcon.peek-password {
icon-size: $base_icon_size;
padding: 0 4px;
icon-size: $scalable_icon_size;
padding: 0 $base_margin;
}
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;
}

6
gnome-shell-sass/widgets/_ibus-popup.scss
View File

@ -17,7 +17,7 @@
}
.candidate-box {
padding: $base_padding $base_padding*2 $base_padding $base_padding*2;
padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
border-radius: $base_border_radius;
&:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
&:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
@ -25,8 +25,8 @@
.candidate-page-button-box {
height: 2em;
.vertical & { padding-top: $base_padding*2; }
.horizontal & { padding-left: $base_padding*2; }
.vertical & { padding-top: $base_padding * 2; }
.horizontal & { padding-left: $base_padding * 2; }
}
.candidate-page-button {

67
gnome-shell-sass/widgets/_keyboard.scss
View File

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

300
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_dialog_width: 23em;
$_gdm_dialog_width: 25em;
// common style for gdm and lockscreen
// common style for login and lockscreen
.login-dialog,
.unlock-dialog {
color: $_gdm_fg;
.caps-lock-warning-label,
.login-dialog-message-warning {
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 {
background-color: $_gdm_bg;
.login-dialog-prompt-entry {
@extend %system_entry;
}
}
// buttons
// buttons on login screen
.login-dialog-button {
&.cancel-button,
@ -28,50 +37,89 @@ $_gdm_dialog_width: 23em;
}
&.cancel-button {
padding: $base_padding*1.5;
padding: $base_padding * 1.5;
}
}
.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 {
margin:3em 0;
margin: 3em 0;
}
.login-dialog-banner-view {
max-width: $_gdm_dialog_width;
.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-banner { color: darken($_gdm_fg,10%); }
.login-dialog-banner-view { max-width: $_gdm_dialog_width; }
.login-dialog-message { text-align: center; }
.login-dialog-user-selection-box { padding: 100px 0px; }
.login-dialog-not-listed-label {
@include fontsize($base_font_size);
font-weight: bold;
color: darken($_gdm_fg,30%);
padding: $base_padding*2;
.login-dialog-not-listed-button:focus &,
.login-dialog-not-listed-button:hover & {
color: $_gdm_fg;
}
.login-dialog-not-listed-button:focus & {
text-decoration: underline;
}
@extend %heading;
padding: $base_padding;
}
.login-dialog-not-listed-button {
// use button styling
@extend %button_common;
@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);}
&:hover { @include button(hover, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
&: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 {
spacing: 6px;
spacing: $base_padding;
margin-left: 2em;
}
.login-dialog-auth-list-title {
margin-left: 2em;
}
.login-dialog-auth-list-item {
border-radius: $base_border_radius*2;
padding: 4px;
border-radius: $base_border_radius * 2;
padding: $base_margin;
color: darken($_gdm_fg,30%);
&:focus, &:selected {
@ -81,84 +129,69 @@ $_gdm_dialog_width: 23em;
}
.login-dialog-auth-list-label {
@include fontsize($base_font_size + 2);
font-weight: bold;
padding-left: 15px;
&:ltr { padding-left: 14px; text-align: left; }
&:rtl { padding-right: 14px; text-align: right; }
@extend %title_4;
&:ltr { padding-left: $base_padding * 2.5; text-align: left; }
&:rtl { padding-right: $base_padding * 2.5; text-align: right; }
}
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
.login-dialog-user-list {
spacing: 12px;
// User list
.login-dialog-user-list-view {
width: $_gdm_dialog_width;
-st-vfade-offset: 3em;
.login-dialog-user-list-item {
border-radius: $base_border_radius + 4px;
padding: $base_padding;
background-color: transparentize($_gdm_fg, .95);
color: $_gdm_fg;
.login-dialog-user-list {
margin: 0 $base_margin * 2; // margin to account for scrollbar
spacing: $base_padding * 2;
@if $is_highcontrast {
box-shadow:inset 0 0 0 1px $hc_inset_color;;
}
.user-widget .user-icon {
border: 4px solid transparent;
}
.login-dialog-user-list-item {
// use button styling
@extend %button_common;
@include button(normal, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);
&: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);}
.login-dialog-timed-login-indicator {
height: 2px;
margin-top: 6px;
background-color: darken($_gdm_fg, 30%);
}
border-radius: $modal_radius;
padding: $base_padding * 1.5;
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
}
// create border for indicating logged in user
.user-icon {
border: 2px solid transparent;
}
&:expanded .login-dialog-user-list-item {
transition-duration: 300ms;
transition-timing-function: ease;
.login-dialog-timed-login-indicator {
height: 2px;
margin-top: $base_padding;
background-color: transparentize($_gdm_fg, .3);
}
&: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 {
.user-widget .user-icon {
border-color: $selected_bg_color;
&:logged-in {
// color border for logged-in user
.user-icon {
border-color: $selected_bg_color;
StIcon {
background-color: transparentize($selected_bg_color, .7);
}
}
}
}
}
}
.login-dialog-prompt-layout {
spacing: $base_padding*2;
width: 26em;
}
.login-dialog-prompt-entry {
@extend %system_entry;
}
/* Screen Shield */
// a.k.a. the lockscreen
// Screen Shield
// a.k.a. the lockscreen, uses transparent styles
.unlock-dialog {
background-color: transparent;
// %system_entry style override to have neutral focus color with wallpaper background
.login-dialog-prompt-entry {
&:focus { @include entry(focus, $c:$system_fg_color, $fc:transparentize($system_fg_color, 0.5));}
@extend %lockscreen_entry;
}
.button,
.icon-button {
@extend %lockscreen_button;
}
}
@ -178,7 +211,7 @@ $_gdm_dialog_width: 23em;
.unlock-dialog-clock-time {
@extend %numeric;
@include fontsize(72);
@include fontsize(72pt);
font-weight: 200;
}
@ -189,8 +222,8 @@ $_gdm_dialog_width: 23em;
.unlock-dialog-clock-hint {
margin-top: 2em;
padding: $base_padding $base_padding*3;
border-radius: $base_border_radius*2;
padding: $base_padding $base_padding * 3;
border-radius: $base_border_radius * 2;
font-weight: bold;
}
}
@ -205,8 +238,8 @@ $_gdm_dialog_width: 23em;
}
.unlock-dialog-notifications-container {
margin: 12px;
spacing: 6px;
margin: $base_margin * 3;
spacing: $base_padding;
width: $_gdm_dialog_width;
background-color: transparent;
@ -217,7 +250,7 @@ $_gdm_dialog_width: 23em;
.notification,
.unlock-dialog-notification-source {
padding: 12px 16px;
padding: $base_margin * 3 $base_margin * 4;
border: none;
background-color: transparentize($_gdm_fg,0.9);
color: $_gdm_fg;
@ -227,63 +260,70 @@ $_gdm_dialog_width: 23em;
}
}
.unlock-dialog-notification-icon {
icon-size: $large_icon_size;
}
.unlock-dialog-notification-label {
padding-left: 12px;
padding-left: $base_padding * 2;
padding-right: 0;
&:rtl { padding-right: 12px; padding-left: 0; }
&:rtl { padding-right: $base_padding * 2; padding-left: 0; }
}
.unlock-dialog-notification-count-text {
font-weight: bold;
padding: 0 12px;
padding: 0 $base_padding * 2;
color: $_gdm_fg;
background-color: transparentize($_gdm_fg, 0.9);
border-radius: 99px;
background-color: transparentize($_gdm_fg, .9);
border-radius: $forced_circular_radius;
}
// User Widget
.user-widget {
.login-dialog,
.unlock-dialog {
.user-widget-label {
color: $_gdm_fg;
}
// User Widget
.user-widget {
// layout of the user list
&.horizontal {
spacing: $base_padding*3;
// common
.user-widget-label {
@extend %title_3;
color: $_gdm_fg;
}
.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);
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 login prompt
&.vertical {
spacing: $base_padding*4;
.user-widget-label {
@extend %title_1;
text-align: center;
margin-bottom: .75em;
// layout of the user list
&.horizontal {
spacing: $base_padding * 3;
.user-widget-label {
@extend %title_3;
}
}
.user-icon {
icon-size: $base_icon_size*10;
// layout of the login prompt
&.vertical {
spacing: $base_padding * 4;
& StIcon {
padding: 32px;
icon-size: $base_icon_size*4;
background-color: transparentize($_gdm_fg, 0.9);
.user-widget-label {
@extend %title_1;
text-align: center;
margin-bottom: .75em;
}
.user-icon {
icon-size: $base_icon_size * 10;
& StIcon {
padding: $base_padding * 4;
}
}
}
}

19
gnome-shell-sass/widgets/_looking-glass.scss
View File

@ -9,13 +9,13 @@
border-radius: $modal_radius;
margin-top: $base_margin;
border-top-width: 0;
border: 2px solid transparent;
padding: $base_padding;
spacing: $base_padding;
box-shadow: 0 2px 4px 0 $shadow_color;
@if $is_highcontrast {
border: 2px solid $hc_inset_color;
@if $contrast == 'high' {
border-color: $hc_inset_color;
background-color: $osd_bg_color;
box-shadow:none;
}
@ -29,7 +29,7 @@
.lg-toolbar-button {
@extend %osd_button;
padding: $base_padding $base_padding*2;
padding: $base_padding $base_padding * 2;
& > StIcon { icon-size: $base_icon_size; }
}
@ -41,9 +41,9 @@
.notebook-tab {
@extend %osd_button;
-natural-hpadding: $base_padding*2;
-minimum-hpadding: $base_padding*2;
padding: $base_padding $base_padding*2;
-natural-hpadding: $base_padding * 2;
-minimum-hpadding: $base_padding * 2;
padding: $base_padding $base_padding * 2;
}
StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
@ -54,7 +54,7 @@
StEntry {
@extend %osd_entry;
min-height: 22px;
min-height: to_em(22px);
}
.shell-link {
@ -97,8 +97,7 @@
}
.lg-extension {
padding: $base_padding*2;
@include card;
@extend %card;
}
.lg-extension-name {

200
gnome-shell-sass/widgets/_message-list.scss
View File

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

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

@ -7,21 +7,21 @@
// User icon
.user-icon {
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;
border-radius: 99px;
icon-size: $base_icon_size * 4; // 64px
& StIcon {
background-color: transparentize($osd_fg_color,0.95);
border-radius: 99px;
padding: $base_padding * 2 ; // 12px
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
padding: $base_padding * 2;
}
&.user-avatar {
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;
margin: $base_margin;
.notification-actions {
spacing: 0;
}
.notification-button {
@extend %bubble_button;
@if $contrast == 'high' {
@include draw_hc_inset();
}
}
// 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%;
.notification-buttons-bin {
spacing: 0;
}
// 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; }
.notification-button {
@extend %bubble_button;
}

32
gnome-shell-sass/widgets/_osd.scss
View File

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

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

@ -9,5 +9,5 @@
}
.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 */
// 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);
$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);
$transparent_panel_fg_color: $light_1; // always white for transparent lock screens
$system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview
$panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels
$panel_height: 2.2em;
$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;
@extend %numeric;
transition-duration: $panel_transition_duration;
box-shadow: inset 0 -1px 0 0 $panel_border_color;
// panel menus
.panel-button {
@include panel_button($bg: $panel_fg_color, $border_radius: 3px);
@include panel_button();
-natural-hpadding: 6px;
-minimum-hpadding: 4px;
// status area icons
.system-status-icon {
icon-size: $base_icon_size;
padding: ($base_padding - 1px) 0px ($base_padding - 1px) 0px;
icon-size: $scalable_icon_size;
padding: 0;
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 {
-st-icon-style: symbolic;
// 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 {
-natural-hpadding: 10px;
-minimum-hpadding: 8px;
& StBoxLayout {
padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
spacing: 5px;
}
& .workspace-dot {
border-radius: 999px;
min-width: 8px;
min-height: 8px;
border-radius: $forced_circular_radius;
min-width: $scalable_icon_size * 0.5;
min-height: $scalable_icon_size * 0.5;
background-color: $panel_fg_color;
}
}
@ -63,11 +67,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator,
&.screen-sharing-indicator {
StBoxLayout {
spacing: $base_padding;
spacing: $scaled_padding;
}
StIcon {
icon-size: $base_icon_size;
icon-size: $scalable_icon_size;
&:first-child {
margin-left: 3px;
@ -76,11 +80,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
&.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 {
@include panel_button($privacy_indicator_color, $flat: false);
@include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled);
}
// 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
// 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", $border_radius: 3px);
@include panel_button($highlighted_child: true, $child_class: '.clock');
-natural-hpadding: 0px;
-minimum-hpadding: 0px;
padding-left: 0px;
@ -97,45 +101,66 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
.clock {
// 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,
&.login-screen,
&:overview {
&.login-screen {
background-color: transparent;
box-shadow: none;
// unfortunate duplication to keep indicator style in these states
.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 {
background-color: $panel_system_fg_color;
background-color: $system_panel_fg_color;
}
// clock
&.clock-display {
@include panel_button($panel_system_fg_color, $fg:$panel_system_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);
@include panel_button($fg:$system_panel_fg_color, $highlighted_child: true, $child_class: '.clock');
}
}
}
.panel-status-indicators-box {
spacing: 2px;
padding-right: 2px;
padding-left: 3px;
}
.panel-status-indicators-box,
.panel-status-menu-box {
spacing: 2px;
}
@ -158,13 +183,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// App Menu
#appMenu {
spacing: $base_padding;
spacing: $scaled_padding;
.label-shadow { color: transparent; }
}
#appMenu .panel-status-menu-box {
padding: 0 $base_padding;
spacing: $base_padding;
padding: 0 $scaled_padding;
spacing: $scaled_padding;
}

25
gnome-shell-sass/widgets/_popovers.scss
View File

@ -2,13 +2,13 @@
$menu_bg_color: $bg_color;
$menuitem_bg_color: lighten($menu_bg_color, 4%);
$menuitem_border_radius: $base_border_radius*1.5;
$menuitem_border_radius: $base_border_radius * 1.5;
$submenu_bg_color: lighten($menu_bg_color, 7%);
// the popover itself
.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
@ -26,7 +26,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
.popup-menu-content {
padding: $base_padding;
background-color: $bg_color;
border-radius: $modal_radius*1.25;
border-radius: $modal_radius * 1.25;
border: 1px solid $outer_borders_color;
box-shadow: 0 2px 4px 0 $shadow_color;
}
@ -40,7 +40,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
&:checked {
border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important;
@if $is_highcontrast {
@if $contrast == 'high' {
border: 1px solid $hc_inset_color;
border-bottom-width:0;
}
@ -67,22 +67,23 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// symbolic icons in popover
.popup-menu-arrow,
.popup-menu-icon {
icon-size: 16px !important; // for some reason the variable doesn't work here
icon-size: $scalable_icon_size;
}
// popover submenus
.popup-sub-menu {
border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px;
margin-bottom: $base_padding;
border: 1px solid transparent;
@if $is_highcontrast {
border: 1px solid $hc_inset_color;
@if $contrast == 'high' {
border-color: $hc_inset_color;
}
// submenu specific styles
.popup-menu-item {
border-radius: 0;
@include menuitem($bg:$submenu_bg_color, $flat:false);
@include menuitem($bg:$submenu_bg_color);
border-top-width:0;
&:last-child {
@ -103,8 +104,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// container for radio and check boxes
.popup-menu-ornament {
icon-size: $base_icon_size !important;
width: $base_icon_size;
icon-size: $scalable_icon_size !important;
width: $scalable_icon_size;
}
// separator
@ -144,8 +145,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// "Open Windows" label
> StLabel {
@extend %caption_heading;
&:ltr {margin-right: $base_margin*2;}
&:rtl {margin-left: $base_margin*2;}
&:ltr {margin-right: $base_margin * 2;}
&:rtl {margin-left: $base_margin * 2;}
}
}
}

113
gnome-shell-sass/widgets/_quick-settings.scss
View File

@ -1,45 +1,46 @@
.quick-settings {
padding: $base_padding*3;
border-radius: $modal_radius*2.25;
padding: $base_padding * 3;
border-radius: $modal_radius * 2.25;
.icon-button, .button {
padding: $base_padding*1.75;
padding: $base_padding * 1.75;
}
}
.quick-settings-grid {
spacing-rows: $base_padding*2;
spacing-columns: $base_padding*2;
spacing-rows: $base_padding * 2;
spacing-columns: $base_padding * 2;
}
.quick-toggle, .quick-menu-toggle {
border-radius: 99px;
border-radius: $forced_circular_radius;
min-width: 12em;
max-width: 12em;
min-height: 48px;
min-height: $scalable_icon_size * 3; // use icon size so the button scales
border:none;
}
.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; }
/* Move padding into the box; this is to allow menu arrows
to extend to the border */
&.button { padding: 0; }
& > StBoxLayout { padding: 0 $base_padding*2; }
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
& > StBoxLayout { padding: 0 $base_padding * 2; }
&:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
.quick-toggle-title { font-weight: bold; }
& StBoxLayout > .quick-toggle-subtitle {
@extend %caption;
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 {
@ -47,31 +48,31 @@
min-width: auto;
max-width: auto;
&:ltr { border-radius: 99px 0 0 99px; }
&:ltr > StBoxLayout { padding-right: $base_padding*1.5; }
&:rtl { border-radius: 0 99px 99px 0; }
&:rtr > StBoxLayout { padding-left: $base_padding*1.5; }
&:ltr { border-radius: $forced_circular_radius 0 0 $forced_circular_radius; }
&:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
&:rtl { border-radius: 0 $forced_circular_radius $forced_circular_radius 0; }
&:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
&:ltr:last-child { border-radius: 99px; }
&:rtl:last-child { border-radius: 99px; }
&:ltr:last-child { border-radius: $forced_circular_radius; }
&:rtl:last-child { border-radius: $forced_circular_radius; }
}
& .quick-toggle-arrow {
padding: $base_padding $base_padding*1.75;
padding: $scaled_padding $scaled_padding * 1.75;
border-width: 0;
border-color: transparentize($fg_color, .75);
&:checked {
@include button(default, $c:$selected_bg_color);
@extend %default_button;
border-color: $selected_borders_color;
}
&:ltr {
border-radius: 0 99px 99px 0;
border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
border-left-width: 1px;
}
&:rtl {
border-radius: 99px 0 0 99px;
border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
border-right-width: 1px;
}
}
@ -84,33 +85,36 @@
.slider-bin {
&:focus {@include button(focus);}
min-height: 16px; // slider size
padding: $base_padding;
border-radius: 99px;
border-radius: $forced_circular_radius;
}
}
.quick-toggle-menu {
@include card;
@extend %card;
// override some card styles
background-color: $bg_color !important;
color: $fg_color !important;
&:insensitive {
// override insensitive style on submenu
@include button(normal);
}
border-radius: $base_border_radius*3;
padding: $base_padding*2;
margin: $base_padding*2 $base_padding*3 0;
border-radius: $base_border_radius * 3;
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
margin: $base_padding * 2 $base_padding * 3 0;
.popup-menu-item > StIcon {
-st-icon-style: symbolic;
icon-size: $scalable_icon_size;
}
& .header {
spacing-rows: 0.5 * $base_padding;
spacing-columns: $base_padding*2;
padding-bottom: 2 * $base_padding;
spacing-rows: $base_padding * 0.5;
spacing-columns: $base_padding * 2;
padding-bottom: $base_padding * 2;
& .icon {
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
border-radius: 999px;
icon-size: $medium_scalable_icon_size;
border-radius: $forced_circular_radius;
padding: 1.5 * $base_padding;
background-color: transparentize($fg_color, 0.8);
@ -118,6 +122,14 @@
background-color: $selected_bg_color;
color: $selected_fg_color;
}
// draw hc outline
@if $contrast == 'high' {
@include draw_hc_inset();
&.active {
@include draw_hc_inset($no_inset: true);
}
}
}
& .title {
@ -134,7 +146,7 @@
}
.quick-settings-system-item {
& > StBoxLayout { spacing: 2 * $base_padding; }
& > StBoxLayout { spacing: $base_padding * 2; }
& .power-item {
min-height: 0;
@ -148,7 +160,7 @@
}
.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 {
@ -164,23 +176,19 @@
.device-subtitle { color: transparentize($fg_color, 0.5); }
.keyboard-brightness-item .slider {
min-height: 16px;
}
.keyboard-brightness-level {
spacing: $base_padding;
.button:checked { @include button(default, $c:$selected_bg_color); }
.button:checked { @extend %default_button; }
}
// background apps
.background-apps-quick-toggle {
min-height: 40px;
min-height: to_em(40px);
background-color: transparent;
& StIcon { icon-size: $base_icon_size !important; }
& StIcon { icon-size: $scalable_icon_size !important; }
}
.background-app-item {
@ -190,9 +198,14 @@
icon-size: $large_icon_size !important;
-st-icon-style: regular !important;
}
& .close-button {
@extend .icon-button;
& .icon-button {
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 {
padding: $base_padding;

88
gnome-shell-sass/widgets/_screenshot.scss
View File

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

8
gnome-shell-sass/widgets/_search-entry.scss
View File

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

36
gnome-shell-sass/widgets/_search-results.scss
View File

@ -6,17 +6,17 @@
}
#searchResultsContent {
max-width: 1072px;
max-width: 1044px;
}
// search results sections "the boxes"
.search-section {
// This should be equal to #searchResultsContent spacing
spacing: $base_padding*3;
spacing: $base_padding * 3;
// separator (unstyled)
.search-section-separator {
height: $base_margin*2; // use it as a spacer
height: $base_margin * 2; // use it as a spacer
background-color: transparent;
}
}
@ -25,14 +25,19 @@
.search-section-content {
background-color: $system_overlay_bg_color;
color: $system_fg_color;
border-radius: $modal_radius*1.5;
padding: $base_padding*2;
margin:0 $base_margin*3;
border-radius: $modal_radius * 1.5;
padding: $base_padding * 2;
margin:0 $base_margin * 3;
border: 2px solid transparent;
@if $contrast == 'high' {
border-color: $hc_inset_color;
}
}
%search_section_content_item {
@include tile_button($system_fg_color);
border-radius: $base_border_radius+3px;
@include tile_button($bg:$system_overlay_bg_color);
border-radius: $base_border_radius * 1.65;
}
// "no results" text
@ -42,13 +47,13 @@
}
.grid-search-results {
spacing: $base_padding*5;
margin:0 $base_margin*3;
spacing: $base_padding * 5;
margin:0 $base_margin * 3;
}
// Search results with icons
.grid-search-result {
@extend .app-well-app;
@extend .overview-tile;
}
// search result provider
@ -86,11 +91,18 @@
// list item title (with leading icon)
.list-search-result-title {
spacing: $base_padding * 2;
// font-weight: bold;
@if $contrast == 'high' {
font-weight: bold;
}
}
// list item description
.list-search-result-description {
color: $system_insensitive_fg_color;
@if $contrast == 'high' {
color: $system_fg_color;
}
}
}

9
gnome-shell-sass/widgets/_slider.scss
View File

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

22
gnome-shell-sass/widgets/_switcher-popup.scss
View File

@ -1,8 +1,8 @@
/* App Switcher */
// 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
.switcher-popup {
@ -14,7 +14,7 @@ $switcher_padding: $base_padding*2;
.switcher-list {
@extend %osd_panel;
padding: $switcher_padding;
border-radius: $modal_radius+$switcher_padding;
border-radius: $switcher_radius;
box-shadow: 0 8px 8px 0 $shadow_color;
// container for items in list
@ -24,11 +24,19 @@ $switcher_padding: $base_padding*2;
// each item in the list
.item-box {
@include tile_button($osd_fg_color);
// override over style so mouse doesn't steal focus
@include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
// override %tile style so mouse doesn't steal focus
&: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);
}
}
}

6
gnome-shell-sass/widgets/_switches.scss
View File

@ -2,7 +2,7 @@
// these are equal to the size of the SVG assets
$switch_height: 26px;
$switch_width: 48px;
$switch_width: 46px;
.toggle-switch {
color: $fg_color;
@ -10,7 +10,9 @@ $switch_width: 48px;
width: $switch_width;
background-size: contain;
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg"));
&: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"));
}
& StIcon {icon-size: $base_icon_size;}
}

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

@ -1,18 +1,10 @@
/* 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_size: 30px;
$window_close_button_padding: 3px;
// Window picker
.window-picker {
// Space between window thumbnails
spacing: $window_picker_spacing;
spacing: $base_padding;
}
// Window titles
@ -24,14 +16,19 @@ $window_close_button_padding: 3px;
.window-close {
background-color: $window_close_button_color;
color: $system_fg_color;
border-radius: 99px;
border-radius: $forced_circular_radius;
box-shadow: 0 2px 4px 0 $shadow_color;
padding: $window_close_button_padding;
height: $window_close_button_size;
width: $window_close_button_size;
padding: $base_padding * 0.5;
height: $large_icon_size;
width: $large_icon_size;
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 {
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%);
}
@if $is_highcontrast {
border:2px solid $outer_borders_color;
}
}
.workspace-background {

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

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

4
gnome-shell-sass/widgets/_workspace-thumbnails.scss
View File

@ -9,10 +9,10 @@
.workspace-thumbnail {
color: $system_fg_color;
background-color: lighten($system_bg_color, 10%);
border-radius: $base_border_radius*0.5;
border-radius: $base_border_radius * 0.5;
border: 1px solid transparent;
@if $is_highcontrast {
@if $contrast == 'high' {
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/_dialogs.scss',
'gnome-shell-sass/widgets/_entries.scss',
'gnome-shell-sass/widgets/_hotplug.scss',
'gnome-shell-sass/widgets/_ibus-popup.scss',
'gnome-shell-sass/widgets/_keyboard.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