Open ndx1905-github opened 2 years ago
This is not an easy one, and we had issues with contrast in the past. I generally consider this 'working as intended', since we cant check the image before display, to verify it 'looks good'.
However, i have added some featues in the dev-branch that may help. You will eventually be able to apply a tint to each image, which will give you the ability to generally increase contrast with any image that may be loaded
Thanks for the quick reply Tint on the whole image is a bit different. Would it be possible to add a tint just behind the header part? Or alternatively make sure the splash image is confined below the header?
You can already disable the background image for the header in the settings under theming
It's already unticked.
Here is the behavior :
EDIT It's not a problem on the login page (no app icons anyway), but it's a problem on the dashboard page.
Okay This made the trick https://github.com/nextcloud/unsplash/issues/92#issuecomment-1097011966
I have an idea to fix this permanently
Cool !
Just a comment on the css trick from
background: var(--color-primary-element) !important; }
I noticed that in combination with splash :
when first loaded, the header is in plain color
if you scroll to the bottom, the header become a gradient of black (maybe because I have a dark mode? no idea). I think that gradient is a very nice feature that I'd like to have as the primary choice instead of plain.
Just a remark !
I have this issues too. I would love the extension to set a consistent semi-transparent header background. I think it would be a nice polish features as opposed to the bight colored bar from the rest of the nextcloud theme.
The current dev-branch includes the ability to 'tint' an image. It looks like this, and it always applies the instance-color. This does increase readability, and should be a good way to deal with this issue
It would be great to have this tint functionality only behind the icon line and not for the whole image
A workaround I'm using, added via the Custom CSS app:
#header > div {
background: rgba(0, 0, 0, 0.33);
}
This CSS targets the header's inner div
s as not to replace the background image, adding a dark overlay below the icons (play with the 0.33
to change opacity).
@LaXiS96 I didn't know about the custom CSS plugin, that's a great workaround!
I tweaked the CSS a little bit, and made the header bar style match up with Nextcloud's dark theme:
body > #header {
background: rgba(23, 23, 23, 0.8) !important;
backdrop-filter: blur(25px);
}
.content, #content {
margin-top: 55px !important;
}
The margin is there so you don't end up with ugly corners like this:
It would be great to see this built in to the app, or at least an option in the settings. But in the meantime, the Custom CSS app provides a good workaround.
use GitHub reactions 👍 to show that you are affected by the same issue. Please don't comment if you have no relevant information to add!
Describe the bug: When a image with very bright light colors is randomly picked up, there is no contrast with NC icons which make it practically unusable (need to reload the page to have more contrast).
To Reproduce: Steps to reproduce the behavior: Refresh page until a very light image is loaded Or.. look at the screenshots provided
![IMG_2901](https://user-images.githubusercontent.com/64833823/168486419-6fa44d1f-2b73-4672-a01e-46c02d555f39.jpg)
Expected behavior: There should be a shadow or dark line around NC icons. Alternatively, header should be opaque.
Server: