-
-
Notifications
You must be signed in to change notification settings - Fork 254
Description
Is there an existing issue outlining your problem?
- I am using the latest version of the provided userstyle.
- I have searched the existing issues and they do not solve my problem.
What userstyles are you seeing the problem on?
lbl:wikipedia
Describe your problem.
Using any flavor but Latte for the Wikipedia user style renders the controls on the image preview carousel near impossible to see if the screen has any glare.
For example, the "X" button you click to close the preview is using the default background color, a transparent dark color (#20212274) on the black background but becomes opaque (#202122) on hover. The actual "X" symbol is made with a mask-image with a background color set to --color-inverted-fixed, which the theme overwrites with the value of @crust from the flavor.
For Latte, this is fine, as #dce0e8 has some contrast from the near-black background, but the colors for Frappe (#232634), Macchiato (#181926), and Mocha (#11111b) are all way too close to the near-black background and only visible when hovered over, which makes finding them a pixel-hunt until the hover gives enough contrast to distinguish them.
To simplify, the theme overwrites a CSS variable used for the icon's color, but not the button's background color, and for the darker flavors of the theme, it ends up being near-black on near-black.
Attach screenshots.
Example page: https://en.wikipedia.org/wiki/Omega_Men#/media/File:OmegaMen.jpg, opens the preview carousel of the infobox image.
Catppuccin Latte:

Catppuccin Frappe:

Catppuccin Macchiato:

Catppuccin Mocha:

Mocha with different accent to show it has no effect:

What browser(s) are you seeing the problem on?
Firefox 142.0 on Windows 11
Any additional comments?
Sorry if I was unclear or formatted my description badly, I'm happy to elaborate or answer any questions!
I'm a web dev myself so I'd be happy make a PR with a fix if someone can give me guidance on what colors from the theme should be applied here to look best. I imagine using one of the overlay colors on the button backgrounds would work, but I don't have an eye for design.

