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?
Modificado por Alec Mev a
Solução escolhida
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 */
Ler esta resposta no contexto 👍 1
Todas as respostas (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.
Modificado por Alec Mev a
Solução escolhida
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.