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);}

Does this work? And anyway to make it floating so that page content not move when it opens kr expands?

also can u plz share how to use this
I came here after searching for a while

Create a folder anywhere on your PC, call it something like Vivaldi Custom CSS.
Paste the code into a file named autohide.css (or any fitting name).

Go to vivaldi://experiments, enable Allow CSS modifications, then restart Vivaldi.

Go to vivaldi://settings/appearance/, find Custom UI Modifications, and set it to your folder from step one.
Restart Vivaldi again.

At the top of the CSS, adjust:
--tabs-tabbar-container-width: 330px;
--tabs-tabbar-container-minwidth: 32px;
to your liking — I use 200px and 35px.

@nautamat this does not work for me, unfortunately. would you please help me out?

I'm running the latest Vivaldi version 7.5.3735.62 (Stable channel) (64-Bit)

i created a folder in my own user directory: "C:\Users\User\Vivaldi Custom CSS"
i created a CSS file with the content from the OP inside that folder: "C:\Users\User\Vivaldi Custom CSS\Vertical Tabs.css"
i went to vivaldi:experiments and switched on the CSS modifications
i then restarted vivaldi
i went to vivaldi://settings/appearance and selected the created folder's path
i then restarted vivaldi once again

in order to understand the css (and to know that i've done everything correctly) i stripped down the CSS code to the first two lines (width and minwidth). then i changed the numbers (width = 200px and minwidth = 100px).

but that didn't work -- the tab bar can still be narrower than 100px and still wider than 200px

how can i ensure, that the css file is loaded in the first place and also that the css code is correct? where can i look up the UI's DOM as well as the css properties being used by the UI's DOM?

Any Help is much appreciated, thanks in advance to anybody who helps.

@s-abf

I did not change anything else on his .css file and it worked as intended. Be sure to restart! the browser after adjusting the minimum and maximum width to your liking.

Beyond this I do not understand the error you are facing, can you please provide screenshots?

@nautamat okay, i figured something out.

on the page vivaldi:vivaldi-data/css-mods/css there is a css import for each Custom CSS file:
@import url('name-of-my-css-file.css');

on the page vivaldi:vivaldi-data/css-mods/name-of-my-css-file.css there should be shown the source code of that css file
#browser { --tabs-tabbar-container-width: 200px; --tabs-tabbar-container-minwidth: 100px; }

the name of the css file must not contain whitespaces. otherwise it can't be loaded and an error page is shown (404 or so)

but the problem persists, screenshots are provided ...

i restarted several times like: closing vivaldi, waiting for the processes to be gone and starting vivaldi again. that should be restart, right?