Adjust gradient to theming value

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

diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index e8987a856775b9faa102146c3b2db65c3d4af06c..1f32c40ce02160e4e07cf595ab63bea2ddf7c5e7 100644 (file)
--- a/apps/theming/css/theming.scss
+++ b/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,13 +159,13 @@ $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%);
+               @include faded-background-image;
        }
 } @else {
        #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%);
+               @include faded-background-image;
        }
 }
 
@@ -209,7 +226,6 @@ 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 {
 
@@ -220,8 +236,7 @@ input.primary,
        }
 } @else {
        #body-login {
-               background-color: $color-primary;
-               background-color: linear-gradient(40deg, $color-primary 0%, rgba(28,175,255,1) 100%);
+               @include faded-background-image;
        }
 }