Vertical Tabs | Collapsed & Expand On-Hover

remi.flores

@oneakira Yes I can confirm the same issue. Also fixing this trash and sync icon bug added a lag while expanding. Because it expands until the 2 icons have the sapce to be horizontal, makes a pause, and then expand full width...

masashinogawa

@masashinogawa

Updated for V6.9.

#browser {
	--CVTEoH-full-width: 320px;
	--CVTEoH-half-width: 160px;
	--CVTEoH-mini-width: 120px;
	--CVTEoH-icon-width: 32px;
}

#main .inner #tabs-tabbar-container:is(.left, .right):hover {
	&{
		width: var(--CVTEoH-full-width) !important;
	}
	#tabs-subcontainer {
		& {
			flex: 0 0 var(--CVTEoH-half-width) !important;
		}
		.tab-position {
			& {
				width: var(--CVTEoH-half-width) !important;
			}
			.tab, .active {
				overflow: hidden !important;
			}
		}
	}
}

#main .inner #tabs-tabbar-container:is(.left, .right):not(:hover) {
	& {
		width: var(--CVTEoH-mini-width) !important;
	}
	#tabs-subcontainer {
		& {
			flex: 0 0 var(--CVTEoH-icon-width) !important;
			position: static;
		}
		.tab-position {
			& {
				width: var(--CVTEoH-icon-width) !important;
			}
			.tab, .active {
				overflow: hidden !important;
			}
		}
		.newtab {
			left: 0 !important;
		}
	}
}

nirin

The issue I'm having since (I assume) a recent update, is that half the time when I take the mouse off the sidebar and it is supposed to hide itself, instead it kind of just... vibrates in place and I have to hover over it again to stop it, and then hopefully have it hide when I move the mouse away.

Not sure what @masashinogawa 's last post was, whether that's a totally different code for doing the same thing or if its meant to be added to existing code or what...

video showing what's happening:
https://webmshare.com/Vbz53

masashinogawa

@nirin

The CSS code of my latest post should work alone. I only have this code in my "CSS" mod-folder of Vivaldi.

As you can see, it's very small code and very visible what you are doing...and it does the minimum job I want, where I don't need anything fancy behavior (any more) because of too frequent Vivaldi-default CSS changes around the tabbar control area. I'm tired of chasing this moving target.

As needed, you can add some more for your own needs you described.

nirin

@oneakira said in Vertical Tabs | Collapsed & Expand On-Hover:

@grimmlock said in Vertical Tabs | Collapsed & Expand On-Hover:
@oneakira I can fix one issue and I know the cause of the other, but don't know how to fix it.

For the Workspace bar being smashed up under the main bar at the top, change:
.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 */
}
To be
.button-toolbar.workspace-popup.tabbar-workspace-button {
    min-width: 32px;
    min-height: 32px;
    transition: min-width 50ms ease-out !important; /* Change "50ms" to how long you want the animation to play */
The reason that the tab bar is not collapsing all the way down is because of the synced tabs icon and the trash can. For me, they were side by side, and didn't collapse into vertical. I just removed the trash can icon via Settings -> Tabs -> Tab Display -> Tab Bar and unchecked Display Trash Can (Or synced tabs works, too) so only 1 button is displayed and the sidebar collapses all the way down to only 64px for both again.

Hopefully someone with actual CSS skills will have a fix Soon️

Edit to add:
The new tab button had disappeared for me, too.
I completely commented out:
.tab-strip {
    &:not(:hover) {scrollbar-width: none;}
    .button-toolbar.newtab {
    left: 0px !important;
    width: 200px;
    }
}
And it is back below the tabs
The min-height: 32px fixed the squishing issue but I don't have any issue with the new tab button, it work and is in the right place.
But for me couple of other issue are there:

tabs don't show their names in the 2nd level.

&
If you have more than 20 tabs in a tab group you'll get a scroll bar and this cause the tab bar to change the width which cause all other tab groups to break too hence that slight over flow.

After trying @masashinogawa 's new code (and it not really working very well, sorry) I went back to my old code.... which somehow (even though I didn't change anything I just restarted the browser) now has this same issue of not showing the names of tabs in the right-tab-column.

nirin

