Files
firefox-csshacks/chrome/autohide_main_toolbar.css
MrOtherGuy 69e53df519 Restore z-index: auto for toolbox and sidebar elements. Fixes #411
Revamped sidebar design sets non-auto z-index for toolbox and sidebar
items. We need to restore them to auto for correct (in our perspective)
layering.
2024-10-02 06:10:12 +03:00

61 lines
2.2 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 }
: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;
}
#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: 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;
}
/* 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 400ms ease 1.8s !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); }