881ec91370
- wrap the user-icon overrides in login-lock with the login class - clean out redundant css on the user-icon Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3203>
331 lines
7.0 KiB
SCSS
331 lines
7.0 KiB
SCSS
$_gdm_bg: $system_base_color;
|
|
$_gdm_fg: $system_fg_color;
|
|
$_gdm_dialog_width: 25em;
|
|
|
|
// common style for login and lockscreen
|
|
.login-dialog,
|
|
.unlock-dialog {
|
|
color: $_gdm_fg;
|
|
|
|
.caps-lock-warning-label,
|
|
.login-dialog-message-warning {
|
|
color: $_gdm_fg;
|
|
}
|
|
|
|
.login-dialog-prompt-layout {
|
|
width: $_gdm_dialog_width;
|
|
spacing: $base_padding * 1.5;
|
|
}
|
|
}
|
|
|
|
// GDM Login Dialog
|
|
// uses dark grey system styles
|
|
.login-dialog {
|
|
.login-dialog-prompt-entry {
|
|
@extend %system_entry;
|
|
}
|
|
}
|
|
|
|
// buttons on login screen
|
|
.login-dialog-button {
|
|
|
|
&.cancel-button,
|
|
&.switch-user-button,
|
|
&.login-dialog-session-list-button {
|
|
@extend .icon-button;
|
|
@extend %system_button;
|
|
}
|
|
|
|
&.cancel-button {
|
|
padding: $base_padding * 1.5;
|
|
}
|
|
}
|
|
|
|
.login-dialog-button-box {
|
|
spacing: $base_padding * 2;
|
|
}
|
|
|
|
.conflicting-session-dialog-content {
|
|
spacing: 20px;
|
|
|
|
.conflicting-session-dialog-title {
|
|
text-align: center;
|
|
@extend %title_2;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.conflicting-session-dialog-desc {
|
|
text-align: center;
|
|
}
|
|
|
|
.conflicting-session-dialog-desc-warning {
|
|
text-align: center;
|
|
color: $warning_color;
|
|
}
|
|
}
|
|
|
|
.login-dialog-logo-bin {
|
|
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-not-listed-label {
|
|
@extend %heading;
|
|
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 {
|
|
spacing: $base_padding;
|
|
margin-left: 2em;
|
|
}
|
|
|
|
.login-dialog-auth-list-title {
|
|
margin-left: 2em;
|
|
}
|
|
|
|
.login-dialog-auth-list-item {
|
|
border-radius: $base_border_radius * 2;
|
|
padding: $base_margin;
|
|
color: darken($_gdm_fg,30%);
|
|
|
|
&:focus, &:selected {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
}
|
|
|
|
.login-dialog-auth-list-label {
|
|
@extend %title_4;
|
|
&:ltr { padding-left: $base_padding * 2.5; text-align: left; }
|
|
&:rtl { padding-right: $base_padding * 2.5; text-align: right; }
|
|
}
|
|
|
|
|
|
// User list
|
|
.login-dialog-user-list-view {
|
|
width: $_gdm_dialog_width;
|
|
-st-vfade-offset: 3em;
|
|
|
|
.login-dialog-user-list {
|
|
margin: 0 $base_margin * 2; // margin to account for scrollbar
|
|
spacing: $base_padding * 2;
|
|
|
|
.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);}
|
|
|
|
border-radius: $modal_radius;
|
|
padding: $base_padding * 1.5;
|
|
|
|
// create border for indicating logged in user
|
|
.user-icon {
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.login-dialog-timed-login-indicator {
|
|
height: 2px;
|
|
margin-top: $base_padding;
|
|
background-color: transparentize($_gdm_fg, .3);
|
|
}
|
|
|
|
&:logged-in {
|
|
// color border for logged-in user
|
|
.user-icon {
|
|
border-color: $selected_bg_color;
|
|
StIcon {
|
|
background-color: transparentize($selected_bg_color, .7);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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
|
|
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(72pt);
|
|
font-weight: 200;
|
|
}
|
|
|
|
.unlock-dialog-clock-date {
|
|
@extend %title_1;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.unlock-dialog-clock-hint {
|
|
margin-top: 2em;
|
|
padding: $base_padding $base_padding * 3;
|
|
border-radius: $base_border_radius * 2;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// 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: $base_margin * 3;
|
|
spacing: $base_padding;
|
|
width: $_gdm_dialog_width;
|
|
background-color: transparent;
|
|
|
|
.summary-notification-stack-scrollview {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.notification,
|
|
.unlock-dialog-notification-source {
|
|
padding: $base_margin * 3 $base_margin * 4;
|
|
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-icon {
|
|
icon-size: $large_icon_size;
|
|
}
|
|
|
|
.unlock-dialog-notification-label {
|
|
padding-left: $base_padding * 2;
|
|
padding-right: 0;
|
|
&:rtl { padding-right: $base_padding * 2; padding-left: 0; }
|
|
}
|
|
|
|
.unlock-dialog-notification-count-text {
|
|
font-weight: bold;
|
|
padding: 0 $base_padding * 2;
|
|
color: $_gdm_fg;
|
|
background-color: transparentize($_gdm_fg, .9);
|
|
border-radius: $forced_circular_radius;
|
|
}
|
|
|
|
|
|
.login-dialog,
|
|
.unlock-dialog {
|
|
|
|
// User Widget
|
|
.user-widget {
|
|
|
|
// common
|
|
.user-widget-label {
|
|
color: $_gdm_fg;
|
|
}
|
|
|
|
.user-icon {
|
|
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;
|
|
.user-widget-label {
|
|
@extend %title_3;
|
|
}
|
|
}
|
|
|
|
// 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: $base_padding * 4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|