CSS Accessibility Tweaks

CSS Accessibility Tweaks

I will try and grab the CSS tweaks I suggested on the forums to help those who are suffering from migraines, headaches, epilepsy from using the Steam Library.

Remove "pop in"/"zoom" from game grid images.

I can't speak for anyone else, but I get migraines from zooming animation. In "Large Mode," each tile zooms on mouseover. I get the same migraines from Google Maps, and many other websites.

I also get migraines from smooth scrolling animation. In "Large Mode," trying to page dwn results in smooth scrolling animation, as well as zooming animation when the ties pass under the cursor.

I also get migraines from flashing, like this website.

The "zoom in" or popping of game image tiles is controlled by this CSS.

.appportrait_HoversEnabled_54PuC .appportrait_LibraryItemBox_WYgDg:hover:not(.appportrait_Landscape_3VOR2) {
    transform: rotateX(3deg) translateZ(15px);
    filter: brightness(1.1) contrast(0.95) saturate(1);
}

if you remove the transform you remove the "zoom in" or popping of the game images. But the flickering effect by itself is also quite annoying, so also remove the filter, and put an outline instead.

.appportrait_HoversEnabled_54PuC .appportrait_LibraryItemBox_WYgDg:hover:not(.appportrait_Landscape_3VOR2) {
    transform: none;
    outline: 2px solid #50cc00;
}

https://steamcommunity.com/discussions/forum/10/1745643015563656613/?ctp=12#c3006676913242584900

GIF Image