Skip to content

Instantly share code, notes, and snippets.

@Felvesthe

Felvesthe/auto-hide-vertical-tabs.css

Created April 8, 2025 18:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Felvesthe/8a13560ed3135ab1fbec2b06a18402da to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Felvesthe/8a13560ed3135ab1fbec2b06a18402da to your computer and use it in GitHub Desktop.
Download ZIP
Custom CSS for Vivaldi Browser providing Arc Browser-like auto-hide functionality for vertical tabs.
Raw
auto-hide-vertical-tabs.css
/*
Custom CSS for Vivaldi Browser providing Arc Browser-like auto-hide functionality for vertical tabs.
Fully compatible with workspaces.
This customization was made and tested with the tab bar positioned on the left side of the screen,
but it should also work on the right side.
*/
:root {
--tabbar-transition: transform .2s ease-out, opacity .2s ease-out;
--scrollbar-width: 10px;
--scrollbar-border-color: #9fb0cb;
--tabbar-peek-width: 3px;
}
/*----- Scrollbar Styling -----*/
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {
padding: 0 2px !important;
width: var(--scrollbar-width) !important;
border: 1px solid var(--scrollbar-border-color) !important;
border-radius: 8px !important;
}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button {
display: none !important;
}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {
border: 2px solid transparent !important;
border-radius: 8px !important;
}
/*----- Vertical Tabbar Auto-Hide Behavior -----*/
/* Base hidden state for vertical tabbar */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper {
position: absolute;
transform: translateX(calc(-100% + var(--tabbar-peek-width)));
transition: var(--tabbar-transition) !important;
opacity: 0;
z-index: 1;
}
/* Right side positioning */
#browser.tabs-right .tabbar-wrapper {
right: 0;
transform: translateX(calc(100% - var(--tabbar-peek-width)));
}
/* Tab move functionality support */
#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper,
#browser.tabs-left.isblurred:is(:active, :focus) .tabbar-wrapper:is(:active, :focus) {
transform: translateX(0);
opacity: 1;
}
/* Show tabbar on hover */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:hover {
transform: translateX(0);
transition: var(--tabbar-transition) !important;
opacity: 1;
}
/* Show when mouse approaches edge of screen */
#browser:is(.tabs-left) .mainbar:hover + .tabbar-wrapper,
#browser:is(.tabs-right) .webpage:hover + .tabbar-wrapper {
transform: translateX(0);
transition: var(--tabbar-transition) !important;
opacity: 1;
}
/* Show when workspace popups are active */
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup:visible,
.workspace-popup:visible) .tabbar-wrapper {
transform: translateX(0);
transition: var(--tabbar-transition) !important;
opacity: 1;
}
/* Keep tab bar visible during workspace naming */
#browser:is(.tabs-left, .tabs-right):has(.quick-command-container.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(input[placeholder*="workspace"]) .tabbar-wrapper {
transform: translateX(0) !important;
transition: none !important;
opacity: 1 !important;
}
/* Hide on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
.quick-command-container.workspace-naming,
.workspace-naming,
input[placeholder="workspace"]:focus,
.WorkspacePopup:visible,
.workspace-popup:visible)) .tabbar-wrapper {
transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
transition: var(--tabbar-transition) !important;
opacity: 0 !important;
}
/* Fix right side hiding behavior on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
.quick-command-container.workspace-naming,
.workspace-naming,
input[placeholder="workspace"]:focus,
.WorkspacePopup:visible,
.workspace-popup:visible)) #browser.tabs-right .tabbar-wrapper {
transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
}
/* Additional reset mechanism for when tabs get stuck */
html:active:active .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
.workspace-naming,
input[placeholder="workspace"]:focus)) {
transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
opacity: 0 !important;
}
/* Additional reset for right side */
html:active:active #browser.tabs-right .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
.workspace-naming,
input[placeholder="workspace"]:focus)) {
transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
opacity: 0 !important;
}
@BaalEvan
Copy link

BaalEvan commented Oct 22, 2025 •
edited
Loading

Great Gist, unfortunately, there are issues with the tabs on the right. When closing a tab, everything shifts to the left by the size of the tab bar, making the tab bar visible.

Any hint on how to fix this would be greatly appreciated.

