alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2023-10-31
  • 发帖数2765
  • 经验576枚
  • 威望1点
  • 贡献值128点
  • 好评度98点
  • 社区居民
  • 最爱沙发
  • 忠实会员
阅读:827回复:0

火狐Photon主题三道杠气泡菜单

楼主#
更多 发布于:2023-03-20 23:11
应该是89之前的photon主题的气泡菜单挺精致的,后面改成了平平无奇的圆角普通菜单。
花时间用css把气泡菜单弄回来了,气泡箭头自适应变换方向。

/*菜单圆角改直角*/
:is(menupopup, panel)[type="arrow"] {
    --panel-border-radius: 0px !important;
}
/*三道杠菜单改气泡式*/
#appMenu-popup::before {
    content: url("chrome://global/skin/arrow/panelarrow-vertical.svg") !important;
    -moz-context-properties: fill, stroke !important;
    /*svg内部颜色*/
    fill: var(--arrowpanel-background) !important;
    /*svg边框颜色*/
    stroke: var(--arrowpanel-border-color) !important;
    /*svg右对齐*/
    text-align: end !important;
    /*去掉svg和下方菜单间行距*/
    line-height: 0 !important;
    /*调整svg位置*/
    margin:5px 10px calc(-1 * (var(--panel-shadow-margin) + 1px)) 0 !important;
}
#appMenu-popup[side="bottom"] {
    /*菜单朝上时垂直翻转使箭头朝下*/
    transform: rotateX(180deg) !important;
}
#appMenu-popup[side="bottom"] > #appMenu-multiView {
    /*菜单内容翻转使文字方向恢复正常*/
    transform: rotateX(180deg) !important;
}
游客

返回顶部