Avatar for Username

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信，及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

话题已存档。 如果需要帮助请提出新问题。

Cannot style any children of .urlbarView.megabar in userChrome.css in Firefox 75

  • 5 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 Alec Mev

Alec Mev
Alec Mev
more options

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?

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?

由Alec Mev于修改

被采纳的解决方案

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 */
定位到答案原位置 👍 1

所有回复 (5)

Wesley Branton
Wesley Branton
more options

You are looking for the urlbarView-row class items.

Alec Mev
Alec Mev 提问者
more options

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.

由Alec Mev于修改

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

选择的解决方案

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 */
Wesley Branton
Wesley Branton
more options

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.

Alec Mev
Alec Mev 提问者
more options

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.