Vivaldi collapsible vertical tabs

collapsible-tabs.css

/**
 * Based on: https://forum.vivaldi.net/topic/82900/collapsing-vertical-tabs-that-expand-on-hover-with-and-without-floating-tabs/58?lang=en-US&page=3
 */

#browser {
    --tabs-tabbar-container-width: 330px;
    --tabs-tabbar-container-minwidth: 32px;
}

.tabs-left .tabbar-wrapper .tabbar-wrapper,
.tabs-right .tabbar-wrapper:has(#tabs-tabbar-container),
/* keep tabs open when stacked tabs are shown */
#browser.tabs-left:has(#vivaldi-tooltip .tab-group) .tabbar-wrapper .tabbar-wrapper,
#browser.tabs-right:has(#vivaldi-tooltip .tab-group) .tabbar-wrapper:has(#tabs-tabbar-container)
/* keep tabs open when workspace popup is shown */
,#browser.tabs-left:has(.WorkspacePopup) .tabbar-wrapper .tabbar-wrapper:has(#tabs-tabbar-container)
,#browser.tabs-right:has(.WorkspacePopup) .tabbar-wrapper:has(#tabs-tabbar-container) {
    position: absolute !important;
    z-index: 2;
    opacity: 1;
    height: 100% !important;
    width: var(--tabs-tabbar-container-width) !important;
    transition: width 0.35s ease-out !important;
}

#tabs-tabbar-container,
.tabbar-workspace-button {
    width: 100% !important;
}

.tabs-right .tabbar-wrapper:has(#tabs-tabbar-container) {
    right: 0;
}

.tabs-left .tabbar-wrapper:has(#tabs-tabbar-container):not(:hover) .tabbar-wrapper,
.tabs-right .tabbar-wrapper:has(#tabs-tabbar-container):not(:hover) {
    width: var(--tabs-tabbar-container-minwidth) !important;
}

button[name="WorkspaceButton"] :is(.button-title, .button-toolbar-menu-indicator),
button[name="WorkspaceButton"] :is(.button-title, .button-toolbar-menu-indicator) {
    display: none;
}

#browser:has(.WorkspacePopup) button[name="WorkspaceButton"] :is(.button-title, .button-toolbar-menu-indicator),
#browser:has(#vivaldi-tooltip .tab-group) .tabbar-wrapper:has(#tabs-tabbar-container) button[name="WorkspaceButton"] :is(.button-title, .button-toolbar-menu-indicator),
#browser .tabbar-wrapper:has(#tabs-tabbar-container):has(:hover) button[name="WorkspaceButton"] :is(.button-title, .button-toolbar-menu-indicator){
    display: inherit !important;
}


#browser:not(.fullscreen).tabs-left #webview-container {margin-left:var(--tabs-tabbar-container-minwidth);}
#browser:not(.fullscreen).tabs-right #webview-container {margin-right:var(--tabs-tabbar-container-minwidth);}