Combine body-login rules in theming and fix twofactor and guest styling on bright...

Signed-off-by: Julius Härtl <jus@bitgrid.net>

diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index a18176f8b5dfcd2192a25ede33e3dff7266bcfcc..dcc6fbee20c2cdca5546415f34529830d34c17f5 100644 (file)
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -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;
@@ -204,14 +171,11 @@ 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,
@@ -219,6 +183,49 @@ input.primary,
                                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);