The problem seems to be that the right-column "width sizing" that you do by dragging the column, is now being used to show/hide the text in the column, while the actual width of the column appearance is being done by the css.
So I guess there needs to be a new css class item that sets the display-width of the text, separately to the display width of the column/background (?)

nirin

Screenshot 2024-09-07 184317.png

This is the '--Width' style element that is now broken. When the subcontainer expands to full size to see the open tabs (usually around 300px) this --Width value remains on 30px so you can only see the favicon and not the text. I can manually change it in the console and it seems to fix the issue.

However I can't figure out how to dynamically have it change when the subcontainer expands/contracts, as it's not a fixed value / class and I'm not sure how the syntax works for doing things like that.

nafumofu

@nirin
This should display the titles of the tabs in the #tabs-subcontainer.
If necessary, change the code to take into account mouse hover, etc.

#tabs-subcontainer {
    .tab-header {
        max-width: unset !important;
        padding-left: 6px !important;
    }
    .favicon,
    .title,
    .tab:hover .close {
        display: flex !important;
    }
    .close {
        margin-right: 6px !important;
    }
}

nirin

@nafumofu Thankyou this works, seems to be functioning properly again now!

however I still have this issue of the thing not closing properly and vibrating sometimes - https://forum.vivaldi.net/post/777276

nirin

@nafumofu

Screenshot 2024-09-08 041635.png Screenshot 2024-09-08 041654.png

Odd new issue (I assume a side effect of the new code) is that the close window X on the sub column doesn't show on the active column, if the title of the window is long enough to fill/overflow the available space. By default the X shows over top of the text, so I guess it's an issue with the flex boxes (?)

nirin

Might anyone know how to fix the 'close tab' X not displaying properly on the sub-column?

Edit:

#tabs-subcontainer {
  .tab-header {
      max-width: 280px !important;
      padding-left: 6px !important;
  }
  .favicon,
  .title,
  .tab:hover .close {
      display: flex !important;
  }
  .close {
      margin-right: 0px !important;
  }
}

If I change the max-width in that previous snippet to a set value it fixes the position of the close X (so I assume it was being pushed outside the width of the column before) however it now results in the below image:

Screenshot 2024-09-09 231438.png

nirin

@nirin said in Vertical Tabs | Collapsed & Expand On-Hover:

The issue I'm having since (I assume) a recent update, is that half the time when I take the mouse off the sidebar and it is supposed to hide itself, instead it kind of just... vibrates in place and I have to hover over it again to stop it, and then hopefully have it hide when I move the mouse away.

Not sure what @masashinogawa 's last post was, whether that's a totally different code for doing the same thing or if its meant to be added to existing code or what...

video showing what's happening:
https://webmshare.com/Vbz53

Just following up on this as it's still going on. If anyone has any ideas.

nirin

Will probably have to quit on vivaldi soon if I can't find a solution to this weird shaking behaviour. It happens like 75% of the time and it's infuriating.

Will just have to keep hoping someone figures out the solution.

luetage

@nirin I tried the code on 6.10 and it works. Try it isolated without any other CSS/JS mods running. Try it from a fresh profile too. If no one can reproduce your modification issue, no one but you can fix it. You would have to provide steps how to break it.

nirin

@luetage said in Vertical Tabs | Collapsed & Expand On-Hover:

@nirin I tried the code on 6.10 and it works. Try it isolated without any other CSS/JS mods running. Try it from a fresh profile too. If no one can reproduce your modification issue, no one but you can fix it. You would have to provide steps how to break it.

Can you paste what version of the code is in your css file? There are so many fragmented versions on here. Maybe I'm using an out of date or broken version.

Edit:
Going through and removing bits piece by piece, the issue seems to be caused by (or at least, is fixed by removing) the root closedelay

:root {
	--closeDelay: 500ms;
}

So I guess I need to find another way to add a close delay.

The original code had this:

.tabbar-wrapper .tabbar-wrapper:hover:has(#tabs-tabbar-container > #tabs-subcontainer) {
    min-width: 336px !important;    /* Needs to be 36px higher than Width of open Tab Bar panel */
	max-width: 336px !important;      /* Needs to be 36px higher than Width of open Tab Bar panel */
    transition-delay: 500ms !important; /* Delay to allow hovering past the right or left hand tab border */
}

