-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
🔢 Add css variables for blur background #33610
Conversation
juliusknorr
commented
Aug 18, 2022
•
edited
Loading
edited
- Add css variables for blurred background and core background image
- --color-main-background-blur
- --filter-background-blur
- --image-main-background
- Move dashboard to new variables
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.
looks good
@@ -59,6 +59,9 @@ public function getCSSVariables(): array { | |||
$variables['--color-background-dark'] = $this->util->darken($colorMainBackground, 30); | |||
$variables['--color-background-darker'] = $this->util->darken($colorMainBackground, 30); | |||
|
|||
$variables['--color-main-background-blur'] = $colorMainBackground; | |||
$variables['--filter-background-blur'] = 'none'; |
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.
Nice!
@@ -190,26 +192,30 @@ public function getCSSVariables(): array { | |||
'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no', | |||
'--background-invert-if-dark' => 'no', | |||
'--background-invert-if-bright' => 'invert(100%)', | |||
|
|||
'--image-main-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')", |
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.
Can't we customize that?
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.
It will be overwriten further down with the theming image. Taking the customised dashboard image into account will be a follow up.
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.
Ah right I get it now!
Could use a tad more comments 😉
} | ||
$variables["--image-$image"] = "url('".$this->imageManager->getImageUrl($image)."')"; | ||
$variables["--image-$image"] = "url('" . $imageUrl . "')"; |
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.
Duplicate of the line 216, no?
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.
No, --image-main-background has a fallback to the cloud image, while the other one --image-background only represents just the theming image.
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.
See comments
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Signed-off-by: Julius Härtl <jus@bitgrid.net>
7269c7a
to
57233fd
Compare
/compile |
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Fixed tests |