Skip to content

Wikipedia: Image preview carousel controls difficult to see #1850

@iam13islucky

Description

@iam13islucky

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.

Default Light:
Image
Default Dark:
Image

Catppuccin Latte:
Image
Catppuccin Frappe:
Image
Catppuccin Macchiato:
Image
Catppuccin Mocha:
Image
Mocha with different accent to show it has no effect:
Image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions