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

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

1 files changed, 47 insertions, 40 deletions

diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index a18176f8b5d..dcc6fbee20c 100644
--- 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);