Automate Floating Vertical Tabbar for Mouse & Keyboard

RadekPilich

Can you please help me with closely related isssue?

I would like to make vertical tab bar wider, so that both top level and second level of tabs can be hundreds of pixels wide.

I have tried the below, but it seems it didn't have any effect.

dude99

@RadekPilich The CSS code you post is correct for CSS mod, but why you saved the file as ".js"?

CSS = https://www.w3schools.com/Css/

JS = https://www.w3schools.com/js/default.asp

Pls read the pinned topic on modification forum for details.

RadekPilich

@dude99 Thanks, I wasn't paying attention to that. Got it "working" already. Needs some more work to work properly though.

dude99

@RadekPilich forcing 1000px width on vertical tabbar constantly could create some really bad situation, especially during small width window. But you can work around these problems with these solutions:

add .maximized in front of the line to force 1000px of width only during maximized window.
add .normal in the front of the line to have different width (or cap it to certain percentage with vw) during window mode, example you can limit it to 50% of window width so that it won't cover up the entire window when window is smaller than 1000px:

.normal #tabs-tabbar-container:is(.left, .right) {max-width: 50vw;}

use clamp function to auto manage the width. https://css-tricks.com/min-max-and-clamp-are-css-magic/

bmatteo

Awesome work, thank you.

Can Vivaldi hire you

dude99

@bmatteo No, I'm just a novice self-taught CSS coder for fun, & I'm really lagging behind for a very long time now... Maybe I will get back into learning CSS during next lockdown... LOL

porky1

Cool mod. Works pretty well. One issue.

Added this using "B. Minimize tabbar into favicon" with both "Workspaces" and "Show Workspaces in Tab Bar" enabled.

When the Tab Bar is showing, both the Workspaces dropdown arrow and the name of the Workspace always show up do not show up at all.

When the Tab Bar is hidden, both the Workspaces dropdown arrow and the name of the Workspace always show up overlaying the browser content. Only way to make it stop is to disable "Show Workspaces in Tab Bar."

I'm thinking that when the Tab Bar is showing, it should show both the Workspaces dropdown arrow and name. But when the Tab Bar is hidden, it should also have the Workspaces dropdown arrow and name hide, too.

Any ideas how to fix this? Thanks.

dude99

@porky1 This mod is create pre-workspace era, unfortunately I no longer able to update it because my good old PC can't run win10/11.

So, maybe some other CSS wizard can adopt this mod & continue to evolve it to be compatible with v6 latest shiny features?

landon

@landon said in Automate Floating Vertical Tabbar for Mouse & Keyboard:

quick hotfix for "Option B: Minimize tabbar into favicon" for Vivaldi 6.

another hotfix for this version of vivaldi stable 6.2.3105.47

fixed the text that has slightly overflowed visibly into the minimized tabbar (changed the 30px value to 27px in lines 13 and 14.) the text is now completely hidden as expected when the tabbar is minimized.

my info:

Vivaldi 6.2.3105.47 (Stable channel) (64-bit)
Revision bdaa23a9ed0b83bf7f4d84cddf627bcaea507f2b
OS Windows 11 Version 22H2 (Build 22621.2215)
Windows Display settings at exactly 100% DPI scale

minimize_tabbar_into_favicon.css

/* 
Automate Floating Vertical Tabbar for Mouse & Keyboard by dude99 (hotfix by landon)
Option B: Minimize tabbar into favicon
Vivaldi 6+ you must go to Settings, Tabs, Tab Features, and unselect "Enable Workspaces"
https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard
*/
#tabs-tabbar-container:is(.left, .right) {position: fixed; height: -webkit-fill-available !important; box-shadow: #0008 0 0 2px, rgb(0 0 0 / 25%) 0px 3px 6px; clip-path:inset(0 -50px 0 -50px); transition: .15s ease-out .1s !important;}
#tabs-tabbar-container.left {left:0; z-index:1;}
#panels-container.left ~ div > #tabs-tabbar-container.left {left: unset;}
#tabs-tabbar-container.right {right:0;}
#panels-container.right ~ #tabs-tabbar-container.right {right:35px;}