where the transition delay was meant to do that. But it stopped working at some point. I don't think it does anything anymore.

luetage

@nirin I used this one ☛ https://forum.vivaldi.net/post/776748 written for 6.9. You still haven’t posted a link to the full version you are using. You need the help.

You deleted a variable declaration. The variable itself doesn’t break anything, the instruction where it is being used could.

nirin

@luetage said in Vertical Tabs | Collapsed & Expand On-Hover:

@nirin I used this one ☛ https://forum.vivaldi.net/post/776748 written for 6.9. You still haven’t posted a link to the full version you are using. You need the help.

You deleted a variable declaration. The variable itself doesn’t break anything, the instruction where it is being used could.

 /* Tab stack outline colour (if Accent on Window on) - Only needed if 'remove outline' css isn't active.*/
.svg-tab-stack .stack-frame {
    stroke: rgb(255, 210, 0);
  }
  
  /* Tab stack outline colour (if Accent on Window off) - Only needed if 'remove outline' css isn't active. */
  .color-behind-tabs-off .svg-tab-stack .stack-frame {
      stroke: rgb(255, 210, 0);
  }

  /* Remove tab stack outline */
.svg-tab-stack line, .svg-tab-selection line, .svg-tab-stack rect, .svg-tab-selection rect {
    stroke-width: 0px;
}

/* Add top / bottom / side border to tab stacks */
#tabs-container .tab-position.is-substack .tab {
    border-top: 0px solid rgb(255, 210, 0) !important;
    border-left: 4px solid #eeeeee !important;
    border-radius: 0px;
}

/* removes the white background behind active-tab favicon */
.tab.active .tab-header .favicon:not(.svg) {
   filter: none !important;
}


/*Rounds the corners of the viewport/webpage window*/
#webpage-stack { border-radius:15px;}


/* Active Tab background colour (so it doesn't have to match the adress bar colour) */
#browser .tab-position .tab.active {
background-color: #5a1a1a;
}



/*Move Tab Thumbnails out a little bit*/
/* #vivaldi-tooltip .tooltip .tooltip-item {Margin-left:35px} */





/*///*/
/* Vertical Tab sidebar auto-hides and switches between the two-column stacks on hover */
/*  https://forum.vivaldi.net/topic/82900/collapsing-vertical-tabs-that-expand-on-hover-with-and-without-floating-tabs/79?page=4   */

:root {
/*	--closeDelay: 200ms !important; */  /* currently causes the vibratey glitch */   
}

.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;
    min-height: 32px;
    transition: min-width 250ms 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: 300px !important;      /*Width of open Tab Bar panel*/
    transition-delay: 250ms !important;  /* Change "70ms" to how long you want to delay the animation */
}

.tab-strip {
  &:not(:hover) {scrollbar-width: none;}
  .button-toolbar.newtab {
  left: 0px !important;
  width: 300px;    /* Needs to match Width of open Tab Bar panel*/
  }
}

#tabs-subcontainer:hover .tab-position {
	width:300px;    /* Needs to match Width of open Tab Bar panel*/
}

.tabbar-wrapper .tabbar-wrapper:not(:hover),
#tabs-container:not(:hover) ~ #tabs-subcontainer:not(:hover),
#tabs-subcontainer:not(:hover) ~ #tabs-container:not(:hover),
.tabbar-workspace-button:not(:hover) {
    transition-delay: var(--closeDelay) !important;
}

.button-toolbar.workspace-popup.tabbar-workspace-button:hover:has(+ #tabs-tabbar-container > #tabs-subcontainer) {
    min-width: 336px !important;   /* Needs to be 36px higher than Width of open Tab Bar panel */
    max-width: 336px !important;   /* Needs to be 36px higher than Width of open Tab Bar panel */
    transition-delay: 250ms !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: 336px !important;    /* Needs to be 36px higher than Width of open Tab Bar panel */
  	max-width: 336px !important;      /* Needs to be 36px higher than Width of open Tab Bar panel */
    transition-delay: 200ms !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: 40px;
}


