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

style: Clean up lockscreen styles to improve HC support

Browse Source 
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3154>
This commit is contained in:
Sam Hewitt 2024-01-30 12:40:20 -03:30 committed by Marge Bot
parent ad27153bee
commit 49c69d0eaf
3 changed files with 128 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
data/theme/gnome-shell-sass/_common.scss
View File

@ -366,6 +366,17 @@ stage {
/* Lockscreen Elements */ /* 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 // entries
%lockscreen_entry { %lockscreen_entry {
@extend %entry_common; @extend %entry_common;

10
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -94,7 +94,7 @@
// entry color overrides for lockscreen style // entry color overrides for lockscreen style
@if $style == 'lockscreen' { @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); $entry_focus_color: transparentize($entry_fg_color, 0.6);
@if $contrast == 'high' { @if $contrast == 'high' {
$entry_focus_color: transparentize($entry_fg_color, 0.3); $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); $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 // flat style overrides
@if $style == 'flat' { @if $style == 'flat' {
$insensitive_button_bg_color: $button_bg_color; $insensitive_button_bg_color: $button_bg_color;

190
data/theme/gnome-shell-sass/widgets/_login-lock.scss
View File

@ -1,8 +1,8 @@
$_gdm_bg: $system_bg_color; $_gdm_bg: $system_base_color;
$_gdm_fg: $system_fg_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, .login-dialog,
.unlock-dialog { .unlock-dialog {
color: $_gdm_fg; color: $_gdm_fg;
@ -11,14 +11,24 @@ $_gdm_dialog_width: 23em;
.login-dialog-message-warning { .login-dialog-message-warning {
color: $_gdm_fg; 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 { .login-dialog {
background-color: $_gdm_bg; background-color: $_gdm_bg;
.login-dialog-prompt-entry {
@extend %system_entry;
}
} }
// buttons // buttons on login screen
.login-dialog-button { .login-dialog-button {
&.cancel-button, &.cancel-button,
@ -34,38 +44,58 @@ $_gdm_dialog_width: 23em;
} }
.login-dialog-button-box { .login-dialog-button-box {
width: $_gdm_dialog_width;
spacing: $base_padding * 2; spacing: $base_padding * 2;
} }
.login-dialog-logo-bin { .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 { .login-dialog-not-listed-label {
@extend %heading; @extend %heading;
font-weight: bold; padding: $base_padding;
color: darken($_gdm_fg,30%); }
padding: $base_padding * 2;
.login-dialog-not-listed-button {
.login-dialog-not-listed-button:focus &, // use button styling
.login-dialog-not-listed-button:hover & { @extend %button_common;
color: $_gdm_fg; @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);}
.login-dialog-not-listed-button:focus & { &:hover { @include button(hover, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
text-decoration: underline; &: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 { .login-dialog-auth-list {
spacing: $base_padding; spacing: $base_padding;
margin-left: 2em; margin-left: 2em;
} }
.login-dialog-auth-list-title { .login-dialog-auth-list-title {
margin-left: 2em; margin-left: 2em;
} }
@ -83,82 +113,69 @@ $_gdm_dialog_width: 23em;
.login-dialog-auth-list-label { .login-dialog-auth-list-label {
@extend %title_4; @extend %title_4;
font-weight: bold;
&:ltr { padding-left: $base_padding * 2.5; text-align: left; } &:ltr { padding-left: $base_padding * 2.5; text-align: left; }
&:rtl { padding-right: $base_padding * 2.5; text-align: right; } &:rtl { padding-right: $base_padding * 2.5; text-align: right; }
} }
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
.login-dialog-user-list { // User list
spacing: $base_padding * 2; .login-dialog-user-list-view {
width: $_gdm_dialog_width; width: $_gdm_dialog_width;
-st-vfade-offset: 3em;
.login-dialog-user-list-item { .login-dialog-user-list {
border-radius: $base_border_radius + $base_margin; margin: 0 $base_margin * 2; // margin to account for scrollbar
padding: $base_padding; spacing: $base_padding * 2;
background-color: transparentize($_gdm_fg, .95);
color: $_gdm_fg;
@if $contrast == 'high' { .login-dialog-user-list-item {
box-shadow:inset 0 0 0 1px $hc_inset_color; // 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-radius: $modal_radius;
border: 4px solid transparent; padding: $base_padding * 1.5;
}
.login-dialog-timed-login-indicator { // create border for indicating logged in user
height: 2px; .user-icon {
margin-top: $base_padding; border: 2px solid transparent;
background-color: darken($_gdm_fg, 30%); }
}
&: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 { &:logged-in {
transition-duration: 300ms; // color border for logged-in user
transition-timing-function: ease; .user-icon {
border-color: $selected_bg_color;
&:hover { StIcon {
background-color: transparentize($_gdm_fg, .9); background-color: transparentize($selected_bg_color, .7);
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 { // Screen Shield
spacing: $base_padding * 2; // a.k.a. the lockscreen, uses transparent styles
width: 26em;
}
.login-dialog-prompt-entry {
@extend %system_entry;
}
/* Screen Shield */
// a.k.a. the lockscreen
.unlock-dialog { .unlock-dialog {
background-color: transparent; background-color: transparent;
.login-dialog-prompt-entry { .login-dialog-prompt-entry {
@extend %lockscreen_entry; @extend %lockscreen_entry;
} }
.button,
.icon-button {
@extend %lockscreen_button;
}
} }
.screen-shield-background { // just the shadow, really .screen-shield-background { // just the shadow, really
@ -240,7 +257,7 @@ $_gdm_dialog_width: 23em;
font-weight: bold; font-weight: bold;
padding: 0 $base_padding * 2; padding: 0 $base_padding * 2;
color: $_gdm_fg; color: $_gdm_fg;
background-color: transparentize($_gdm_fg, 0.9); background-color: transparentize($_gdm_fg, .9);
border-radius: $forced_circular_radius; border-radius: $forced_circular_radius;
} }
@ -252,6 +269,19 @@ $_gdm_dialog_width: 23em;
color: $_gdm_fg; 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 // layout of the user list
&.horizontal { &.horizontal {
spacing: $base_padding * 3; spacing: $base_padding * 3;
@ -260,14 +290,11 @@ $_gdm_dialog_width: 23em;
} }
.user-icon { .user-icon {
border-radius: $forced_circular_radius; icon-size: $base_icon_size * 4;
& StIcon { & StIcon {
padding: $base_padding * 2; padding: $base_padding * 2;
icon-size: $base_icon_size * 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 { & StIcon {
padding: $base_padding * 4; padding: $base_padding * 4;
icon-size: $base_icon_size * 4; icon-size: $base_icon_size * 4;
background-color: transparentize($_gdm_fg, 0.9);
} }
} }
} }