4f3ac169e3
Previously if Firefox was in fullscreen mode and toolbars would autohide (per Firefox normal setting) then this style would cause content area to be pushed way too far up because of computed margin-top on navigator-toolbox. This patch makes navigator toolbox use margin computed from tabs toolbar height.
126 lines
4.6 KiB
CSS
126 lines
4.6 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 */
|
|
}
|
|
|
|
:root[uidensity="compact"] #navigator-toolbox{
|
|
--uc-navbar-height: -34px;
|
|
}
|
|
:root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }
|
|
|
|
: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]:not([customizing]) #navigator-toolbox{
|
|
margin-bottom: calc(-1px - 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[collapsed="true"]{
|
|
min-height: initial !important;
|
|
max-height: initial !important;
|
|
visibility: hidden !important
|
|
}
|
|
#PersonalToolbar[collapsed="true"] #PlacesToolbarItems > *,
|
|
:root[sizemode="fullscreen"] #PersonalToolbar #PlacesToolbarItems > *{
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
/* Selected tab needs higher z-index now to "hide" the broder below it */
|
|
.tabbrowser-tab[selected]{ z-index: 3 !important; }
|
|
|
|
/* Show when cursor is over main menu popup - this requires :has selector support */
|
|
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox > .browser-toolbar{
|
|
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 */
|
|
#navigator-toolbox:hover > .browser-toolbar{
|
|
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(#titlebar,#tab-notification-deck,.global-notificationbox){
|
|
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-bool-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;
|
|
}
|
|
}
|
|
/* Uncomment the next part to enable compatibility for multi-row_bookmarks.css
|
|
* This would break buttons placed in the toolbar,
|
|
* but that is likely not happening if you are using multi-row setup
|
|
*/
|
|
|
|
/*
|
|
#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;
|
|
}
|
|
*/
|