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.
174 lines
6.7 KiB
CSS
174 lines
6.7 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_and_main_toolbars.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
#navigator-toolbox{
|
|
--uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
|
|
--uc-bm-height: calc(20px + 2 * var(--uc-bm-padding)); /* Might need to adjust if the toolbar has other buttons */
|
|
--uc-navbar-height: -40px; /* navbar is main toolbar. Use negative value */
|
|
--uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
|
|
--uc-toolbox-browser-area-overlap: -1px;
|
|
}
|
|
:root[uidensity="compact"] #navigator-toolbox{
|
|
--uc-navbar-height: -34px;
|
|
}
|
|
:root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }
|
|
|
|
:root[chromehidden~="directories"] #navigator-toolbox{
|
|
--uc-bm-height: 0px;
|
|
}
|
|
:root[chromehidden~="toolbar"] #navigator-toolbox{
|
|
--uc-navbar-height: 0px;
|
|
}
|
|
/* At least on Windows 10 display scaling > 100% causes 1px gap to appear below tabs depending on Firefox
|
|
* density settings and whether or not menubar is enabled.
|
|
*/
|
|
@media (min-resolution: 120dpi){
|
|
:root[uidensity="compact"] #navigator-toolbox:has(> #toolbar-menubar:is([autohide="false"],:not([autohide]))){
|
|
--uc-toolbox-browser-area-overlap: -0.5px;
|
|
}
|
|
}
|
|
@media (min-resolution: 140dpi){
|
|
#navigator-toolbox{
|
|
--uc-toolbox-browser-area-overlap: -0.5px;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox,
|
|
#sidebar-box,
|
|
#sidebar-main,
|
|
#sidebar-splitter,
|
|
#tabbrowser-tabbox{
|
|
z-index: auto !important;
|
|
}
|
|
|
|
:root[sessionrestored] #nav-bar,
|
|
:root[sessionrestored] #PersonalToolbar{
|
|
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
|
|
background-position: top,var(--lwt-background-alignment);
|
|
background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px));
|
|
background-repeat: repeat,var(--lwt-background-tiling);
|
|
transform: rotateX(90deg);
|
|
transform-origin: top;
|
|
transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
|
|
z-index: 2;
|
|
}
|
|
#PlacesToolbarItems > .bookmark-item,
|
|
#OtherBookmarks,
|
|
#PersonalToolbar > #import-button{
|
|
padding-block: var(--uc-bm-padding) !important;
|
|
}
|
|
:root[sessionrestored] #PersonalToolbar{
|
|
z-index: 1;
|
|
background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height));
|
|
}
|
|
|
|
:root[lwtheme-image] #nav-bar,
|
|
:root[lwtheme-image] #PersonalToolbar{
|
|
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
|
|
}
|
|
|
|
#nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }
|
|
|
|
#navigator-toolbox > #PersonalToolbar{
|
|
transform-origin: 0px var(--uc-navbar-height);
|
|
position: relative;
|
|
}
|
|
:root[sessionrestored] #urlbar[popover]{
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms);
|
|
transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2);
|
|
transform: rotateX(89.5deg);
|
|
}
|
|
:root[window-modal-open] #urlbar[popover],
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
|
|
#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
|
|
:where(:root[sessionrestored]) #urlbar-container > #urlbar[popover]:is([focused],[open]){
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transition-delay: 100ms;
|
|
transform: rotateX(0deg);
|
|
}
|
|
|
|
:root[sessionrestored]:not([customizing]) #navigator-toolbox{
|
|
margin-bottom: calc(var(--uc-toolbox-browser-area-overlap,0px) - var(--uc-bm-height) + var(--uc-navbar-height));
|
|
}
|
|
|
|
/* Make sure the bookmarks toolbar is never collapsed even if it is disabled */
|
|
:root[sizemode="fullscreen"] #PersonalToolbar,
|
|
#PersonalToolbar:is([collapsed=""],[collapsed="true"]){
|
|
min-height: initial !important;
|
|
max-height: initial !important;
|
|
visibility: hidden !important
|
|
}
|
|
#PersonalToolbar:is([collapsed=""],[collapsed="true"]) #PlacesToolbarItems > *,
|
|
:root[sizemode="fullscreen"] #PersonalToolbar #PlacesToolbarItems > *{
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
/* If bookmarks toolbar is collapsed on startup, then no items are generated, and we need to set some height for it */
|
|
#PlacesToolbarItems:empty{
|
|
height: var(--uc-bm-height);
|
|
}
|
|
|
|
/* Selected tab needs higher z-index now to "hide" the broder below it */
|
|
.tabbrowser-tab[selected]{ z-index: 3 !important; }
|
|
|
|
/* Show toolbars when a window modal dialog is open, otherwise toolbar layout breaks after closing the dialog */
|
|
:root[window-modal-open] :is(#nav-bar,#PersonalToolbar){
|
|
transition-delay: 100ms !important;
|
|
transform: rotateX(0);
|
|
}
|
|
|
|
/* SELECT TOOLBAR BEHAVIOR */
|
|
/* Comment out or delete one of these to disable that behavior */
|
|
|
|
/* Show when urlbar is focused */
|
|
#nav-bar:focus-within + #PersonalToolbar,
|
|
#navigator-toolbox > #nav-bar:focus-within{
|
|
transition-delay: 100ms !important;
|
|
transform: rotateX(0);
|
|
}
|
|
|
|
/* Show when cursor is over the toolbar area or when some menu panel is open */
|
|
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ #navigator-toolbox > :is(#nav-bar,#PersonalToolbar),
|
|
#navigator-toolbox:hover > :is(#nav-bar,#PersonalToolbar){
|
|
transition-delay: 100ms !important;
|
|
transform: rotateX(0);
|
|
}
|
|
|
|
/* This makes the tab notification box show immediately below tabs, otherwise it would break the layout */
|
|
#navigator-toolbox > div{ display: contents }
|
|
:where(#navigator-toolbox > #TabsToolbar,#navigator-toolbox > #toolbar-menubar,#tab-notification-deck,.global-notificationbox,#notifications-toolbar){
|
|
order: -1;
|
|
}
|
|
:root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{
|
|
margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height)) !important;
|
|
z-index: auto !important;
|
|
}
|
|
@media -moz-pref("browser.fullscreen.autohide"){
|
|
:root[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top"]{
|
|
margin-top: calc(1px - var(--tab-min-height) - 2 * var(--tab-block-margin)) !important;
|
|
}
|
|
}
|
|
|
|
/* Set the following pref to enable compatibility with multi-row_bookmarks.css */
|
|
@media -moz-pref("userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"){
|
|
#navigator-toolbox{ margin-bottom: var(--uc-navbar-height) !important; }
|
|
#PersonalToolbar:not([customizing]){
|
|
min-height: 0 !important;
|
|
margin-bottom: 0;
|
|
height: 0;
|
|
overflow-y: visible !important;
|
|
z-index: 2;
|
|
padding-inline: 0 !important;
|
|
}
|
|
#personal-bookmarks{
|
|
background: inherit;
|
|
height: min-content;
|
|
}
|
|
#PlacesToolbarDropIndicatorHolder{
|
|
pointer-events: none !important;
|
|
}
|
|
}
|