White left/right arrows on white background
golimarrrr opened this issue · comments
For screenshots that are mostly white like this one:
https://winworldpc.com/product/microsoft-word/40-dos
Arrows can't be seen as they are also white. It's easy to guess where they are but for new users they may think that there are no more screenshots
I've noticed this myself but it seems like a lift to fix - the arrows are coming from bootstrap, which is defining them in an scss file as an SVG background url, which it turns out is basically a brick wall as far as reaching in and touching the actual fill color or applying blending styles. If it were anything else at all we could do mix-blend-mode: exclusion and it would XOR the underlying pixels.
Option 1: Override the CSS for the arrows with our own modified CSS with a different fill, which will need to be a saturated color, or maybe a stroke? I haven't tried this and it may break in bootstrap updates or themes or many other cases.
Option 2: filter: drop-shadow(0px 0px 2px black); adds a soft black border
Option 3: filter: invert(27%) sepia(51%) saturate(10000%) hue-rotate(346deg) brightness(104%) contrast(100%); will color the arrows. You have to just mess with the weird numbers to get what you want.