Skip to content
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

Header Text and icons Hard to read on Shared Link Downloads #349

Open
Schroedinger00 opened this issue Oct 17, 2024 · 2 comments
Open

Header Text and icons Hard to read on Shared Link Downloads #349

Schroedinger00 opened this issue Oct 17, 2024 · 2 comments
Labels

Comments

@Schroedinger00
Copy link

Describe the bug
The Header Text and icons are Hard to read on Shared Downloads with the Transparent Background, as they are Black and not white.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Public Downloads that are shared with a Link
  2. See error

Expected behavior
Text and Icons should be White and not Black

Screenshots
Screenshot 2024-10-17 145638
Its very hard to see on the Screenshot, need to Zoom in and use a Bright screen.

Setup:

  • Nextcloud version: 29.0.8
  • Theme version: 29.0.0
  • Browser and browser version: Chrome 129

Additional context
I am not sure what the error might be, everywhere else it seems to be fine, but on any Shared link for Downloads, the Header Text and icons are Black and not White.
I have tried to fix it myself using Custom CSS Settings for Breeze Dark, but as I do not know the proper Names for the Settings (i.e. "--color-plasma-blue" and such). I have not been able to fix it.

On another Note, it would be nice, if all Settings for Breeze Dark could be in a Wiki (i.e. "--color-plasma-blue" and such), that way it would be more Customizable and it would be possible to fix some smaller issues like this on your own. That would be much appreciated.

I hope this is an easy fix! :)

@mwalbeck
Copy link
Owner

The following CSS should take care of the title at least

#body-public .header-appname {
    color: var(--color-main-text);
}

What I believe you're seeing is that Nextcloud isn't taking into account the contrast of the background on public pages. The color of the text is essentially determined by the color scheme reported by the browser. White text for light theme and black text for dark theme. This is fine when the default background is used, as it works with both light and dark text, but as soon as you deviate you're likely to get issues. So there isn't an overall CSS change that can really fix it, since it isn't possible to handle with just CSS, but it's quite simply to create a couple targeted CSS rules to sort it out.

I can't give some CSS for the icons, as I'm not sure what is causing them to be there, I only have the meat ball icon, but the CSS would be something similar to the title.

@Schroedinger00
Copy link
Author

The CSS seemed to have done the trick, it works and is actually readable now.
thank you a lot for the quick help!
Unfortunate that the Icons cant be fixed as easily, maybe I can find some other way.
If I find a solution I will Inform you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants