@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 this div, 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.
