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