Firefox

20907 readers

8 users here now

/c/firefox

A place to discuss the news and latest developments on the open-source browser Firefox.

Rules

1. Adhere to the instance rules

2. Be kind to one another

3. Communicate in a civil manner

Reporting

If you would like to bring an issue to the moderators attention, please use the "Create Report" feature on the offending comment or post and it will be reviewed as time allows.

founded 5 years ago

MODERATORS

k_o_t@lemmy.ml

golden_zealot@lemmy.ml

[Solved] Transparent page background without affecting content (lemmy.ml)

submitted 10 months ago* (last edited 10 months ago) by Quail4789@lemmy.ml to c/firefox@lemmy.ml

16 comments fedilink hide all child comments

Is there a way to do this with user CSS on Firefox?

The content has to have full opacity. So setting opacity through the compositor or the opacity CSS property does not count.

Setting a background-color with some alpha on userContent.css technically works but because the browser itself is fully opaque, doesn't show the background. Trying to set background-related properties on #browser on userChrome.css doesn't have an effect. If I can make only the background of #browser transparent, this'll work. But I don't know if that's possible.

edit: it is possible, with lots of caveats. Site-specific fixes will be required, popups are hard to read. If you have dark wallpapers enable dark reader to make site content readable on a dark background.

1- set browser.tabs.allow_transparent_browser to true

2- in userChrome.css add #main-window, #tabbrowser-tabpanels{ background: transparent !important; }

3- userContent.css:

*{
  background-color: transparent !important;
}
/* if you don't want full transparency */
html:root{
  background-color: #00000080 !important;
}

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

[–] myself@lemmy.ml 3 points 10 months ago (2 children)

If you're using picom you can just write a custom pixel shader that makes one very specific color transparent and then use css to set background-color to that value. Essentially just writing yourself a very hacky greenscreen solution

[–] Quail4789@lemmy.ml 2 points 10 months ago

I am using Hyprland but it also supports custom shaders. I might give this a try, thanks.

[–] Quail4789@lemmy.ml 1 points 10 months ago* (last edited 10 months ago) (1 children)

So, I've Googled my way to a very simple example to test how this'd work. However, the example below basically doesn't have any effect. (Setting pixColor[1] = 1.0; makes everything green so the shader is loaded correctly).

precision highp float;
varying vec2 v_texcoord;
uniform sampler2D tex;

void main() {
	// get the pixel color
       vec4 pixColor = texture2D(tex, v_texcoord);

	// change the alpha
	pixColor[3] = 0.75;

	// set the pixel color
	gl_FragColor = pixColor;
}

Since I don't know anything about shaders, before I open an issue on Hyprland, is this how you'd set the alpha of each pixel on a screen?

I suspect this might not be possible in Hyprland after all as it doesn't natively support per-window shaders. IIUC, Hyprland applies the shader after it composits so there's technically nothing behind the window I'm trying to make transparent.

[–] Max_P@lemmy.max-p.me 2 points 10 months ago (1 children)

Post the Hyprland config too?

Does it make the entire screen green by chance, not just the windows? If the shader applies to the whole screen, then setting alpha on it doesn't really makes sense and is probably discarded since your monitor can't display transparency. You need to make sure it applies on a per-window basis for them to be composited as transparent and show your wallpaper behind it.

[–] Quail4789@lemmy.ml 1 points 10 months ago

Yes, turns out Hyprland doesn't support per-window shaders and applies them after rendering so can't do transparency with them.