mobile-config-firefox/chrome/autohide_bookmarks_and_main_toolbars.css
MrOtherGuy 946668e9a1 Handle different bookmarks item heights better
Bookmark items in the toolbar may not be same height on all systems,
generally the text size on Linux is bigger than on Windows for example.
This patch changes the height to use min-height on bookmark items and
removes their individual block padding. Thus, thee effectively have
variable block-padding depending on the text size.

In addition this patch removes few pre-proton workarounds because those
don't need to be supported any more.
2021-11-13 09:26:18 +02:00

117 lines
No EOL
4.3 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-bm-padding: 1px;
--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;
}
: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(0px - var(--uc-bm-height) + var(--uc-navbar-height));
}
#PlacesToolbarItems > .bookmark-item {
min-height: calc(var(--uc-bm-height) - 4px); /* Bookmarks have 2px block margin */
padding-block: 0px !important;
}
#OtherBookmarks,
#PlacesChevron,
#PersonalToolbar > #import-button{
padding-block: var(--uc-bm-padding) !important;
}
/* 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
}
/* The invisible toolbox will overlap sidebar so we'll work around that here */
#navigator-toolbox{ pointer-events: none; border-bottom: none !important; }
#PersonalToolbar{ border-bottom: 1px solid var(--chrome-content-separator-color) }
#navigator-toolbox > *{ pointer-events: auto }
#sidebar-box{ position: relative }
/* Selected tab needs higher z-index now to "hide" the broder below it */
.tabbrowser-tab[selected]{ z-index: 3 !important; }
/* 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 */
:where(#titlebar,#tab-notification-deck){
-moz-box-ordinal-group: 0;
}
/* Show when cursor is over popups/context-menus - cannot control which ones */
/*
#mainPopupSet:hover ~ box > toolbox > .browser-toolbar{
transition-delay: 100ms !important;
transform: rotateX(0);
}
*/
/* 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]){
position: fixed !important;
display: block;
margin-bottom: 0px !important;
}
*/