One thing I don't need first thing in the morning or last thing at night is to be visually accosted by emails that include absurdly-colored elements. A couple of the newsletters I subscribe to use ridiculous shades of red-orange, and with my gaming PC and its contrasty gaming monitor and some slightly boosted digital vibrance to make colors pop a bit, scrolling through these newsletters can physically hurt.
I'm planning to start maining a Macbook one of these days, relegating the PC for gaming duties only, allowing me to easily keep the brightness low when necessary. But for now whenever I'm on a computer and not for work purposes, it's on a gaming PC. I wanted to find a way to force these colors to chill the hell out until the Macbook happens, so I naturally reached for a userstyle as a solution.
Gmail's markup is unfortunately difficult to target with selectors. This is true of many sites that compile the markup and styles together at the same time as they end up having gibberish for class names. Not only can you not really tell what you're targeting after the selector is written, but all of the class names can or will change next time the site is compiled and pushed to production.
.nH .V8djrc .hP {
/* Can you tell this is targeting the email's title? */
}A markup-based selector is better, then, as that's less likely to change than the generated classes. While looking for the role attribute is quite helpful and a good starting point, e.g. div[role="main"], there isn't one available for just the email's body. I did, however, find an odd and unique markup situation: a deprecated <u> tag with nothing in it. The sibling div of this element just so happens to be the one that contains just the email's body.
Nice. We start with that and then look inside with :has(), the best damned thing added to CSS in ages, to confirm we're looking at a relevant newsletter by checking link URLs. After that it's a simple matter of doing the actual and literal dulling of elements with these absurd colors.
u:empty + div {
&:has(a[href^="https://www.henricocitizen.com/"]),
&:has(a[href^="https://www.richmonder.org/"]) {
a,
button,
td[bgcolor] {
filter: brightness(0.5);
}
}
}Why is this empty <u> tag there? Why isn't there an <article> tag wrapping the email body? And if not that, why not at least set the role attribute to document or article? The world may never know, but at least these violently red colors have been toned the hell down.
Note: Yes, I'm aware of the irony of complaining about this while my site uses one of the most, if not the most, jarring color of all ⸺ the dreaded magenta or #f0f. But I don't look at this place with my morning coffee, and odds are no other humans read this crap either.