Tab preview panel can sometimes cause what is possibly style invalidation problem where the panel would jump around and even be outside the window. This is especially likely to happen with autohide_main_toolbar when tabs are overflowing.
42 lines
1.8 KiB
CSS
42 lines
1.8 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/overlay_fullscreen_toolbars.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* Makes toolbars appear as overlay instead of pushing down the website in fullscreen mode */
|
|
|
|
@media (-moz-bool-pref: "browser.fullscreen.autohide"){
|
|
:root{
|
|
--uc-fullscreen-overlay-duration: 82ms;
|
|
--uc-fullscreen-overlay-delay: 600ms;
|
|
}
|
|
:root[sizemode="fullscreen"]{
|
|
&[sessionrestored]{
|
|
#urlbar[popover]{
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: transform var(--uc-fullscreen-overlay-duration) ease-in-out var(--uc-fullscreen-overlay-delay), opacity 0ms calc(var(--uc-fullscreen-overlay-delay) + 82ms);
|
|
transform: translateY(calc(0px - var(--tab-min-height) - (var(--tab-block-margin) * 2) - var(--urlbar-container-height)));
|
|
}
|
|
}
|
|
#navigator-toolbox{
|
|
position: fixed !important;
|
|
width: 100vw;
|
|
z-index: 10 !important;
|
|
transition: transform var(--uc-fullscreen-overlay-duration) ease-in-out var(--uc-fullscreen-overlay-delay) !important;
|
|
margin-top: 0 !important;
|
|
transform: translateY(-100%);
|
|
}
|
|
#navigator-toolbox:is(:hover,:focus-within,[style=""]),
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#tab-preview-panel)) ~ #navigator-toolbox{
|
|
transition-delay: 0ms !important;
|
|
transform: translateY(0);
|
|
}
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#tab-preview-panel)) ~ toolbox #urlbar[popover],
|
|
#navigator-toolbox:is(:hover,:focus-within,[style=""]) #urlbar[popover],
|
|
#urlbar-container > #urlbar[popover]:is([focused],[open]){
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
transition-delay: 0ms;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
} |