#tabs-tabbar-container.left:not(:focus-within):not(:hover) {will-change: clip-path; clip-path:inset(0% calc(100% - 27px) 0% 0%); transition: .15s ease-out .5s !important;}
#tabs-tabbar-container.right:not(:focus-within):not(:hover) {will-change: transform; transform: translateX(calc(100% - 27px)); transition: .15s ease-out .5s !important;}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) > div.overflow .tab-strip {animation: ofh 0s .5s forwards !important;}
@keyframes ofh {to {overflow-y: hidden;}}

/* newtab position */
#tabs-tabbar-container:is(.left, .right) .newtab {left: 0 !important; width: 100%; transition: width .1s .1s !important;}
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .newtab {transition: width 0s .5s !important;}

/* reserved inner space for minimized tabbar by only push webview-container inward */
#browser:not(.fullscreen).tabs-left #webview-container {margin-left:30px;}
#browser:not(.fullscreen).tabs-right #webview-container {margin-right:30px;}

/* Option 1: minimize into parent column */
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {flex-direction: row;}
/* Option 2: minimize into child column */
/* #tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {flex-direction: row-reverse;} */

/* canceled left tabbar's parent's DIV width */
#main > .inner > div:has(#tabs-tabbar-container.left) {max-width: 0px;}

/* make space for static statusbar at bottom */
#browser:has(footer > .toolbar-statusbar) #tabs-tabbar-container {margin-bottom: 27px;}

landon

@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:

@porky1 This mod is create pre-workspace era, unfortunately I no longer able to update it because my good old PC can't run win10/11.

So, maybe some other CSS wizard can adopt this mod & continue to evolve it to be compatible with v6 latest shiny features?

@porky1 @dude99 i've been doing minor maintenance on the one variant of these mods that i use, but i avoided adding support for workspaces, it's much more of a time commitment to implement. maybe we can set up some kind of bug bounty for this on replit.com or something else with a simple crowd funding system? i'm not too familiar with these platforms but i recall people doing something like this to fund ios jailbreak tweaks https://replit.com/bounties

barkocak

@landon @dude99 here's my edit to the original. it works with workspaces and also includes some optional eye candy features. tested on a mac with left/right tabs. can't guarantee it will work on all setups.

/*
Automate Floating Vertical Tabbar for Mouse & Keyboard by dude99 (hotfix by barkocak)
Option B: Minimize tabbar into favicon
https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard
*/
div.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)) {
  position: fixed;
  height: -webkit-fill-available !important;
  box-shadow: #0008 0 0 2px, rgb(0 0 0 / 25%) 0px 3px 6px;
  clip-path: inset(0 -500px 0 -500px); /*adjust according to tab width*/
  transition: .25s ease-out .3s !important;
  top:53px;
}

div.tabbar-wrapper:has(#tabs-tabbar-container.left) {
  left: 0;
  z-index: 1;
}

#panels-container.left~div>#tabs-tabbar-container.left {
  left: unset;
}

div.tabbar-wrapper:has(#tabs-tabbar-container.right) {
  right: 0;
}

#panels-container.right~#tabs-tabbar-container.right {
  right: 35px;
}

div.tabbar-wrapper:has(#tabs-tabbar-container.left):not(:focus-within):not(:hover) {
  will-change: clip-path;
  clip-path: inset(0% calc(100% - 30px) 0% 0%);
  transition: .25s ease-out .1s !important;
}

div.tabbar-wrapper:has(#tabs-tabbar-container.right):not(:focus-within):not(:hover) {
  will-change: transform;
  transform: translateX(calc(100% - 30px));
  transition: .25s ease-out .1s !important;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover)>div.overflow .tab-strip {
  animation: ofh 0s .01s forwards !important;
}

@keyframes ofh {
  to {
    overflow-y: hidden;
  }
}

/* reserved inner space for minimized tabbar by only push webview-container inward */
#browser:not(.fullscreen).tabs-left #webview-container {
  margin-left: 30px;
}

#browser:not(.fullscreen).tabs-right #webview-container {
  margin-right: 30px;
}

