阅读:1545回复:3
这个隐藏地址栏的css不会把网页往下推,但有一个小问题
如图,地址栏只显示半截长度,能完整显示或者居中吗?感觉半截居中会比较好。
还有就是,能不能把主菜单和更多工具按钮放到标签栏? 隐藏地址栏 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); } |
|
1楼#
发布于:2022-03-01 19:57
居中31行下面加个“left:30% !important;”。
跨栏移按钮不会。 |
|
2楼#
发布于:2022-03-02 09:23
|
|
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; } |
|