catppuccin / catppuccin/userstyles
Wikipedia: Image preview carousel controls difficult to see
- Dominant language
- Less
- Stars
- 1.1k
- Forks
- 297
- PR merge metrics
- No merged PRs in 30d
Description
### Is there an existing issue outlining your problem?
- [x] I am using the latest version of the provided userstyle.
- [x] 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](https://en.wikipedia.org/wiki/Omega_Men#/media/File:OmegaMen.jpg), opens the preview carousel of the infobox image.
Default Light:
Default Dark:
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.
Contributor guide
Research direction
Open the linked Wikipedia image-preview example and inspect the Wikipedia userstyle rules for the carousel controls, especially the close button, mask-image, and related CSS variables. Adjust the dark-flavor control contrast, then verify that the controls are distinguishable without hover in Frappe, Macchiato, and Mocha while preserving Latte behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100