Here is "Fork" with my changes:

/*
    Custom CSS for Vivaldi Browser providing Arc Browser-like auto-hide functionality for vertical tabs.
    Fully compatible with workspaces.

    This customization was made and tested with the tab bar positioned on the left side of the screen,
    but it should also work on the right side.
*/

:root {
    --tabbar-transition: transform .2s ease-out, opacity .2s ease-out, background-color .2s ease-out, color .2s ease-out;
    --scrollbar-width: 10px;
    --scrollbar-border-color: #9fb0cb;
    --tabbar-peek-width: 32px;
    --backgroundBlur: blur(10px);
}

/*----- Scrollbar Styling -----*/

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {
    padding: 0 2px !important;
    width: var(--scrollbar-width) !important;
    border: 1px solid var(--scrollbar-border-color) !important;
    border-radius: 8px !important;
}

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button {
    display: none !important;
}

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 8px !important;
}

#app .tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button button,
#app .tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button button {
    /* height: 30px; */
    padding-left: 1px;
}

#browser .workspace-popup .button-icon:not(.audio) svg[width='16'],
#browser .WorkspacePopup .button-icon:not(.audio) svg[width='16'],
#browser .tabbar-workspace-button .button-icon:not(.audio) svg[width='16'],
#browser .workspace-popup .button-icon:not(:has(svg)):not(.audio),
#browser .WorkspacePopup .button-icon:not(:has(svg)):not(.audio),
#browser .tabbar-workspace-button .button-icon:not(:has(svg)):not(.audio) {
    margin: 0;
}

.tab {
    --colorBgAlphaHeavier: #ffffff11 !important;
}

/*----- Vertical Tabbar Auto-Hide Behavior -----*/

/* Base hidden state for vertical tabbar */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper {
    position: absolute;
    transform: translateX(calc(-100% + var(--tabbar-peek-width)));
    transition: var(--tabbar-transition) !important;
    opacity: 1;
    z-index: 1;
    background-color: #101010;

}

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

#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:hover .tab .title {
    color: white !important;
}


#browser .tab.active {
    background-color: var(--colorAccentBg) !important;
    color: var(--colorAccentFg) !important;
}

/* Right side positioning */
#browser.tabs-right .tabbar-wrapper {
    right: 0;
    /* transform: translateX(100); */
    /* transition-delay: 2s; */
    transform: translateX(calc(100% - var(--tabbar-peek-width)));
}

/* Tab move functionality support */
#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper,
#browser.tabs-left.isblurred:is(:active, :focus) .tabbar-wrapper:is(:active, :focus) {
    transform: translateX(0);
    opacity: 1;
    background-color: #00000033;

}

/* Show tabbar on hover */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:hover {
    transform: translateX(0);
    transition: var(--tabbar-transition) !important;
    opacity: 1;
    background-color: #00000033;

}

/* Show when mouse approaches edge of screen */
#browser:is(.tabs-left) .mainbar:hover+.tabbar-wrapper,
#browser:is(.tabs-right) .webpage:hover+.tabbar-wrapper {
    transform: translateX(0);
    transition: var(--tabbar-transition) !important;
    opacity: 1;
    background-color: #00000033;

}

/* Show when workspace popups are active */
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup:visible,
    .workspace-popup:visible) .tabbar-wrapper {
    transform: translateX(0);
    transition: var(--tabbar-transition) !important;
    opacity: 1;
    background-color: #00000033;

}

/* Keep tab bar visible during workspace naming */
#browser:is(.tabs-left, .tabs-right):has(.quick-command-container.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(input[placeholder*="workspace"]) .tabbar-wrapper {
    transform: translateX(0) !important;
    transition: none !important;
    opacity: 1 !important;
    background-color: #00000033;

}

/* Hide on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
        .quick-command-container.workspace-naming,
        .workspace-naming,
        input[placeholder="workspace"]:focus,
        .WorkspacePopup:visible,
        .workspace-popup:visible)) .tabbar-wrapper {
    transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
    transition: var(--tabbar-transition) !important;
    opacity: 0 !important;
}

/* Fix right side hiding behavior on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
        .quick-command-container.workspace-naming,
        .workspace-naming,
        input[placeholder="workspace"]:focus,
        .WorkspacePopup:visible,
        .workspace-popup:visible)) #browser.tabs-right .tabbar-wrapper {
    transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
}

/* Additional reset mechanism for when tabs get stuck */
html:active:active .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
        .workspace-naming,
        input[placeholder="workspace"]:focus)) {
    transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
    opacity: 0 !important;
}