/* Option 1: minimize into parent column */
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {
  flex-direction: row;
}

/* Option 2: minimize into child column */
/* #tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {flex-direction: row-reverse;} */

/* canceled left tabbar's parent's DIV width */
#main>.inner>div:has(#tabs-tabbar-container.left) {
  max-width: 0px;
}

/* make space for static statusbar at bottom */
#browser:has(footer > .toolbar-statusbar) #tabs-tabbar-container {
  margin-bottom: 27px;
}






/* OPTIONAL FEATURES */


#tabs-tabbar-container {
  container-type: size;
}


/* adjust newtab button */
#tabs-tabbar-container.left .newtab {
  left: 0 !important;
}

#tabs-tabbar-container.right .newtab {
  left: calc(100cqw - 100%) !important;
  transition: .25s ease-in-out .25s !important;
}

#tabs-tabbar-container.right:not(:focus-within):not(:hover) .newtab {
  left: 0 !important;
  transition: .25s ease-in-out .05s !important;
}



/* adjust workspaces and inner text */
:is(.tabs-left, .tabs-right) .button-toolbar.workspace-popup.tabbar-workspace-button button {
  padding: 0 2px !important;
}

.button-toolbar > button .button-icon + .button-title {
  margin-left: 4px !important;
}


/* resize the tab */
#tabs-tabbar-container:is(.left, .right) .tab-position {
  transition: width .15s ease-in-out .3s !important;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .tab-position {
  width: 30px;
  transition: width .25s ease-in-out .1s !important;
}



/* resize pinned tabs separator */
#tabs-tabbar-container:is(.left, .right) .separator {
  transition: width .25s ease-in-out .3s !important;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .separator {
  width: 30px;
  transition: width .25s ease-in-out .1s !important;
}



/* shift accordion toggle arrow */
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .tab-position.accordion-toggle-arrow {
  width: 25px;
  transition: width .25s ease-in-out .1s !important;
}



/* shift stack counter */
#tabs-tabbar-container:is(.left, .right) .stack-counter {
  position: fixed;
  left: calc(var(--Width) - 25px);
  top: 7px;
  transition: all .25s ease-in-out .3s !important;
  transition-property: left, top;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .stack-counter {
  left: 6px;
  top: 25px;
  transition: all .25s ease-in-out .1s !important;
}

.color-behind-tabs-off .tab-position .tab.active .stack-counter {
  background-color: var(--colorAccentBg) !important;
}



/* adjust sync and trash container  */
#tabs-tabbar-container:is(.left, .right) .sync-and-trash-container {
  margin: inherit;
  width: 30px;
}

#tabs-tabbar-container.right .sync-and-trash-container {
  transform: translateX(calc(100cqw - 100%));
  transition: all .25s ease-in-out .25s !important;
}

#tabs-tabbar-container.right:not(:focus-within):not(:hover) .sync-and-trash-container {
  transform: translateX(0);
  transition: all .25s ease-in-out .05s !important;
}

sydprox

@barkocak Works perfect on Win 11, Vivaldi Snapshot 6.3.3134.3.

FAlves

@barkocak works fine on Win 10, but do not work on ChromeOS.

SallyK

@barkocak

Unfortunately, something in the switch to 6.4 seems to have broken this mod for me - the icons still appear at the side, but the tab bar no longer moves out. Something is happening on hover, though, because the thumbnail of the tab still appears, you just can't access the actual tab. (I'm using Vivaldi on Linux Mint, and including the extra entry to move the sync and trash container to be vertical.)

barkocak

here's an updated version of my edit. tested on mac with vivaldi 6.5.3206.48. should work with workspaces and tabs on left/right. hope it fixes all issues.

/*
Automate Floating Vertical Tabbar for Mouse & Keyboard by dude99 (hotfix by barkocak)
Option B: Minimize tabbar into favicon
https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard
*/
.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)) {
  position: absolute;
  height: -webkit-fill-available !important;
  box-shadow: #0008 0 0 2px, rgb(0 0 0 / 25%) 0px 3px 6px;
  clip-path: inset(0 calc(100% * -1) 0 calc(100% * -1));
  transition: .25s ease-out .3s !important;
  --HoverWidth: calc(100%);
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.left) {
  left: 0;
  z-index: 1;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right) {
  right: 0;
}

