Solved CSS Gurus needed: Help with user script and site issue
-
I know there are some real CSS Gurus here and my skill level is falling short on troubleshooting a custom CSS user script I maintain, used to make a dark mode for the gaming news site:
https://www.rockpapershotgun.comThe script itself is here:
https://greasyfork.org/en/scripts/370482-rps-night-mode
There's not a lot of CSS needed.Install Tampermonkey or similar extension, then install and activate the script. It mostly works fine, but I get this weird issue on the front page:
I've not been able to find the element that makes this strange triangle shape using the inspector. I suspect it's part of the page, just not shown with the default white background. So I need to find the element that does this.
I've also tested in other browsers so it's an issue with the script, not the browser. And the same shows up when using Stylish with only CSS.
When I browse the site I usually use:
https://www.rockpapershotgun.com/latest
And it's not such a problem there, only on the front page and bottom of articles with links to other posts. -
I think I figured it out. Typical, once I start digging the solution comes, I just give up too fast
Seems RPS uses a pseudo-element on the thumbnail element, with some strange
clip-path
stuff I have no idea what's there for..summary[data-size=large] .thumbnail:after { background: #fff; content: ""; ... border: 1px solid transparent; -webkit-clip-path: polygon(0 97%,8% 83%,92% 100%,0 100%); clip-path: polygon(0 97%,8% 83%,92% 100%,0 100%); }
Using pseudo-elements for anything but adding some content is nasty, and so easy to miss when looking at the code...
So this removes it:
.thumbnail:after {content: unset !important;}
Thanks for the encouragement needed to actually invest some time figuring it out
-
I use Stylus.
You only have to add the class ".wrapper":
body, .wrapper {color: #eee !important; background: black !important;}
-
@barbudo2005 Good tip - although I do want the wrapper to have the regular
#393939
background, not black.And if I make a separate selector for .wrapper:
.wrapper {background: #393939 !important;}
I still get the weird artifacts:
-
-
I think I figured it out. Typical, once I start digging the solution comes, I just give up too fast
Seems RPS uses a pseudo-element on the thumbnail element, with some strange
clip-path
stuff I have no idea what's there for..summary[data-size=large] .thumbnail:after { background: #fff; content: ""; ... border: 1px solid transparent; -webkit-clip-path: polygon(0 97%,8% 83%,92% 100%,0 100%); clip-path: polygon(0 97%,8% 83%,92% 100%,0 100%); }
Using pseudo-elements for anything but adding some content is nasty, and so easy to miss when looking at the code...
So this removes it:
.thumbnail:after {content: unset !important;}
Thanks for the encouragement needed to actually invest some time figuring it out
-
-