/* Additional reset for right side */
html:active:active #browser.tabs-right .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
        .workspace-naming,
        input[placeholder="workspace"]:focus)) {
    transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
    opacity: 0 !important;
}```

@rainaku
Copy link

rainaku commented Dec 6, 2025 

/*
    Custom CSS for Vivaldi Browser providing Arc Browser-like auto-hide functionality for vertical tabs.
    Fully compatible with workspaces.
    This customization was made and tested with the tab bar positioned on the left side of the screen,
    but it should also work on the right side.
*/

:root {
    --tabbar-transition: transform .2s ease-out, opacity .2s ease-out;
    --scrollbar-width: 10px;
    --scrollbar-border-color: #9fb0cb;
    --tabbar-peek-width: 3px;
}

/*----- Scrollbar Styling -----*/

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {
    padding: 0 2px !important;
    width: var(--scrollbar-width) !important;
    border: 1px solid var(--scrollbar-border-color) !important;
    border-radius: 8px !important;
}

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button {
    display: none !important;
}

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 8px !important;
}

/*----- Vertical Tabbar Auto-Hide Behavior -----*/

/* Base hidden state for vertical tabbar */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper {
    position: absolute;
    transform: translateX(calc(-100% + var(--tabbar-peek-width)));
    transition: var(--tabbar-transition) !important;
    opacity: 0;
    z-index: 1;
    /* Frosted glass effect */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(30, 30, 30, 0.78);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Right side positioning */
#browser.tabs-right .tabbar-wrapper {
    right: 0;
    transform: translateX(calc(100% - var(--tabbar-peek-width)));
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* Tab move functionality support */
#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper,
#browser.tabs-left.isblurred:is(:active, :focus) .tabbar-wrapper:is(:active, :focus) {
    transform: translateX(0);
    opacity: 1;
}

/* Show tabbar on hover */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:hover {
    transform: translateX(0);
    transition: var(--tabbar-transition) !important;
    opacity: 1;
}

/* Show when mouse approaches edge of screen */
#browser:is(.tabs-left) .mainbar:hover+.tabbar-wrapper,
#browser:is(.tabs-right) .webpage:hover+.tabbar-wrapper {
    transform: translateX(0);
    transition: var(--tabbar-transition) !important;
    opacity: 1;
}

/* Show when workspace popups are active */
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup:visible,
    .workspace-popup:visible) .tabbar-wrapper {
    transform: translateX(0);
    transition: var(--tabbar-transition) !important;
    opacity: 1;
}

/* Keep tab bar visible during workspace naming */
#browser:is(.tabs-left, .tabs-right):has(.quick-command-container.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(input[placeholder*="workspace"]) .tabbar-wrapper {
    transform: translateX(0) !important;
    transition: none !important;
    opacity: 1 !important;
}

/* Hide on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
        .quick-command-container.workspace-naming,
        .workspace-naming,
        input[placeholder="workspace"]:focus,
        .WorkspacePopup:visible,
        .workspace-popup:visible)) .tabbar-wrapper {
    transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
    transition: var(--tabbar-transition) !important;
    opacity: 0 !important;
}

/* Fix right side hiding behavior on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
        .quick-command-container.workspace-naming,
        .workspace-naming,
        input[placeholder="workspace"]:focus,
        .WorkspacePopup:visible,
        .workspace-popup:visible)) #browser.tabs-right .tabbar-wrapper {
    transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
}

/* Additional reset mechanism for when tabs get stuck */
html:active:active .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
        .workspace-naming,
        input[placeholder="workspace"]:focus)) {
    transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
    opacity: 0 !important;
}

/* Additional reset for right side */
html:active:active #browser.tabs-right .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
        .workspace-naming,
        input[placeholder="workspace"]:focus)) {
    transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
    opacity: 0 !important;
}

My version if you guys like having a solid background behind the tabs instead of completely transparent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment