Using browser's titlebar causes it to appear inactive and be partially transparent to mouse

[vertigo220]

Using Waterfox titlebar instead of OS one results in it always being colored like a background app, even when Waterfox has focus, and makes it unresponsive to the mouse (double-clicking to maximize/restore, clicking and dragging to move) where the title text is.

[Aris-t2]

Post more info about your config:

OS / OS version / OS theme
Waterfox version
Screenshots

[vertigo220]

Win10x64, standard theme
Waterfox 56.1.0x64

In the image, the file manager window has focus, so you can see the difference between a focused and non-focused window. The Waterfox titlebar doesn't change appearance when it has focus; it continues to be the same light-gray color of a non-focused window. And if I try to interact with it anywhere between the Waterfox button and the end of the title text (IOW, in the area of the text), it's unresponsive. Left-click, right-click, double-click, click and drag, all don't do a thing. It's basically a dead zone for interacting with the window.

[Aris-t2]

The way Firefox window header is colorized is controlled by Firefox itself. Mozilla did not integrate Windows 10s default window appearance for "Firefox" titlebar, but I think they had their reasons. Since Waterfox is based on Firefox, the same applies to it too.

CTR offers an option to use OS default titlebar colors. That way focused and non-focused window colors do differ.

The tab title is an object on top of the titlebar area. Not sure, if it can be made accessible for interactions, because the default attribute for that ("mousethrough","always") does not work there.

[vertigo220]

That option definitely fixes it, but then I have dark text on a dark background (even in your example it's difficult to read, but for me it's near impossible since I set my title bars a dark grey color in Windows, so it's essentially #000000 on #222222. Any way to change the text color?

[Aris-t2]

Use custom code like this on CTRs prefwindow inside custom css area:

#main-window #titlebar #ctraddon_titlebartitle label {
  color: red !important;
 }

#main-window:-moz-window-inactive #titlebar #ctraddon_titlebartitle label {
  color: green !important;
 }

[vertigo220]

Thank you! You're amazing. I changed green to grey, but otherwise, perfect. I wish I could make all windows have red on black text. 😁

[Aris-t2]

There is actually a bug in the Firefox/Windows10 combo, when it comes to titlebar/caption colors.
Firefox offers internal color variables "CaptionText" and "InactiveCaptionText", which should use colors based on Windows 10s internal titlebar colors set inside system theme/color settings.
For some reason this does not work properly for Firefox titlebar.

[vertigo220]

I just noticed the menu bar text is still black, making it very hard to see. Obviously, I don't use it very often, which is why I'm just now discovering it, so it's not a big deal at all, but I was wondering if there's some css code similar to what you provided above to tweak that as well.

[Aris-t2]

Since there was never intended by Mozilla to make the top toolbar colors customizable or to adopt the OS colors, the text color for active and inactive text is still wrong on Windows 10. Use the above mentioned css code. #389 (comment)

[vertigo220]

I'm already using that code for the title bar, I was talking about the menu bar underneath it:

[Aris-t2]

Try this:

#main-window #main-menubar > menu  {
  color: red !important;
 }

#main-window:-moz-window-inactive #main-menubar > menu {
  color: green !important;
 }

[vertigo220]

Perfect 😄 Thanks again!