Vertical Tabs | Collapsed & Expand On-Hover

[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:

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

[nirin]

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

Current code.
New issue coming up.

When the sidebar vertical tabs are collapsed into their 2-column collapsed layout, and I move the mouse over the right-hand column (the subcontainer), the primary column is the one that slides open and not the sub-column. This isn't the behaviour I was used to. Is there a way to fix this?

[nirin]

I thought it was caused by the

#tabs-subcontainer {
  .tab-header {
      max-width: 280px !important;
      padding-left: 6px !important;
  }

section of code, but I tested again and removing that code actually makes no difference.

Something I have noticed is that the subcontainer column seems to open as it should when hovered the first couple times after rebooting the browser, but then stops working and never works again. There's some oddity with the code or with vivaldi that makes a mouse hovering over the subcontainer column trigger the opening of the primary container column instead of the subcontainer.

[oneakira]

IS there a working code for this? Haven't used this for awhile and the old code I was using stopped working.

[Horizonger]

@oneakira

Please try this:

:root{
   --tabbar-size: 32px;
}

/* tabbar workspace */
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu{
   width: var(--tabbar-size)!important;
   transition: unset;
}

.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title,
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
   display: none;
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-icon{
   position: absolute;
   left: 5px;
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title{
   position: absolute;
   left: var(--tabbar-size);
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
   position: absolute;
   right: 5px;
}

/* tabbar container */
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container,
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container .resize{
   width: var(--tabbar-size)!important;
   transition: unset;
}

/* tab stacking - accordion toggle arrow position */
#tabs-container.left .tab-position.accordion-toggle-arrow{
   --PositionX: 4px!important;
}

.inner > .tabbar-wrapper{
   position: relative;
   width: var(--tabbar-size);
}

.inner > .tabbar-wrapper > .tabbar-wrapper{
   position: absolute;
   background-image: url("chrome://vivaldi-data/thumbnail/WVKXPHMBICN2BPZCJFRT6B4RYYRCN6JS.png");
   background-size: cover;
   overflow: hidden;
   z-index: 1;
}

.inner #tabs-tabbar-container,
.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu {
   transition: width 0.5s;
}

[oneakira]

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

@oneakira

Please try this:

:root{
   --tabbar-size: 32px;
}

/* tabbar workspace */
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu{
   width: var(--tabbar-size)!important;
   transition: unset;
}

.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title,
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
   display: none;
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-icon{
   position: absolute;
   left: 5px;
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title{
   position: absolute;
   left: var(--tabbar-size);
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
   position: absolute;
   right: 5px;
}

/* tabbar container */
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container,
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container .resize{
   width: var(--tabbar-size)!important;
   transition: unset;
}

/* tab stacking - accordion toggle arrow position */
#tabs-container.left .tab-position.accordion-toggle-arrow{
   --PositionX: 4px!important;
}

.inner > .tabbar-wrapper{
   position: relative;
   width: var(--tabbar-size);
}

.inner > .tabbar-wrapper > .tabbar-wrapper{
   position: absolute;
   background-image: url("chrome://vivaldi-data/thumbnail/WVKXPHMBICN2BPZCJFRT6B4RYYRCN6JS.png");
   background-size: cover;
   overflow: hidden;
   z-index: 1;
}

.inner #tabs-tabbar-container,
.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu {
   transition: width 0.5s;
}

This is how it works on my end, it doesn't work with the two-level tab row option, and there's a slight delay for the workspace button as well.

[Horizonger]

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

This is how it works on my end, it doesn't work with the two-level tab row option, and there's a slight delay for the workspace button as well.

Reply

I think I solved this by adjusting the width of the workspace (it was basically setting the limit of the name so that when the mouse detected it, the name didn't anticipate the action).

Regarding the two-level, I had to modify this code

[oneakira]

@Horizonger Oh I was testing out @nafumofu's code works well even though its for second-level tabs, you modified this, how so? Have you uploaded it somewhere?

[Horizonger]

@oneakira

I apologize if I couldn't explain how I corrected this error. Basically, I adjusted the width of the workspace (manually, by expanding the tab bar)

In fact, it seems that it didn't work precisely because you were using two levels of tabs (which also happened to me).

source of the first code I sent: https://github.com/tovifun/VivalArc/issues/21

Vídeo:
https://imgur.com/a/mldLT8M

[oneakira]

@Horizonger This sort of works, but it's buggy on my end. On expansion, the workspace button is slower, it looks like it's trying to catch up with the tabs.
Sometimes it doesn't fully collapse either, I have a bunch of other mods which might be affecting have to check this later, thanks anyway.

[Horizonger]

@oneakira

With and without two levels of tabs:
https://imgur.com/a/YKWLaWO

With nafumofu's code:
https://imgur.com/a/t0dGOUa