|
阅读:2588回复: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;
} |
|