diff --git a/chrome/multi-row_tabs.css b/chrome/multi-row_tabs.css new file mode 100644 index 0000000..210ebae --- /dev/null +++ b/chrome/multi-row_tabs.css @@ -0,0 +1,71 @@ +/* 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*/ + +/* It's recommended to move tabs new-tab-button outside tabs toolbar */ + +/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll */ +/* This maximum visible rows won't work before Fx66 */ +/* So this setting does nothing on Fx65 and all tab rows will be shown */ +: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) * var(--multirow-n-rows)); + scrollbar-color: currentColor transparent; + scrollbar-width: thin; + } +} + +#tabbrowser-arrowscrollbox{ + overflow: -moz-hidden-unscrollable; + display: block; + --scrollbutton-display-model: none; +} + +.tabbrowser-tab{ height: var(--tab-min-height); } + +#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% } + +#alltabs-button, +:root:not([customizing]) #TabsToolbar #new-tab-button, +#tabbrowser-tabs spacer, +.tabbrowser-tab::after{ display: none !important } \ No newline at end of file