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 to calc(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? 😉