Firefox Customs

2 readers

3 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
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.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago

MODERATORS

[email protected]

Is it possible to get this effect of blurring tab content behind the top bar in Firefox? (lemmy.world)

submitted 1 week ago by [email protected] to c/[email protected]

1 comments fedilink hide all child comments

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 3 points 1 week ago* (last edited 1 week ago)

Depends on how hacky you want to get. Backdrop-filter won't work across contexts (chrome-context vs. website context) but you can sidestep that easily by adding the blurring effect in userContent directly to the page. The obvious issue with that kind of effect in general is that you cannot then interact, or even really ever see the top part of the web page, because it's always covered by browser chrome - that would be the case even if the blurring effect could be done across contexts. You can maybe work around that a little bit by adding a top padding to web page body like in the example below, but that is totally not guaranteed to work for all sites because sites can style themselves however they please.

super-fast and hacky userchrome:

#navigator-toolbox{
  background: rgba(0,0,0,0.3) !important; 
  margin-bottom: -86px;
  z-index: 5 !important;
}
.browser-toolbar{
  background: transparent !important;
}
#sidebar-main,
#sidebar-box,
#sidebar-splitter{
  padding-top: 86px;
}

userContent.css:

@-moz-document url-prefix("http"){
  :root::before{
    content: "";
    top: 0;
    position: fixed;
    z-index: 10000;
    width: 100vw;
    height: 86px;
    backdrop-filter: blur(28px);
  }
@-moz-document url-prefix("http"){
  :root::before{
    content: "";
    top: 0;
    position: fixed;
    z-index: 10000;
    width: 100vw;
    height: 86px;
    backdrop-filter: blur(28px);
  }
  body{
    padding-top: 86px;
  }
}
}

Result: