来源于 https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_below_content.css
以下为css代码,firefox 113版本测试成功。
/*标签页移到底部------------------------------------------------------------*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_below_content.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/
.titlebar-buttonbox-container{
position: fixed;
display: block;
top:0;
right:0;
height: 40px;
z-index: 3;
visibility: visible !important;
}
[url=home.php?mod=space&uid=880893]@media[/url] (-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
:root[inFullscreen] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container{ display: none !important; }
:root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
/* Re-adjust window cotrols if menubar is permanently enabled */
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"]{ transform: translateX(0px); }
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-buttonbox-container{ height: 100%; }
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-button{ padding: 2px 17px !important; }
@media (-moz-platform: windows){
#titlebar{ -moz-appearance: none !important; }
}
/* Move tabs below content */
#main-window > body::after{
content: "";
display: flex;
}
#main-window:not([inFullscreen]) > body::after{
margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
}
#main-window[inFullscreen]:not([inDOMFullscreen]) > body::after{
margin-bottom: 1px;
}
#TabsToolbar{
position: fixed;
display: flex; /*此处原为block,需要修改为flex*/
bottom: 0;
width: 100vw;
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
--tabs-navbar-shadow-size: 0px;
}
/*自己添加,源代码遮盖了隐私窗口标记,添加此可以解决*/
.toolbar-items {
width:calc(100vw - 120px) !important;
}
#private-browsing-indicator-with-label {
flex: 0 0 90px !important;
justify-content: center !important;
}
/*自己添加,源代码遮盖了隐私窗口标记,添加此可以解决*/
#TabsToolbar:hover{ z-index: 1 }
#TabsToolbar{ background-color: var(--lwt-accent-color); }
#TabsToolbar-customization-target{ width: 100vw; }
.tab-background{ border-top-style: none !important; }
/* Hide stuff that doesn't make sense with tabs below content */
#TabsToolbar > .titlebar-buttonbox-container,
#window-controls, /* Fullscreen window controls */
#TabsToolbar .titlebar-spacer{
display: none !important;
}
#navigator-toolbox[inFullscreen]:hover #toolbar-menubar > .titlebar-buttonbox-container{ display: flex !important; }
/*强制缩进地址栏行尾端margin;*/
#nav-bar{
margin-right:90px !important;
}
对于mac系统,该代码要稍作修改,第一nav-bar左侧出现重叠,因为mac按钮在左侧。第二mac的按钮貌似下移,所以适当要调整。
mac版本的代码如下:
/*标签页移到底部------------------------------------------------------------*/
.titlebar-buttonbox-container{
position: fixed;
display: block;
top:0;
right:0;
height: 40px;
z-index: 3;
visibility: visible !important;
}
@media (-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
:root[inFullscreen] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container{ display: none !important; }
:root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
/* Re-adjust window cotrols if menubar is permanently enabled */
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"]{ transform: translateX(0px); }
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-buttonbox-container{ height: 100%; }
:root[tabsintitlebar="true"]:not([inFullscreen]) #toolbar-menubar[autohide="false"] .titlebar-button{ padding: 2px 17px !important; }
@media (-moz-platform: windows){
#titlebar{ -moz-appearance: none !important; }
}
/* Move tabs below content */
#main-window > body::after{
content: "";
display: flex;
}
#main-window:not([inFullscreen]) > body::after{
margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
}
#main-window[inFullscreen]:not([inDOMFullscreen]) > body::after{
margin-bottom: 1px;
}
#TabsToolbar{
position: fixed;
display: flex;
bottom: 0;
width: 100vw;
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
--tabs-navbar-shadow-size: 0px;
}
.toolbar-items {
width:calc(100vw - 120px) !important;
}
#private-browsing-indicator-with-label {
flex: 0 0 90px !important;
justify-content: center !important;
}
#TabsToolbar:hover{ z-index: 1 }
#TabsToolbar{ background-color: var(--lwt-accent-color); }
#TabsToolbar-customization-target{ width: 100vw; }
.tab-background{ border-top-style: none !important; }
/* Hide stuff that doesn't make sense with tabs below content */
#TabsToolbar > .titlebar-buttonbox-container,
#window-controls, /* Fullscreen window controls */
#TabsToolbar .titlebar-spacer{
display: none !important;
}
#navigator-toolbox[inFullscreen]:hover #toolbar-menubar > .titlebar-buttonbox-container{ display: flex !important; }
/*mac版本设置左侧margin,以及三按钮强制上移;*/
#nav-bar{
margin-left:90px !important;
}
.titlebar-buttonbox-container,.titlebar-buttonbox{
margin-top:-5px !important;
}