Vertical Tabs | Collapsed & Expand On-Hover

krishpiscool

@immaintheme oh its on right lol
having the panel and tabs on the same side is messed up

immaintheme

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

krishpiscool

This post is deleted!

remi.flores

Hello there,

The mod is broken after the new snapshot release 6.7.3327.3...

Anyone can confirm that ?

n8chavez

This is awesome! This goes beyond what I thought was possible. I wonder, can something similar be done with the bookmarks bar?

krishpiscool

@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

nilsolm

@krishpiscool @remi-flores

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.

masashinogawa

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

atomic8733

@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

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

n8chavez

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.

masashinogawa

@masashinogawa

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

oneakira

I got @immaintheme's last code from April to work but my 2nd level tabs all lose their names like this:
Screenshot 2024-06-30 162048.png
Actually, most codes make the tabs lose their names, what could be causing this?

immaintheme

@oneakira add this to your css and see if it solves your problem

#tabs-subcontainer {
    overflow:hidden;
    :hover .tab-position {min-width:200px !important;}
}

oneakira

@immaintheme Thanks works fine!

oneakira

@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:
Screenshot 2024-07-01 203253.png
What do think it causes this issue?

immaintheme

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

oneakira

@immaintheme Unfortunately doesn't work, still breaks similarly when more than 20 tabs are added to a tab group.

immaintheme

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

oneakira

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