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

@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?