bdc9f38194
Previously we just had a 1px margin when toolbars get autohidden to allow hovering. This patch replaces it with an invisible 1px box so content area is actually fullscreen.
111 lines
3.8 KiB
CSS
111 lines
3.8 KiB
CSS
/* 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;
|
|
}
|
|
#titlebar{
|
|
will-change: unset !important;
|
|
transition: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
|
|
(-moz-gtk-csd-reversed-placement),
|
|
(-moz-platform: macos){
|
|
.titlebar-buttonbox-container{ left:0; right: unset !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[inFullscreen]:not([inDOMFullscreen]) > body::after,
|
|
#main-window:not([inFullscreen]) > body::after{
|
|
margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
|
|
}
|
|
|
|
#TabsToolbar{
|
|
position: fixed;
|
|
display: block;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
|
|
--tabs-navbar-shadow-size: 0px;
|
|
background-color: light-dark(rgb(240, 240, 244), rgb(28, 27, 34)) !important;
|
|
z-index: 1;
|
|
:root[lwtheme] & {
|
|
background-image: var(--lwt-additional-images);
|
|
background-repeat: var(--lwt-background-tiling);
|
|
background-position: var(--lwt-background-alignment);
|
|
background-color: var(--lwt-accent-color) !important;
|
|
}
|
|
:root[lwtheme-image] & {
|
|
background-image: var(--lwt-header-image), var(--lwt-additional-images);
|
|
background-repeat: no-repeat, var(--lwt-background-tiling);
|
|
background-position: right top, var(--lwt-background-alignment);
|
|
}
|
|
}
|
|
#TabsToolbar:hover{ z-index: 1 }
|
|
|
|
#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,
|
|
#TabsToolbar .titlebar-spacer{
|
|
display: none !important;
|
|
}
|
|
:root[inFullscreen] #toolbar-menubar > .titlebar-buttonbox-container{ display: flex !important; }
|
|
|
|
@media (-moz-bool-pref: "browser.fullscreen.autohide"){
|
|
#main-window[inFullscreen]:not([inDOMFullscreen]) > body::after{
|
|
margin-bottom: 0px;
|
|
}
|
|
:root[sizemode="fullscreen"] #TabsToolbar{
|
|
visibility: hidden;
|
|
transition: visibility 0s linear 100ms;
|
|
}
|
|
#mainPopupSet:has(> #tabContextMenu:hover) ~ #navigator-toolbox #TabsToolbar,
|
|
:root[sizemode="fullscreen"]:not([inDOMFullscreen]) #TabsToolbar:hover{
|
|
transition-delay: 0ms;
|
|
visibility: visible;
|
|
}
|
|
:root[sizemode="fullscreen"]:not([inDOMFullscreen]) #TabsToolbar::after{
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
z-index: 1;
|
|
visibility: visible;
|
|
}
|
|
:root[inFullscreen] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container{ display: none !important; }
|
|
} |