-
-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove gradient header for themed instances #19669
Conversation
Close nextcloud#19040 as suggested by @juliushaertl
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The plan was to keep the gradient for the default Nextcloud blue, but do not apply it if a custom theming color is set.
Adding a color check like
server/apps/theming/css/theming.scss
Line 15 in bf94acf
@if ($color-primary == #0082C9) or ($has-custom-background == true) { |
server/apps/theming/css/theming.scss
Line 11 in bf94acf
background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Gradients are so 1990 ...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agree with @juliushaertl, the gradient should only be removed when using a custom theming color.
And gradients being so 1990 makes them in fashion again now ;)
Will this be backported to 18? |
I added the color check as described by @juliushaertl, but I haven't been able to test it... What do we have to run on our servers to compile the SCSS? (and it's aware of the user-defined color at compile time?) |
@juliushaertl @jancborchardt good to go now? |
@@ -50,6 +50,9 @@ | |||
z-index: 2000; | |||
height: $header-height; | |||
background-color: var(--color-primary); | |||
@if ($color-primary == #0082C9) { | |||
background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This breaks the default background image. That change should go to theming.scss. Maybe you can try something like this, to make sure that the gradient is properly set otherwise:
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 0e9b922b27..c2a58dcc3d 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -8,7 +8,11 @@
}
@mixin faded-background {
- background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
+ @if ($color-primary == #0082C9) {
+ background-image: linear-gradient(40deg, $color-primary 0%, lighten($color-primary, 20%) 100%);
+ } @else {
+ background-color: $color-primary;
+ }
}
@mixin faded-background-image {
@@ -23,6 +27,10 @@
@include faded-background;
background-size: contain;
}
+
+ @if ($color-primary != #0082C9) and ($has-custom-background == false) {
+ background-image: none;
+ }
}
SCSS files should get reloaded automatically when debug mode is enabled. Otherwise you can always run |
Conflicts after #20343. |
Thanks for getting this started. I've moved my suggestion to #21198 and did a bit of code cleanup in the same run as well so we can get this merged. |
Close #19040 as suggested by @juliushaertl