/* 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 } :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 400ms ease 1.8s, opacity 400ms ease 1.8s !important; position: relative; z-index: 2; } #TabsToolbar{ position: relative; z-index: 3 } /* Show when toolbox is focused, like when urlbar has received focus */ #navigator-toolbox:focus-within > .browser-toolbar{ transform: translateY(0); opacity: 1; transition-duration: 500ms, 200ms !important; transition-delay: 0s !important; } /* Show when toolbox is hovered */ #titlebar:hover ~ .browser-toolbar, #nav-bar:hover, #nav-bar:hover + #PersonalToolbar{ transform: translateY(0); opacity: 1; transition-duration: 500ms, 200ms !important; transition-delay: 0s !important; } /* Bookmarks toolbar needs so extra rules */ #PersonalToolbar{ transition: transform 400ms ease 1.8s !important; position: relative; z-index: 1 } /* Move up the content view */ :root[sessionrestored]:not([inFullscreen]) > body > #browser{ margin-top: var(--uc-navbar-transform); }