a0a477cebf
On Firefox 107, the tab bar displays all the tab rows, even if they are empty because there are few tabs. This change removes the empty tab rows and restores the right behavior, only displaying tab rows when there are too many tabs to fit in one row.
82 lines
2.9 KiB
CSS
82 lines
2.9 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* Makes tabs to appear on multiple lines */
|
|
/* Tab reordering will not work and can't be made to work */
|
|
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/
|
|
|
|
/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */
|
|
|
|
/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll */
|
|
|
|
:root{
|
|
--multirow-n-rows: 3;
|
|
--multirow-tab-min-width: 100px;
|
|
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
|
|
}
|
|
|
|
/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
|
|
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */
|
|
|
|
/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */
|
|
|
|
/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */
|
|
|
|
#tabbrowser-tabs{
|
|
min-height: unset !important;
|
|
padding-inline-start: 0px !important
|
|
}
|
|
|
|
@-moz-document url(chrome://browser/content/browser.xhtml){
|
|
#scrollbutton-up~spacer,
|
|
#scrollbutton-up,
|
|
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }
|
|
|
|
scrollbox[part][orient="horizontal"]{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
|
|
scrollbar-color: currentColor transparent;
|
|
scrollbar-width: thin;
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
}
|
|
|
|
.scrollbox-clip[orient="horizontal"],
|
|
#tabbrowser-arrowscrollbox{
|
|
overflow: -moz-hidden-unscrollable;
|
|
display: inline;
|
|
--scrollbutton-display-model: none;
|
|
}
|
|
|
|
.tabbrowser-tab{ scroll-snap-align: start; }
|
|
|
|
#tabbrowser-tabs .tabbrowser-tab[pinned]{
|
|
position: static !important;
|
|
margin-inline-start: 0px !important;
|
|
}
|
|
|
|
.tabbrowser-tab[fadein]:not([pinned]){
|
|
min-width: var(--multirow-tab-min-width) !important;
|
|
flex-grow: var(--multirow-tab-dynamic-width);
|
|
/*
|
|
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
|
|
Don't set to none or you'll see errors in console when closing tabs
|
|
*/
|
|
/*max-width: 100vw !important;*/
|
|
}
|
|
|
|
.tabbrowser-tab > stack{ width: 100%; height: 100% }
|
|
|
|
/* remove bottom margin so it doesn't throw off row height computation */
|
|
#tabs-newtab-button{ margin-bottom: 0 !important; }
|
|
|
|
#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
|
|
display: -moz-box !important;
|
|
}
|
|
|
|
#alltabs-button,
|
|
:root:not([customizing]) #TabsToolbar #new-tab-button,
|
|
#tabbrowser-arrowscrollbox > spacer,
|
|
.tabbrowser-tab::after{ display: none !important }
|