/* 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(> [role="group"][panelopen]) ~ 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(> [role="group"][panelopen]) ~ #navigator-toolbox > .browser-toolbar{ transition-delay: 33ms !important; transform: translateY(0); opacity: 1; } /* 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); }