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: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2564>

7 files changed, 291 insertions, 300 deletions

diff --git a/_drawing.scss b/_drawing.scss
index 2ec84f2..80d59cb 100644
--- a/_drawing.scss
+++ b/_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/_widgets.scss b/_widgets.scss
index a09e0b5..ee16a71 100644
--- a/_widgets.scss
+++ b/_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/widgets/_buttons.scss b/widgets/_buttons.scss
index def96fe..84d2316 100644
--- a/widgets/_buttons.scss
+++ b/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/widgets/_login-dialog.scss b/widgets/_login-dialog.scss
deleted file mode 100644
index 208165d..0000000
--- a/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/widgets/_login-lock.scss b/widgets/_login-lock.scss
new file mode 100644
index 0000000..81171c2
--- /dev/null
+++ b/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/widgets/_misc.scss b/widgets/_misc.scss
index 7409278..0a98d57 100644
--- a/widgets/_misc.scss
+++ b/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/widgets/_screen-shield.scss b/widgets/_screen-shield.scss
deleted file mode 100644
index a459ba1..0000000
--- a/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); }
-  }
-}