search

ankit / stylebot

Change the appearance of the web instantly
https://stylebot.dev/
MIT License
1.41k stars 208 forks source link

Certain buttons are not recognized in the YouTube UI #770

Open eedo31 opened 8 months ago

eedo31 commented 8 months ago

I use styleboot mainly to make my UIs cleaner, especially after having already learned shortcuts for certain websites. On YouTube for example, I removed most of the player buttons but apparently only some are removed while others are not, in particular I can't remove the "picture in picture" button (button.ytp-pip-button). The code is the same as the other keys but that one remains visible no matter what I do. Can anyone help me? Maybe I'm doing something wrong?

image

image

Chrome 120.0.6099.225 Win11 23H2 22635.2915

Obsidianninja11 commented 3 months ago

This comment is a bit late, but if you're still having the problem:

This is not a bug with stylebot.

The PiP button is from an extension, it's not something from official Youtube. I use the Enhancer for YouTube™ extension, which has this button, and uses a bit of weird styling to make the button.

Image ![image](https://github.com/ankit/stylebot/assets/108832807/755fabe9-903d-4fe4-9f2e-56912a82e7ef)

Because it has display: inline-block !important;, and uses a more specific selector, your display: none; is being overridden. To fix this, you need to also have a specific css selector (stylebot automatically adds !important, so you don't need to add it).

This css works for me, and should work for you.

#movie_player div.ytp-chrome-controls button.ytp-pip-button.ytp-button {
  display: none !important;
}
eedo31 commented 3 months ago

@Obsidianninja11 Copied, pasted and it works flawlessly. Thanks a lot!