890a03f4ff
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.
92 lines
3.8 KiB
CSS
92 lines
3.8 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_main_toolbar.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* This style hides the main toolbar and shows it when the cursor is over the tabs toolbar as well as whenever the focus is inside nav-bar, such as when urlbar is focused. */
|
|
|
|
:root{
|
|
--uc-navbar-transform: -40px;
|
|
--uc-autohide-toolbar-delay: 1.8s;
|
|
--uc-autohide-toolbar-duration: 400ms;
|
|
}
|
|
:root[uidensity="compact"]{ --uc-navbar-transform: -34px }
|
|
|
|
#navigator-toolbox > div{ display: contents; }
|
|
:root[sessionrestored] :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
|
|
transform: translateY(var(--uc-navbar-transform))
|
|
}
|
|
:root:is([customizing],[chromehidden*="toolbar"]) :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
|
|
transform: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#nav-bar:not([customizing]){
|
|
opacity: 0;
|
|
transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
#titlebar{ position: relative; z-index: 3 }
|
|
|
|
#navigator-toolbox,
|
|
#sidebar-box,
|
|
#sidebar-main,
|
|
#sidebar-splitter,
|
|
#tabbrowser-tabbox{
|
|
z-index: auto !important;
|
|
}
|
|
/* Show when toolbox is focused, like when urlbar has received focus */
|
|
#navigator-toolbox:focus-within > .browser-toolbar{
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
/* Show when toolbox is hovered */
|
|
#titlebar:hover ~ .browser-toolbar,
|
|
.browser-titlebar:hover ~ :is(#nav-bar,#PersonalToolbar),
|
|
#nav-bar:hover,
|
|
#nav-bar:hover + #PersonalToolbar{
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
:root[sessionrestored] #urlbar[popover]{
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay);
|
|
transform: translateY(var(--uc-navbar-transform));
|
|
}
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#tab-preview-panel)) ~ toolbox #urlbar[popover],
|
|
.browser-titlebar:is(:hover,:focus-within) ~ #nav-bar #urlbar[popover],
|
|
#nav-bar:is(:hover,:focus-within) #urlbar[popover],
|
|
#urlbar-container > #urlbar[popover]:is([focused],[open]){
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transition-delay: 0ms;
|
|
transform: translateY(0);
|
|
}
|
|
#urlbar-container > #urlbar[popover]:is([focused],[open]){
|
|
transition-duration: 100ms; /* Faster when focused */
|
|
}
|
|
/* This ruleset is separate, because not having :has support breaks other selectors as well */
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#tab-preview-panel)) ~ #navigator-toolbox > .browser-toolbar{
|
|
transition-delay: 33ms !important;
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
/* If tabs are in sidebar then nav-bar doesn't normally have its own background - so we nee to add it back */
|
|
#nav-bar.browser-titlebar{
|
|
background: inherit;
|
|
}
|
|
#toolbar-menubar:not([autohide="true"]) ~ #nav-bar.browser-titlebar{
|
|
background-position-y: -28px; /* best guess, could vary */
|
|
border-top: none !important;
|
|
}
|
|
|
|
/* Bookmarks toolbar needs so extra rules */
|
|
#PersonalToolbar{ transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important; position: relative; z-index: 1 }
|
|
|
|
/* Move up the content view */
|
|
:root[sessionrestored]:not([inFullscreen],[chromehidden~="toolbar"]) > body > #browser{ margin-top: var(--uc-navbar-transform); }
|