Skip to content

[stable18] Combine body-login rules in theming and fix twofactor and guest styling on bright colors #22428

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rullzer merged 1 commit into from
Aug 26, 2020
Merged

[stable18] Combine body-login rules in theming and fix twofactor and guest styling on bright colors #22428

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 47 additions & 40 deletions apps/theming/css/theming.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,39 +82,6 @@ $invert: luma($color-primary) > 0.6;
#appmenu .icon-more-white {
@include icon-color('more', 'actions', $color-black, 1, true);
}

#body-login {

input,
#alternative-logins li a {
border: 1px solid nc-lighten($color-primary-text, 50%);
}
input.primary,
button.primary,
#alternative-logins li a {
background-color: $color-primary;
color: $color-primary-text;
}
a,
label,
footer p,
#alternative-logins legend,
.lost-password-container #lost-password {
color: $color-primary-text;
}
input[type='checkbox'].checkbox--white + label:before {
border-color: nc-darken($color-primary-element, 40%) !important;
}
input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
input[type='checkbox'].checkbox--white:focus + label:before {
border-color: nc-darken($color-primary-element, 30%) !important;
}
input[type='checkbox'].checkbox--white:checked + label:before {
border-color: nc-darken($color-primary-element, 30%) !important;
background-color: nc-darken($color-primary-element, 30%) !important;
@include icon-color('checkbox-mark', 'actions', $color-white, 1, true);
}
}
} @else {
#appmenu:not(.inverted) svg {
filter: none;
Expand Down Expand Up @@ -204,21 +171,61 @@ input.primary,
@if ($invert) {
#body-login {
.body-login-container {
background-color: $color-main-background;
}
#submit-wrapper .icon-confirm-white {
background-image: url('../../../core/img/actions/confirm.svg');
}
.body-login-container {
background-color: transparentize(nc-lighten($color-primary, 30%), 0.2);
color: $color-primary-text !important;

h2 {
color: $color-main-text;
color: $color-primary-text;
}
.icon-search.icon-white {
// CSS variable is not used here since it is on the public page layout,
// where the dark theme doesn't apply at the moment
background-image: url('../../../core/img/actions/search.svg');
}
}

input,
#alternative-logins li a {
border: 1px solid nc-lighten($color-primary-text, 50%);
}
input.primary,
button.primary,
#alternative-logins li a {
background-color: $color-primary;
color: $color-primary-text;
}
a,
label,
footer p,
#alternative-logins legend,
.lost-password-container #lost-password,
.warning, .update, .error {
color: $color-primary-text !important;
}
input[type='checkbox'].checkbox--white + label:before {
border-color: nc-darken($color-primary-element, 40%) !important;
}
input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
input[type='checkbox'].checkbox--white:focus + label:before {
border-color: nc-darken($color-primary-element, 30%) !important;
}
input[type='checkbox'].checkbox--white:checked + label:before {
border-color: nc-darken($color-primary-element, 30%) !important;
background-color: nc-darken($color-primary-element, 30%) !important;
@include icon-color('checkbox-mark', 'actions', $color-white, 1, true);
}
#submit-wrapper .icon-confirm-white {
background-image: url('../../../core/img/actions/confirm.svg');
}

.two-factor-provider {
&:hover, &:focus {
border-color: $color-primary-text;
}
img {
filter: invert(1);
}
}
}
#body-public #header .icon-more-white {
background-image: var(--icon-more-000);
Expand Down