Automate Floating Vertical Tabbar for Mouse & Keyboard

SallyK

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

landon

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

@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?

@porky1 @dude99 i've been doing minor maintenance on the one variant of these mods that i use, but i avoided adding support for workspaces, it's much more of a time commitment to implement. maybe we can set up some kind of bug bounty for this on replit.com or something else with a simple crowd funding system? i'm not too familiar with these platforms but i recall people doing something like this to fund ios jailbreak tweaks https://replit.com/bounties

barkocak

@landon @dude99 here's my edit to the original. it works with workspaces and also includes some optional eye candy features. tested on a mac with left/right tabs. can't guarantee it will work on all setups.

/*
Automate Floating Vertical Tabbar for Mouse & Keyboard by dude99 (hotfix by barkocak)
Option B: Minimize tabbar into favicon
https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard
*/
div.tabbar-wrapper:has(#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 -500px 0 -500px); /*adjust according to tab width*/
  transition: .25s ease-out .3s !important;
  top:53px;
}

div.tabbar-wrapper:has(#tabs-tabbar-container.left) {
  left: 0;
  z-index: 1;
}

#panels-container.left~div>#tabs-tabbar-container.left {
  left: unset;
}

div.tabbar-wrapper:has(#tabs-tabbar-container.right) {
  right: 0;
}

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

div.tabbar-wrapper:has(#tabs-tabbar-container.left):not(:focus-within):not(:hover) {
  will-change: clip-path;
  clip-path: inset(0% calc(100% - 30px) 0% 0%);
  transition: .25s ease-out .1s !important;
}

div.tabbar-wrapper:has(#tabs-tabbar-container.right):not(:focus-within):not(:hover) {
  will-change: transform;
  transform: translateX(calc(100% - 30px));
  transition: .25s ease-out .1s !important;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover)>div.overflow .tab-strip {
  animation: ofh 0s .01s forwards !important;
}

@keyframes ofh {
  to {
    overflow-y: hidden;
  }
}

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






/* OPTIONAL FEATURES */


#tabs-tabbar-container {
  container-type: size;
}


/* adjust newtab button */
#tabs-tabbar-container.left .newtab {
  left: 0 !important;
}

#tabs-tabbar-container.right .newtab {
  left: calc(100cqw - 100%) !important;
  transition: .25s ease-in-out .25s !important;
}

#tabs-tabbar-container.right:not(:focus-within):not(:hover) .newtab {
  left: 0 !important;
  transition: .25s ease-in-out .05s !important;
}



/* adjust workspaces and inner text */
:is(.tabs-left, .tabs-right) .button-toolbar.workspace-popup.tabbar-workspace-button button {
  padding: 0 2px !important;
}

.button-toolbar > button .button-icon + .button-title {
  margin-left: 4px !important;
}


/* resize the tab */
#tabs-tabbar-container:is(.left, .right) .tab-position {
  transition: width .15s ease-in-out .3s !important;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .tab-position {
  width: 30px;
  transition: width .25s ease-in-out .1s !important;
}



/* resize pinned tabs separator */
#tabs-tabbar-container:is(.left, .right) .separator {
  transition: width .25s ease-in-out .3s !important;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .separator {
  width: 30px;
  transition: width .25s ease-in-out .1s !important;
}



/* shift accordion toggle arrow */
#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .tab-position.accordion-toggle-arrow {
  width: 25px;
  transition: width .25s ease-in-out .1s !important;
}



/* shift stack counter */
#tabs-tabbar-container:is(.left, .right) .stack-counter {
  position: fixed;
  left: calc(var(--Width) - 25px);
  top: 7px;
  transition: all .25s ease-in-out .3s !important;
  transition-property: left, top;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) .stack-counter {
  left: 6px;
  top: 25px;
  transition: all .25s ease-in-out .1s !important;
}

.color-behind-tabs-off .tab-position .tab.active .stack-counter {
  background-color: var(--colorAccentBg) !important;
}



/* adjust sync and trash container  */
#tabs-tabbar-container:is(.left, .right) .sync-and-trash-container {
  margin: inherit;
  width: 30px;
}

#tabs-tabbar-container.right .sync-and-trash-container {
  transform: translateX(calc(100cqw - 100%));
  transition: all .25s ease-in-out .25s !important;
}

