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

[legobuilder26]

@dude99 I was asking about autohiding the adress bar earlier because when this.

When shown, the adress bar covers up the top tab

[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: