阅读:5798回复:19
[CSS] 地址栏下拉列表毛玻璃效果
Firefox 版本70或以上
使用方式: 将下面代码复制粘贴进 配置目录/chrome/userChrome.css 文件中。(没有则手动创建这些文件夹或文件) FF76 及之前的版本使用如下样式 @-moz-document url("chrome://browser/content/browser.xhtml") { #urlbar.megabar[breakout]:not([breakout-extend])[open],/*FF 70*/ #urlbar.megabar[breakout-extend] > #urlbar-background,/*FF 72*/ .urlbarView:not(.megabar){ background: rgba(255,255,255,.7) !important; backdrop-filter: blur(4px); } /*暗色主题*/ #urlbar.megabar[breakout]:not([breakout-extend])[open]:-moz-lwtheme-brighttext,/*FF 70*/ #urlbar.megabar[breakout-extend]:-moz-lwtheme-brighttext > #urlbar-background,/*FF 72*/ .urlbarView:not(.megabar):-moz-lwtheme-brighttext { background: rgba(42, 42, 46,.7) !important; } } FF77 或以上的则使用下面的样式。 @-moz-document url("chrome://browser/content/browser.xhtml") { #urlbar[breakout-extend] > #urlbar-background{ background: rgba(255,255,255,.7) !important; } #urlbar[breakout-extend]:-moz-lwtheme-brighttext > #urlbar-background{ background: rgba(42, 42, 46,.7) !important; } #urlbar[breakout-extend][open] > #urlbar-background{ backdrop-filter: blur(4px); } } 生效条件: 确保 about:config 中 toolkit.legacyUserProfileCustomizations.stylesheets 和 layout.css.backdrop-filter.enabled 的值为 true 确保FF在你的机器中支持并开启 webrender(目前 backdrop-filter 的实现依赖于 webrender) 效果: 开启 browser.urlbar.megabar 、browser.urlbar.update1 的效果 暗色主题下的效果 |
|
1楼#
发布于:2019-11-21 18:05
感谢大佬,看起来不错! |
|
|
2楼#
发布于:2019-11-22 09:24
楼主是用的nightly吗?
我70.0.1开启 browser.urlbar.megabar 之后样式失效了 |
|
3楼#
发布于:2019-11-22 09:25
再问个问题,现在userChrome.css里还用加这句代码吗?
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); |
|
4楼#
发布于:2019-11-22 12:45
infinity:楼主是用的nightly吗?70的 megabar 还没完善,所以我原来只在 Nightly 上测试。 主楼的代码已修改,现在支持 70 的 megabar。 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 在 72 之前可加可不加, 但之后不能加,因为 bug 1492582 - browser.xhtml: Migrate root xul:window element to an html:html element 将默认命名空间改为 http://www.w3.org/1999/xhtml 了,加了反而会失效。 |
|
5楼#
发布于:2019-11-22 15:12
mark
|
|
6楼#
发布于:2019-11-23 10:22
好东西
|
|
7楼#
发布于:2019-11-24 13:31
MAC实测有效
|
|
8楼#
发布于:2019-11-28 09:38
请教下,地址栏下拉的图标不隐藏怎样实现?
|
|
|
9楼#
发布于:2020-02-12 17:24
嗯~~~FF72+是不是已经不能开megabar了???
|
|
10楼#
发布于:2020-02-12 20:08
|
|
11楼#
发布于:2020-02-12 20:24
|
|
12楼#
发布于:2020-02-14 13:03
|
|
13楼#
发布于:2020-06-03 15:58
77里失效了吗?
|
|
14楼#
发布于:2020-06-03 20:11
建议
1. 暗色模式下使用 CSS filter 当中的 brightness 亮度偏转 2. 重新调整搜索建议文字颜色以减缓过高对比度带来的视觉疲劳 |
|
上一页
下一页