Automate Floating Vertical Tabbar for Mouse & Keyboard
-
@memeds Try adjust the
top
&z-index
values according to your setup. Please read the ReadMe section carefully, it will help you to tweak this mod properly.top
value control where the tabbar start at the top,1px
at the top of the window,25px
is below the Titlebar;59px
is below the Addressbar according to default setup. You can play with it until it fit your setup.z-index
control the depth of the tabbar, if you want it to cover everything then try99999
. LOL
EDIT: I have updated the code a bit, increase allz-index
to9
. -
@dude99 Hello, I've tried out the updated code and adjusted my top values (using option B here). I've managed to get it to line up with the titlebar at
29px
on 1080p and it works well however the gap still exists. Somewhat satisfied though, since the gap isn't as large as it was before.
Edit: I've also adjusted the bottom value to bring the sync cloud and trash back at
20px
, although there's an annoying line.
-
I've adjusted this, here is the extra code I added:
#browser:not(.fullscreen).tabs-left #main { margin-left: 0px; border-left: 80px; } #tabs-tabbar-container.left, #tabs-tabbar-container.right { margin-top: 18px; } .button-toolbar.newtab { transform: translateX(-44px); } #tabs-tabbar-container.left:not(:focus-within):not(:hover) { clip-path:inset(0% calc(100% - /* Adjust this: */80px) 0% 0%); transition: .15s ease-out .5s !important;} #webview-container { padding-left: /* Also adjust this */80px; }
It makes the hidden tabs 80px wide instead of just the favicons, moves the new tab button to the left so it can be seen even with tabs collapsed, and fixes some overlap problems - maybe it would help @memeds?
Edit: this goes along with my mod here.
Later I removed the transform: translateX and used this:.button-toolbar.newtab{ left: 10px !important; }
I also had to adjust the sync and trash, and added this to make them show within the 80px condensed tab bar:
.sync-and-trash-container { margin-left: 5px; }
And removed an overlap problem when the window was under 800px, and thus uncondensed:
@media screen and (max-width: /* Adjust this number */ 800px) { div#tabs-tabbar-container { top: 40px !important; } }
-
updated for v3.8,
-
remove background color, cuz dev have fixed the problem.
-
restore classic tabbar outline & proper shadow, which removed by dev since v3.8.
-
fix newtab button position.
-
no support for transparent tabbar & speeddial background overlay, but you can kinda remedy this with Vibrant transparent tabbar CSS mod
-
-
Chain Commands tutorial for those who want to be able to Close active tab & switch to above/below tab with visual hint: Close Tab & Switch to Above/Below Tab for Automate Vertical Tabbar
-
One thing I'm finding surprisingly frustrating is the tabbar autohiding when I click and hold a tab. For instance when I click and hold a tab to move it to a new position, and the tab bar closes before I can place it.
I little less annoying, but still annoying, is when it autohides after I right click a tab.
Can anything be done to fix that?
-
@rock5 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
the tabbar autohiding when I click and hold a tab. For instance when I click and hold a tab to move it to a new position, and the tab bar closes before I can place it.
Which version u r using? A, B or C? Last I tested it doesn't behave this way, but that's many months ago...
I little less annoying, but still annoying, is when it autohides after I right click a tab.
Me too, but unfortunately it's a limitation of CSS & the way Vivaldi build it's context menu, unlike the bookmark bar & panels when context menu appear it will still remain "on focus". Nothing I can do about it, & I'm not sure if we can fix this with JS either.
-
@dude99 I'm using A.
-
@rock5 I tested the code version A again, & it doesn't seems to have premature autohide problem during drag & drop tab. It looks something like this:
So, are u using any other mod that's affecting the Tabbar?
Maybe try disabled all other CSS mod & test with just this mod?
Have u alter the code? -
@dude99 I tried removing all css except the Tabbar css and I still have the js mod installed. I also tried disabling all extensions. It still does it.
How do you create those animated gifs anyway?
-
I still have the js mod installed
Does it affect the tabbar in anyway? If it does, then try disabled it too. You can try using this tool to manage JS, it will be much easier to reinstall all JS after each update with it: https://forum.vivaldi.net/post/241847
Also, does the panel have this problem too when u drag & drop stuff inside the panel?
Also, try drag & drop item inside the statusbar while holding SHIFT key, see if it's also have similar problem...
Are u using other software that might manipulating the cursor's focus, like Autohotkey or X-Mouse?
what's OS u r using again?
How do you create those animated gifs anyway?
-
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
Does it affect the tabbar in anyway? If it does, then try disabled it too.
Actually, it looks like custom.js was deleted when Vivaldi updated to 4.2.
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
You can try using this tool to manage JS
I'll try that now and reinstall the other css to do those other tests you mentioned.
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
Are u using other software that might manipulating the cursor's focus, like Autohotkey or X-Mouse?
I am using Autohotkey but that it set up to activate only on certain application but I tried to disable it anyway. It still happens.
I'm also using a program called Actual Window Manager that does a lot of things and might affect the mouse. I disabled that but it still happens.
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
what's OS u r using again?
Windows 10.
What do you use to make those animated gifs again?
-
@rock5 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
What do you use to make those animated gifs again?
-
@dude99
I may have spoken too soon. After posting, I restarted Vivaldi and now it seems to work. I restarted AWM and it does it again. I tried putting Vivaldi as an exception to AWM but it's still doing it. I'll have to look into it more. -
@rock5 some apps will install hooks into Vivaldi process to manipulate it, & it will affecting V for the entire session. So u might need to restart both V & the app after you blacklisted V.
-
@dude99 I've been restarting Vivaldi after everything I tried. I even disabled every mouse feature in AWM hoping that would work but no luck. I'm not sure what else to try. I might have a break and think about it. Thanks for your help so far.
-
@dude99 said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
Also, does the panel have this problem too when u drag & drop stuff inside the panel?
Also, try drag & drop item inside the statusbar while holding SHIFT key, see if it's also have similar problem...
Now that I have them installed again, they both seem to work correctly.
-
This post is deleted! -
@dude99 anyway to change the tab bar container height when status bar is switched from overlay to shown mode as currently the tab bar and status bar coincide with each other and tho status bar is at top it still looks really weird
-
@nish7009 raise the tabbar to made space for static Statusbar by alter
bottom:0
tobottom: 20px
. If you want tabbar to alter it's bottom based on statusbar mode, then u need to use JS for that.I can't code JS so u need to open a new topic & request someone else to do it for u.