fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2022-12-11
  • 发帖数157
  • 经验149枚
  • 威望0点
  • 贡献值162点
  • 好评度9点
  • 社区居民
  • 忠实会员
阅读:572回复:3

这个隐藏地址栏的css不会把网页往下推,但有一个小问题

楼主#
更多 发布于:2022-02-28 20:47
如图,地址栏只显示半截长度,能完整显示或者居中吗?感觉半截居中会比较好。
还有就是,能不能把主菜单和更多工具按钮放到标签栏?





隐藏地址栏 css:
/*调整标题栏左侧空白宽度*/
:root[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide=true] ~ #TabsToolbar .titlebar-spacer[type="pre-tabs"] {
  width: 5px!important;
} 
      
/*标题栏高度*/
/* Tab: Ensure tab height doesn't augment when arrowscrollbox is visible  */ 
#tabbrowser-arrowscrollbox {
  --tab-min-height: 35px !important;
  max-height: var(--tab-min-height);
}
      
:root {
  /* Tabbar: reduce tab margin */
  --tab-block-margin: 4px 3px !important;
}
      
/* Tab: Reduce height */
.tabbrowser-tab {
  min-height: 24px !important;
}
      
/* **************隐藏前进后退按钮****************** */
#back-button { display: none !important }
#forward-button { display: none !important }
      
/*地址栏自动隐藏样式<一>*/
#nav-bar {
        display: flex !important;
        z-index: 2 !important;
        position: absolute !important;
        flex-flow: row nowrap !important;
        transition: min-height 200ms ease-in-out, max-height 200ms ease-in-out,
        opacity 200ms ease-in-out, transform 200ms ease-in-out !important;
}
:root:not([customizing]) > body > box:not(:focus-within, :hover, [popup-status], [urlbar-status]) #nav-bar {
        visibility: visible !important;
        min-height: 0 !important;
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-16px);
}
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2022-11-07
  • 发帖数2749
  • 经验558枚
  • 威望1点
  • 贡献值120点
  • 好评度93点
  • 社区居民
  • 最爱沙发
  • 忠实会员
1楼#
发布于:2022-03-01 19:57
居中31行下面加个“left:30% !important;”。
跨栏移按钮不会。
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2022-12-11
  • 发帖数157
  • 经验149枚
  • 威望0点
  • 贡献值162点
  • 好评度9点
  • 社区居民
  • 忠实会员
2楼#
发布于:2022-03-02 09:23
alanfly:居中31行下面加个“left:30% !important;”。

跨栏移按钮不会。
回到原帖


有效,谢谢!
感觉放右侧更好:

right:0% !important;
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2022-12-11
  • 发帖数157
  • 经验149枚
  • 威望0点
  • 贡献值162点
  • 好评度9点
  • 社区居民
  • 忠实会员
3楼#
发布于:2022-03-10 10:42
完善了一下,原来的自动隐藏有点小 bug

只差主菜单了


/*地址栏自动隐藏样式<一>*/
#nav-bar {
  /* customize this value. */
  --navbar-margin: -44px;
  display: flex !important;
  z-index: 2 !important;
  position: absolute !important;
  right:0% !important;
  flex-flow: row nowrap !important;
  transition: all 0.3s ease !important;
  opacity: 0;
}
   
#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
  margin-top: 0;
  margin-bottom: var(--navbar-margin);
  z-index: 100;
  opacity: 1;
}
游客

返回顶部