From 49c69d0eafb2d53763f7c3bc77aa68f803a3e0f2 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Tue, 30 Jan 2024 12:40:20 -0330 Subject: [PATCH] style: Clean up lockscreen styles to improve HC support Part-of: --- data/theme/gnome-shell-sass/_common.scss | 11 + data/theme/gnome-shell-sass/_drawing.scss | 10 +- .../gnome-shell-sass/widgets/_login-lock.scss | 190 ++++++++++-------- 3 files changed, 128 insertions(+), 83 deletions(-) diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 0997d76aa..32c90ded2 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -366,6 +366,17 @@ stage { /* 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; diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 60fd49ab6..167cff70f 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -94,7 +94,7 @@ // entry color overrides for lockscreen style @if $style == 'lockscreen' { - $entry_bg_color: transparentize($c, 0.95); + $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); @@ -211,6 +211,14 @@ $checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor); } + // background color overrides for the lockscreen style + @if $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; diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss index 38b9fd513..ae3fc7d8d 100644 --- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss +++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss @@ -1,8 +1,8 @@ -$_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; @@ -11,14 +11,24 @@ $_gdm_dialog_width: 23em; .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, @@ -34,38 +44,58 @@ $_gdm_dialog_width: 23em; } .login-dialog-button-box { - width: $_gdm_dialog_width; spacing: $base_padding * 2; } .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 { @extend %heading; - 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; - } + 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: $base_padding; margin-left: 2em; } + .login-dialog-auth-list-title { margin-left: 2em; } @@ -83,82 +113,69 @@ $_gdm_dialog_width: 23em; .login-dialog-auth-list-label { @extend %title_4; - font-weight: bold; &: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: $base_padding * 2; +// 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 + $base_margin; - 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 $contrast == 'high' { - box-shadow:inset 0 0 0 1px $hc_inset_color; - } + .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);} - .user-widget .user-icon { - border: 4px solid transparent; - } + border-radius: $modal_radius; + padding: $base_padding * 1.5; - .login-dialog-timed-login-indicator { - height: 2px; - margin-top: $base_padding; - background-color: darken($_gdm_fg, 30%); - } + // create border for indicating logged in user + .user-icon { + border: 2px solid transparent; + } - &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } - } + .login-dialog-timed-login-indicator { + height: 2px; + margin-top: $base_padding; + background-color: transparentize($_gdm_fg, .3); + } - &: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; + &: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; .login-dialog-prompt-entry { @extend %lockscreen_entry; } + + .button, + .icon-button { + @extend %lockscreen_button; + } } .screen-shield-background { // just the shadow, really @@ -240,7 +257,7 @@ $_gdm_dialog_width: 23em; font-weight: bold; padding: 0 $base_padding * 2; color: $_gdm_fg; - background-color: transparentize($_gdm_fg, 0.9); + background-color: transparentize($_gdm_fg, .9); border-radius: $forced_circular_radius; } @@ -252,6 +269,19 @@ $_gdm_dialog_width: 23em; color: $_gdm_fg; } + & .user-icon { + border-radius: $forced_circular_radius; + StIcon { + background-color: transparentize($_gdm_fg, .87); + color: $_gdm_fg; + + @if $contrast == 'high' { + background-color: transparentize($_gdm_fg, .7); + box-shadow:inset 0 0 0 1px $hc_inset_color; + } + } + } + // layout of the user list &.horizontal { spacing: $base_padding * 3; @@ -260,14 +290,11 @@ $_gdm_dialog_width: 23em; } .user-icon { - border-radius: $forced_circular_radius; + icon-size: $base_icon_size * 4; & StIcon { padding: $base_padding * 2; icon-size: $base_icon_size * 2; - width: $base_icon_size * 3; - height: $base_icon_size * 3; - background-color: transparentize($_gdm_fg, 0.9); } } } @@ -288,7 +315,6 @@ $_gdm_dialog_width: 23em; & StIcon { padding: $base_padding * 4; icon-size: $base_icon_size * 4; - background-color: transparentize($_gdm_fg, 0.9); } } }