Vertical Tabs | Collapsed & Expand On-Hover
-
@immaintheme oh its on right lol
having the panel and tabs on the same side is messed up -
@krishpiscool oh i got u. i tried fix the favicon a little and hide all audio icons too.
.tabbar-wrapper .tabbar-wrapper, #tabs-container.left, #tabs-subcontainer.left, #tabs-container.right, #tabs-subcontainer.right, .button-toolbar.workspace-popup.tabbar-workspace-button { min-width: 32px; transition: min-width 50ms ease-out !important; /* Change "50ms" to how long you want the animation to play */ } .tabbar-wrapper .tabbar-wrapper:hover, #tabs-container.left:hover, #tabs-subcontainer.left:hover, #tabs-container.right:hover, #tabs-subcontainer.right:hover, .button-toolbar.workspace-popup.tabbar-workspace-button:hover { min-width: 200px !important; transition-delay: 70ms !important; /* Change "70ms" to how long you want to delay the animation */ } .button-toolbar.workspace-popup.tabbar-workspace-button:hover:has(+ #tabs-tabbar-container > #tabs-subcontainer) { min-width: 232px !important; transition-delay: 70ms !important; /* Change "70ms" to how long you want to delay the animation */ } .tabbar-wrapper .tabbar-wrapper:hover:has(#tabs-tabbar-container > #tabs-subcontainer) { min-width: 232px !important; transition-delay: 400ms !important; /* Delay to allow hovering past the right or left hand tab border */ } .button-toolbar.workspace-popup.tabbar-workspace-button > button { justify-content: left !important; } #browser:not(.alt-tabs) .tab-position .tab:hover.tab-small:not(.tab-mini).active .title, #browser:not(.alt-tabs) .tab-position .tab.force-hover.tab-small:not(.tab-mini).active .title { display: flex !important; } .tabbar-workspace-button { width: 100% !important; } #tabs-tabbar-container.left, #tabs-tabbar-container.right { width: auto !important; min-width: 32px; } .button-toolbar.newtab { left: 0px !important; width: 200px; } /* leftside 1st button */ .toolbar-mainbar > div:first-child > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(3px, 29px); } .toolbar-mainbar > div:first-child > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(24px, 18.5px); } /* rightside button */ .toolbar-mainbar > div:nth-last-child(4) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-10px, 29px); } .toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-44px, 29px); } .toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls input[type=range]::after { left: 40%; } .toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(-24px, 18.5px); } .toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-78px, 29px); } .toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls input[type=range]::after { left: 64%; } .toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(-58px, 18.5px); } .toolbar-mainbar > div:last-child > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-112px, 29px); } .toolbar-mainbar > div:last-child > .page-zoom-controls input[type=range]::after { left: 88%; } .toolbar-mainbar > div:last-child > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(-92px, 18.5px); } /** Make the expanded tabbar float on the webpage. Use with tab-expansion mod. **/ #main > .inner > div:has(#tabs-tabbar-container:is(.left, .right)) { position: absolute; z-index: 2; opacity: 1; background-color: var(--colorBg); height: 100% !important; } #browser.transparent-tabbar .inner > div:has(#tabs-tabbar-container:is(.left, .right)) { background-color: var(--colorImageFgHeaviest); } .inner #webpage-stack { margin-left: 32px; } .inner:has(#tabs-subcontainer:is(.left, .right)) #webpage-stack { margin-left: 64px; } .fullscreen #webpage-stack { margin-left: 0px; } .theme-dark .tab-position .tab.active .tab-header .favicon { filter: none !important; } /* Fixing favicon */ .tab-header {padding-left: 7px !important;} /* Hide audio icon */ span.tab-audio {display:none;}
-
This post is deleted! -
Hello there,
The mod is broken after the new snapshot release 6.7.3327.3...
Anyone can confirm that ?
-
This is awesome! This goes beyond what I thought was possible. I wonder, can something similar be done with the bookmarks bar?
-
@remi-flores
It is broken for me too,
The vertical tab is just permanently expanded idk why.
This is my current css:
/* Collapsing vertical tabs that expand on hover */ .tabbar-wrapper .tabbar-wrapper, #tabs-container.left, #tabs-subcontainer.left, #tabs-container.right, #tabs-subcontainer.right, .button-toolbar.workspace-popup.tabbar-workspace-button { min-width: 32px; transition: min-width 50ms ease-out !important; /* Change "50ms" to how long you want the animation to play */ } .tabbar-wrapper .tabbar-wrapper:hover, #tabs-container.left:hover, #tabs-subcontainer.left:hover, #tabs-container.right:hover, #tabs-subcontainer.right:hover, .button-toolbar.workspace-popup.tabbar-workspace-button:hover { min-width: 200px !important; transition-delay: 70ms !important; /* Change "70ms" to how long you want to delay the animation */ } .button-toolbar.workspace-popup.tabbar-workspace-button:hover:has(+ #tabs-tabbar-container > #tabs-subcontainer) { min-width: 232px !important; transition-delay: 70ms !important; /* Change "70ms" to how long you want to delay the animation */ } .tabbar-wrapper .tabbar-wrapper:hover:has(#tabs-tabbar-container > #tabs-subcontainer) { min-width: 232px !important; transition-delay: 400ms !important; /* Delay to allow hovering past the right or left hand tab border */ } .button-toolbar.workspace-popup.tabbar-workspace-button > button { justify-content: left !important; } #browser:not(.alt-tabs) .tab-position .tab:hover.tab-small:not(.tab-mini).active .title, #browser:not(.alt-tabs) .tab-position .tab.force-hover.tab-small:not(.tab-mini).active .title { display: flex !important; } .tabbar-workspace-button { width: 100% !important; } #tabs-tabbar-container.left, #tabs-tabbar-container.right { width: auto !important; min-width: 32px; } .button-toolbar.newtab { left: 0px !important; width: 200px; } /* leftside 1st button */ .toolbar-mainbar > div:first-child > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(3px, 29px); } .toolbar-mainbar > div:first-child > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(24px, 18.5px); } /* rightside button */ .toolbar-mainbar > div:nth-last-child(4) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-10px, 29px); } .toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-44px, 29px); } .toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls input[type=range]::after { left: 40%; } .toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(-24px, 18.5px); } .toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-78px, 29px); } .toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls input[type=range]::after { left: 64%; } .toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(-58px, 18.5px); } .toolbar-mainbar > div:last-child > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-112px, 29px); } .toolbar-mainbar > div:last-child > .page-zoom-controls input[type=range]::after { left: 88%; } .toolbar-mainbar > div:last-child > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(-92px, 18.5px); } /** Make the expanded tabbar float on the webpage. Use with tab-expansion mod. **/ #main > .inner > div:has(#tabs-tabbar-container:is(.left, .right)) { position: absolute; z-index: 2; opacity: 1; background-color: var(--colorBg); height: 100% !important; } #browser.transparent-tabbar .inner > div:has(#tabs-tabbar-container:is(.left, .right)) { background-color: var(--colorImageFgHeaviest); } .inner #webpage-stack { margin-left: 32px; } .inner:has(#tabs-subcontainer:is(.left, .right)) #webpage-stack { margin-left: 64px; } .fullscreen #webpage-stack { margin-left: 0px; } .theme-dark .tab-position .tab.active .tab-header .favicon { filter: none !important; } /* Fixing favicon */ .tab-header {padding-left: 7.4px !important;} /* Hide audio icon */ span.tab-audio {display:none;}
May I ask @immaintheme to modify this css, my current vivaldi version is 6.7.3329.17
-
The problem is apparently caused by whatever changes were made to the new tab button. Removing this bit seems to fix it, more or less:
.button-toolbar.newtab { left: 0px !important; width: 200px; }
Something isn't right with the width of stacked tabs but I haven't figured out what's causing it yet.
-
It stopped working from 6.7 too.
With a reference to https://forum.vivaldi.net/topic/95512/collapse-the-second-tab-row-in-the-vertical-tab-bar, I made this spin and it's working for my purpose. I believe this is not supporting various specific cases / conditions but do a minimal job.
Closed:
Hover on a tab with NO stacking:
Hover on a tab with Stacking:
#main .inner #tabs-tabbar-container:is(.left, .right) { position: absolute; z-index: 2; opacity: 1; background-color: var(--colorBg); height: 100% !important; width: 150px } #main .inner #tabs-subcontainer { position: relative; flex-basis: calc(100% - 150px) !important; } #main .inner #tabs-tabbar-container:is(.left, .right):not(:hover) { & { width: 60px !important; transition: width 0.25s !important; } #tabs-subcontainer { width: 30px !important; transition: width 0.25s !important; position: static; } } #main .inner #tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) > div.overflow .tab-strip { overflow-y: hidden; } #main:has(#tabs-tabbar-container.left) #panels-container { margin-left: 60px; } /* reserved outter space for minimized tabbar by push everything inward */ /*#browser:not(.fullscreen).tabs-left #main {margin-left:30px;}*/ /*#browser:not(.fullscreen).tabs-right #main {margin-right:30px;}*/ /* optional: reserved inner space for minimized tabbar by only push webpage inward */ #browser:not(.fullscreen).tabs-left #webview-container {margin-left:60px;} #browser:not(.fullscreen).tabs-right #webview-container {margin-right:60px;}
-
@krishpiscool @masashinogawa
Remove .button-toolbar.newtab
and add.toolbar-tabbar.sync-and-trash-container { flex-direction: column; }
It seems to be able to properly collapse the tab panel now.
-
@masashinogawa <= self-follow-up hoping this helps...
I love this mod because the original by @sakaiyo is simple.
I think with v6.7, this is enough simple and working.#browser { --tabs-tabbar-container-width: 330px; --tabs-tabbar-container-minwidth: 120px; --tabs-subcontainer-width: 180px; } #main .inner #tabs-tabbar-container:is(.left, .right) { /* To specify z-index, we use absolute. */ position: absolute; z-index: 2; opacity: 1; background-color: var(--colorBg); height: 100% !important; width: var(--tabs-tabbar-container-width) !important; } #main .inner #tabs-subcontainer { position: relative; flex-basis: calc(100% - var(--tabs-subcontainer-width)) !important; } #main .inner #tabs-tabbar-container:is(.left, .right):not(:hover) { & { width: var(--tabs-tabbar-container-minwidth) !important; transition: width 0.25s !important; } #tabs-subcontainer { /* In common.css, the minwidth specified as 30px. */ /* As the container shrinking, it folds down to favicons. */ transition: width 0.25s !important; position: static; } } #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);}
FYI, I modify the tab color settings.
/* From "Us-mods-pack.css" */ .tab.active { border-top: 1px solid #0a84ff !important; background-color: #208820 !important; } .tab-position .tab.unread { background-image: linear-gradient(135deg, var(--colorHighlightBg) 5px, transparent 5px) !important; }
FYI #2, I want "new tab" button NOT bottom (as I use a big screen), I pulled in the button to the top, and delete unused buttons for the simplicity.
#main .inner .sync-and-trash-container { order: -1; } #main .inner .sync-and-trash-container .synced-tabs-button { display: none; } #main .inner .subcontainer-lock { order: -1; } #main .inner .subcontainer-lock .tabs-unlocked { display: none; }
-
Is there a complete version of this that works with 6.7? I ask because I've been trying to mod the changed pieces with the base mod, and I don't think I'm doing it right; either the tabbar is too wide or doesn't expand on hover. If there is one, I'd appreciate someone posting it.
-
With the latest update (6.8.3381.44), the "newtab" button comes to a strange place, and this is the fix.
#browser { --tabs-tabbar-container-width: 330px; --tabs-tabbar-container-minwidth: 120px; --tabs-subcontainer-width: 180px; } #main .inner #tabs-tabbar-container:is(.left, .right) { /* To specify z-index, we use absolute. */ position: absolute; z-index: 2; opacity: 1; background-color: var(--colorBg); height: 100% !important; width: var(--tabs-tabbar-container-width) !important; } #main .inner #tabs-subcontainer { position: relative; flex-basis: calc(100% - var(--tabs-subcontainer-width)) !important; } #main .inner #tabs-tabbar-container:is(.left, .right):not(:hover) { & { width: var(--tabs-tabbar-container-minwidth) !important; transition: width 0.25s !important; } #tabs-subcontainer { /* In common.css, the minwidth specified as 30px. */ /* As the container shrinking, it folds down to favicons. */ transition: width 0.25s !important; position: static; .newtab { left: 0 !important; } } }
-
I got @immaintheme's last code from April to work but my 2nd level tabs all lose their names like this:
Actually, most codes make the tabs lose their names, what could be causing this? -
@oneakira add this to your css and see if it solves your problem
#tabs-subcontainer { overflow:hidden; :hover .tab-position {min-width:200px !important;} }
-
@immaintheme Thanks works fine!
-
@immaintheme sorry for pinging you again but your code is the only one that works.
I found a particular bug if you have more than 20 tabs in a tab group it breaks like this:
What do think it causes this issue? -
@oneakira it should be the newtab button problems. here is my fix.
.tabbar-wrapper .tabbar-wrapper, #tabs-container.left, #tabs-subcontainer.left, #tabs-container.right, #tabs-subcontainer.right, .button-toolbar.workspace-popup.tabbar-workspace-button { min-width: 32px; transition: min-width 50ms ease-out !important; /* Change "50ms" to how long you want the animation to play */ } .tabbar-wrapper .tabbar-wrapper:hover, #tabs-container.left:hover, #tabs-subcontainer.left:hover, #tabs-container.right:hover, #tabs-subcontainer.right:hover, .button-toolbar.workspace-popup.tabbar-workspace-button:hover { scrollbar-width: auto !important; min-width: 200px !important; transition-delay: 70ms !important; /* Change "70ms" to how long you want to delay the animation */ } .button-toolbar.workspace-popup.tabbar-workspace-button:hover:has(+ #tabs-tabbar-container > #tabs-subcontainer) { min-width: 232px !important; transition-delay: 70ms !important; /* Change "70ms" to how long you want to delay the animation */ } .tabbar-wrapper .tabbar-wrapper:hover:has(#tabs-tabbar-container > #tabs-subcontainer) { min-width: 232px !important; transition-delay: 400ms !important; /* Delay to allow hovering past the right or left hand tab border */ } .button-toolbar.workspace-popup.tabbar-workspace-button > button { justify-content: left !important; } #browser:not(.alt-tabs) .tab-position .tab:hover.tab-small:not(.tab-mini).active .title, #browser:not(.alt-tabs) .tab-position .tab.force-hover.tab-small:not(.tab-mini).active .title { display: flex !important; } .tabbar-workspace-button { width: 100% !important; } #tabs-tabbar-container.left, #tabs-tabbar-container.right { width: auto !important; min-width: 32px; } .tab-strip { &:not(:hover) {scrollbar-width: none;} .button-toolbar.newtab { left: 0px !important; width: 200px; } } /* leftside 1st button */ .toolbar-mainbar > div:first-child > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(3px, 29px); } .toolbar-mainbar > div:first-child > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(24px, 18.5px); } /* rightside button */ .toolbar-mainbar > div:nth-last-child(4) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-10px, 29px); } .toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-44px, 29px); } .toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls input[type=range]::after { left: 40%; } .toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(-24px, 18.5px); } .toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-78px, 29px); } .toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls input[type=range]::after { left: 64%; } .toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(-58px, 18.5px); } .toolbar-mainbar > div:last-child > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] { transform: translate(-112px, 29px); } .toolbar-mainbar > div:last-child > .page-zoom-controls input[type=range]::after { left: 88%; } .toolbar-mainbar > div:last-child > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) { transform: translate(-92px, 18.5px); } /** Make the expanded tabbar float on the webpage. Use with tab-expansion mod. **/ #main > .inner > div:has(#tabs-tabbar-container:is(.left, .right)) { position: absolute; z-index: 2; opacity: 1; background-color: var(--colorBg); height: 100% !important; } #browser.transparent-tabbar .inner > div:has(#tabs-tabbar-container:is(.left, .right)) { background-color: var(--colorImageFgHeaviest); } .inner #webpage-stack { margin-left: 32px; } .inner:has(#tabs-subcontainer:is(.left, .right)) #webpage-stack { margin-left: 64px; } .fullscreen #webpage-stack { margin-left: 0px; } .theme-dark .tab-position .tab.active .tab-header .favicon { filter: none !important; } /* Fixing favicon */ .tab-header {padding-left: 7px !important;} /* Hide audio icon */ span.tab-audio {display:none;} /* sub tab fix*/ #tabs-subcontainer { overflow:hidden; :hover .tab-position {min-width:200px !important;} }
-
@immaintheme Unfortunately doesn't work, still breaks similarly when more than 20 tabs are added to a tab group.
-
@oneakira i made a temporary fix. replace the last line start from /* sub tab fix*/ to this. it still have some bug when resizing sub tab bar, but it should be okay for daily usage.
/* sub tab fix*/ #tabs-container, #tabs-subcontainer { overflow:hidden; &.overflow {flex:1 1 auto !important} &:hover .tab-position {min-width:200px !important;} &:not(:hover) .subcontainer-lock {flex-direction: column;} } button.ToolbarButton-Button[name="WorkspaceButton"] { position: absolute; width: 100%; }
-
@immaintheme Yeah this seems to have fixed the 20-tab limit issue, I'll keep testing it out.
Also, the resizing tab bar would always cause bugs even before, so I just keep it as it is.