From a4f7cfdff45a413c824c8b7d5e40bc5175279e77 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Thu, 1 Dec 2022 14:44:04 -0330 Subject: [PATCH] lockscreen: Style cleanup for lock and login - increase the font size of clock elements - increase the size of user avatars - combines lock and login scss into one file - clean up the css for avatars - adjust the blur parameters of the screen shield Part-of: --- data/theme/gnome-shell-sass/_drawing.scss | 2 +- data/theme/gnome-shell-sass/_widgets.scss | 5 +- .../gnome-shell-sass/widgets/_buttons.scss | 2 +- .../widgets/_login-dialog.scss | 201 ------------- .../gnome-shell-sass/widgets/_login-lock.scss | 283 ++++++++++++++++++ .../theme/gnome-shell-sass/widgets/_misc.scss | 20 +- .../widgets/_screen-shield.scss | 78 ----- data/theme/meson.build | 3 +- js/gdm/authPrompt.js | 2 +- js/gdm/loginDialog.js | 2 +- js/ui/unlockDialog.js | 7 +- 11 files changed, 297 insertions(+), 308 deletions(-) delete mode 100644 data/theme/gnome-shell-sass/widgets/_login-dialog.scss create mode 100644 data/theme/gnome-shell-sass/widgets/_login-lock.scss delete mode 100644 data/theme/gnome-shell-sass/widgets/_screen-shield.scss diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 2ec84f243..80d59cb33 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -321,7 +321,7 @@ &:focus {@include button(focus);} } -// styling for elements within popovers that look like notifications +// styling for all menuitems in popovers @mixin menuitem($bg, $flat: true) { // lighten the background color always diff --git a/data/theme/gnome-shell-sass/_widgets.scss b/data/theme/gnome-shell-sass/_widgets.scss index a09e0b549..ee16a7141 100644 --- a/data/theme/gnome-shell-sass/_widgets.scss +++ b/data/theme/gnome-shell-sass/_widgets.scss @@ -46,6 +46,5 @@ @import 'widgets/misc'; @import 'widgets/keyboard'; @import 'widgets/looking-glass'; -// Lock / login screens -@import 'widgets/login-dialog'; -@import 'widgets/screen-shield'; +// Lock / login screen +@import 'widgets/login-lock'; diff --git a/data/theme/gnome-shell-sass/widgets/_buttons.scss b/data/theme/gnome-shell-sass/widgets/_buttons.scss index def96fe8c..84d23161f 100644 --- a/data/theme/gnome-shell-sass/widgets/_buttons.scss +++ b/data/theme/gnome-shell-sass/widgets/_buttons.scss @@ -16,4 +16,4 @@ icon-size: $base_icon_size; -st-icon-style: symbolic; } -} \ No newline at end of file +} diff --git a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss deleted file mode 100644 index 208165d12..000000000 --- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss +++ /dev/null @@ -1,201 +0,0 @@ -/* Login Dialog */ - -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; -} - -.login-dialog, -.unlock-dialog { - //reset - border: none; - background-color: transparent; - - $_gdm_bg: $system_bg_color; - - .modal-dialog-button-box { spacing: 3px; } - .modal-dialog-button { - padding: 4px 18px; - background-color: darken($system_bg_color, 3%); - border-color: darken($system_bg_color, 3%); - color: $osd_fg_color; - - $_hover_c: lighten($_gdm_bg, 5%); - &:hover, &:focus { - background-color: $_hover_c; - border-color: $_hover_c; - } - &:active { - $_active_c: darken($_gdm_bg, 5%); - background-color: $_active_c; - border-color: $_active_c; - } - &:insensitive { - @include button(insensitive); - border-color: darken($_gdm_bg, 5%); - background-color: darken($_gdm_bg, 5%); - color: transparentize($osd_fg_color, 0.3); - } - &:default { - @include button(default); - } - } - - .cancel-button, - .switch-user-button, - .login-dialog-session-list-button { - padding: 0; - border-radius: 99px; - width: $large_icon_size; - height: $large_icon_size; - border-color: darken($system_bg_color, 3%); - background-color: darken($system_bg_color, 3%); - - StIcon { icon-size: $base_icon_size; } - } - - .caps-lock-warning-label, - .login-dialog-message-warning { - color: $osd_fg_color; - } -} - -.login-dialog-logo-bin { padding: 24px 0px; } -.login-dialog-banner { color: darken($osd_fg_color,10%); } -.login-dialog-button-box { width: 23em; spacing: 5px; } -.login-dialog-message { text-align: center; } -.login-dialog-user-selection-box { padding: 100px 0px; } -.login-dialog-not-listed-label { - padding-left: 2px; - .login-dialog-not-listed-button:focus &, - .login-dialog-not-listed-button:hover & { - color: $osd_fg_color; - } -} - -.login-dialog-not-listed-label { - @extend %caption; - font-weight: bold; - color: darken($osd_fg_color,30%); - padding-top: 1em; -} - -.login-dialog-auth-list-view { -st-vfade-offset: 1em; } -.login-dialog-auth-list { - spacing: 6px; - margin-left: 2em; -} - -.login-dialog-auth-list-title { - margin-left: 2em; -} - -.login-dialog-auth-list-item { - border-radius: $base_border_radius + 4px; - padding: 6px; - color: darken($osd_fg_color,30%); - &:focus, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } -} - -.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; } -} - -.login-dialog-user-list-view { -st-vfade-offset: 1em; } -.login-dialog-user-list { - spacing: 12px; - width: 23em; - &:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; } - &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; } -} - -.login-dialog-user-list-item { - border-radius: $base_border_radius + 4px; - padding: 6px; - color: darken($osd_fg_color,30%); - &:ltr .user-widget { padding-right: 1em; } - &:rtl .user-widget { padding-left: 1em; } - .login-dialog-timed-login-indicator { - height: 2px; - margin-top: 6px; - background-color: $osd_fg_color; - } - &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } -} - -.user-widget-label { - color: $osd_fg_color; -} - -.user-widget.horizontal .user-widget-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; } -} - -.user-widget.vertical .user-widget-label { - @include fontsize($base_font_size + 5); - text-align: center; - font-weight: normal; - padding-top: 16px; -} - -.login-dialog-timed-login-indicator { - height: 2px; - background-color: darken($fg_color,40%); -} - -.login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; - spacing: $base_padding * 2; - width: 23em; -} - -.login-dialog-prompt-entry { - height: 1.5em; -} - -.login-dialog-prompt-label { - color: darken($osd_fg_color, 20%); - @include fontsize($base_font_size + 1); - padding-top: 1em; -} - -.login-dialog { - StEntry { - @if $variant=='dark' { - $_gdm_entry_bg: darken($system_bg_color, 3%); - background-color: $_gdm_entry_bg; - color: $fg_color; - } - } -} - -// Custom styling for unlock entry -.unlock-dialog { - StEntry { - border:none !important; - &:focus { - background-color: if($variant == 'light', transparentize(white, 0.9), transparentize($fg_color, 0.9)); - } - &:insensitive { - color: if($variant == 'light', transparentize(white, 0.5), transparentize($fg_color, 0.5)); - background-color: if($variant == 'light', transparentize(white, 0.95), transparentize($fg_color, 0.95)); - } - } - - .cancel-button, - .switch-user-button, - .login-dialog-session-list-button { - border-color: transparent; - background-color: transparentize($fg_color, 0.9); - } -} diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss new file mode 100644 index 000000000..81171c247 --- /dev/null +++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss @@ -0,0 +1,283 @@ +$_gdm_bg: $system_bg_color; +$_gdm_fg: white; +$_gdm_dialog_width: 23em; + +// common style for gdm and lockscreen +.login-dialog, +.unlock-dialog { + + .caps-lock-warning-label, + .login-dialog-message-warning { + color: $_gdm_fg; + } +} + +/* Login Dialog */ +.login-dialog { + background-color: $_gdm_bg; +} + +// buttons +.login-dialog-button { + @extend .button; + + &.cancel-button, + &.switch-user-button, + &.login-dialog-session-list-button { + @extend .icon-button; + } + + &.cancel-button { + padding: $base_padding*1.5; + } +} + +.login-dialog-button-box { + width: $_gdm_dialog_width; + spacing: $base_padding*2; +} + +.login-dialog-logo-bin { + margin:3em 0; +} +.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; + } +} + +.login-dialog-auth-list-view { -st-vfade-offset: 1em; } +.login-dialog-auth-list { + spacing: 6px; + margin-left: 2em; +} +.login-dialog-auth-list-title { + margin-left: 2em; +} + +.login-dialog-auth-list-item { + border-radius: $base_border_radius*2; + padding: 4px; + color: darken($_gdm_fg,30%); + + &:focus, &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + } +} + +.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; } +} + +.login-dialog-user-list-view { -st-vfade-offset: 1em; } + +.login-dialog-user-list { + spacing: 12px; + width: $_gdm_dialog_width; + + .login-dialog-user-list-item { + border-radius: $base_border_radius + 4px; + padding: $base_padding; + background-color: transparentize($_gdm_fg, .95); + color: $_gdm_fg; + + @if $is_highcontrast { + box-shadow:inset 0 0 0 1px $hc_inset_color;; + } + .user-widget .user-icon { + border: 4px solid transparent; + } + + .login-dialog-timed-login-indicator { + height: 2px; + margin-top: 6px; + background-color: darken($_gdm_fg, 30%); + } + + &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } + } + + &:expanded .login-dialog-user-list-item { + transition-duration: 300ms; + transition-timing-function: ease; + + &:hover { + background-color: transparentize($_gdm_fg, .9); + color: $_gdm_fg; + } + + &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + &:hover { background-color: lighten($selected_bg_color,5%); } + } + + &:logged-in { + .user-widget .user-icon { + border-color: $selected_bg_color; + } + } + } +} + +.login-dialog-prompt-layout { + spacing: $base_padding*2; + width: 26em; +} + +.login-dialog-prompt-entry {} + + +/* Screen Shield */ +// a.k.a. the lockscreen + +.unlock-dialog { + background-color: transparent; +} + +.screen-shield-background { // just the shadow, really + background: black; + box-shadow: 0 2px 4px rgba(0,0,0,0.6); +} + +#lockDialogGroup { + background-color: $_gdm_bg; +} + +// Clock +.unlock-dialog-clock { + color: $_gdm_fg; + spacing: 2em; + + .unlock-dialog-clock-time { + @extend %numeric; + @include fontsize(72); + font-weight: 600; + } + + .unlock-dialog-clock-date { + @extend %title_1; + font-weight: 600; + } + + .unlock-dialog-clock-hint { + margin-top: 2em; + padding: $base_padding $base_padding*3; + background-color: transparentize(black,0.9); + border-radius: $base_border_radius*2; + } +} + +// Notifications +#unlockDialogNotifications { + StButton#vhandle, StButton#hhandle { + background-color: transparentize($bg_color,0.7); + &:hover, &:focus { background-color: transparentize($bg_color,0.5); } + &:active { background-color: transparentize($selected_bg_color,0.5); } + } +} + +.unlock-dialog-notifications-container { + margin: 12px; + spacing: 6px; + width: $_gdm_dialog_width; + background-color: transparent; + + .summary-notification-stack-scrollview { + padding-top: 0; + padding-bottom: 0; + } + + .notification, + .unlock-dialog-notification-source { + padding: 12px 16px; + border: none; + background-color: transparentize($_gdm_fg,0.9); + color: $_gdm_fg; + border-radius: $modal_radius; + + &.critical { background-color: transparentize($_gdm_fg,0.8) } + } +} + +.unlock-dialog-notification-label { + padding-left: 12px; + padding-right: 0; + &:rtl { padding-right: 12px; padding-left: 0; } +} + +.unlock-dialog-notification-count-text { + font-weight: bold; + padding: 0 12px; + color: $_gdm_fg; + background-color: transparentize($_gdm_fg, 0.9); + border-radius: 99px; +} + + +// User Widget +.user-widget { + + .user-widget-label { + color: $_gdm_fg; + } + + // layout of the user list + &.horizontal { + spacing: $base_padding*3; + .user-widget-label { + @extend %title_3; + } + + .user-icon { + & StIcon { + padding: 12px; + icon-size: $base_icon_size*2; + width: $base_icon_size*3; + height: $base_icon_size*3; + background-color: transparentize($_gdm_fg, 0.9); + } + } + } + + // layout of the login prompt + &.vertical { + spacing: $base_padding*4; + + .user-widget-label { + @extend %title_1; + text-align: center; + margin-bottom: .75em; + } + + .user-icon { + icon-size: $base_icon_size*10; + + & StIcon { + padding: 32px; + icon-size: $base_icon_size*4; + background-color: transparentize($_gdm_fg, 0.9); + } + } + } +} diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss index 740927824..0a98d570b 100644 --- a/data/theme/gnome-shell-sass/widgets/_misc.scss +++ b/data/theme/gnome-shell-sass/widgets/_misc.scss @@ -10,9 +10,6 @@ color: $osd_fg_color; border-radius: 99px; icon-size: $base_icon_size * 4; // 64px - &:hover { - color: lighten($osd_fg_color,30%); - } & StIcon { background-color: transparentize($osd_fg_color,0.95); @@ -22,25 +19,16 @@ } &.user-avatar { - border: 2px $osd_fg_color; - } -} - -.user-widget.vertical .user-icon { - icon-size: $base_icon_size * 6; // 128px - - & StIcon { - padding: $base_padding * 3 + 2px; // 20px - padding-top: $base_padding * 3; // 18 px - padding-bottom: $base_padding * 3 + 4px; // 22px - width: $base_icon_size * 5.5; height: $base_icon_size * 5.5; // 88px; + 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; + } } } .lightbox { background-color: black; } .flashspot { background-color: white; } - // Hidden .hidden { color: rgba(0,0,0,0);} diff --git a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss deleted file mode 100644 index a459ba16b..000000000 --- a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss +++ /dev/null @@ -1,78 +0,0 @@ -/* Screen Shield */ - -.unlock-dialog-clock { - color: white; - font-weight: 300; - text-align: center; - spacing: 24px; - padding-bottom: 2.5em; -} - -.unlock-dialog-clock-time { - font-size: 64pt; - padding-top: 42px; - @extend %numeric; -} - -.unlock-dialog-clock-date { - font-size: 16pt; - font-weight: normal; -} - -.unlock-dialog-clock-hint { - font-weight: normal; - padding-top: 48px; -} - -.unlock-dialog-notifications-container { - margin: 12px; - spacing: 6px; - width: 23em; - background-color: transparent; - - .summary-notification-stack-scrollview { - padding-top: 0; - padding-bottom: 0; - } - - .notification, - .unlock-dialog-notification-source { - padding: 12px 16px; - border: none; - background-color: transparentize($osd_fg_color,0.9); - color: $osd_fg_color; - border-radius: $modal_radius; - - &.critical { background-color: transparentize($osd_fg_color,0.8) } - } -} - -.unlock-dialog-notification-label { - padding-left: 12px; - padding-right: 0; - &:rtl { padding-right: 12px; padding-left: 0; } -} - -.unlock-dialog-notification-count-text { - font-weight: bold; - padding: 0 12px; - color: $osd_fg_color; - background-color: transparentize($osd_fg_color, 0.9); - border-radius: 99px; -} - -.screen-shield-background { //just the shadow, really - background: black; - box-shadow: 0 2px 4px rgba(0,0,0,0.6); -} - -#lockDialogGroup { - background-color: $system_bg_color; -} -#unlockDialogNotifications { - StButton#vhandle, StButton#hhandle { - background-color: transparentize($bg_color,0.7); - &:hover, &:focus { background-color: transparentize($bg_color,0.5); } - &:active { background-color: transparentize($selected_bg_color,0.5); } - } -} diff --git a/data/theme/meson.build b/data/theme/meson.build index e6c1723db..b7cd5487b 100644 --- a/data/theme/meson.build +++ b/data/theme/meson.build @@ -19,7 +19,7 @@ theme_sources = files([ 'gnome-shell-sass/widgets/_hotplug.scss', 'gnome-shell-sass/widgets/_ibus-popup.scss', 'gnome-shell-sass/widgets/_keyboard.scss', - 'gnome-shell-sass/widgets/_login-dialog.scss', + 'gnome-shell-sass/widgets/_login-lock.scss', 'gnome-shell-sass/widgets/_looking-glass.scss', 'gnome-shell-sass/widgets/_message-list.scss', 'gnome-shell-sass/widgets/_misc.scss', @@ -29,7 +29,6 @@ theme_sources = files([ 'gnome-shell-sass/widgets/_panel.scss', 'gnome-shell-sass/widgets/_popovers.scss', 'gnome-shell-sass/widgets/_quick-settings.scss', - 'gnome-shell-sass/widgets/_screen-shield.scss', 'gnome-shell-sass/widgets/_screenshot.scss', 'gnome-shell-sass/widgets/_scrollbars.scss', 'gnome-shell-sass/widgets/_search-entry.scss', diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js index 865d1d22b..3b1fa805a 100644 --- a/js/gdm/authPrompt.js +++ b/js/gdm/authPrompt.js @@ -140,7 +140,7 @@ var AuthPrompt = GObject.registerClass({ this.add_child(this._mainBox); this.cancelButton = new St.Button({ - style_class: 'modal-dialog-button button cancel-button', + style_class: 'login-dialog-button cancel-button', accessible_name: _('Cancel'), button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE, reactive: this._hasCancelButton, diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js index ad66a0489..7e7d88493 100644 --- a/js/gdm/loginDialog.js +++ b/js/gdm/loginDialog.js @@ -310,7 +310,7 @@ var SessionMenuButton = GObject.registerClass({ }, class SessionMenuButton extends St.Bin { _init() { let button = new St.Button({ - style_class: 'modal-dialog-button button login-dialog-session-list-button', + style_class: 'login-dialog-button login-dialog-session-list-button', icon_name: 'emblem-system-symbolic', reactive: true, track_hover: true, diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js index 3f353c743..5edcfc53f 100644 --- a/js/ui/unlockDialog.js +++ b/js/ui/unlockDialog.js @@ -24,8 +24,8 @@ const CROSSFADE_TIME = 300; const FADE_OUT_TRANSLATION = 200; const FADE_OUT_SCALE = 0.3; -const BLUR_BRIGHTNESS = 0.55; -const BLUR_SIGMA = 60; +const BLUR_BRIGHTNESS = 0.65; +const BLUR_SIGMA = 45; const SUMMARY_ICON_SIZE = 32; @@ -36,7 +36,6 @@ var NotificationsBox = GObject.registerClass({ super._init({ vertical: true, name: 'unlockDialogNotifications', - style_class: 'unlock-dialog-notifications-container', }); this._scrollView = new St.ScrollView({ hscrollbar_policy: St.PolicyType.NEVER }); @@ -559,7 +558,7 @@ var UnlockDialog = GObject.registerClass({ // Switch User button this._otherUserButton = new St.Button({ - style_class: 'modal-dialog-button button switch-user-button', + style_class: 'login-dialog-button switch-user-button', accessible_name: _('Log in as another user'), button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE, reactive: false,