Automate Floating Vertical Tabbar for Mouse & Keyboard

lucianof

If I understand correctly is the 3 line that should be changed ?

the whole code looks like this

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

see now how it turned out
got worse as the tabs panel is moved to the middle

FitamailVivaldi 2.png

dude99

@lucianof Just the 4th line. If you are unsure, then then replace the whole code with new one from the op, as I have updated the code B awhile ago.

From the pic, it seems exactly like what I intended. I decided to have the tabbar always stay on the inner column (regardless of the panel state) so that when you anchor/pin the panel (like during mail interface), you still can access the tabbar & switching tab via the tabbar.

lucianof

@dude99

Hmm I understand.

I changed the tabs panel to the right, it was great.

Much obliged.
and congratulations for the excellent work.

dude99

@lucianof I also have CSS mod to autohide the panel's switch (buttons): https://forum.vivaldi.net/post/378402, & it's best when combined with this JS mod: https://forum.vivaldi.net/post/607225

on a second look at the last pic you posted, I think the theme colors cause it to look really weird... LOL Maybe it won't look as "unintuitive" if I make the tabbar stay in the outer column instead?

Zmiter25

@dude99 Is there a way to remove the hide and show delay? I want that there would be no sliding animation. I want that as soon as I removed the cursor, the tabs would wrap without delay. Can you help me?

Zmiter25

It seems I figured it out myself. But not sure which is correct. But it works!

dude99

@Zmiter25 remove all transition: something something something !important; will eliminate all sliding animation & delay.

or you can simple set all transition values to 0s

Zmiter25

@dude99 Thanks for your work! And thanks for the help.

#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:3px; bottom:0; z-index:9; clip-path:inset(0 -50px 0 -50px); transition: .0s ease-out .0s !important;}
#tabs-tabbar-container.left {left:0;}
#tabs-tabbar-container.right {right:0;}

#tabs-tabbar-container.left:not(:focus-within):not(:hover) {clip-path:inset(0% calc(100% - 30px) 0% 0%); transition: .0s ease-out .1s !important;}
#tabs-tabbar-container.right:not(:focus-within):not(:hover) {transform: translateX(calc(100% - 30px)); transition: .0s ease-out .1s !important;}

Stormscion

Hi,

First thx for the awesome mod! This really surprised me.

I just have one question on macos on Vivaldi 5.5. I use option B on with vertical tabs (right side)
What i have noticed is that event to expand tabs is activated when i move over any window edge both left right but also bottom and top edge. I have vertical multi display setup so when i move mouse from bottom to the top it triggers the tabs animation. It's not a big deal but if it can be helped i would like to disable that, or maybe it is bug as i can see from the OP it should only trigger that on the left and right edge. Maybe something macos specific?

dude99

@Stormscion https://forum.vivaldi.net/post/611134

Stormscion

@dude99 Thanks

snakedoc

@dude99 Is it possible to make it not pop open when loosing focus on the window?

dude99

@snakedoc Pls read my last post.

snakedoc

@dude99 thanks

TheHighHorse

@dude99 First of all, thank you so much for you work on this, it's super useful for me, besides being aesthetically beautiful imo.

If I might dar to ask, would it be possible to make the tab bar have rounded borders? I don't want to give you extra work, as I don't know how much work this would be to do. If it's simple and you could instruct me i would be forever gratefulI, as it will also add to my overall css learning process (i'm a very project driven learner, even though i know close to no coding I love to research and learn). If it will be in any way a hassle for you, might i bother you to point me in the direction of what i should be using in the code to achieve that? That would already be a great help.

Thank you again for this mod, and also others i use that you coded as well.

dude99

@TheHighHorse rounded border control by border-radius. So search "CSS border-radius" for more info. Then, read the pinned topics in Modifications forum to learn how to inspect Vivaldi GUI with devtool to get the correct element's ID & classname.

Example:
left/right tabbar with all round corners:
#tabs-tabbar-container:is(.left, .right) {border-radius: 10px;}

left tabbar with inner (right side) round border:
#tabs-tabbar-container.left {border-radius: 0 10px 10px 0;}

right tabbar with inner (left side) round border:
#tabs-tabbar-container.right {border-radius: 10px 0 0 10px;}

Then, you can replace 10px with Vivaldi internal CSS value like var(--radius) (same value as Corner Rounding value you setup under Themes) or var(--radiusHalf) (Half of Corner Rounding value)...etc. You can get more internal CSS value via vivaldi://themecolors/

It will take a few weeks to learn the basic of CSS language before you can write something useful. It's not hard if you are into coding, but it will take some time & plenty of practice to get good with it. Just search for free tutorials & videos to learn at your own pace, don't pay for any tutorials - cuz you can learn CSS just fine with the free one.

Also, install Stylus extension & practice what you have learned everyday with real webpages. That's the quickest way to really learn new CSS syntax day by day. Remember, you don't actually know any CSS syntax until you can write them out from your memory & apply it in real webpages without any cheat sheet! LOL

TheHighHorse

@dude99 Thank you so much!!!!

I really appreciate the Stylus extension suggestion, that really helps.

Learning coding is a pet project, i try to dedicate some time to reading and learning the basics whenever I can. But what sticks the most is always what i can apply and see the effect.

I'll get right on it!

dude99

@TheHighHorse Just a note, most of the CSS code I share in modifications forum aren't written in formal/proper format, so if you plan to learn from those code, you should first feed 'em to beautify CSS code to reformat 'em into proper format.

The way I wrote those code as they are is because I'm a self-taught lazy bum, I never go through any professional CSS classes & don't intent to correct my faulty way - so pls don't code CSS like the way I did.

RealoFoxtrot

Good day.

Just wanting to report that a recent Vivaldi update has made it so that the sidebar no longer sits in it's "Bar" and moves in response to the Panel

dude99

@RealoFoxtrot Sorry, I won't be able to fix any of my CSS beyond v5.6, cuz I'm still stuck with win8.1. :

If anyone interested in adopt or fork this CSS mod please do so, you have my blessing. Many thanks in advance.

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 ◊

◊ More CSS Mod ◊