search

NikolayRys / Likely

The social sharing buttons that aren’t shabby
ISC License
395 stars 61 forks source link

Styling fix for media `hover: none` #199

Closed sashotoster closed 2 years ago

sashotoster commented 2 years ago

Without digging too much, it seems like the problem is caused by having one media query (likely-light-button function) inside another (when we call it inside @media (prefers-color-scheme: dark)) -- and oh no, we're losing our scope, having this in the resulting CSS:

Screenshot 2022-09-25 at 16 25 01

This PR achieves removing this block so that our theme-based CSS looks like this:

Screenshot 2022-09-25 at 16 49 54

which corresponds to our hardcoded dark theme (unchanged compared to master):

Screenshot 2022-09-25 at 16 49 47

@NikolayRys could you verify? There also might be a more elegant solution, but this separation was the first thing that came to my mind and it seems to do the trick.

NikolayRys commented 2 years ago

Good job, thanks :) Yeah, seems that @media queries cannot really be nested with our CSS preprocessor but rather need to be explicitly chained through and.