Automate Floating Vertical Tabbar for Mouse & Keyboard

snakedoc

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.

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...

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 ◊