#tabs-tabbar-container.right:not(:focus-within):not(:hover) .sync-and-trash-container {
  transform: translateX(0);
  transition: all .25s ease-in-out .05s !important;
}

sydprox

@barkocak Works perfect on Win 11, Vivaldi Snapshot 6.3.3134.3.

FAlves

@barkocak works fine on Win 10, but do not work on ChromeOS.

SallyK

@barkocak

Unfortunately, something in the switch to 6.4 seems to have broken this mod for me - the icons still appear at the side, but the tab bar no longer moves out. Something is happening on hover, though, because the thumbnail of the tab still appears, you just can't access the actual tab. (I'm using Vivaldi on Linux Mint, and including the extra entry to move the sync and trash container to be vertical.)

barkocak

here's an updated version of my edit. tested on mac with vivaldi 6.5.3206.48. should work with workspaces and tabs on left/right. hope it fixes all issues.

/*
Automate Floating Vertical Tabbar for Mouse & Keyboard by dude99 (hotfix by barkocak)
Option B: Minimize tabbar into favicon
https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard
*/
.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)) {
  position: absolute;
  height: -webkit-fill-available !important;
  box-shadow: #0008 0 0 2px, rgb(0 0 0 / 25%) 0px 3px 6px;
  clip-path: inset(0 calc(100% * -1) 0 calc(100% * -1));
  transition: .25s ease-out .3s !important;
  --HoverWidth: calc(100%);
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.left) {
  left: 0;
  z-index: 1;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right) {
  right: 0;
}

#panels-container.left~div>#tabs-tabbar-container.left {
  left: unset;
}

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

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.left):not(:focus-within):not(:hover) {
  will-change: clip-path;
  clip-path: inset(0% calc(100% - 30px) 0% 0%);
  transition: .25s ease-out .1s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right):not(:focus-within):not(:hover) {
  will-change: transform;
  transform: translateX(calc(100% - 30px));
  transition: .25s ease-out .1s !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;
}





/* OPTIONAL FEATURES */

#tabs-tabbar-container {
  container-type: size;
}


/* adjust newtab button */
.inner>.tabbar-wrapper:has(#tabs-tabbar-container.left) .newtab {
  left: 0 !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right) .newtab {
  left: calc(100cqw - 100%) !important;
  transition: .25s ease-in-out .3s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right):not(:focus-within):not(:hover) .newtab {
  left: 0 !important;
  transition: .25s ease-in-out .1s !important;
}




/* adjust workspaces and inner text */
:is(.tabs-left, .tabs-right) .button-toolbar.workspace-popup.tabbar-workspace-button button {
  padding: 0 2px !important;
}

.button-toolbar > button .button-icon + .button-title {
  margin-left: 4px !important;
}




/* resize tabs */
.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)) .resize {
  width: 100% !important;
  transition: width .25s ease-in-out .3s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)):not(:focus-within):not(:hover) .resize {
  width: 30px !important;
  transition: width .25s ease-in-out .1s !important;
}




/* shift stack counter */
.color-behind-tabs-off .tab-position .tab.active .stack-counter {
  background-color: var(--colorAccentBg) !important;
}

#tabs-tabbar-container:is(.left, .right) .stack-counter {
  display: block !important;
  position: fixed;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)) .stack-counter {
  left: calc(var(--HoverWidth) - 25px);
  top: 7px;
  transition: all .25s ease-in-out .3s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container:is(.left, .right)):not(:focus-within):not(:hover) .stack-counter {
  left: 5px;
  top: 25px;
  min-width: 20px;
  transition: all .25s ease-in-out .1s !important;
}




/* adjust sync and trash container  */
#tabs-tabbar-container:is(.left, .right) .sync-and-trash-container {
  margin: inherit;
  width: 30px;
  flex-direction: unset !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right) .sync-and-trash-container {
  transform: translateX(calc(100cqw - 100%));
  transition: all .25s ease-in-out .3s !important;
}

.inner>.tabbar-wrapper:has(#tabs-tabbar-container.right):not(:focus-within):not(:hover) .sync-and-trash-container {
  transform: translateX(0);
  transition: all .25s ease-in-out .1s !important;
}

CraigPD

This post is deleted!

xmdvic

@barkocak Thanks. Works smoothly on Win 10, Vivaldi 6.5.3206.53 (Stable channel) （64 bit）

Automate Floating Vertical Tabbar for Mouse & Keyboard

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