Automate Floating Vertical Tabbar for Mouse & Keyboard

[dude99]

There are many similar CSS mod for automate (autohide) vertical tabbar, here are mine, which support shortcut Focus Tab Bar (you need to manually setup this shortcut).

---

ReadMe

1. Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.

2. You can reveal the tabbar by hover pointer at the window's left/right edges, or focus on the tabbar via keyboard/MG shortcut (Focus Tab Bar).

3. All 3 version do preserve Drag & Drop function. Just drag (anything supported by Vivaldi) & drop it into the left/right edge of the window to open a new tab.

   

4. For version B & C, you may choose either option 1 or 2 for tabbar's minimized state, default behavior is minimize tabbar into parent column. Drag & drop will always create new tab in parent column regardless of this option. Remove // in the beginning of the line to activate specific behavior. Remember to disabled the other option by insert // into the beginning of the line.

5. You can also raising the tabbar's bottom to made space for more bottom toolbars by alter margin-bottom: 24px; value. Default is 24px for static Statusbar when it's enabled.

6. This CSS mod are compatible with my Side Tab Trashcan CSS mod, Inverted 2 level tab stacking Columns, & Automate 2 level tab stack columns.

---

A. Autohide entire tabbar

CSS Code:

#tabs-tabbar-container:is(.left, .right) {position: fixed; top: 25px; bottom:0; height: -webkit-fill-available !important; box-shadow: #0008 0 0 2px, rgb(0 0 0 / 25%) 0px 3px 6px; z-index:9; transition: transform .15s .15s, opacity 0s .1s !important;}
.normal #tabs-tabbar-container:is(.left, .right) {transition: transform .15s 0s, opacity 0s 0s !important;}
#tabs-tabbar-container.left {left:0;} 
#tabs-tabbar-container.right {right:0;}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) {opacity:0; transition: transform .15s .45s, opacity 0s .6s !important;}
#tabs-tabbar-container.left:not(:focus-within):not(:hover) {transform: translateX(calc(-100% + 1px));}
#tabs-tabbar-container.right:not(:focus-within):not(:hover) {transform: translateX(calc(100% - 1px));}
.normal #tabs-tabbar-container.left:not(:focus-within):not(:hover) {transform: translateX(calc(-100% + 9px));}
.normal #tabs-tabbar-container.right:not(:focus-within):not(:hover) {transform: translateX(calc(100% - 9px));}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .SlideBar--FullHeight {visibility:hidden;}

#main > .inner > div:has(#tabs-tabbar-container.left) {max-width: 0px;}

Unfinished experimental code to keep tabbar shown during context menu & stacked thumbnail event

/* experimental: pin tabbar while mouseover stacked thumbnails & context menu */
#browser:has(#vivaldi-tooltip:is(:hover, :focus-within)) #tabs-tabbar-container:is(.left, .right), #browser.hasfocus:not(:has(#panels-container:focus-within)):not(:hover) #tabs-tabbar-container:is(.left, .right) {opacity:1; transform:translateX(0); transition: transform .15s .15s, opacity 0s .1s !important;}

---

B. Minimize tabbar into favicon

CSS Code:

#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;}

Unfinished experimental code to keep tabbar shown during context menu & stacked thumbnail event

/* experimental: pin tabbar while mouseover stacked thumbnail & context menu */
#browser:has(#vivaldi-tooltip:is(:hover, :focus-within)) #tabs-tabbar-container.left, #browser.hasfocus:not(:has(#panels-container:focus-within)):not(:hover) #tabs-tabbar-container.left {clip-path:inset(0 -50px 0 -50px); transition: .15s ease-out .1s !important;}

#browser:has(#vivaldi-tooltip:is(:hover, :focus-within)) #tabs-tabbar-container.right, #browser.hasfocus:not(:has(#panels-container:focus-within)):not(:hover) #tabs-tabbar-container.right {transform:translateX(0); transition: .15s ease-out .1s !important;}

---

C. Minimize tabbar into favicon for 2s, then autohide completely

CSS Code:

It's bork since v5.7, pls don't use this

---

That's all folks. Tell me which version you like, & please share you idea to further improve the vertical tabbar.

EDIT: updated for v5.4

[pauljher]

Thank you very much. It works perfectly!!

[dude99]

