Update style of log in page and header

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

apps/theming/css/theming.scss

@@ -142,12 +142,14 @@ $invert: luma($color-primary) > 0.6;
 	#theming-preview {
 		background-image: $image-login-background;
 		background-color: $color-primary;
+		background-color: linear-gradient(40deg, $color-primary 0%, rgba(28,175,255,1) 100%);
 	}
 } @else {
-	  #theming-preview {
-		  background-image: $image-login-background;
-		  background-color: $color-primary;
-	  }
+	#theming-preview {
+		background-image: $image-login-background;
+		background-color: $color-primary;
+		background-color: linear-gradient(40deg, $color-primary 0%, rgba(28,175,255,1) 100%);
+	}
 }
 
 @if variable_exists('theming-logoheader-mime') and $theming-logoheader-mime != '' {
@@ -207,6 +209,7 @@ input.primary,
 	#body-login, #firstrunwizard .firstrunwizard-header, #theming-preview {
 		background-image: none !important;
 		background-color: $color-primary;
+		background-color: linear-gradient(40deg, $color-primary 0%, rgba(28,175,255,1) 100%);
 	}
 	#body-login {
 
@@ -218,6 +221,7 @@ input.primary,
 } @else {
 	#body-login {
 		background-color: $color-primary;
+		background-color: linear-gradient(40deg, $color-primary 0%, rgba(28,175,255,1) 100%);
 	}
 }
 

core/css/guest.css

@@ -25,9 +25,10 @@ body {
 	text-align: center;
 	background-color: #0082c9;
 	background-image: url('../img/background.png?v=2');
+	background-image: url('../img/background.png?v=2'), linear-gradient(40deg, #0082c9 0%, rgba(28,175,255,1) 100%);
 	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	background-size: cover;
+	background-repeat: repeat;
+	background-size: 275px, contain;
 	background-attachment: fixed; /* fix background gradient */
 	min-height: 100%; /* fix sticky footer */
 	height: auto;
@@ -524,22 +525,24 @@ form .warning input[type='checkbox']+label {
 #remember_login {
 	margin: 18px 5px 0 16px !important;
 }
-.remember-login-container,
 .lost-password-container {
 	display: inline-block;
 	margin: 10px 0;
 	text-align: center;
 	width: 100%;
-	text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
 }
-.lost-password-container #lost-password,
-.lost-password-container #lost-password-back {
+#lost-password,
+#lost-password-back,
+#reset-password-wrapper + a {
 	display: inline-block;
-	font-weight: normal;
+	font-weight: normal !important;
 	padding: 12px;
-	margin-top: -6px;
 	color: #fff;
 	cursor: pointer;
+	text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
+}
+#lost-password {
+	margin-top: -6px;
 }
 #forgot-password {
 	padding: 11px;

core/css/header.scss

@@ -50,6 +50,7 @@
 	z-index: 2000;
 	height: $header-height;
 	background-color: var(--color-primary);
+	background-image: linear-gradient(40deg, var(--color-primary) 0%, rgba(28,175,255,1) 100%);
 	box-sizing: border-box;
 	justify-content: space-between;
 }
@@ -444,7 +445,6 @@ nav[role='navigation'] {
 			text-overflow: initial;
 			width: auto;
 			overflow: hidden;
-			background-color: var(--color-primary);
 			padding: 0 5px;
 			z-index: 2;
 		}

core/css/styles.scss

@@ -87,6 +87,7 @@ ul {
 
 body {
 	background-color: var(--color-main-background);
+	background-color: linear-gradient(40deg, var(--color-main-background) 0%, rgba(28,175,255,1) 100%);
 	font-weight: normal;
 	/* bring the default font size up to 14px */
 	font-size: .875em;