lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度147点
  • 社区居民
  • 忠实会员
阅读:5798回复:19

[CSS] 地址栏下拉列表毛玻璃效果

楼主#
更多 发布于:2019-11-21 15:07
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 的效果

暗色主题下的效果
飞雪幻天
狐狸大王
狐狸大王
  • UID18542
  • 注册日期2007-05-08
  • 最后登录2023-02-24
  • 发帖数444
  • 经验38枚
  • 威望0点
  • 贡献值36点
  • 好评度0点
  • 社区居民
1楼#
发布于:2019-11-21 18:05



感谢大佬,看起来不错!
火狐浏览器QQ群6494286
infinity
狐狸大王
狐狸大王
  • UID48261
  • 注册日期2014-12-18
  • 最后登录2024-08-11
  • 发帖数352
  • 经验350枚
  • 威望0点
  • 贡献值96点
  • 好评度34点
  • 社区居民
  • 忠实会员
2楼#
发布于:2019-11-22 09:24
楼主是用的nightly吗?
我70.0.1开启 browser.urlbar.megabar 之后样式失效了
infinity
狐狸大王
狐狸大王
  • UID48261
  • 注册日期2014-12-18
  • 最后登录2024-08-11
  • 发帖数352
  • 经验350枚
  • 威望0点
  • 贡献值96点
  • 好评度34点
  • 社区居民
  • 忠实会员
3楼#
发布于:2019-11-22 09:25
再问个问题,现在userChrome.css里还用加这句代码吗?
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度147点
  • 社区居民
  • 忠实会员
4楼#
发布于:2019-11-22 12:45
infinity:楼主是用的nightly吗?
我70.0.1开启 browser.urlbar.megabar 之后样式失效了
回到原帖
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  了,加了反而会失效。
eagle5678
千年狐狸
千年狐狸
  • UID4956
  • 注册日期2005-04-10
  • 最后登录2024-06-16
  • 发帖数1248
  • 经验205枚
  • 威望0点
  • 贡献值120点
  • 好评度3点
5楼#
发布于:2019-11-22 15:12
mark
xuanyuan100
小狐狸
小狐狸
  • UID34492
  • 注册日期2010-11-10
  • 最后登录2021-06-11
  • 发帖数24
  • 经验34枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
6楼#
发布于:2019-11-23 10:22
好东西
好人好梦
火狐狸
火狐狸
  • UID26935
  • 注册日期2008-11-06
  • 最后登录2024-09-05
  • 发帖数255
  • 经验91枚
  • 威望0点
  • 贡献值28点
  • 好评度4点
  • 社区居民
7楼#
发布于:2019-11-24 13:31
MAC实测有效
withero
小狐狸
小狐狸
  • UID37110
  • 注册日期2011-08-29
  • 最后登录2024-08-24
  • 发帖数45
  • 经验64枚
  • 威望0点
  • 贡献值14点
  • 好评度0点
  • 社区居民
8楼#
发布于:2019-11-28 09:38
请教下,地址栏下拉的图标不隐藏怎样实现?
www.helup.com
赤雲染
小狐狸
小狐狸
  • UID49929
  • 注册日期2015-05-07
  • 最后登录2024-03-12
  • 发帖数2
  • 经验3枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
  • 忠实会员
9楼#
发布于:2020-02-12 17:24
嗯~~~FF72+是不是已经不能开megabar了???
aunsen
小狐狸
小狐狸
  • UID34416
  • 注册日期2010-11-03
  • 最后登录2024-09-19
  • 发帖数56
  • 经验63枚
  • 威望0点
  • 贡献值32点
  • 好评度4点
  • 社区居民
  • 忠实会员
10楼#
发布于:2020-02-12 20:08
赤雲染:嗯~~~FF72+是不是已经不能开megabar了???回到原帖
好像是的,已经失效
lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度147点
  • 社区居民
  • 忠实会员
11楼#
发布于:2020-02-12 20:24
aunsen:好像是的,已经失效回到原帖
@赤雲染 可以的只是参数改了 browser.urlbar.update1
aunsen
小狐狸
小狐狸
  • UID34416
  • 注册日期2010-11-03
  • 最后登录2024-09-19
  • 发帖数56
  • 经验63枚
  • 威望0点
  • 贡献值32点
  • 好评度4点
  • 社区居民
  • 忠实会员
12楼#
发布于:2020-02-14 13:03
lonely_8:@赤雲染 可以的只是参数改了 browser.urlbar.update1回到原帖
谢谢!
noHZIWer
小狐狸
小狐狸
  • UID35335
  • 注册日期2011-02-26
  • 最后登录2020-06-03
  • 发帖数1
  • 经验31枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
13楼#
发布于:2020-06-03 15:58
77里失效了吗?
EMLVIRUS
火狐狸
火狐狸
  • UID53909
  • 注册日期2016-04-26
  • 最后登录2023-01-31
  • 发帖数164
  • 经验184枚
  • 威望0点
  • 贡献值84点
  • 好评度17点
  • 社区居民
  • 忠实会员
14楼#
发布于:2020-06-03 20:11
建议
1. 暗色模式下使用 CSS filter 当中的 brightness 亮度偏转
2. 重新调整搜索建议文字颜色以减缓过高对比度带来的视觉疲劳
上一页
游客

返回顶部