Automate Floating Vertical Tabbar for Mouse & Keyboard
-
@dude99 It was there but I have no idea why it doesn't apply. seems like :has doesn't really work. any ideas how to debug that?
-
@iamkarlson Oh I see. Pls follow ReadME instruction no.1 to enabled the experimental flag.
:has()
is still an experimental feature. -
-
-
@dude99 Hey I got new two bugs I encountered
First one is, if I close a tab with ctrl + w keyboard shortcut or
Click the link in mail or
Close tab with mouse gesture
Second one, tab's background color not working with transparent theme.
-
Sorry guys, it seems they have kinda fixed the previous
position: absolute
bug but then introduce another bug. So far I can't figure out any way to work around that, so I have to resort toposition: fixed
solution for now...OP code have updated again. The default setup is mainbar on top & overlay/hidden statusbar, here are some optional code that cover other common setup, just paste 'em at the very bottom to cover these state:
/* no toolbar on top */ :not(.address-top):not(.bookmark-bar-top) #tabs-tabbar-container:is(.left, .right) {top: 25px;} /* addressbar & bookmarkbar on top */ .address-top.bookmark-bar-top #tabs-tabbar-container:is(.left, .right) {top: 88px;} /* static statusbar at bottom */ #browser:has(footer > .toolbar-statusbar) {bottom: 24px;}
-
@arcsnim missing tabbar's background color is not a bug, cuz the default transparent tabbar doesn't have any Accent background color at all (cuz v team never support it for whatever reason).
LOL
To add accent color back into transparent background, try this CSS mod: https://forum.vivaldi.net/post/475328
I build that long time ago when they revamp the tabbar, so I'm not sure if it's still working properly. Let me know if it's bork...
-
minor update: v5.4:
-
Tabbar's top position for version B & C will now honor all top toolbars' setup/height, finally we won't need to fiddle with
top
value anymore - even withposition: fixed
! -
unfortunately tabbar's bottom still require
margin-bottom
hack to make space for Statusbar & Footer.Not sure if it's a bug or what...it's not a bug, cuz fixed position element usually use viewport's bottom when height is not set tounset
orauto
.
-
-
Hi! First of all, thank you so much for this CSS, you're doing an amazing job. But if you can, I need some help with a bug(ish)
My tab bar is located on the left and its working, but if I hover any other screen border (right, top, bottom) it slides in the tab bar too
Can I make it to show up only when I hover the bar on left -
@FellSanches This is the unfortunate side effect of the last section code
/* experimental: pin tabbar while mouseover stacked thumbnail & context menu */
, as it's title said it's experimental code & very very much unfinished by me since long long time ago... LOLIf it bother you too much, then you can remove it, but then the tabbar will hide itself when you right click on it for context menu; or mouseover the stacked tabs' thumbnails.
Nerdy explanation:
This experimental code are made to overcome Vivaldi's flawed behavior of not kept focus on last active element during context menu event (with exception to the panel & horizontal menubar), they hardcoded this behavior with js/react so I can't fix it with CSS alone. Then they also move the stacked tabs' popup thumbnails into another top level DIV outside of the tabbar, thus when we mouseover the popup thumbnails, it count as a mouseout event for tabbar.
So, maybe I will try finish this experimental code later, if only I could find the will to do so in the future. LOL -
I'm using this CSS that first there on the first page but the email is with this ribbon is there any mod update that fixes this?
If so, could you post the full mod code ?
-
@lucianof Are u using the lastest code posted in the OP? Last update is august 17th 2022.
which version of the code you are using? A B or C?
what is your tabbar position? Left or Right?
which version of Vivaldi you are using? stable or snapshot?
-
where can i find that last code? is it on the first page ?
which version of the code you are using? A B or C?
B#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. .icons ~ div > #tabs-tabbar-container.left {left:35px;} #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;}
vivaldi 5.4.2753.51 (Stable channel) (64 bit)
Aligned left.
this problem only happens with Vivaldi email.
-
@lucianof here is a temporary fix, replace the 4th line
#panels-container.left.icons ~ div > #tabs-tabbar-container.left {left:35px;}
with#panels-container.left ~ div > #tabs-tabbar-container.left {left: unset;}
This is not the best solution, but that's what I can came up with for now... LOL
I notice there are some error in the code you posted in your last post, I suggest you should copy & paste the code from the OP again, I have already updated the code B.
-
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 -
@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.
-
Hmm I understand.
I changed the tabs panel to the right, it was great.
Much obliged.
and congratulations for the excellent work. -
@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?
-
@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?
-
It seems I figured it out myself. But not sure which is correct. But it works!
-
@Zmiter25 remove all
transition: something something something !important;
will eliminate all sliding animation & delay.or you can simple set all transition values to
0s
-
@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;}