Crumb
c/FirefoxCSS · by PleaseBeKindPlease@lemmy.world · 1y

How can I add a border to the PiP window?

Hello!

I'd like to add a border to the Picture-in-Picture window; so I've added the following code to my userChrome.css file:

html[windowtype="Toolkit:PictureInPicture"] { border: 2px solid red !important; }

But the border doesn't appear at the bottom; only on the left/top/right sides. How could I fix this?

If I set the border to more than 2px, then I can see it; but if I hover over the PiP window, the shadow of the control buttons cover the borders; is there also a way to change that shadow (without removing it) so that it doesn't cover the borders?

Thank you very much for any help!

1 points · 2 comments · view on lemmy.world

2 Comments

MrOtherGuy@lemmy.world · 3 pts · 1y (1 reply)

One thing you could do is like this:

html[windowtype="Toolkit:PictureInPicture"] > body::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  outline: 2px solid red;
  outline-offset: -2px;
  pointer-events: none;
}
PleaseBeKindPlease@lemmy.world · 1 pts · 1y

Yes, it works perfectly fine! Thank you very much!