/* 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: 36px;
}

.inner:has(#tabs-subcontainer:is(.left, .right)) #webpage-stack {
  margin-left: 72px;
}

.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-container,
#tabs-subcontainer {
    overflow:hidden;
	&.overflow {flex:1 1 auto !important}
}

#tabs-subcontainer:not(:hover) .subcontainer-lock:has(.newtab) {flex-direction: column;}
#tabs-subcontainer:not(:hover) .tab-position {
	transition-property: width !important;
	transition-delay: var(--closeDelay) !important;
}

#tabs-container .sync-and-trash-container  {   /* Sync tabs and deleted tabs icons, this keeps them justified-left when the tab-bar expands */
  flex-direction: column !important;
  align-content: flex-start !important;
  margin: 0 !important;
}

button.ToolbarButton-Button[name="WorkspaceButton"] {
    position: absolute;
    width: 100%;
}
/* Show the close button on hover */
.tab:hover .close {
  display: flex !important;
}
/*///*/





/* Increase tab height */
/* Alternative -> UI Zoom on Vivaldi settings */

.tab-position .tab .tab-header .favicon {
  padding-top: 3px !important;
  -webkit-transform:scale(1) !important;
}

/* Gap between favicon and text */
span.favicon.jstest-favicon-image {
  margin-right: 4px; /* Adjust this value to increase or decrease the gap */
}


/* increase favicon size */
.tab-header .favicon img{
  width: 18px;
  aspect-ratio: auto 18 / 18;
  height: 18px;
}

/* increase favicon bounding box so it doesn't get cut off */
.tab-position .tab .tab-header .favicon {  /* these were 3px, 18px/18px/18px*/
  padding-top: 3px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  min-width: 20px !important;
}



#tabs-subcontainer {
  .tab-header {
      max-width: 280px !important;
      padding-left: 6px !important;
  }
  .favicon,
  .title,
  .tab:hover .close {
      display: flex !important;
  }
  .close {
      margin-right: 0px !important;
  }
}



/* Hide tabbar overall resizer */
 .tabbar-workspace-button ~ #tabs-tabbar-container .SlideBar.SlideBar--FullHeight {visibility: hidden;}
/* Hide tabbar columns' resizer, only for the between-columns centre line */
 .substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container .SlideBar--FullHeight {visibility: hidden;}

This is my css in its entirety. however none of the extras I added are the cause of the issue. It's just the 'root' part that seems to be causing it. I have it commented out at the moment and it no longer vibrates sometimes when closing, but it closes without any delay at all.

I'm not sure what you mean by me deleting a variable declaration... I don't recall doing that.

luetage

@nirin Test only the part you have problems with (shrinking/expanding tab panel), comment everything else out. Get yourself a code editor with formatting and error handling. For example you should never comment out the only instruction inside a bracket, comment the whole thing. You also have -webkit- declarations, which aren’t needed anymore. Not sure whether they do in fact still work. Your whole CSS is a bit messy.

Root is the place where variables are usually declared. --closeDelay is a variable. It could also be named --myVariable, the name doesn’t matter.

Anyway, the code snippet I tested works perfectly. Then again I don’t use the tab bar at all and keep it hidden, I’m the wrong person to judge it fairly.

n8chavez

@nirin thank you for this! It's very good. I did make one change. I wanted it to match the rest of my theme's accents; so I changed the active tab background color to #48fe06. Now it matches perfectly, and fits well with my dark theme.

Now I just need to find out how to shrink the tab's width a tiny bit, and change the active tab's text from white to dark.

I thought this would work, but it doesn't.

.tab.active .tab-title {
color: #000000;
}

nirin

@luetage said in Vertical Tabs | Collapsed & Expand On-Hover:

@nirin Test only the part you have problems with (shrinking/expanding tab panel), comment everything else out. Get yourself a code editor with formatting and error handling. For example you should never comment out the only instruction inside a bracket, comment the whole thing. You also have -webkit- declarations, which aren’t needed anymore. Not sure whether they do in fact still work. Your whole CSS is a bit messy.

Root is the place where variables are usually declared. --closeDelay is a variable. It could also be named --myVariable, the name doesn’t matter.

Anyway, the code snippet I tested works perfectly. Then again I don’t use the tab bar at all and keep it hidden, I’m the wrong person to judge it fairly.

--closedelay must be a variable that has already been set or used elsewhere, cos otherwise setting the value here wouldn't do anything. But I could find no other way to add a working delay to the sidebar closing.