Automate Floating Vertical Tabbar for Mouse & Keyboard
-
this just gives me a dark sidebar beside my tab bar :c
-
First of all, congratz for this mod, its really usefull!! this make me fully migrate from edge to vivaldi!
BUT, always have a but LOL....
doesn't work well for me, I have a few strange behaviours like:
Dont crop to exact size of favicon
I use workspaces and doesn't work well
it's weird to use left panel, I have to positionate my mouse at specific point to open the panel or the tabbar.My only two modds at this momment is this one with this code:
/* https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard/52?lang=pt-BR */ #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% - 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;}
and the 2-layers from you
/* https://forum.vivaldi.net/topic/83079/automate-2-level-tab-stack-columns-v3?lang=pt-BR */ /* Automate 2 level vertical tabbar columns */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > div {z-index: 1; transition: background-color .15s, flex-basis .12s ease-out .05s !important;} /* active main column */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container:is(:focus-within, :hover):not(:has(.SlideBar--FullHeight:active)) + #tabs-subcontainer {flex-basis: 30px !important; z-index: 0;} /* active sub column */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-subcontainer:is(:focus-within, :hover) {flex-basis: calc(100% - 64px) !important; z-index: 3;} /* active sub column with small width tabbar */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right):is(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:is(:focus-within, :hover) {flex-basis: calc(100% - 30px) !important; z-index: 3;} /* inactive tabbar columns' ratio during small width (minimized sub column to favicon) */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:not(:focus-within, :hover) {flex-basis: 30px !important;} /* fix small tab hover effect for title, stack counter, & close button */ #tabs-container .tab.tab-small.tab-mini .tab-header {justify-content: unset; padding-left: 5px;} #tabs-container .tab.tab-small.tab-mini .tab-header .title {display: flex;} #browser:not(.alt-tabs).substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:hover.tab:not(.button-off, .force-hover, .tab-small) .stack-counter, .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:not(.tab-mini) .stack-counter {display: block; margin-left: -6px;} .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position :is(.tab:hover.tab-small, .tab.force-hover.tab-small) .close {display: flex; margin-left: -3px;} /* autohide inactive columns' scrollbar */ #tabs-tabbar-container > div.overflow:not(:focus-within):not(:hover) .tab-strip {overflow-y: hidden;}
Can you help me to adjust those css to work with right panel (static), right tab bar (collapsed), 2 level of folders ?
Thanks for the help and congratz again.
-
@Fernaand said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
First of all, congratz for this mod, its really usefull!! this make me fully migrate from edge to vivaldi!
BUT, always have a but LOL....
doesn't work well for me, I have a few strange behaviours like:
Dont crop to exact size of favicon
I use workspaces and doesn't work well
it's weird to use left panel, I have to positionate my mouse at specific point to open the panel or the tabbar.My only two modds at this momment is this one with this code:
/* https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard/52?lang=pt-BR */ #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% - 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;}
and the 2-layers from you
/* https://forum.vivaldi.net/topic/83079/automate-2-level-tab-stack-columns-v3?lang=pt-BR */ /* Automate 2 level vertical tabbar columns */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > div {z-index: 1; transition: background-color .15s, flex-basis .12s ease-out .05s !important;} /* active main column */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container:is(:focus-within, :hover):not(:has(.SlideBar--FullHeight:active)) + #tabs-subcontainer {flex-basis: 30px !important; z-index: 0;} /* active sub column */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-subcontainer:is(:focus-within, :hover) {flex-basis: calc(100% - 64px) !important; z-index: 3;} /* active sub column with small width tabbar */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right):is(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:is(:focus-within, :hover) {flex-basis: calc(100% - 30px) !important; z-index: 3;} /* inactive tabbar columns' ratio during small width (minimized sub column to favicon) */ .substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:not(:focus-within, :hover) {flex-basis: 30px !important;} /* fix small tab hover effect for title, stack counter, & close button */ #tabs-container .tab.tab-small.tab-mini .tab-header {justify-content: unset; padding-left: 5px;} #tabs-container .tab.tab-small.tab-mini .tab-header .title {display: flex;} #browser:not(.alt-tabs).substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:hover.tab:not(.button-off, .force-hover, .tab-small) .stack-counter, .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:not(.tab-mini) .stack-counter {display: block; margin-left: -6px;} .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position :is(.tab:hover.tab-small, .tab.force-hover.tab-small) .close {display: flex; margin-left: -3px;} /* autohide inactive columns' scrollbar */ #tabs-tabbar-container > div.overflow:not(:focus-within):not(:hover) .tab-strip {overflow-y: hidden;}
Can you help me to adjust those css to work with right panel (static), right tab bar (collapsed), 2 level of folders ?
Thanks for the help and congratz again.
I did some adjustments to collapse the workspaces and to shiftdown the tabbarea and preserve the worskpace button.
Also add a HUGE url space.
/* https://forum.vivaldi.net/topic/46458/automate-floating-vertical-tabbar-for-mouse-keyboard/52?lang=pt-BR */ .UrlBar-UrlFieldWrapper { width: 1600px !important; text-align: center; } .UrlField { width: 100% !important; text-align: center; } .tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button, .tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button{ z-index: 9 !important; } .button-toolbar.workspace-popup.tabbar-workspace-button:not(:focus-within):not(:hover) { will-change: clip-path; clip-path:inset(0% calc(100% - 28px) 0% 0%); transition: .15s ease-out .5s !important; } /*.button-toolbar.workspace-popup.tabbar-workspace-button {left:0; z-index:1;} .button-toolbar.workspace-popup.tabbar-workspace-button ~ div > #tabs-tabbar-container.left {left: 35px;} */ #tabs-container { top: 30px !important; } #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: 35px;} #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% - 28px) 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: 35px !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;} /* focus floating container on top #panels-container:is(:hover, :focus-within), #tabs-tabbar-container:is(:hover, :focus-within), .UrlBar:is(:hover, :focus-within) {z-index:99 !important;}*/
-
This post is deleted! -
@barkocak said in Automate Floating Vertical Tabbar for Mouse & Keyboard:
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.
workspace working great. Can u do one for option A?
-
I've done a rewrite of my current mod that keeps the tab bar completely hidden and only shows it when I flick my mouse over the main bar, so be wary of that. I also took some time and adapted it to work with the workspace switcher, just to see if I could do it.
Note that all of this is based on "borrowed" code from this thread, and I didn't keep track of what I "borrowed", what I modified and what I wrote from scratch.
:root { --tabbarHoveroutTimeout: .5s } /*----- Scrollbar -----*/ /* Wider scrollbar */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar { --scrollbarWidth: 18px !important; padding: 0 2px !important; } /* No buttons */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button { display: none !important; } /* Scrollbar rounding */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb { border: 3px solid transparent !important; border-radius: 8px !important; } /*----- Vertical Tabbar -----*/ /* z-index */ #browser.tabs-left .tabbar-wrapper, #browser.tabs-right .tabbar-wrapper { z-index: 1; } /* hover out timeout */ #tabs-tabbar-container:is(.left, .right) { transition: clip-path 0s var(--tabbarHoveroutTimeout) !important; } /* Right side tab bar fixes */ #tabs-tabbar-container:is(.right) { right: 0; position: fixed; height: -webkit-fill-available !important; } /* Remove reserved tab bar space */ #main > .inner > div:has(#tabs-tabbar-container.left) { width: 0px !important; } /* Resize the tab bar to 0px width when not in use */ #tabs-tabbar-container.left { clip-path: inset(0 100% 0 0); } #tabs-tabbar-container.right { clip-path: inset(0 0 0 100%); } /* Show tab bar on inactive windows when moving tabs */ #browser.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) #tabs-tabbar-container.left { clip-path: initial; } #browser.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) #tabs-tabbar-container.right { clip-path: initial; } /* Show tab bar when hovering on main bar and prevent tab bar hiding when in use */ #browser:where(:has(.mainbar:is(:hover))) #tabs-tabbar-container:is(.left, .right), #tabs-tabbar-container:is(.left, .right):is(:hover, :focus-within) { clip-path: inset(0 -40px 0 -40px); transition: clip-path 0s !important; } /* Move new tab icon to the left for left side tab bar */ #tabs-tabbar-container:is(.left) .button-toolbar.newtab { left: 0px !important; } /* Add background color for transparent tab bar */ #browser.transparent-tabbar #tabs-tabbar-container:is(.left, .right) { background-color: var(--colorBgAlpha) !important; } #browser.transparent-tabbar:is(.tabs-left.color-behind-tabs-on, .tabs-right.color-behind-tabs-on) #tabs-tabbar-container:is(.left, .right) { background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important; } /*----- Workspace switcher -----*/ /*--- Left tab bar ---*/ /* hover out timeout */ #browser.tabs-left .tabbar-workspace-button { transition: clip-path 0s var(--tabbarHoveroutTimeout) !important; } /* Hide by default */ #browser.tabs-left .tabbar-workspace-button { clip-path: inset(0 100% 0 0); } /* Show with tab bar */ #browser.tabs-left:where(:has(.mainbar:is(:hover)), :has(#tabs-tabbar-container:is(.left):is(:hover, :focus-within))) .tabbar-workspace-button, #browser.tabs-left .tabbar-workspace-button:is(:hover, :focus-within), #browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-workspace-button { clip-path: inset(0 0 0 0); transition: clip-path 0s !important; } /* Don't hide tab bar when using workspace selector */ #browser:where(:has(.tabbar-workspace-button:is(:hover, :focus-within))) #tabs-tabbar-container:is(.left) { clip-path: inset(0 -40px 0 -40px); transition: clip-path 0s !important; } /* Add background color for transparent tab bar */ #browser.transparent-tabbar.tabs-left .tabbar-workspace-button { background-color: var(--colorBgAlpha) !important; } #browser.transparent-tabbar.tabs-left.color-behind-tabs-on .tabbar-workspace-button { background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important; } /*--- Right tab bar ---*/ /* z-index behind sidebar and hover out timeout */ #browser.tabs-right .tabbar-workspace-button { z-index: 2; transition: clip-path 0s var(--tabbarHoveroutTimeout) !important; } /* Hide by default */ #browser.tabs-right .tabbar-workspace-button { clip-path: inset(0 100% 0 0); right: 0; } #browser.tabs-right .tabbar-workspace-button:not(:focus-within) { position: fixed; } /* Show with tab bar */ #browser.tabs-right:where(:has(.mainbar:is(:hover)), :has(#tabs-tabbar-container:is(.right):is(:hover, :focus-within))) .tabbar-workspace-button, #browser.tabs-right .tabbar-workspace-button:is(:hover, :focus-within), #browser.tabs-right.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-workspace-button { clip-path: inset(0 0 0 0); transition: clip-path 0s !important; } /* Add padding for selector */ #browser:where(:has(.tabbar-workspace-button)) #tabs-tabbar-container:is(.right) { padding-top: 40px; } /* Don't hide tab bar when using workspace selector */ #browser:where(:has(.tabbar-workspace-button:is(:hover, :focus-within))) #tabs-tabbar-container:is(.right) { clip-path: inset(0 -40px 0 -40px); transition: clip-path 0s !important; } /* Add background color for transparent tab bar */ #browser.transparent-tabbar.tabs-right .tabbar-workspace-button { background-color: var(--colorBgAlpha) !important; } #browser.transparent-tabbar.tabs-right.color-behind-tabs-on .tabbar-workspace-button { background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important; }
Things of note:
-the implementation of the workspace switcher with the right side tab bar is a bit wonky (as is everything related to it) and I didn't put too much effort into it since I use the left side switcher
-the 40px inset margin is there for the tab bar buttons on the side CSS mod that should be available somewhere on the forum
-the tabbarHoverTimeout is there to adjust for how long the tab bar is meant to linger once it's no longer in focus, so if it disappears too fast, just adjust that
-it's fully compatible with the automated two stack tab bar mod, since they don't collide with each other in any way
-it has zero animations because it's meant to be quick and practical
-it was done for 100% 1080p scaling so there's a possibility it won't scale on higher DPI's well
-if you wish, you could modify it to always show a bit of it on the left by adding back some reserved tab bar space and then changing the 100% values in all the inset clip-paths tocalc(100% - ?px)
, with ? being the width you wish to dedicate for the tab bar. You can modify it however you like to suit your needs, that's the whole idea of it isn't it? -
@supra107 Heyo! currently trying to use this but it seems to not allow me to open the workspace switcher. Just quickly opens and closes before I can even make out my workspaces. Would love a fix, I tried to poke around but css is foreign to me ahh
-
@drabspirit In an attempt to fix this one odd issue, I ended up rewriting the entire mod to be more elegant.
:root { --tabbarHoveroutTimeout: .5s } /*----- Scrollbar -----*/ /* Wider scrollbar */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar { --scrollbarWidth: 18px !important; padding: 0 2px !important; } /* No buttons */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button { display: none !important; } /* Scrollbar rounding */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb { border: 3px solid transparent !important; border-radius: 8px !important; } /*----- Vertical Tabbar -----*/ /* Set z-index and hide when not in use */ #browser.tabs-left .tabbar-wrapper, #browser.tabs-right .tabbar-wrapper { z-index: 1; position: absolute; clip-path: inset(0 100% 0 0); transition: clip-path 0s var(--tabbarHoveroutTimeout) !important; } /* Right side tab bar fix */ #browser.tabs-right .tabbar-wrapper { right: 0; } /* Show tab bar on inactive windows when moving tabs */ #browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper { clip-path: initial; } /* Show tab bar when hovering on main bar and prevent tab bar hiding when in use */ #browser:is(.tabs-left, .tabs-right):where(:has(.mainbar:is(:hover))) .tabbar-wrapper, #browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:is(:hover, :focus-within) { clip-path: inset(0 -400px 0 -400px); transition: clip-path 0s !important; } /* Add background color for transparent tab bar */ #browser.transparent-tabbar #tabs-tabbar-container:is(.left, .right) { background-color: var(--colorBgAlpha) !important; } #browser.transparent-tabbar:is(.tabs-left.color-behind-tabs-on, .tabs-right.color-behind-tabs-on) #tabs-tabbar-container:is(.left, .right) { background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important; } /*----- Workspace switcher -----*/ /* Add background color for transparent tab bar */ #browser.transparent-tabbar.tabs-left .tabbar-workspace-button, #browser.transparent-tabbar.tabs-right .tabbar-workspace-button { background-color: var(--colorBgAlpha) !important; } #browser.transparent-tabbar.tabs-left.color-behind-tabs-on .tabbar-workspace-button { background-color: color-mix(in srgb, var(--colorAccentBg) 80%, var(--colorAccentBgAlpha)) !important; } /* Don't hide tab bar when using workspace selector */ #browser.tabs-left:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper, #browser.tabs-right:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper { clip-path: inset(0 -400px 0 -400px); transition: clip-path 0s !important; }
Somewhere between me posting the previous mod and now I've edited it so that it would
clip-path
the wrapper for the transparent tab bar blur, and while trying to diagnose why Vivaldi v6.7 doesn't respect the:hover. :focus-within
for the workspace switcher, I realized something I should've realized long ago.The way Vivaldi deals with the workspace switcher in the vertical tab bar is that it adds a new
div
right before the one for the tabs, but both of those are in the.tabbar-wrapper
element I've been crudely working with just to add the backdrop. But everything is in thisdiv
, so why not just target that?This is the result. A much shorter, cleaner and more reliable CSS mod. It now targets the
div
that contains all the tab bar elements, and it works reliably on all elements within it. No more weird hacks for the tab bar whether it's on the left or right side, or weird hacks for the workspace selector. The only addition for the workspace selector that I had to add was to add the bit at the very end, so that it keeps the tab bar visible when the selector popup is present.Note that the -400px
clip-path
isn't the cleanest value for it, but I chose it and it works. At 100% scaling, the maximum width the vertical tab bar can get to is 330px. Clipping.tabbar-wrapper
also means clipping the external tab bar buttons that another CSS mod adds, so I gave it the margin of 400px to take that into account. It works fine and the browser only cares if you hover within the elements contained within.tabbar-wrapper
and not any invisible margins so it works just fine. -
@supra107 Wow ty! Works amazingly, ended up adding 'VivalArc' to my setup and it works perfectly with it too so seems like you did a perfect job
-
Does this still work in version latest version? (6.7.3329.41)
-
@supra107 I modified this code somewhat to bring panel hiding closer to the Arc browser.
But it only works properly if the vertical panel is on the left edge.
What was done- changed the code to show tab bar when hovering on left edge
- added animation for beauty and aesthetics.
- made a slightly thinner scrollbar
Working on 6.8 version for me.
:root { --tabbarHoveroutTimeout: .5s } /*----- Scrollbar -----*/ /* Wider scrollbar */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar { --scrollbarWidth: 10px !important; border: 1px solid #9fb0cb !important; border-radius: 8px !important; padding: 0 2px !important; } /* No buttons */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button { display: none !important; } /* Scrollbar rounding */ #tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb { border: 2px solid transparent !important; border-radius: 8px !important; } /*----- Vertical Tabbar -----*/ /* Set z-index and hide when not in use */ #browser.tabs-left .tabbar-wrapper, #browser.tabs-right .tabbar-wrapper { z-index: 1; position: absolute; transform: translateX(calc(-100% + 3px)); opacity: 0; /*clip-path: inset(0 100% 0 0); */ transition: .1s ease-out .15s !important; --HoverWidth: calc(100%); } /* Right side tab bar fix */ #browser.tabs-right .tabbar-wrapper { right: 0; } /* Show tab bar on inactive windows when moving tabs */ #browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper { clip-path: initial; } #browser.tabs-left.isblurred:is(:active, :focus) .tabbar-wrapper:is(:active, :focus) { clip-path: initial; } /* Show tab bar when hovering on left edge and prevent tab bar hiding when in use */ /*#browser:is(.tabs-left, .tabs-right):where(:has(.mainbar:is(:hover))) .tabbar-wrapper,*/ #browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:is(:hover, :focus-within) { opacity: 1; transform: translateX(calc(0%)); /*clip-path: inset(0 100% 0 0); */ transition: .1s ease-out .15s !important; --HoverWidth: calc(100%); } } /* Don't hide tab bar when using workspace selector */ #browser.tabs-left:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper, #browser.tabs-right:where(:has(div.WorkspacePopup:is(:hover, :focus-within))) .tabbar-wrapper { clip-path: inset(0 -400px 0 -400px); transition: clip-path 0s !important; } #browser:not(.fullscreen) .mainbar > *, .mainbar .window-buttongroup.on-mainbar, .mainbar .window-buttongroup.on-mainbar > button{ min-height: 34px !important; max-height: 34px !important; height: 34px !important; scale: 1 !important; }
-
@R0STEFAN Great job, but the background is transparent when adding these code. can you help it out?
-
This post is deleted! -
@supra107 how can we do this with favicons showing?