Merge pull request #18082 from nextcloud/design/style-update

Update style of log in page and header

apps/theming/css/theming.scss

@@ -7,6 +7,19 @@
 	@return (0.2126 * $-local-red  + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
 }
 
+@mixin faded-background {
+	background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
+}
+
+@mixin faded-background-image {
+	@if ($color-primary == #0082C9) {
+		background-image: $image-login-background, linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
+	} @else {
+		@include faded-background;
+		background-size: contain;
+	}
+}
+
 $has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
 $invert: luma($color-primary) > 0.6;
 
@@ -115,6 +128,10 @@ $invert: luma($color-primary) > 0.6;
 	background-image: $image-logo;
 }
 
+#body-user #header, #body-settings #header, #body-public #header {
+	@include faded-background;
+}
+
 /* override styles for login screen in guest.css */
 @if ($has-custom-logo) {
 	// custom logo
@@ -142,12 +159,14 @@ $invert: luma($color-primary) > 0.6;
 	#theming-preview {
 		background-image: $image-login-background;
 		background-color: $color-primary;
+		@include faded-background-image;
 	}
 } @else {
-	  #theming-preview {
-		  background-image: $image-login-background;
-		  background-color: $color-primary;
-	  }
+	#theming-preview {
+		background-image: $image-login-background;
+		background-color: $color-primary;
+		@include faded-background-image;
+	}
 }
 
 @if variable_exists('theming-logoheader-mime') and $theming-logoheader-mime != '' {
@@ -217,7 +236,7 @@ input.primary,
 	}
 } @else {
 	#body-login {
-		background-color: $color-primary;
+		@include faded-background-image;
 	}
 }
 

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;