style: Add lockscreen style to entry drawing mixin

- include style condition to entry drawing mixin to accommodate transparent bg on lockscreen
- see https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/6802 and https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3109#note_1970652

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7326
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3118>
This commit is contained in:
Sam Hewitt 2024-01-15 10:39:42 -03:30 committed by Marge Bot
parent 17b7162121
commit 7abe91918f
3 changed files with 39 additions and 8 deletions

View File

@ -360,3 +360,17 @@ stage {
&:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);} &:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);}
&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);} &:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
} }
/* Lockscreen Elements */
// entries
%lockscreen_entry {
@extend %entry_common;
@include entry(normal, $c:$system_fg_color, $style: lockscreen, $always_dark: true);
&:hover { @include entry(hover, $c:$system_fg_color, $style: lockscreen, $always_dark: true);}
&:focus { @include entry(focus, $c:$system_fg_color, $style: lockscreen, $always_dark: true);}
&:insensitive { @include entry(insensitive, $c:$system_fg_color, $style: lockscreen, $always_dark: true);}
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
}

View File

@ -63,7 +63,7 @@
} }
// Text entries drawing function // Text entries drawing function
@mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) { @mixin entry($type, $c:$fg_color, $bc:$bg_color, $style: null, $always_dark: false) {
// //
// $type: entry type, possible values: normal, focus, hover, insensitive // $type: entry type, possible values: normal, focus, hover, insensitive
// $c: text color // $c: text color
@ -71,8 +71,19 @@
// $always_dark: override the light theme check to use dark colors, true or false // $always_dark: override the light theme check to use dark colors, true or false
// //
// background color // entry colors
$entry_fg_color: $c;
$entry_bg_color: mix($c, $bc, $background_mix_factor); $entry_bg_color: mix($c, $bc, $background_mix_factor);
$entry_focus_color: $focus_color;
// entry color overrides for lockscreen style
@if $style == 'lockscreen' {
$entry_bg_color: transparentize($c, 0.95);
$entry_focus_color: transparentize($entry_fg_color, 0.6);
@if $contrast == 'high' {
$entry_focus_color: transparentize($entry_fg_color, 0.3);
}
}
// background color adjustment factors // background color adjustment factors
// the % a color is lightened or darkened for button states // the % a color is lightened or darkened for button states
@ -96,26 +107,32 @@
// normal // normal
@if $type == 'normal' { @if $type == 'normal' {
background-color: $entry_bg_color; background-color: $entry_bg_color;
color: transparentize($c,0.3); color: transparentize($c, 0.3);
} }
// focus styles // focus styles
@if $type == 'focus' { @if $type == 'focus' {
@include focus_ring(); @include focus_ring();
background-color: focus_bg_color($entry_bg_color); background-color: focus_bg_color($entry_bg_color);
color: $c; color: $entry_fg_color;
// lockscreen style
@if $style == 'lockscreen' {
@include focus_ring($fc:$entry_focus_color);
background-color: focus_bg_color($entry_bg_color, $fc:$entry_focus_color);
}
} }
// hover styles // hover styles
@if $type == 'hover' { @if $type == 'hover' {
background-color: $hover_entry_bg_color; background-color: $hover_entry_bg_color;
color: $c; color: $entry_fg_color;
} }
// insensitive styles // insensitive styles
@if $type == 'insensitive' { @if $type == 'insensitive' {
background-color: $insensitive_entry_bg_color; background-color: $insensitive_entry_bg_color;
color: transparentize($c, 0.5); color: transparentize($entry_fg_color, 0.5);
} }
} }

View File

@ -5,6 +5,7 @@ $_gdm_dialog_width: 23em;
// common style for gdm and lockscreen // common style for gdm and lockscreen
.login-dialog, .login-dialog,
.unlock-dialog { .unlock-dialog {
color: $_gdm_fg;
.caps-lock-warning-label, .caps-lock-warning-label,
.login-dialog-message-warning { .login-dialog-message-warning {
@ -155,9 +156,8 @@ $_gdm_dialog_width: 23em;
.unlock-dialog { .unlock-dialog {
background-color: transparent; background-color: transparent;
// %system_entry style override to have neutral focus color with wallpaper background
.login-dialog-prompt-entry { .login-dialog-prompt-entry {
&:focus { @include entry(focus, $c:$system_fg_color);} @extend %lockscreen_entry;
} }
} }