CSS mod to restore vertical tabbar in Fullscreen:
https://forum.vivaldi.net/post/352542

[littl3viking]

Thanks so much!
That was what I needed to migrate to Vivaldi.

However, I would like to know if it is possible to make the animation look like this: https://imgur.com/a/xZO42rd

[nomadic]

@littl3viking I might look into this later when I am less tired, but here is something that could potentially help you or someone else make that animation (not 100% sure it will work, but maybe):

Animating with Clip-Path

[hlehyaric]

@nomadic Is the user asking some kind of autohide floating vertical tab bar?

If so, @sjudenim wrote a mod some times ago:

https://forum.vivaldi.net/topic/21528/animated-overlays-updated-27-march-19

[littl3viking]

I don't think it's just "animation", but the way it's hiding.
Something like this: https://imgur.com/NkGdADy

I have custom CSS from Firefox, but dont know how to implement on Vivaldi.

[dude99]

@littl3viking Yes, it's possible. Method 2 code is now updated to work like you requested thanks to @nomadic idea.

[littl3viking]

@dude99 Thank you so much! Worked very smooth

[yakn99925566]

Can you show the trash icon?

[dude99]

@yakn99925566 said in Automate Vertical Tabbar for Mouse & Keyboard:

Can you show the trash icon?

Sorry, I don't understand what you want. Please elaborate a bit.
Also, u might have better chance of getting help by open another new topic in the mod forum.

[yakn99925566]

@dude99 I tried this mod, and the Trash icon had disappeared. So, I'm using its previous version.

[dude99]

@yakn99925566 Hmm... I think maybe you are using other mod that affecting the trashcan icon. All the CSS mod in the first post should not affect the trashcan icon in the tabbar. I suggest you test the mod here without other mod to see if it's indeed my mod causing the trashcan to disappear.

Sorry I can't be much help here.

[yakn99925566]

ok, Thank you.
I have changed from position:fixed to position:absolute. It seems to work well.

[dude99]

Update: Currently, the latest v3.3.2x stable version have a bug that causing the #webview-container to move together with the position RIGHT & absolute tab bar during translateX().

Thus, if you are using RIGHT position tab bar, then replace position:absolute; height:100%; with position:fixed; height: calc(100% - 26px); to fix it temporary . You might need to adjust the 26px to increase/decrease the height of the tab bar according to your custom setup.

Alternatively, you can install Side Tab Trashcan mod to move the Trashcan & Sync tabs icon to the side to solve the missing trashcan & sync tabs icon problem which cause by fixed position tab bar.

[dude99]

Update:

• v3.5, fixed missing trashcan & sync buttons problem.

• Made work-around to translateX() bug, which while moving #tabs-container.right also affect #webview-container . (Vivaldi dev have confirmed won't fix this ever, cuz it's a CSS mod ?! )

• New feature: Drag & Drop support!

[dude99]

updated for v3.6,

• add support for both compact & 2-level tab stack.

• Almost finishing version B & C double columns, but it probably won't end well... cuz missing feature

[dude99]

@legobuilder26 It seems you have a z-index priority problem... That could happen when there r too many stuff floating around. LOL

Now, you can simply lower the tabbar's height to top:59px just like what I mentioned in Readme #5 above.

Or...

We can fix this with a general code that bring floating container (addressbar, panel, or tabbar) on focus to the top! Please insert below code at the very, very bottom of your CSS code:

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

U can study the art of z-index so that you can control what on top of what with the force of CSS, like a Jedi:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/
https://css-tricks.com/almanac/properties/z/z-index/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

[memeds]

@dude99 Hello, it seems that the mod isn't working right. When using option A without any other mods, I get the same problem as the person earlier. When using option B, I get an empty gap in the top. And finally, when using option C, the first tab just glitches onto the header.
Option A:

Option B:

Option C:

[dude99]

@memeds Try adjust the top & z-index values according to your setup. Please read the ReadMe section carefully, it will help you to tweak this mod properly.

top value control where the tabbar start at the top, 1px at the top of the window, 25px is below the Titlebar; 59px is below the Addressbar according to default setup. You can play with it until it fit your setup.

z-index control the depth of the tabbar, if you want it to cover everything then try 99999. LOL

EDIT: I have updated the code a bit, increase all z-index to 9.