Cannot style any children of .urlbarView.megabar in userChrome.css in Firefox 75
My userChrome.css:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.tab-line { display: none !important }
.urlbarView-body-inner { border-top: unset !important }
#urlbar-results { background: red !important }
The ".tab-line" rule is applied, the ".urlbarView-body-inner" and "#urlbar-results" rules aren't. Can anybody reproduce? What's wrong?
Modified by Alec Mev
Chosen solution
The Browser Toolbox shows that these element are inthe HTML namespace and thus need to be placed above the @namespace line.
.urlbarView-results {background: red !important;}
.urlbarView.megabar .urlbarView-body-inner {border-top: unset !important;}
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
Read this answer in context 👍 1
All Replies (5)
You are looking for the urlbarView-row class items.
I want to get rid of the 1px border at the top of the megabar. It's styled like so in browser.css:
.urlbarView.megabar .urlbarView-body-inner {
width: 100%;
border-top: 1px solid var(--urlbar-separator-color);
}
I'm trying to cancel out border-top by adding this to userChrome.css:
.urlbarView-body-inner {
border-top: unset !important;
}
But there's no effect, the rule isn't even listed in the Rules of ".urlbarView-body-inner" in Browser Toolbox.
Modified by Alec Mev
Chosen Solution
The Browser Toolbox shows that these element are inthe HTML namespace and thus need to be placed above the @namespace line.
.urlbarView-results {background: red !important;}
.urlbarView.megabar .urlbarView-body-inner {border-top: unset !important;}
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
Either one of the following CSS codes work for me:
.urlbarView-body-inner {
border-top: unset !important;
}
or
.urlbarView-body-inner {
border-top: none !important;
}
Is this your first time working with userChrome.css modifications? Maybe you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true in the about:config page so that Firefox reads the CSS file. See Firefox Changes Breaking userChrome.css for more information.
Thanks, cor-el! That was it.
Done some more googling, and looks like @-moz-document should be used instead of @namespace for scoping, to avoid silly issues like this.