Multiple Row Tabs
-
@Hababr said in Multiple Row Tabs:
Here is the version I use, width of the tabs at the top and inside the stack can be configured separately.
/* Multiple Row Tabs - Created by @hababr. Version 2023.10.31. Base on work of and inspired by @nomadic, @fpdragon, @potmeklecbohdan, @alexander.gorbovets, @barbudo2005. */ /* Configuration */ :root { /* That will be the minimum width of a tab. You can adjust the number as you like. */ --mrt-min-width: 82px; } #tabs-subcontainer { --mrt-min-width: 102px; } .tab-strip.horizontal-scrolling { /* That will be the tab width is case Horizontal Scrolling is enabled. */ --mrt-hs-width: 50px; } /* Changes to allow multi row tab bar */ #browser:is(.tabs-top, .tabs-bottom) #tabs-tabbar-container { height: auto !important; } /* Fix overflow issue on secondary bar */ #browser:is(.tabs-top, .tabs-bottom) #tabs-subcontainer { flex-basis: unset !important; } #browser:is(.tabs-top, .tabs-bottom) .tab-strip { display: flex; flex-wrap: wrap; } #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span, #browser:is(.tabs-top, .tabs-bottom) .tab-strip > .tab-position { /*display: inline-block;*/ display: flex; position: relative; height: 30px; --PositionX: 0px !important; } #browser:is(.tabs-top, .tabs-bottom) .tab-position.tab-yield-space { --PositionX: 0px !important; height: 30px !important; } #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position { --PositionX: 0px !important; height: 30px !important; } /*#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:is([style*="--Height: 150px;"]),*/ #browser:is(.tabs-top, .tabs-bottom) .tab-position.tab-yield-space:is(:not([style*="--Width: 31px;"]), :not([style*="--ZIndex: 2;"])), #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:is(:not([style*="--Width: 31px;"]), :not([style*="--ZIndex: 2;"])) { --Width2: var(--mrt-hs-width, var(--Width)); min-width: min(var(--mrt-min-width), var(--Width2)*99999) !important; width: var(--Width2); } #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position, .toolbar-tabbar > .newtab { position: static !important; } /* Keep title visible on tabs */ #browser:is(.tabs-top, .tabs-bottom) .tab.tab-small .tab-header .title { display: flex !important; } /* Keep tab stack counter visible */ #browser:is(.tabs-top, .tabs-bottom) .tab-position .tab.tab-small .stack-counter { display: block !important; } /* Keep tab header style */ #browser:is(.tabs-top, .tabs-bottom) .tab.tab-small.tab-mini .tab-header, #browser:is(.tabs-top, .tabs-bottom) .tab.pinned.tab-mini .tab-header { padding-left: 6px !important; border: none !important; justify-content: normal !important; } /* Fix width for tab stack border when selected */ #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:not([style*="--Width: 0px"]) .tab { --Width2: max(100%, var(--mrt-min-width)); } /*#browser:is(.tabs-top, .tabs-bottom) .tab-position:not(.is-substack) .svg-tab-stack, .tabs-top .svg-tab-selection {*/ #browser:is(.tabs-top, .tabs-bottom) .svg-tab-stack, .tabs-top .svg-tab-selection { width: calc(var(--Width2) + 0px) !important; } #browser:not(.alt-tabs, .tabs-left, .tabs-right) .tab-position .tab:hover.tab-small.active .favicon { flex-shrink: 0 !important; } /* When tab scrolling is enabled */ .horizontal-scroll-arrow { padding: 0 !important; } #tabs-container .resize > .toolbar.toolbar-tabbar, #tabs-subcontainer > .toolbar.toolbar-tabbar { flex-shrink: 0; }
This code affected the pinned tab when it was inactive. How can this code not affect the pinned tab when it was inactive? Thanks.
-
@quivenda said in Multiple Row Tabs:
This code affected the pinned tab when it was inactive. How can this code not affect the pinned tab when it was inactive? Thanks.
I use newer version of the styles. I updated the code in my post.
-
@Hababr said in Multiple Row Tabs:
I use newer version of the styles. I updated the code in my post.
Thanks! it's perfect now.