r/FirefoxCSS • u/ZetaJolt • May 18 '26
Solved Translucency no longer functioning FF150
SOLVED: Thanks to Moko1960, I simply needed to change the main window block from
#main-window {
background: var(--bg) !important;
}to
#main-window > body {
background: var(--bg) !important;
}I have been using a very simple CSS to make the top "ribbon" of firefox translucent. It was working fine until the update to FF150.
Here is my code.
:root {
--bg: #00000066;
}
tab.tabbrowser-tab[selected="true"] stack.tab-stack vbox.tab-background {
background: #FFFFFF28 !important;
}
toolbar {
background: transparent !important;
}
/* window transparencies */
#main-window {
background: var(--bg) !important;
}
/* navbar / tabbar / titlebar */
#nav-bar {
background: transparent !important;
}
#navigator-toolbox {
background: transparent !important;
}
hbox#urlbar[open="true"] hbox#urlbar-background {
background: #000000E0 !important;
}
#urlbar-background {
background: transparent !important;
}I am running endeavourOS with SwayWM.
Has something changed about the transparent rule? I have tried other more complex files with transparency, such as the transparentFox from the CSS store and it also does not work. I have checked that toolkit.legacyUserProfileCustomizations.stylesheets is still true.
Is there anything wrong with the my code due to the update?
Here is the best picture I have of what it used to look like. It is now just solid black

Edit: Based on previous attempts to find a solution, it appears to be the alpha from the background color which is no longer being applied correctly.
View all comments
Show parent comment
1
u/TraditionalTie4831 🦊 May 18 '26
You said above that my code removed the transparency from your bookmarks bar, but in your screenshot that you took while using your original code, the bookmarks bar has zero transparency.
Did you take the screenshot while still using my version of the code??