mobile-config-firefox/chrome/multi-row_main_toolbar.css
2021-11-16 10:22:05 +02:00

38 lines
1.2 KiB
CSS

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_main_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/**
* Makes items in the main toolbar show on two (or three) lines.
* Anything before urlbar in the customization order is shown at first line.
* Urlbar is shown on second line, or first if no items are before it.
* Anything after urlbar on the third line.
*
* Unfortunately items that don't fit in a row are not pushed to overflow menu. Instead,
* they become invisible. Luckily that probably is less of a problem when using this style.
*/
:root{
--uc-multirow-toolbar-height: 40px;
}
:root[uidensity="compact"]{
--uc-multirow-toolbar-height: 34px;
}
:root[uidensity="touch"]{
--uc-multirow-toolbar-height: 44px;
}
#nav-bar-customization-target{
display: flex;
flex-wrap: wrap;
}
#urlbar{
--urlbar-toolbar-height: var(--uc-multirow-toolbar-height) !important;
}
#nav-bar-customization-target > [flex]{ flex-grow: 2 }
#nav-bar-customization-target > toolbarspring{ flex-grow: 1 }
#urlbar-container{
width: calc(100% - 20px);
margin-inline: 40px !important; /* Empty space on both sides of urlbar */
}