Vivaldi Vertical Tabs, Collapse/Expand on Hover

vivaldi-vertical-tabs.css

:root {
    --tabbarCollapsedWidth: 42px;
    /* collapsed width */

    --tabbarExpandedWidth: 220px;
    /* expanded width */

    --tabbarHoverDuration: .12s;
    --tabbarHoverDelay: .25s;
}


/* =========================================================
   Reserve only the collapsed amount of space
   ========================================================= */

#browser:not(.fullscreen).tabs-left #main>.inner {
    padding-left: var(--tabbarCollapsedWidth);
    box-sizing: border-box;
}

#browser:not(.fullscreen).tabs-right #main>.inner {
    padding-right: var(--tabbarCollapsedWidth);
    box-sizing: border-box;
}


/* =========================================================
   Floating vertical tab bar
   ========================================================= */

#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper {
    position: absolute !important;

    top: 0;

    height: 100% !important;
    width: var(--tabbarCollapsedWidth) !important;

    z-index: 10;

    transition:
        width var(--tabbarHoverDuration) ease-out var(--tabbarHoverDelay) !important;


    /*
     * IMPORTANT
     *
     * The original snippet didn't paint the floating wrapper,
     * so the expanded portion was transparent over the webpage.
     */
    background-color: var(--colorBg) !important;
}


/* =========================================================
   Transparent-tabbar theme compatibility
   ========================================================= */

#browser.transparent-tabbar:is(.tabs-left, .tabs-right) .tabbar-wrapper {
    background-color: var(--colorImageFgHeaviest) !important;
}


/* =========================================================
   Anchor tab bar to its selected side
   ========================================================= */

#browser.tabs-left .tabbar-wrapper {
    left: 0;
}

#browser.tabs-right .tabbar-wrapper {
    right: 0;
}


/* =========================================================
   Make internal tab container fill wrapper
   ========================================================= */

#browser.tabs-left #tabs-tabbar-container.left,
#browser.tabs-right #tabs-tabbar-container.right {
    width: 100% !important;
}


/* =========================================================
   Expand on hover / keyboard focus
   ========================================================= */

#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:is(:hover, :focus-within),

#browser:has(.WorkspacePopup) .tabbar-wrapper,

#browser:has(#vivaldi-tooltip .tab-group) .tabbar-wrapper {

    width: var(--tabbarExpandedWidth) !important;

    transition:
        width var(--tabbarHoverDuration) ease-in 0s !important;
}


/* =========================================================
   Shadow while expanded — optional
   ========================================================= */

#browser.tabs-left .tabbar-wrapper:is(:hover, :focus-within) {
    box-shadow: 6px 0 16px rgba(0, 0, 0, 0.22);
}

#browser.tabs-right .tabbar-wrapper:is(:hover, :focus-within) {
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   Workspace button
   ========================================================= */

/* Collapsed */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:not(:is(:hover, :focus-within)) button[name="WorkspaceButton"]:is(.button-title, .button-toolbar-menu-indicator) {

    display: none !important;
}


/* Expanded */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:is(:hover, :focus-within) button[name="WorkspaceButton"]:is(.button-title, .button-toolbar-menu-indicator) {

    display: inherit !important;
}