Automate 2-level tab stack columns V3

dude99 · 20 Jan 2023, 19:21

Previous 2 versions of this CSS mod are still working fine, but I decided to remake the mod with PROPER flex-basis method, thus it should be more reliable & react smoother even with hundreds of tabs inside a window.

ReadMe

V3 support tabbar width from 30px to 599px.
V3 will always minimized sub column & display main column with stack count during inactive tabbar with small width (less than 100px).
Fix some minor bugs like missing stack counter, close button during small tab, & phantom scrollbars' extra width during small width tabbar.
V3 will autohide inactive columns scrollbar to keep minimized column always tidy.

Core CSS Code

/* Automate 2 level vertical tabbar columns */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > div {z-index: 1; transition: background-color .15s, flex-basis .12s ease-out .05s !important;}
/* active main column */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container:is(:focus-within, :hover):not(:has(.SlideBar--FullHeight:active)) + #tabs-subcontainer {flex-basis: 30px !important; z-index: 0;} 
/* active sub column */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-subcontainer:is(:focus-within, :hover) {flex-basis: calc(100% - 64px) !important; z-index: 3;} 
/* active sub column with small width tabbar */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):is(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:is(:focus-within, :hover) {flex-basis: calc(100% - 30px) !important; z-index: 3;} 

/* inactive tabbar columns' ratio during small width (minimized sub column to favicon) */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:not(:focus-within, :hover) {flex-basis: 30px !important;}

/* fix small tab hover effect for title, stack counter, & close button */
#tabs-container .tab.tab-small.tab-mini .tab-header {justify-content: unset; padding-left: 5px;}
#tabs-container .tab.tab-small.tab-mini .tab-header .title {display: flex;}
#browser:not(.alt-tabs).substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:hover.tab:not(.button-off, .force-hover, .tab-small) .stack-counter, 
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:not(.tab-mini) .stack-counter {display: block; margin-left: -6px;}
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position :is(.tab:hover.tab-small, .tab.force-hover.tab-small) .close {display: flex; margin-left: -3px;}

/* autohide inactive columns' scrollbar */
#tabs-tabbar-container > div.overflow:not(:focus-within):not(:hover) .tab-strip {overflow-y: hidden;}

Optional CSS Code

These are nice to have extra features, but you don't need all of 'em, so only install code you need.

Automate Inactive tabbar's columns ratio

By default both columns will reset to manual setup ratio (via drag & drop) when the tabbar is inactive, but you can make 'em always split into 3 different ratio: symmetry (50/50), minimize main column, or minimize sub column with below CSS code.

NOTE: Remove // in the beginning of the line to enabled specific ratio you preferred (pick only one ratio), or ONLY install the one you desired:

/* Automate Inactive tabbar's columns ratio (disabled manual columns ratio) */

/* option 1: Symmetry columns */
//.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):not([style^='width: 6']):not([style^='width: 7']):not([style^='width: 8']):not([style^='width: 9']) > #tabs-subcontainer.visible {flex-basis: 50% !important;}

/* option 2: Minimized main column to favicon + stack counter */
//.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):not([style^='width: 6']):not([style^='width: 7']):not([style^='width: 8']):not([style^='width: 9']) > #tabs-subcontainer.visible {flex-basis: calc(100% - 64px) !important;}

/* option 3: Minimized sub column to favicon */
//.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):not([style^='width: 6']):not([style^='width: 7']):not([style^='width: 8']):not([style^='width: 9']) > #tabs-subcontainer.visible {flex-basis: 30px !important;}

Hide columns' resizer

You may hide the column's resizer if you enabled one of the above option & no longer need it:

/* optional: hide tabbar columns' resizer */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container .SlideBar--FullHeight {visibility: hidden;}

Tabbar resizer mouseover highlighter

Let you know when you are mouseover the tabbar' resizer:

/* optional: tabbar resizer mouseover visual feedback */ 
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) > .SlideBar--FullHeight {visibility: hidden;}
#tabs-tabbar-container.left > .SlideBar--FullHeight:is(:active, :hover) {border-right: 3px dotted var(--colorHighlightBg); transition: border-width .5s !important;}
#tabs-tabbar-container.right > .SlideBar--FullHeight:is(:active, :hover) {border-left: 3px dotted var(--colorHighlightBg); transition: border-width .5s !important;}

Invert Main/Sub columns order

If you prefer to have the sub column in the outer edge, then this CSS code will do just that. NOTE: The columns resizer will be located in the inner edge & it's also inverted!

/* invert columns order, outer sub column */
.substrip-tabs-on #tabs-tabbar-container.left {flex-direction: row-reverse;}
.substrip-tabs-on #tabs-tabbar-container.right {flex-direction: row;}

Restore classic tabbar's outline

If you prefer the classic look of tabbar (with outline & drop-shadow), this code will restore 'em:

/* tabbar outline */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) {box-shadow: #0008 0 0 0 .1px, rgb(0 0 0 / 25%) 0px 3px 6px;}

Add extra tabbar width during 2 columns

If 300px is not enough space to display readable tabs' title to you, then expand it to 599px when you need it!

/* add extra width during 2 columns */
#tabs-tabbar-container:is(.left, .right):has(#tabs-subcontainer):is(:focus-within, :hover) {width: 599px !important;}

That's all. Please let me know if you notice something in my code are faulty, as my mind is no longer as good as before after recovered from the damned Wuhan virus!

nirin · 17 Jul 2024, 02:17

@dude99

I am about to try this out, as I saw your older v2 thread linked elsewhere and I was amazed as this basically fixes a lot of the major problems with vivaldi vertical tabs... bit worrying that noone seems to have commented here!

I really hope this code still works in the current version! Fingers crossed

dude99 · 17 Jul 2024, 05:12

@nirin This mod is written back in 2023, so much have changed and CSS have evolved a lot, so I'm sure someone can remake this CSS mod with newest additional CSS functions.

So, when this mod do break, just open a new thread an request for something similar to this, I'm sure some CSS wizards in this community will made a better one in no time. LOL