diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/_colors.scss b/gnome-shell/upstream/theme/gnome-shell-sass/_colors.scss
index cbb3b716e8..b3a52b6f6b 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/_colors.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/_colors.scss
@@ -9,7 +9,7 @@
// global colors
$base_color: if($variant == 'light', $light_1, $_base_color_dark);
-$bg_color: if($variant == 'light', $_base_color_light, lighten($base_color, 5%));
+$bg_color: if($variant == 'light', $_base_color_light, #36363a);
$fg_color: if($variant == 'light', $_base_color_dark, $light_1);
// OSD 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%));
// accent colors
-$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));
+$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 20%), st-lighten(-st-accent-color, 30%));
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/_default-colors.scss b/gnome-shell/upstream/theme/gnome-shell-sass/_default-colors.scss
index bf18541408..df7bfb6ece 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/_default-colors.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/_default-colors.scss
@@ -1,8 +1,11 @@
// Named Colors
// base colors
-$_base_color_dark: desaturate($dark_4, 100%);
-$_base_color_light: desaturate($light_2, 100%);
+$_base_color_dark: #222226;
+$_base_color_light: #fafafb;
+
+// accent colors
+$accent_color: if($variant== 'light', -st-accent-color, st-mix(-st-accent-color, $light_1, 60%));
// colors for destructive elements
$destructive_bg_color: if($variant == 'light', $red_3, $red_4);
@@ -14,7 +17,7 @@ $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_bg_color: if($variant == 'light', $yellow_5, #cd9309); // uses darker off-palette yellow
$warning_fg_color: transparentize(black, .2);
$warning_color: $warning_bg_color;
@@ -28,23 +31,21 @@ $link_visited_color: st-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: -st-accent-color;
-$focus_border_color: st-transparentize($focus_color, 0.5);
+// border opacities
+$border_opacity: if($variant == 'light', .85, .9); // change the border opacity in different variants
+$focus_border_opacity: .2;
// High Contrast overrides
@if $contrast == 'high' {
// increase border opacity
$border_opacity: .5;
+ $focus_border_opacity: .1;
// remove shadows
$shadow_color: transparent;
$text_shadow_color: transparent;
- // less transparent focus color
- $focus_border_color: st-transparentize($focus_color, 0.2);
}
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/_drawing.scss b/gnome-shell/upstream/theme/gnome-shell-sass/_drawing.scss
index a2fa5f2b2f..d98cb49397 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/_drawing.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/_drawing.scss
@@ -20,7 +20,7 @@
}
// Function to mix the color and make the focus background
-@function focus_bg_color($bg, $fc:$focus_color) {
+@function focus_bg_color($bg, $fc:$accent_color) {
@return st-mix($fc, $bg, 5%);
}
@@ -54,10 +54,13 @@
}
// Draw the focus ring
-@mixin focus_ring($width: 2px, $fc: $focus_border_color, $border: false) {
- box-shadow: inset 0 0 0 $width $fc !important;
+@mixin focus_ring($width: 2px, $fc: $accent_color, $border: false) {
+
+ $focus_color: st-transparentize($fc, $focus_border_opacity);
+
+ box-shadow: inset 0 0 0 $width $focus_color !important;
@if $border {
- border:$width solid $fc !important;
+ border:$width solid $focus_color !important;
box-shadow: none;
}
}
@@ -90,7 +93,7 @@
// entry colors
$entry_fg_color: $c;
$entry_bg_color: mix($c, $bc, $background_mix_factor);
- $entry_focus_color: $focus_color;
+ $entry_focus_color: $accent_color;
// entry color overrides for lockscreen style
@if $style == 'lockscreen' {
@@ -128,7 +131,7 @@
// focus styles
@if $type == 'focus' {
- @include focus_ring();
+ @include focus_ring($fc:$entry_focus_color);
background-color: focus_bg_color($entry_bg_color);
color: $entry_fg_color;
@@ -357,6 +360,9 @@
&:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $always_dark: $system);}
} @else {
@include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);
+ // override the mixin to have the flat button always be transparent
+ // fixes issue with overlapping tiles
+ background-color: transparent;
&: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);}
@@ -372,23 +378,15 @@
}
// styling for all menuitems in popovers
-@mixin menuitem($bg, $style: flat) {
+@mixin menuitem($bg) {
// extend common styles
@extend %menuitem;
- @if $style == 'flat' {
- @include button(undecorated);
- } @else {
- @include button(normal, $c:$bg);
- }
- &:hover {
- @include button(hover, $c:$bg);
- }
- &:active {@include button(active, $c:$bg);}
- &:selected,
- &:checked {@include button(checked, $c:$bg);}
- &:insensitive {@include button(insensitive, $c:$bg);}
+ @include button(undecorated, $c:$bg, $style: flat);
+ &:active { @include button(active, $c:$bg, $style: flat);}
+ &:hover, &:selected, &:checked { @include button(hover, $c:$bg, $style: flat);}
+ &:insensitive { @include button(insensitive, $c:$bg, $style: flat);}
}
// Panel menu/button drawing function
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_dialogs.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_dialogs.scss
index c08eb91ba5..59f77d3c4d 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -1,24 +1,49 @@
/* Modal Dialogs */
-.headline {
- @extend %title_4;
-}
-
+// style for all dialogs
.modal-dialog {
background-color: $bg_color;
border-radius: $alert_radius;
- box-shadow: inset 0 0 0 1px $outer_borders_color;
padding: $base_padding * 4;
+ spacing: $base_padding * 3;
+ box-shadow: 0 12px 8px 12px rgba(0,0,0,0.03);
.modal-dialog-content-box {
- spacing: $base_margin * 8;
- margin-top: $base_margin * 2;
- margin-bottom: $base_margin * 4;
+ padding-top: $base_padding * 2;
+ spacing: $base_padding * 3;
max-width: 28em;
}
- .modal-dialog-linked-button {
- @extend %dialog_button;
+ .modal-dialog-button-box {
+ padding-top: $base_padding;
+ .modal-dialog-button {
+ @extend %dialog_button;
+ }
+ }
+}
+
+// lists in dialogs
+.dialog-list {
+ spacing: $base_padding * 3;
+
+ .dialog-list-title {
+ @extend %heading;
+ text-align: center;
+ }
+
+ .dialog-list-scrollview { max-height: 200px; }
+ .dialog-list-box {
+ spacing: 1em;
+
+ .dialog-list-item {
+ spacing: 1em;
+
+ .dialog-list-item-title { font-weight: bold; }
+ .dialog-list-item-description {
+ @extend %caption;
+ color: darken($fg_color,5%);
+ }
+ }
}
}
@@ -26,9 +51,14 @@
.end-session-dialog {
width: 24em;
+ // special style for session warnings
.end-session-dialog-battery-warning,
.dialog-list-title {
color: $warning_color;
+ background-color: transparentize($warning_color, 0.9);
+ padding: $base_padding * 1.5;
+ border-radius: $base_border_radius;
+ margin: $base_margin 0;
}
}
@@ -40,125 +70,106 @@
text-align: center;
@extend %title_2;
- &.lightweight { @extend %title_4;}
+ &.lightweight {
+ @extend %title_4;
+ }
}
- .message-dialog-description { text-align: center; }
-}
-
-/* Dialog List */
-.dialog-list {
- spacing: $base_padding * 3;
-
- .dialog-list-title {
+ .message-dialog-description {
text-align: center;
- @extend %heading;
- }
-
- .dialog-list-scrollview { max-height: 200px; }
- .dialog-list-box {
- spacing: 1em;
-
- .dialog-list-item {
- spacing: 1em;
-
- .dialog-list-item-title { font-weight: bold; }
- .dialog-list-item-description {
- color: darken($fg_color,5%);
- @extend %caption;
- }
- }
}
}
/* Run Dialog */
.run-dialog {
- .modal-dialog-content-box {
- margin-top: $base_padding * 4;
- margin-bottom: $base_padding * 2;
+ width: 24em;
+
+ // run dialog needs to override bottom padding
+ // to account for inexplicable extra padding
+ padding-bottom: $base_padding;
+
+ .run-dialog-entry {
+ padding: $base_padding * 2 $base_padding * 1.5;
}
- .run-dialog-entry { width: 20em; }
.run-dialog-description {
@extend %caption;
- text-align: center;
color: darken($fg_color, 20%);
}
}
/* Password or Authentication Dialog */
-
.prompt-dialog {
width: 28em;
- .modal-dialog-content-box {
- margin-bottom: $base_margin * 6;
+ .prompt-dialog-password-grid {
+ spacing-rows: $base_margin * 2;
+ spacing-columns: $base_margin;
+
+ .prompt-dialog-password-entry {
+ width: auto;
+ // 4px (spacing) + 16px (spinner-width)
+ &:ltr { margin-left: $base_margin+$base_icon_size; }
+ &:rtl { margin-right: $base_margin+$base_icon_size; }
+ }
}
-}
-.prompt-dialog-password-grid {
- spacing-rows: $base_margin * 2;
- spacing-columns: $base_margin;
+ .prompt-dialog-password-layout {
+ spacing: $base_margin * 2;
+ }
.prompt-dialog-password-entry {
- width: auto;
-
- // 4px (spacing) + 16px (spinner-width)
- &:ltr { margin-left: $base_margin+$base_icon_size; }
- &:rtl { margin-right: $base_margin+$base_icon_size; }
+ width: 20em;
+ padding: $base_padding * 2 $base_padding * 1.5;
}
-}
-
-.prompt-dialog-password-layout {
- spacing: $base_margin * 2;
-}
-
-.prompt-dialog-password-entry {
- width: 20em;
-}
-.prompt-dialog-error-label,
-.prompt-dialog-info-label,
-.prompt-dialog-null-label {
- text-align: center;
- @extend %caption;
-}
+ .prompt-dialog-error-label,
+ .prompt-dialog-info-label,
+ .prompt-dialog-null-label {
+ @extend %caption;
+ text-align: center;
+ }
-.prompt-dialog-error-label {
- color: $warning_color;
+ .prompt-dialog-error-label {
+ color: $warning_color;
+ }
}
-
/* Polkit Dialog */
-
.polkit-dialog-user-layout {
text-align: center;
spacing: $base_margin * 2;
margin-bottom: $base_padding;
- .polkit-dialog-user-root-label { color: $warning_color; }
+ .polkit-dialog-user-label,
+ .polkit-dialog-user-root-label {
+ @extend %title_4;
+ }
+
+ .polkit-dialog-user-root-label {
+ color: $warning_color;
+ }
}
/* Audio selection dialog */
.audio-device-selection-dialog {
- .modal-dialog-content-box { margin-bottom: $base_margin * 7; }
- .audio-selection-box { spacing: $base_margin * 5; }
-}
+ min-width: 24em;
-.audio-selection-device {
- border-radius: $base_border_radius * 2;
- &:hover,&:focus { background-color: $hover_bg_color; }
- &:active {
- background-color: -st-accent-color;
- color: -st-accent-fg-color;
- }
-}
+ .audio-selection-box {
+ spacing: $base_padding * 2;
-.audio-selection-device-box {
- padding: $base_margin * 5;
- spacing: $base_margin * 5;
-}
+ // styled similar to switcher-popup
+ .audio-selection-device {
+ @include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
-.audio-selection-device-icon {
- icon-size: $base_icon_size * 4;
+ .audio-selection-device-box {
+ padding: $base_padding * 2;
+ spacing: $base_padding * 2;
+ }
+
+ .audio-selection-device-icon {
+ icon-size: $base_icon_size * 4;
+ }
+ }
+ }
}
/* Welcome dialog */
@@ -173,4 +184,9 @@
/* Access portal dialog */
.access-dialog {
text-align: center;
-}
\ No newline at end of file
+}
+
+// specific label style for restart message
+.restart-message {
+ @extend %title_4;
+}
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_ibus-popup.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_ibus-popup.scss
index 648c375c46..bedc311865 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_ibus-popup.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_ibus-popup.scss
@@ -7,6 +7,7 @@
.candidate-popup-content {
padding: $base_padding;
spacing: $base_padding;
+ border-radius: $base_padding * 2;
@extend .popup-menu-content;
}
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_keyboard.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_keyboard.scss
index 489da57915..ce68d1ad34 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -1,9 +1,7 @@
/* On-screen Keyboard */
-$key_size: 1.2em;
-$key_border_radius: $base_border_radius * 1.25;
+$key_border_radius: to_em($base_border_radius);
$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%));
@@ -33,10 +31,6 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
.keyboard-key {
@include fontsize($base_font_size + 5pt);
font-weight: bold;
- min-height: $key_size;
- min-width: $key_size;
- border-width: 1px;
- border-style: solid;
border-radius: $key_border_radius;
box-shadow: 0 1px 0 0 $shadow_color;
@@ -47,73 +41,40 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
&: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%);
- color: $osd_fg_color;
- border-color: $osd_borders_color;
- }
-
// non-character keys
&.default-key {
@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;
+ border:none;
// keys that may be latched: ctrl/alt/shift
&:latched {
- border-color: st-lighten(-st-accent-color, 5%);
background-color: -st-accent-color;
}
}
- // enter key is suggested-action
- &.enter-key {
- @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color);
- &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color);}
- &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);}
- &:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-fg-color);}
- border-radius: $key_border_radius;
- color: $osd_fg_color;
- }
-
- &.shift-key-lowercase {}
-
- // pressed shift has different style
- &.shift-key-uppercase {
- background-color: lighten($key_bg_color, 20%);
- color: $osd_bg_color;
- &:hover {
- background-color: lighten($key_bg_color, 25%);
- color: lighten($osd_bg_color, 5%);
- }
- }
-
// size of icons on keys
- StIcon { icon-size: $medium_icon_size; }
+ StIcon { icon-size: $medium_scalable_icon_size; }
}
// long press on a key popup
-.keyboard-subkeys {
- -arrow-border-radius: $base_border_radius * 2;
+.keyboard-subkeys-boxpointer {
+ -arrow-border-radius: $base_border_radius * 2 + $base_padding;
-arrow-background-color: $osd_bg_color;
-arrow-border-width: 1px;
-arrow-border-color: lighten($osd_bg_color, 9%);
-arrow-base: 20px;
-arrow-rise: 10px;
- -boxpointer-gap: $base_padding;
- padding: $base_padding;
-
- .keyboard-key {
- @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
+ -boxpointer-gap: $base_margin;
- &: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: $base_border_radius * 2 + $base_padding;
+ box-shadow: 0 0 12px 0 rgba(0,0,0,0.1);
- border-radius:$key_border_radius;
+ .key-container {
+ padding: $base_padding * 2;
+ spacing: $base_margin * 2;
}
}
@@ -146,7 +107,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
margin: 0 3px;
min-width: 32px;
border-radius: 4px;
- padding: 0px $base_padding * 3;
+ padding: $base_padding $base_padding * 3;
@include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color);
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_login-lock.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_login-lock.scss
index 477bd231ae..a89af5bf38 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_login-lock.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_login-lock.scss
@@ -31,9 +31,7 @@ $_gdm_dialog_width: 25em;
&.cancel-button,
&.switch-user-button,
- &.login-dialog-auth-menu-button,
- &.login-dialog-session-list-button,
- &.web-login-intro-button {
+ &.login-dialog-session-list-button {
@extend .icon-button;
@extend %system_button;
}
@@ -43,25 +41,6 @@ $_gdm_dialog_width: 25em;
}
}
-.login-dialog-auth-menu-button-title {
- @include fontsize($base_font_size - 1);
- color: darken($_gdm_fg,40%);
- font-weight: bold;
- padding-top: $base_padding;
- padding-bottom: $base_padding * 2;
- padding-left: $base_padding * 2;
- padding-right: $base_padding * 2;
-}
-
-.login-dialog-auth-menu-button-popup-menu-box {
- padding: $base_padding * 3;
-}
-
-.login-dialog-auth-menu-button-item {
- padding-left: $base_padding * 2;
- padding-right: $base_padding * 2;
-}
-
.login-dialog-button-box {
spacing: $base_padding * 2;
}
@@ -85,13 +64,6 @@ $_gdm_dialog_width: 25em;
}
}
-.login-dialog-menu-button-box {
- spacing: $base_padding * 2;
- padding-left: $base_padding * 2;
- padding-right: $base_padding * 2;
- padding-bottom: $base_padding * 2;
-}
-
.login-dialog-logo-bin {
margin: 3em 0;
}
@@ -213,77 +185,6 @@ $_gdm_dialog_width: 25em;
}
}
-.login-dialog-prompt-layout {
- spacing: $base_padding * 2;
- min-width: 30em;
-}
-
-.login-dialog-prompt-entry {
- @extend %system_entry;
-}
-
-.web-login-dialog-content-overlay {
- background-color: transparentize($bg_color, 0.3);
- border-radius: $modal_radius;
- margin-bottom: 3em;
-}
-
-.web-login-spinner {
- color: $osd_fg_color;
- background-color: transparentize($osd_bg_color, 0.5);
- border: 5px transparent;
- border-radius: 50px;
-}
-
-.web-login-title-label {
- @include fontsize($base_font_size);
- color: if($variant == 'dark', darken($fg_color,30%), lighten($fg_color,20%));
-}
-
-.web-login-url-label {
- @include fontsize($base_font_size);
- @extend %monospace;
- color: $fg_color;
- text-align: center;
-}
-
-.web-login-code-title-label {
- @include fontsize($base_font_size);
- @include fontsize($base_font_size);
- color: $fg_color;
-}
-
-.web-login-code-label {
- @include fontsize($base_font_size);
- color: $fg_color;
- font-weight: bold;
-}
-
-.web-login-prompt {
- padding-top: $base_padding;
- padding-bottom: $base_padding;
- padding-left: $base_padding * 4.5;
- padding-right: $base_padding * 4.5;
- spacing: 1.75em;
- border-radius: $base_border_radius * 2;
-}
-
-.web-login-intro-button-label {
- @include fontsize($base_font_size + 5);
- color: $fg_color;
- height: 3em;
- text-align: center;
- font-weight: bold;
-}
-
-.web-login-intro-button {
- @include fontsize($base_font_size);
- color: $fg_color;
- height: 3em;
- text-align: center;
- border-radius: $base_border_radius * 4;
-}
-
// Screen Shield
// a.k.a. the lockscreen, uses transparent styles
.unlock-dialog {
@@ -433,32 +334,3 @@ $_gdm_dialog_width: 25em;
}
}
}
-
-// Login Failed banner
-.auth-notification-banner {
- .message-header {
- width: 0px;
- height: 0px;
-
- .message-close-button {
- border: none;
- background-color: rgba(0, 0, 0, 0.0);
- }
- }
-}
-
-// QR Code
-.qr-code {
- @if ($variant == 'light') {
- $qrcode_bg_color: mix($fg_color, $bg_color, 8%);
- background-color: $qrcode_bg_color;
- border-color: $qrcode_bg_color;
- color: $fg_color;
- } @else {
- background-color: $_gdm_fg;
- border-color: $_gdm_fg;
- color: $_gdm_bg;
- }
- border-radius: $base_border_radius * .5;
- border-width: 1em;
-}
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_message-list.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_message-list.scss
index 60cb5bde73..a0792f7cf8 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -11,10 +11,10 @@
&:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
.message-list-placeholder {
- @extend %title_2;
- color: transparentize($fg_color, .75);
+ @extend %title_3;
+ color: transparentize($fg_color, .55);
@if $contrast == 'high' {
- color: transparentize($fg_color, .5);
+ color: $fg_color;
}
// icon size and color
> StIcon {
@@ -25,17 +25,16 @@
}
}
-.message-list-sections {
+.message-view {
// to account for scrollbar
&:ltr {margin-right: $base_margin * 3; }
&:rtl {margin-left: $base_margin * 3;}
- spacing: $base_padding * 2;
-}
+ -st-vfade-offset: 68px;
-.message-list-section,
-.message-list-section-list {
- spacing: $base_padding * 2;
+ .message {
+ margin-bottom: $base_padding * 2 !important;
+ }
}
// do-not-disturb + clear button
@@ -61,6 +60,30 @@
}
}
+// message notification group
+.message-notification-group {
+ spacing: $base_padding * 2;
+
+ .message-group-header {
+ padding: $base_padding;
+ .message-group-title {
+ @extend %title_2;
+ margin: 0 $base_margin;
+ }
+ }
+
+ // close button
+ .message-collapse-button {
+ @extend .icon-button;
+ color: $fg_color;
+ background-color: transparentize($fg_color, 0.8);
+ padding: 4px !important;
+ border: 4px transparent solid;
+ &:hover {background-color: transparentize($fg_color, 0.7);}
+ &:active {background-color: transparentize($fg_color, 0.8);}
+ }
+}
+
// message bubbles
.message {
@extend %card;
@@ -68,15 +91,28 @@
margin: 0;
border-radius: $modal_radius;
+ background-color: if($variant == 'light', $card_bg_color, lighten($card_bg_color, 5%));
+
+ &:second-in-stack {
+ background-color: if($variant == 'light', darken($card_bg_color, 4%), darken($card_bg_color, 1%));
+ box-shadow: 0 1px 1px 0 $card_shadow_color;
+ }
+
+ &:lower-in-stack {
+ background-color: if($variant == 'light', darken($card_bg_color, 7%), darken($card_bg_color, 4%));
+ box-shadow: none;
+ border-color: if($variant == 'light', darken($card_bg_color, 10%), transparent); // a not ideal workaround for light theme
+ }
+
// message header
.message-header {
spacing: $base_padding;
color: $insensitive_fg_color;
padding:0 $base_padding;
- // side padding to accommodate the close button
- &:ltr { padding-right:$base_padding - 2px; };
- &:rtl { padding-left:$base_padding - 2px; };
+ // remove side padding to accommodate the close button
+ &:ltr { padding-right: 0; }
+ &:rtl { padding-left: 0; }
// header source icon
.message-source-icon {
@@ -102,8 +138,8 @@
// 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 };
+ &:ltr { text-align: right; }
+ &:rtl { text-align: left; }
}
}
@@ -114,13 +150,17 @@
@extend %notification_button;
border-radius: $forced_circular_radius; // make circular
color: $fg_color;
- padding: 4px;
}
+ // increase padding to expand button to make it larger
.message-expand-button {
padding: $base_padding;
- &:ltr { margin-right: $base_padding; }
- &:rtl { margin-left: $base_padding; }
+ }
+
+ // add margin to close button to balance it with the expand button
+ .message-close-button {
+ margin: $base_padding * 0.5;
+ padding: 4px;
}
}
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_misc.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_misc.scss
index 2f1bfc3a4c..c6d05619e0 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_misc.scss
@@ -10,15 +10,15 @@
border-radius: $forced_circular_radius;
icon-size: $base_icon_size * 4;
- background-color: transparentize($osd_fg_color,0.95);
- color: $osd_fg_color;
+ background-color: transparentize($fg_color,0.95);
+ color: $fg_color;
& StIcon {
padding: $base_padding * 2;
}
&.user-avatar {
- box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9);
+ box-shadow:inset 0 0 0 1px transparentize($fg_color, 0.9);
@if $contrast == 'high' {
@include draw_hc_inset();
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_osd.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_osd.scss
index 13a77bca31..16b3bbc618 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_osd.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_osd.scss
@@ -35,7 +35,7 @@ $osd_levelbar_height:6px;
}
// Monitor number label
-.osd-monitor-label {
+.osd-monitor-label, .osd-break-countdown-label {
background-color: -st-accent-color;
color: -st-accent-fg-color;
border-radius: $modal_radius;
diff --git a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_quick-settings.scss b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 71b1a14488..6c6f062245 100644
--- a/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/gnome-shell/upstream/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -12,16 +12,15 @@
spacing-columns: $base_padding * 2;
}
-.quick-toggle, .quick-menu-toggle {
+.quick-toggle, .quick-toggle-has-menu {
border-radius: $forced_circular_radius;
min-width: 12em;
max-width: 12em;
min-height: $scalable_icon_size * 3; // use icon size so the button scales
- border:none;
}
+// standalone toggle button
.quick-toggle {
- background-color: none;
&:checked { @extend %default_button;}
& > StBoxLayout { spacing: $base_padding * 1.5; }
@@ -29,13 +28,18 @@
/* 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; }
+ & > 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; }
+ .quick-toggle-title {
+ @extend %heading;
+ }
- & StBoxLayout > .quick-toggle-subtitle {
+ .quick-toggle-subtitle {
@extend %caption;
font-weight: normal;
}
@@ -43,39 +47,92 @@
.quick-toggle-icon { icon-size: $scalable_icon_size; }
}
-.quick-menu-toggle {
+// toggle with a menu button
+.quick-toggle-has-menu {
& .quick-toggle {
min-width: auto;
max-width: auto;
- &: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 {
+ border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
+ > StBoxLayout { padding-right: $scaled_padding * 1.5; }
+ }
+
+ &:rtl {
+ border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
+ > StBoxLayout { padding-left: $scaled_padding * 1.5; }
+ }
&:ltr:last-child { border-radius: $forced_circular_radius; }
&:rtl:last-child { border-radius: $forced_circular_radius; }
}
- & .quick-toggle-arrow {
+ & .quick-toggle-menu-button {
padding: $scaled_padding $scaled_padding * 1.75;
- border-width: 0;
- border-color: transparentize($fg_color, .75);
-
- &:checked {
- @extend %default_button;
- border-color: $accent_borders_color;
- }
&:ltr {
border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
- border-left-width: 1px;
}
&:rtl {
border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
- border-right-width: 1px;
}
}
+
+ & .quick-toggle-separator {
+ width: 1px;
+ }
+}
+
+
+// Set the color of separators and menu buttons within the toggle.
+// This is bit of a mess but needed to have working colors in
+// both light, dark and high contrast styles.
+
+// menu button colors
+$quick_toggle_menubutton_bg_color: if(
+ $contrast == 'high', lighten($bg_color, 22%),
+ if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 8%))
+);
+$quick_toggle_menubutton_checked_bg_color: if(
+ $contrast == 'high', st-mix(-st-accent-color, $fg_color, 75%),
+ if($variant == 'light', st-mix(-st-accent-color, $fg_color, 92%), st-mix(-st-accent-color, $fg_color, 85%))
+);
+
+// separator colors
+$quick_toggle_separator_color: if(
+ $contrast == 'high', transparent,
+ transparentize($fg_color, .75)
+);
+
+$quick_toggle_checked_separator_color: if(
+ $contrast == 'high', transparent,
+ if($variant == 'light', st-mix(-st-accent-fg-color, -st-accent-color, 20%), st-mix(-st-accent-fg-color, -st-accent-color, 30%),)
+);
+
+.quick-toggle-has-menu {
+ & .quick-toggle-menu-button {
+ @include button(normal, $c: $quick_toggle_menubutton_bg_color);
+ &:focus { @include button(focus, $c: $quick_toggle_menubutton_bg_color);}
+ &:hover { @include button(hover, $c: $quick_toggle_menubutton_bg_color);}
+ &:active { @include button(active, $c: $quick_toggle_menubutton_bg_color);}
+
+ &:checked {
+ @include button(normal, $c: $quick_toggle_menubutton_checked_bg_color, $tc:-st-accent-fg-color, $style: default);
+ &:focus { @include button(focus, $c: $quick_toggle_menubutton_checked_bg_color, $tc:-st-accent-fg-color, $style: default);}
+ &:hover { @include button(hover, $c: $quick_toggle_menubutton_checked_bg_color, $tc:-st-accent-fg-color, $style: default);}
+ &:active { @include button(active, $c: $quick_toggle_menubutton_checked_bg_color, $tc:-st-accent-fg-color, $style: default);}
+ }
+ }
+
+ &:checked {
+ & .quick-toggle-separator {
+ background-color: $quick_toggle_checked_separator_color;
+ }
+ }
+
+ & .quick-toggle-separator {
+ background-color: $quick_toggle_separator_color;
+ }
}
.quick-slider {
diff --git a/gnome-shell/upstream/theme/process-working-dark.svg b/gnome-shell/upstream/theme/process-working-dark.svg
deleted file mode 100644
index 6c7ad64a6a..0000000000
--- a/gnome-shell/upstream/theme/process-working-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/gnome-shell/upstream/theme/process-working-light.svg b/gnome-shell/upstream/theme/process-working-light.svg
deleted file mode 100644
index 903edde0fd..0000000000
--- a/gnome-shell/upstream/theme/process-working-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file