1a3b86bff8
--urlbar-container-height, which is set for #urlbar-container, is computed dynamically early on startup. If we set transition to it, then it will transition from the initial height to the new value and because of that the computed value is determined using the initial height instead of the "correct" value set by toolbar density options. The issue most noticeably occurs when initial window has startup page as blank, and when compact density is selected, but it does but really it can also happen without them, the effect just might be so subtle that it's not perceivable.
122 lines
5.2 KiB
CSS
122 lines
5.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.
|
|
*
|
|
* If you are usings tabs_on_bottom_v2 then create and set a pref userchrome.autohide-main-toolbar.tabs-on-bottom-patch.enabled
|
|
* to true
|
|
*/
|
|
|
|
: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,#notifications-toolbar){
|
|
transform: translateY(var(--uc-navbar-transform))
|
|
}
|
|
:root:is([customizing],[chromehidden*="toolbar"]) :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox,#notifications-toolbar){
|
|
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;
|
|
}
|
|
|
|
#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 */
|
|
.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,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#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);
|
|
}
|
|
:where(:root[sessionrestored]) #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,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#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"],[autohide=""]) ~ #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([chromehidden~="toolbar"]) > body > #browser{
|
|
margin-top: var(--uc-navbar-transform);
|
|
}
|
|
@media -moz-pref("browser.fullscreen.autohide"){
|
|
:root[sessionrestored][sizemode="fullscreen"] > body > #browser{
|
|
margin-top: revert;
|
|
}
|
|
}
|
|
/* Compatiblity rules for tabs_on_bottom_v2.css */
|
|
@media -moz-pref("userchrome.autohide-main-toolbar.tabs-on-bottom-patch.enabled"){
|
|
#nav-bar{
|
|
margin-bottom: var(--uc-navbar-transform);
|
|
}
|
|
#TabsToolbar:not([customizing]){
|
|
transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important;
|
|
position: relative;
|
|
z-index: 1;
|
|
background: inherit !important;
|
|
}
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ #navigator-toolbox > #TabsToolbar,
|
|
#navigator-toolbox:is(:hover,:focus-within) > #TabsToolbar{
|
|
transform: translateY(calc(var(--uc-navbar-transform) * -1)) !important;
|
|
transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
:root[sessionrestored][sizemode] > body > #browser{
|
|
margin-top: revert;
|
|
}
|
|
} |