Automate Floating Vertical Tabbar for Mouse & Keyboard

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)

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

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 ◊