#panels-container.left~div>#tabs-tabbar-container.left {
  left: unset;
}

#panels-container.right~#tabs-tabbar-container.right {
  right: 35px;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.left):not(:focus-within):not(:hover) {
  will-change: clip-path;
  clip-path: inset(0% calc(100% - 30px) 0% 0%);
  transition: .25s ease-out .1s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right):not(:focus-within):not(:hover) {
  will-change: transform;
  transform: translateX(calc(100% - 30px));
  transition: .25s ease-out .1s !important;
}





/* reserved inner space for minimized tabbar by only push webview-container inward */
#browser:not(.fullscreen).tabs-left #webview-container {
  margin-left: 30px;
}

#browser:not(.fullscreen).tabs-right #webview-container {
  margin-right: 30px;
}





/* OPTIONAL FEATURES */

#tabs-tabbar-container {
  container-type: size;
}


/* adjust newtab button */
.inner>.tabbar-wrapper:has(#tabs-tabbar-container.left) .newtab {
  left: 0 !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right) .newtab {
  left: calc(100cqw - 100%) !important;
  transition: .25s ease-in-out .3s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right):not(:focus-within):not(:hover) .newtab {
  left: 0 !important;
  transition: .25s ease-in-out .1s !important;
}




/* adjust workspaces and inner text */
:is(.tabs-left, .tabs-right) .button-toolbar.workspace-popup.tabbar-workspace-button button {
  padding: 0 2px !important;
}

.button-toolbar > button .button-icon + .button-title {
  margin-left: 4px !important;
}




/* resize tabs */
.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)) .resize {
  width: 100% !important;
  transition: width .25s ease-in-out .3s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)):not(:focus-within):not(:hover) .resize {
  width: 30px !important;
  transition: width .25s ease-in-out .1s !important;
}




/* shift stack counter */
.color-behind-tabs-off .tab-position .tab.active .stack-counter {
  background-color: var(--colorAccentBg) !important;
}

#tabs-tabbar-container:is(.left, .right) .stack-counter {
  display: block !important;
  position: fixed;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)) .stack-counter {
  left: calc(var(--HoverWidth) - 25px);
  top: 7px;
  transition: all .25s ease-in-out .3s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)):not(:focus-within):not(:hover) .stack-counter {
  left: 5px;
  top: 25px;
  min-width: 20px;
  transition: all .25s ease-in-out .1s !important;
}




/* adjust sync and trash container  */
#tabs-tabbar-container:is(.left, .right) .sync-and-trash-container {
  margin: inherit;
  width: 30px;
  flex-direction: unset !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right) .sync-and-trash-container {
  transform: translateX(calc(100cqw - 100%));
  transition: all .25s ease-in-out .3s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right):not(:focus-within):not(:hover) .sync-and-trash-container {
  transform: translateX(0);
  transition: all .25s ease-in-out .1s !important;
}

CraigPD

This post is deleted!

xmdvic

@barkocak Thanks. Works smoothly on Win 10, Vivaldi 6.5.3206.53 (Stable channel) （64 bit）

ssynxx

this just gives me a dark sidebar beside my tab bar :c

Fernaand

First of all, congratz for this mod, its really usefull!! this make me fully migrate from edge to vivaldi!

BUT, always have a but LOL....

doesn't work well for me, I have a few strange behaviours like:

Dont crop to exact size of favicon

I use workspaces and doesn't work well

it's weird to use left panel, I have to positionate my mouse at specific point to open the panel or the tabbar.

My only two modds at this momment is this one with this code:

/* https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard/52?lang=pt-BR */

#tabs-tabbar-container:is(.left, .right) {position: fixed; height: -webkit-fill-available !important; box-shadow: #0008 0 0 2px, rgb(0 0 0 / 25%) 0px 3px 6px; clip-path:inset(0 -50px 0 -50px); transition: .15s ease-out .1s !important;}
#tabs-tabbar-container.left {left:0; z-index:1;}
#panels-container.left ~ div > #tabs-tabbar-container.left {left: unset;}
#tabs-tabbar-container.right {right:0;}
#panels-container.right ~ #tabs-tabbar-container.right {right:35px;}

