1
How can I add a border to the PiP window? (lemmy.world)
submitted 1 month ago by PleaseBeKindPlease@lemmy.world to c/FirefoxCSS@fedia.io
2 comments fedilink hide all child comments

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!

you are viewing a single comment's thread
view the rest of the comments
[-] MrOtherGuy@lemmy.world 3 points 1 month ago

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 points 1 month ago

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

this post was submitted on 20 Jan 2025
1 points (100.0% liked)

Firefox Customs

2 readers
6 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Rules

  1. Posts must have flair!
  2. Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
  3. Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
  4. When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
  5. Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 2 years ago
MODERATORS
yoasif@fedia.io
MrOtherGuy@lemmy.world