Automate Floating Vertical Tabbar for Mouse & Keyboard

dude99

updated for v5.4:

undo new 100% height reinforcement to allow raising the bottom of tabbar for static statusbar.

~~- revert back to classic position: absolute; floating method, cuz v team finally fixed this damned bug!~~

~~- revert all top position back to top:0;. We are no longer need to fiddle with it when altering top position toolbar.~~

Add support for same side panel with tabbar for both left/right side. Now the tabbar will always be in the inner side for version B.

arcsnim

@dude99
Hey, thanks for the update, it's working right now.
I have got some problems, can you help me again?
First one is, Is there any way to adjust overflow over address bar? I can set with top value, but flow does not change.

Second one is, It's position itself before the sidebar panel, is there any way to adjust that too?

I wish your mod implemented as default, like edge does.

dude99

@arcsnim I assumed you are using version B code, right? If so, do this to get what you desired:

Disabled or remove this 2 lines:

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

Activate this 2 lines (after previous 2 lines) by remove / in the beginning of each line:

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

After #tabs-tabbar-container.right {right:0;}, add this line:

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

Move the z-index:9; from this line #tabs-tabbar-container.left, #tabs-tabbar-container.right {position: fixed; top:0; bottom:0; height: auto !important; z-index:9; to this line: #tabs-tabbar-container.left {left:0;}

Let me know the result after you made these changes, I have tested this changes in my setup & they works as you describe. So I assume it should also work the same in your setup. Pls post the latest code u r using if it doesn't work properly.

arcsnim

@dude99 Thank you, it's working as what I wanted
I have to set top value to 58px for able to see first tab in the tab bar. With the default option (25 px) I cannot see the first tab.

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


#tabs-tabbar-container.left:not(:focus-within):not(:hover) {clip-path:inset(0% calc(100% - 30px) 0% 0%); transition: .15s ease-out .5s !important;}
#tabs-tabbar-container.right:not(:focus-within):not(:hover) {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 outter space for minimized tabbar by push everything inward */
/* #browser:not(.fullscreen).tabs-left #main {margin-left:30px;}
#browser:not(.fullscreen).tabs-right #main {margin-right:30px;} */
/* optional: reserved inner space for minimized tabbar by only push webpage inward */
#browser:not(.fullscreen).tabs-left #webview-container {margin-left:30px;}
#browser:not(.fullscreen).tabs-right #webview-container {margin-right:32px;}

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

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

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

iamkarlson

Option B from the topic head doesn't really work in Vivaldi 5.4:

There's a space left from the original tabs' spacing. How can I remove it?

iamkarlson

Another screenshot with some values from the inspect

dude99

@iamkarlson it seems you don't have this line in your code?

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

Can you try fetch the code from OP again? I just updated it a few minute ago...

arcsnim

This post is deleted!

iamkarlson

@dude99 It was there but I have no idea why it doesn't apply. seems like :has doesn't really work. any ideas how to debug that?

dude99

@iamkarlson Oh I see. Pls follow ReadME instruction no.1 to enabled the experimental flag. :has() is still an experimental feature.

arcsnim

@dude99 Hey I got new two bugs I encountered
First one is, if I close a tab with ctrl + w keyboard shortcut or
Click the link in mail or
Close tab with mouse gesture

Second one, tab's background color not working with transparent theme.

dude99

Sorry guys, it seems they have kinda fixed the previous position: absolute bug but then introduce another bug. So far I can't figure out any way to work around that, so I have to resort to position: fixed solution for now...

OP code have updated again. The default setup is mainbar on top & overlay/hidden statusbar, here are some optional code that cover other common setup, just paste 'em at the very bottom to cover these state:

/* no toolbar on top */
:not(.address-top):not(.bookmark-bar-top) #tabs-tabbar-container:is(.left, .right) {top: 25px;}

/* addressbar & bookmarkbar on top */
.address-top.bookmark-bar-top #tabs-tabbar-container:is(.left, .right) {top: 88px;}

/* static statusbar at bottom */
#browser:has(footer > .toolbar-statusbar) {bottom: 24px;}

dude99

@arcsnim missing tabbar's background color is not a bug, cuz the default transparent tabbar doesn't have any Accent background color at all (cuz v team never support it for whatever reason). doh LOL

To add accent color back into transparent background, try this CSS mod: https://forum.vivaldi.net/post/475328

I build that long time ago when they revamp the tabbar, so I'm not sure if it's still working properly. Let me know if it's bork... whistle

dude99

minor update: v5.4:

Tabbar's top position for version B & C will now honor all top toolbars' setup/height, finally we won't need to fiddle with top value anymore - even with position: fixed!
unfortunately tabbar's bottom still require margin-bottom hack to make space for Statusbar & Footer. ~~Not sure if it's a bug or what...~~ it's not a bug, cuz fixed position element usually use viewport's bottom when height is not set to unset or auto.

FellSanches

Hi! First of all, thank you so much for this CSS, you're doing an amazing job. But if you can, I need some help with a bug(ish)

My tab bar is located on the left and its working, but if I hover any other screen border (right, top, bottom) it slides in the tab bar too

Can I make it to show up only when I hover the bar on left

dude99

@FellSanches This is the unfortunate side effect of the last section code /* experimental: pin tabbar while mouseover stacked thumbnail & context menu */, as it's title said it's experimental code & very very much unfinished by me since long long time ago... LOL

If it bother you too much, then you can remove it, but then the tabbar will hide itself when you right click on it for context menu; or mouseover the stacked tabs' thumbnails.

Nerdy explanation:

This experimental code are made to overcome Vivaldi's flawed behavior of not kept focus on last active element during context menu event (with exception to the panel & horizontal menubar), they hardcoded this behavior with js/react so I can't fix it with CSS alone. Then they also move the stacked tabs' popup thumbnails into another top level DIV outside of the tabbar, thus when we mouseover the popup thumbnails, it count as a mouseout event for tabbar. doh

So, maybe I will try finish this experimental code later, if only I could find the will to do so in the future. LOL

lucianof

I'm using this CSS that first there on the first page but the email is with this ribbon is there any mod update that fixes this?

If so, could you post the full mod code ?

dude99

@lucianof Are u using the lastest code posted in the OP? Last update is august 17th 2022.

which version of the code you are using? A B or C?

what is your tabbar position? Left or Right?

which version of Vivaldi you are using? stable or snapshot?

lucianof

@dude99

where can i find that last code? is it on the first page ?

which version of the code you are using? A B or C?
B

#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. .icons ~ div > #tabs-tabbar-container.left {left:35px;}
#tabs-tabbar-container.right {right:0;}
#panels-container.right. . .icons ~ #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;}

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

vivaldi 5.4.2753.51 (Stable channel) (64 bit)

Aligned left.

this problem only happens with Vivaldi email.

dude99

@lucianof here is a temporary fix, replace the 4th line #panels-container.left.icons ~ div > #tabs-tabbar-container.left {left:35px;} with #panels-container.left ~ div > #tabs-tabbar-container.left {left: unset;}

This is not the best solution, but that's what I can came up with for now... LOL

I notice there are some error in the code you posted in your last post, I suggest you should copy & paste the code from the OP again, I have already updated the code B.

Automate Floating Vertical Tabbar for Mouse & Keyboard

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

Nerdy explanation:

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