#tabs-tabbar-container.left:not(:focus-within):not(:hover) {will-change: clip-path; clip-path:inset(0% calc(100% - 30px) 0% 0%); transition: .15s ease-out .5s !important;}
#tabs-tabbar-container.right:not(:focus-within):not(:hover) {will-change: transform; transform: translateX(calc(100% - 30px)); transition: .15s ease-out .5s !important;}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) > div.overflow .tab-strip {animation: ofh 0s .5s forwards !important;}
@keyframes ofh {to {overflow-y: hidden;}}

/* newtab position */
#tabs-tabbar-container:is(.left, .right) .newtab {left: 0 !important; width: 100%; transition: width .1s .1s !important;}
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .newtab {width: 30px; transition: width 0s .5s !important;}

/* reserved inner space for minimized tabbar by only push webview-container inward */
#browser:not(.fullscreen).tabs-left #webview-container {margin-left:30px;}
#browser:not(.fullscreen).tabs-right #webview-container {margin-right:30px;}

/* Option 1: minimize into parent column */
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {flex-direction: row;}
/* Option 2: minimize into child column */
//#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {flex-direction: row-reverse;}

/* canceled left tabbar's parent's DIV width */
#main > .inner > div:has(#tabs-tabbar-container.left) {max-width: 0px;}

/* make space for static statusbar at bottom */
#browser:has(footer > .toolbar-statusbar) #tabs-tabbar-container {margin-bottom: 24px;}

and the 2-layers from you

/* https://forum.vivaldi.net/topic/83079/automate-2-level-tab-stack-columns-v3?lang=pt-BR */

/* 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;}

Can you help me to adjust those css to work with right panel (static), right tab bar (collapsed), 2 level of folders ?

Thanks for the help and congratz again.

Fernaand

@Fernaand said in Automate Floating Vertical Tabbar for Mouse & Keyboard:

First of all, congratz for this mod, its really usefull!! this make me fully migrate from edge to vivaldi!

BUT, always have a but LOL....

doesn't work well for me, I have a few strange behaviours like:

Dont crop to exact size of favicon

I use workspaces and doesn't work well

it's weird to use left panel, I have to positionate my mouse at specific point to open the panel or the tabbar.

My only two modds at this momment is this one with this code:

/* https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard/52?lang=pt-BR */

#tabs-tabbar-container:is(.left, .right) {position: fixed; height: -webkit-fill-available !important; box-shadow: #0008 0 0 2px, rgb(0 0 0 / 25%) 0px 3px 6px; clip-path:inset(0 -50px 0 -50px); transition: .15s ease-out .1s !important;}
#tabs-tabbar-container.left {left:0; z-index:1;}
#panels-container.left ~ div > #tabs-tabbar-container.left {left: unset;}
#tabs-tabbar-container.right {right:0;}
#panels-container.right ~ #tabs-tabbar-container.right {right:35px;}

#tabs-tabbar-container.left:not(:focus-within):not(:hover) {will-change: clip-path; clip-path:inset(0% calc(100% - 30px) 0% 0%); transition: .15s ease-out .5s !important;}
#tabs-tabbar-container.right:not(:focus-within):not(:hover) {will-change: transform; transform: translateX(calc(100% - 30px)); transition: .15s ease-out .5s !important;}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) > div.overflow .tab-strip {animation: ofh 0s .5s forwards !important;}
@keyframes ofh {to {overflow-y: hidden;}}

/* newtab position */
#tabs-tabbar-container:is(.left, .right) .newtab {left: 0 !important; width: 100%; transition: width .1s .1s !important;}
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .newtab {width: 30px; transition: width 0s .5s !important;}

/* reserved inner space for minimized tabbar by only push webview-container inward */
#browser:not(.fullscreen).tabs-left #webview-container {margin-left:30px;}
#browser:not(.fullscreen).tabs-right #webview-container {margin-right:30px;}

/* Option 1: minimize into parent column */
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {flex-direction: row;}
/* Option 2: minimize into child column */
//#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {flex-direction: row-reverse;}

/* canceled left tabbar's parent's DIV width */
#main > .inner > div:has(#tabs-tabbar-container.left) {max-width: 0px;}

/* make space for static statusbar at bottom */
#browser:has(footer > .toolbar-statusbar) #tabs-tabbar-container {margin-bottom: 24px;}

and the 2-layers from you

/* https://forum.vivaldi.net/topic/83079/automate-2-level-tab-stack-columns-v3?lang=pt-BR */

/* 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;}

Can you help me to adjust those css to work with right panel (static), right tab bar (collapsed), 2 level of folders ?

Thanks for the help and congratz again.

I did some adjustments to collapse the workspaces and to shiftdown the tabbarea and preserve the worskpace button.

Also add a HUGE url space.

/* https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard/52?lang=pt-BR */

.UrlBar-UrlFieldWrapper {
	width: 1600px !important;
	text-align: center;
}

.UrlField {
	width: 100% !important;
	text-align: center;
}

.tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button, .tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button{
	z-index: 9 !important;
}

.button-toolbar.workspace-popup.tabbar-workspace-button:not(:focus-within):not(:hover) {
	will-change: clip-path; 
	clip-path:inset(0% calc(100% - 28px) 0% 0%); 
	transition: .15s ease-out .5s !important;
}

/*.button-toolbar.workspace-popup.tabbar-workspace-button {left:0; z-index:1;}
.button-toolbar.workspace-popup.tabbar-workspace-button ~ div > #tabs-tabbar-container.left {left: 35px;}
*/
#tabs-container {
	top: 30px !important;
}

#tabs-tabbar-container:is(.left, .right) {position: fixed; height: -webkit-fill-available !important; box-shadow: #0008 0 0 2px, rgb(0 0 0 / 25%) 0px 3px 6px; clip-path:inset(0 -50px 0 -50px); transition: .15s ease-out .1s !important;}
#tabs-tabbar-container.left {left:0; z-index:1;}
#panels-container.left ~ div > #tabs-tabbar-container.left {left: 35px;}
#tabs-tabbar-container.right {right:0;}
#panels-container.right ~ #tabs-tabbar-container.right {right:35px;}

#tabs-tabbar-container.left:not(:focus-within):not(:hover) {will-change: clip-path; clip-path:inset(0% calc(100% - 28px) 0% 0%); transition: .15s ease-out .5s !important;}
#tabs-tabbar-container.right:not(:focus-within):not(:hover) {will-change: transform; transform: translateX(calc(100% - 30px)); transition: .15s ease-out .5s !important;}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) > div.overflow .tab-strip {animation: ofh 0s .5s forwards !important;}
@keyframes ofh {to {overflow-y: hidden;}}

/* newtab position */
#tabs-tabbar-container:is(.left, .right) .newtab {left: 35px !important; width: 100%; transition: width .1s .1s !important;}
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .newtab {width: 30px; transition: width 0s .5s !important;}

/* reserved inner space for minimized tabbar by only push webview-container inward */
#browser:not(.fullscreen).tabs-left #webview-container {margin-left:30px;}
#browser:not(.fullscreen).tabs-right #webview-container {margin-right:30px;}

/* Option 1: minimize into parent column */
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {flex-direction: row;}
/* Option 2: minimize into child column */
/* #tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {flex-direction: row-reverse;} */

/* canceled left tabbar's parent's DIV width */
#main > .inner > div:has(#tabs-tabbar-container.left) {max-width: 0px;}

/* make space for static statusbar at bottom */
#browser:has(footer > .toolbar-statusbar) #tabs-tabbar-container {margin-bottom: 24px;}

/* focus floating container on top 
#panels-container:is(:hover, :focus-within), #tabs-tabbar-container:is(:hover, :focus-within), .UrlBar:is(:hover, :focus-within) {z-index:99 !important;}*/

Automate Floating Vertical Tabbar for Mouse & Keyboard

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