toolbars_below_content tabbar and inactive tab background transparent under linux

[WorldofShadows]

Hey! First of all, thank you for your hard work. Funny that the formerly easiest moddable browser is such a hassle nowadays.

I followed your tutorial and git cloned the repo and added only

@import url(chrome/tabs_below_content.css);

to the userChrome.css to have the tabs below the content.

It is working fine, but the backgrounds of the tabbar and the inactive tabs are transparent and hard to see when there are bright windows behind firefox. It looks cool though. :-) I'm puzzled what i could have missed on this one and have no idea how to easily fix this. CSS is a kind of magic to me.

Tried the default firefox dark theme and another one to no avail. I'm using Firefox 127.0.2(64bit) on Arch Linux with KDE Plasma 6.1 on Wayland.

Would be happy if you could help me here :)

[MrOtherGuy]

The background color is supposed to come from the theme you are using. The fact that it seems to be transparent seems a bit weird though, but it's entirely possible that I've missed something and sgould've set a fallback color to be used in case the theme doesn't specify a background color to be used there.

Nonetheless, could you test some themes that use solid color toolbars to see if some of them do have opaque tabs toolbar backgrounds.

Regardless, it would probably be a good idea to specify some fallback color so this kind of thing doesn't happen.

[WorldofShadows]

Thanks for your answer :) I've tried around 20 themes now, all default ones and the rest from the Mozilla site and on all of them the tab bar stays transparent sadly. It's hard to find one with solid color toolbars via the Mozilla search, though. Is there a workaround value i can set in the userChrome.css for this?

[MrOtherGuy]

I believe you should be able to just add

:root{ --lwt-accent-color: #000 !important }

But the fact that that is not being applied automatically already makes me somewhat vary, as it might be that your Firefox build is modified by your distro and it has different styling than Firefox normally has.

[WorldofShadows]

Thank you, i tried that, but it doesn't work sadly.

My userChrome.css contains the following now: ` / Import your desired components first /

@import url(chrome/tabs_below_content.css);

/ Apply your custom modifications after imports / :root{ --lwt-accent-color: #000 !important } ` To exclude errors from the repository version of firefox i just downloaded a standalone version directly from mozilla and there the tab bar is also transparent after cloing the git and creating the userChrome.css with the above content. Thats really strange behaviour.

I tried the css on my Windows 10 dual boot and there everything works just fine without any transparency.

[MrOtherGuy]

Okay, I know what's happening. On linux Firefox specifically sets tabs toolbar background-color to transparent, and we need to override that.

There's an adjancent issue in that on many themes, the current styling rules result in bad contrast because we are (supposed to) use --lwt-accent-color which doesn't necessarily match the perceived background color. An all around good solution might not exist, but I think that using the color that is used in panel menus is the least likely to cause issues.

I have a solution to fix this but I can't fix the style right this moment.

In the mean time you can use:

#TabsToolbar{ background-color: white !important }

[WorldofShadows]

That worked like a charm, thank you!

But the different behaviour is strange after all. No idea why Mozilla chose it to be this way. One might think that a completely same behaviour would be the better way on all plattforms.

[MrOtherGuy]

Yeah the titlebar area especially is problematic in this regard because there's a whole bunch of platform specific behavior and styling. For example, mac OS and some linux distributions have window control buttons on left side while Windows has them at right. There just has to be platform specific styling involved, there's no way around it.

[MrOtherGuy]

Can you test if the latest version actually works as intended and fixes the issue while also allowing tabs toolbar to be styled using your theme color and/or images?

[WorldofShadows]

Sorry for the delay, busy day :) I have tested it now and it works like a charm AND looks really nice on top of that.

Thank you so much. :)

[MrOtherGuy]

Great! Thanks for reporting / checking.