CSS menu color leaks through to website menus

User Help for Mozilla Firefox
Post Reply
limp
Posts: 215
Joined: September 3rd, 2008, 4:26 pm

CSS menu color leaks through to website menus

Post by limp »

In userChrome.css I darkened the Firefox menus this way:

Code: Select all

@-moz-document url(chrome://browser/content/browser.xhtml) {
.menupopup-arrowscrollbox
{ background-color: #111 !important; } }
Unfortunately, that style rule has a nasty habit of leaking through to some drop-down menus on some websites, making those menus illegible. For example, open:

https://www.sfgate.com/sports/tv/

On the left side of the page, click on the menu under "Lineup." The menu is white with black text. Now enter the style rule above in a userChrome.css file, restart Firefox, and click on that same menu again. All of a sudden, it's black with black text and illegible.

I've tried everything my pea brain can think of, and wasted a huge amount of time in the process, trying to prevent this menu leak-through from happening, but nothing I've tried yet works, and I'm out of ideas.

Is there any way to darken the Firefox menus with CSS without darkening the menus of websites?
User avatar
xanthon
Posts: 405
Joined: December 17th, 2005, 11:55 pm

Re: CSS menu color leaks through to website menus

Post by xanthon »

I'm not going to experiment. Your url gets me a blank page; what is it?
limp
Posts: 215
Joined: September 3rd, 2008, 4:26 pm

Re: CSS menu color leaks through to website menus

Post by limp »

If you're referring to the url in the @-moz-document declaration, you're right. There's nothing there. It merely forms a part of the declaration which restricts the application of the code in the curly brackets to the portion of the browser governed by that url. It's also supposed to restrict the code to the browser itself, but in the case of menu background color, it doesn't. You can enter the entire declaration in a userChrome.css file without fear. It's harmless. It will give your menu bar menus and other menus a near-black background color, but it won't prevent that color from leaking into the sfgate website menus.

If you're referring to the sfgate url, it's definitely active. I use it repeatedly.
User avatar
xanthon
Posts: 405
Joined: December 17th, 2005, 11:55 pm

Re: CSS menu color leaks through to website menus

Post by xanthon »

OK. I already have code for menu colours. I was referring to the 'chrome' url.
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: CSS menu color leaks through to website menus

Post by morat »

The chrome url is correct on Firefox 105.

view-source:chrome://browser/content/browser.xhtml
limp
Posts: 215
Joined: September 3rd, 2008, 4:26 pm

Re: CSS menu color leaks through to website menus

Post by limp »

Thank you, morat, but I don't know what you mean.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: CSS menu color leaks through to website menus

Post by dickvl »

chrome://browser/content/browser.xhtml is the chrome URI for the main browser window as you can see if you open the Browser Toolbox, so using @-moz-document with this URI restricts the rules to apply only to this browser window.
https://developer.mozilla.org/en-US/doc ... er_Toolbox
limp
Posts: 215
Joined: September 3rd, 2008, 4:26 pm

Re: CSS menu color leaks through to website menus

Post by limp »

If you will read my original post, you will see that that URL IS what I used. It does nothing to prevent the dark CSS background color from leaking out to some (not all) website menus. If you will read mu first reply, you will see that I actually do understand the purpose of the UrL. I originated this topic not to ask if I was using the correct URL,which I was, or to ask what the URL meant, which I knew, but rather to ask if anyone could suggest a way to stop the leaking. No one has yet.
semigeek
Posts: 322
Joined: April 16th, 2014, 8:54 pm
Location: Colorado

Re: CSS menu color leaks through to website menus

Post by semigeek »

The fundamental question is why anything in userChrome.css would affect a webpage in the first place? Is your css below the namespace line?

You must be using a dark theme, since for me this makes menus unreadable.
Last edited by semigeek on October 12th, 2022, 9:47 am, edited 1 time in total.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: CSS menu color leaks through to website menus

Post by jscher2000 »

Some code is shared between the menus in the UI sections and in the styling of form controls. For the bit you are styling, I don't know whether you can distinguish between that element in a select control drop-down and a UI drop-down menu. To partially work around this, try

Code: Select all

/* Tweak menu colors for chrome only, not in-content popups */
menupopup:not(.in-menulist), 
menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  background-color: #111 !important;
  color: #ffc !important; /* For testing */
}
But that leaves a fat light-themed area, at least for me on the Light theme.

Probably others are better with shadow trees than I am.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: CSS menu color leaks through to website menus

Post by dickvl »

If something leaks then there can be a problem with the z-index.
You can try to fix this with a z-index: 2147483647; property.
I use this for instance for the #navigator-toolbox to make the toolbars slide over the page in Full Screen mode instead of pushing the page down.
semigeek
Posts: 322
Joined: April 16th, 2014, 8:54 pm
Location: Colorado

Re: CSS menu color leaks through to website menus

Post by semigeek »

jscher2000 wrote:But that leaves a fat light-themed area, at least for me on the Light theme.
This does the job and doesn't leave light remnants.

Code: Select all

menupopup:not(.in-menulist) {--panel-background: #111 !important;}
I now recall your explaining ".in-menulist" here:
https://jscher2000.github.io/userchrome ... on-ui.html
Last edited by semigeek on October 12th, 2022, 12:30 pm, edited 1 time in total.
limp
Posts: 215
Joined: September 3rd, 2008, 4:26 pm

Re: CSS menu color leaks through to website menus SOLVED!

Post by limp »

PROBLEM SOLVED! Thank you so much, semigeek. You have a great idea. Your code successfully circumvents the .menupopup-arrowscrollbox selector, which is the source of the background color leakage. Your solution works for all of the menus (I think) except the Bookmarks Toolbar menus. The complete solution is:

Code: Select all

menupopup:not(.in-menulist) {
--panel-background: #111 !important;
--arrowpanel-background: #111 !important; }
Thank you again, semigeek.
Last edited by limp on October 12th, 2022, 2:49 pm, edited 1 time in total.
semigeek
Posts: 322
Joined: April 16th, 2014, 8:54 pm
Location: Colorado

Re: CSS menu color leaks through to website menus

Post by semigeek »

Good to hear. But hardly my "idea"; I just poked around a bit following jscher's lead. Thanks are really due to him for figuring out the underlying issue, which does still affect this "menupopup" element, and suggesting the solution. I'm sure most remaining FF users use bits of his code from the page I linked, as I do.


So here's a reason I was interested in this. My own css includes

Code: Select all

*|dialog::backdrop {background: transparent !important;}
It gets rid of the grey overlay behind the popup windows for editing bookmarks, which are for some reason different from the one that sets a bookmark in the first place, and disable activity on the rest of the window. (That's actually been true for a long time, but the ugly grey overlay wasn't in FF78.) The code works, but does it also have the potential to leak into website display? When I try to qualify it with a selector like #bookmarkproperties it stops working.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: CSS menu color leaks through to website menus

Post by jscher2000 »

semigeek wrote:
jscher2000 wrote:But that leaves a fat light-themed area, at least for me on the Light theme.
This does the job and doesn't leave light remnants.

Code: Select all

menupopup:not(.in-menulist) {--panel-background: #111 !important;}
Great thinking. I always forget the CSS variables.
Post Reply