89 lines
3.7 KiB
CSS
89 lines
3.7 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]{
|
|
--uc-urlbar-top: calc(var(--tab-min-height) + (var(--tab-block-margin) * 2) + ((var(--urlbar-container-height) - var(--urlbar-height)) / 2));
|
|
top: var(--uc-urlbar-top) !important;
|
|
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));
|
|
}
|
|
#toolbar-menubar:not([inactive]) ~ #nav-bar #urlbar[popover]{
|
|
top: calc(28px + var(--uc-urlbar-top)) !important;
|
|
}
|
|
#mainPopupSet:has(> #appMenu-popup:hover) ~ 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(> #appMenu-popup:hover) ~ #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); }
|