Automate Floating Vertical Tabbar for Mouse & Keyboard

RealoFoxtrot

Thanks for the quick response.
I've been playing around and found that the best workaround for me personally is to go to the settings and set Panel to be on the opposite side so at leas nothing is overlapping

matjojo

Thanks a lot for this! I'm a big fan of this. I commented out all transitions. I believe it looks a lot better like that(:

I use this with the focus tab bar shortcut. In the past, I used the "tab bar" shortcut that opens and closes the tab bar.

Is there some way to restore the functionality so that the tab bar stays open until I press a hotkey again? Preferably the same, but could also be a different hotkey.

And Oh yeah I just noticed. I also opens with the mouseover. Is there some way to remove that? It really ruins my workflow wrt multiple monitors.
(EDIT: I did some more looking around, it opens when I move the cursors outside the window via the left, top, or right side.)

dude99

@matjojo

I use this with the focus tab bar shortcut. In the past, I used the "tab bar" shortcut that opens and closes the tab bar. Is there some way to restore the functionality so that the tab bar stays open until I press a hotkey again? Preferably the same, but could also be a different hotkey.

Just unfocus from tabbar will do, so F8 F9 or ESC should do. or you can click on webpage or any other GUI.

I also opens with the mouseover. Is there some way to remove that? It really ruins my workflow wrt multiple monitors.

Sounds like you only wanted a floating tabbar, and without all the auto-hide/show behavior via mouse & keyboard. Then u want to use the native Tab Bar command to show/hide the tab bar, correct? Remove all the :hover and :not(:hover) should remove all mouse interaction trigger.

it opens when I move the cursors outside the window via the left, top, or right side

Pls remove the experimental code.

Now I can write a custom code for your case, but it will be base on v5.6 Vivaldi, so I'm not sure if it will work properly for v5.7 because I heard they did change something & broke this tabbar CSS mod a bit.

what state you want the tabbar in during inactive mode? Shrink to Favicon or Hidden completely?
And which side the tabbar is on? L / R?

matjojo

@dude99

Remove all the :hover and :not(:hover) should remove all mouse interaction trigger.

Pls remove the experimental code.

These two removed all the mouseover stuff very nicely.

Sounds like you only wanted a floating tabbar, and without all the auto-hide/show behavior via mouse & keyboard. Then u want to use the native Tab Bar command to show/hide the tab bar, correct?

Not completely, I do want to hide and show it with the keyboard. What I don't want is for it to dissapear when the focus is removed. Basically I'd like it to work the same as the floating panel bar. Completely gone when it's not enabled, and floating over the page when I open it with the hotkey.

Now I can write a custom code for your case, but it will be base on v5.6 Vivaldi, so I'm not sure if it will work properly for v5.7 because I heard they did change something & broke this tabbar CSS mod a bit.

what state you want the tabbar in during inactive mode? Shrink to Favicon or Hidden completely?
And which side the tabbar is on? L / R?

Yeah, it would be ideal if I had one hotkey to both open and close the tab bar, and that the tab bar did not require focus to stay open.

I have my tab bar on the right. Would prefer it to be hidden completely when not in use. Also, you don't have to worry about transitions/timing for me. As I would remove them anyways.

I'm using version 5.7.2921.65 (Stable channel) stable (64-bit)

I can't thank you enough for wanting to work on this for me(:

Sparrows

I did option C; and appended the styles to my own customization. Although it's not minimizing the favorites icon to a single vertical list, then fading out those vertical favorite icons.

Instead it's fading out the preview of the sites when hovering over a tab group; for example ?

Also it's blocking some of the web site, in my case when I hover to the left, if I want to highlight some text on a web site, the floating vertical tab bar appears and I can't know what I'm highlighting ? Instead of as mentioned above minimizing to a vertical favorite icon list.

dude99

@matjojo I think what you really wanted is really just a floating tab bar. So this is the only CSS code you will need, pls remove all the code you copied from the OP earlier:

#tabs-tabbar-container.right {position: fixed; height: -webkit-fill-available !important; right: 0;}

This will only float the tabbar on the right side, so when you switch it to the left it will be the normal tabbar. Then you can show/hide it with the default/native Tab Bar command.

Please let me know if it work properly or not cuz I can't test it on Vivaldi v5.7.

dude99

@Sparrows Sounds like version C is very broken on v5.7.

Unfortunately I can't fix it at this time cuz I'm still stuck with win8.1 v5.6. Pls stop using it as I don't know when I will be able to fix it.

matjojo

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

