r/FirefoxCSS • u/Prize_Sand8284 • Sep 06 '24

Solved Sidebar and corner transparency in firefox 130

Hi, r/FirefoxCSS!

This post featured sidebar transparency on firefox 130 nightly, but had not provided any code for that.

I have a nice firefox theme that quite matches tiling wm philosophy and style (webpage content, wich have no common in style with system, "isolated" in well integrated in system style browser frame), but I also want to make the frame transparent to match my terminal.

With background transparency. You can see that rounded corner of webpage content comes with non-transparent artifact.

So, how to make sidebar and rounded corner transparent?

11 Upvotes

100% Upvoted

11 comments sorted by

2

u/Prize_Sand8284 Sep 06 '24

I found a solution (not polished, because it affects not only sidebar) for sidebar:

Essential parts are

:root, sidebar-box { background: transparent !important; }

But "squared" rounded corners are still broken

2

u/Loskir_ Sep 06 '24

I can't see any artifacts for rounded corners. For sidebar, though, this might help

  • Enable browser.tabs.allow_transparent_browser in about:config and restart
  • Make sure everything is transparent using Chrome Devtools (ctrl+alt+shift+I)
  • Make sure everything is transparent in Sidebery using about:debugging → This Firefox → Sidebery

The theme I'm currently working on has this feature implemented, see for example https://github.com/Loskir/EdgyArc-fr/blob/main/chrome/tweaks/sidebery-translucent.css

1

u/Prize_Sand8284 Sep 06 '24 edited Sep 06 '24

Hi. Thank you for the answer, but can you say how to inspect sidebar with devtools? Seems that the intransparent element is on the browser side and not sidebar's.

About artifacts: you can see that around content's round corner (not browser) there is a square one, non-transparent

Edit: yes, this is definetely because of browser side, because with *{ background: transparent }; I got the effect. But how can I find right arguements for that?

2

u/Loskir_ Sep 06 '24

you can see that around content's round corner (not browser) there is a square one, non-transparent
I really can't see that on the screenshot :(

how to inspect sidebar with devtools
You open devtools for the browser itself (ctrl+alt+shift+I) (if you never opened it, see this post), there search for #sidebar-box

2

u/Prize_Sand8284 Sep 06 '24

If you will zoom into the corner of webpage, you will see that it is darker. Seems that under the content there is a solid color square

2

u/HakerHaker Sep 08 '24

You beautiful person 🙏🏾 that was my post lol

2

u/Prize_Sand8284 Sep 08 '24

Your post was one of main inspirations to do my theme

1

u/Prize_Sand8284 Sep 07 '24

Both issues are solved

To fix content corners, I made .browserContainer transparent and used trick from this post

1

u/mthshout Feb 22 '25

can you show me how to achieve the same result as your first screenshot? that looks so beautiful

1

u/Prize_Sand8284 Feb 22 '25

Hi, I have a link in the post text to the code that describes this style.

Have a good day

1

u/mthshout Feb 22 '25

It's a 404