I think what you really wanted is really just a floating tab bar. So this is the only CSS code you will need, pls remove all the code you copied from the OP earlier
Please let me know if it work properly or not cuz I can't test it on Vivaldi v5.7.

Wow yeah! that is exactly it. Works great on v5.7. Thanks a lot!

Sparrows

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

@Sparrows Sounds like version C is very broken on v5.7.

Unfortunately I can't fix it at this time cuz I'm still stuck with win8.1 v5.6. Pls stop using it as I don't know when I will be able to fix it.

Seems like modding Vivialdi is not as effective as it may seem. Hopefully someone can come forward and fix the styles so it works on v5.7.

Sparrows

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

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

I think what you really wanted is really just a floating tab bar. So this is the only CSS code you will need, pls remove all the code you copied from the OP earlier
Please let me know if it work properly or not cuz I can't test it on Vivaldi v5.7.

Wow yeah! that is exactly it. Works great on v5.7. Thanks a lot!

You got it the collapsing vertical tab bar working on v5.7. Here is my custom.css file; maybe someone can see what is wrong and why I'm running into the problems which I am !

snakedoc

Has anyone got this working for v6 with workspaces?

TheAMan006

B works so perfectly! Dude99 is the God! Love you dude; thank you so so so so much...
[On a side note, I wonder why Vivaldi doesn't just copy paste Dude's code and put an option in the Settings to turn on the auto-hide tabbar feature, which would make Vivaldi so attractive to Edge users...].

TheAMan006

@dude99 Could you look into this?
https://forum.vivaldi.net/topic/61652/vertical-tab-bar-scrolling-instead-of-tab-shrinking

I tried copying winaero article on how-to-hide-and-disable-thumbnails-in-vivaldi-vertical-tabs/ and tweaking it to always be hundred pixel tall, and it worked, but looked ugly; pinned tabs ended up having large overlapping heights and thumbnails...

Cause like, technically, the "Window" side panel works quite well, and one doesn't need verticle tabbar when one can use that side panel instead. But with the Always-show-thumbnails-on-tabbar-tabs checked, it makes the tabbar competitive to the "Window" side panel, as in, adds something unique and genuine that that side panel lacks...

landon

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

fixes jittering new tab icon on tab bar open/close animation. (.newtab width was overriden to 30px when width doesn't need to be overriden at all)
fixes tab bar overflowing into static statusbar at bottom. margin-bottom was set to 24px, it is now 27px
fixed the default commented out (sub) option 2: minimize into child column. It was commented with C style comment syntax //, changed to CSS style comment syntax /* */

my info. also I have Windows Display settings at exactly 100% DPI scale if that makes any difference as other DPIs unfortunately often can cause disparities.
Vivaldi 6.0.2979.15 (Stable channel) (64-bit)
Revision 48baf1f6e9cb9f18b98a815e1ae64ed52b71222f
OS Windows 11 Version 22H2 (Build 22621.1555)

/* 
Automate Floating Vertical Tabbar for Mouse & Keyboard by dude99 (this 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% - 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 {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;}

SallyK

Thank you very much for this mod, it's still working for me, and I'm finding it very useful.

I was just wondering - I'm using version B, where the favicons show, but I keep triggering the tab bar when I don't mean to. Would it be possible to have it only trigger when I hit the side of the screen, rather than when I cross into the tab bar? If it matters, my tab bar is on the left of the screen, and the panel's on the right, so it isn't relevant.

dude99

@SallyK try increasing the .1s value at the end of line 1 to delay the time it took to activate expanding the tabbar when you mouseover it. .1s = 100ms = 1/10 of a second. So you can slow it down to .2s or 200ms (1/5 o a second) so that the tabbar won't begin to expand so quickly.

Would it be possible to have it only trigger when I hit the side of the screen

Yes, but unfortunately I won't be able to code it for v6 because I'm still stuck with win8. If anyone interested here is an idea to get it done: Add :after to #tabs-tabbar-container, give it fixed position + 8px width, & change the hover trigger to #tabs-tabbar-container:after instead of #tabs-tabbar-container.

dude99

@landon TQVM for fixing this CSS mod, as I won't be able to fix any of my CSS mod for the foreseen future...

SallyK

@dude99

Thank you very much for the suggestion. It definitely helps me not trigger the pop-out accidentally as often.

H4M5TER

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

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

Each time I move mouse out the window, the fullsize tabbar appears.
This way to detect context menu in pure CSS is brilliant.
Too bad I didn't find a method to detect if mouse leave browser (or get mouse position) in pure CSS.

dude99

@H4M5TER Here is the latest version I tried to perfect the behavior, & I'm currently using it. It's very close to what I wanted but it's still far from perfect because of CSS limitation... Nothing I can do about it for now, not until they add more crazy function into CSS. LOL

Use it as a reference, learn whatever you can from it. I will try to explain how it works if you don't understand any part of it. I suggest you feed it into auto format software (beautify CSS) to make it easier to read.


/* SCROLLBAR */
//::-webkit-scrollbar {--scrollbarWidth: 12px !important;}
::-webkit-scrollbar-thumb {min-height: 30px;}
::-webkit-scrollbar-thumb:hover {border-width: 2.8px !important; background-color:var(--colorHighlightBg) !important;}
::-webkit-scrollbar-thumb:active {border-width: 2px !important;}
::-webkit-scrollbar-track-piece:start:hover {background-image: repeating-linear-gradient(-45deg, var(--colorHighlightBgAlpha) 0 .7%, transparent 0 1.5%), repeating-linear-gradient(-45deg, var(--colorHighlightBgAlpha) 0 .7%, transparent 0 1.5%);}
::-webkit-scrollbar-track-piece:end:hover {background-image: repeating-linear-gradient(45deg, var(--colorHighlightBgAlpha) 0 .7%, transparent 0 1.5%), repeating-linear-gradient(45deg, var(--colorHighlightBgAlpha) 0 .7%, transparent 0 1.5%);}

/* vertical tabbar scrollbar */
#tabs-tabbar-container:is(:focus-within, :hover) .tab-strip {will-change: scroll-position;}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {--scrollbarWidth: 8px !important;}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {border-width: 2.5px !important;}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb:hover {border-width: 2px !important;}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb:active {border-width: 1px !important;}
#tabs-tabbar-container:is(.left, .right) > div:not(:focus-within):not(:hover) .tab-strip::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.3)}
.maximized.tabs-left #tabs-tabbar-container > div.overflow:not(:focus-within):not(:hover) .tab-strip::-webkit-scrollbar-thumb {border-left-width: 1px !important; border-right-width: 3px !important; border-radius: 2.5px 5px 5px 2.5px !important;}
.maximized.tabs-left #tabs-tabbar-container > div.overflow .tab-strip {direction: rtl;}
#tabs-tabbar-container:is(.left, .right) .tab-position {direction: initial; width: 100%;}
/* automate tabbar scrollbar */
#tabs-tabbar-container > div.overflow:not(:focus-within):not(:hover) .tab-strip {overflow-y: hidden;}

/* Vertical Tabbar */
#tabs-tabbar-container:is(.left, .right) {width: 400px !important; opacity: 0; z-index: 1; will-change: opacity, clip-path; transition: opacity .15s steps(3, jump-none) .35s, clip-path 0s .5s !important;}
#main > .inner > div:has(#tabs-tabbar-container.left) {width: 0px !important;}

#tabs-tabbar-container.left {left: 0; clip-path: inset(-8px calc(100% - 1px) -8px -8px);}
#tabs-tabbar-container.right {right: 0; clip-path: inset(-8px -8px -8px calc(100% - 3px)); position: fixed; height: -webkit-fill-available !important; transition: opacity .15s steps(3, jump-none) .35s, clip-path 0s .5s, transform 0s .5s !important;}
.normal #tabs-tabbar-container.left {clip-path: inset(-8px calc(100% - 8px) -8px -8px);}
.normal #tabs-tabbar-container.right {clip-path: inset(-8px -8px -8px calc(100% - 8px));}
.isblurred #tabs-tabbar-container.left {clip-path: inset(-8px calc(100% - 30px) -8px -8px); opacity: 1; z-index: 4;}
.isblurred #tabs-tabbar-container.right {clip-path: inset(-8px -8px -8px 0); transform: translateX(calc(100% - 30px)); opacity: 1; z-index: 4;}


#browser:where(:has(#vivaldi-tooltip:is(:hover, :focus-within)), .hasfocus:not(:has(#panels-container:focus-within)):not(:hover)) #tabs-tabbar-container:is(.left, .right), #tabs-tabbar-container:is(.left, .right):is(:hover, :focus-within) {opacity: 1; clip-path: inset(-8px -40px -8px -40px); transition: opacity .1s steps(3, jump-none) 0s, clip-path 0s 0s !important;}
.maximized #tabs-tabbar-container:is(.left, .right):hover {transition: opacity .1s steps(3, jump-none) .1s, clip-path 0s .1s !important;}

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

Too bad I didn't find a method to detect if mouse leave browser (or get mouse position) in pure CSS.

try #app:not(:hover) or #browser:not(:hover)

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 ◊