Vertical Tabs | Collapsed & Expand On-Hover
-
@nirin i've make a quick fix that expand the newtab and lock icon and make it keep it position like your first solutions.
change the line 163 from
#tabs-subcontainer:not(:hover) .subcontainer-lock:has(.newtab) {flex-direction: column;}
to
#tabs-subcontainer .subcontainer-lock {flex-direction: column;.button-toolbar{width:100%}}
And for the .tab-strip one, you might try on changing line 6-9, 16-19 to do that.
I tried but I perfer the quick fix one more. -
@immaintheme said in Collapsing vertical tabs that expand on-hover (with and without floating tabs):
@nirin i've make a quick fix that expand the newtab and lock icon and make it keep it position like your first solutions.
change the line 163 from
#tabs-subcontainer:not(:hover) .subcontainer-lock:has(.newtab) {flex-direction: column;}
to
#tabs-subcontainer .subcontainer-lock {flex-direction: column;.button-toolbar{width:100%}}
And for the .tab-strip one, you might try on changing line 6-9, 16-19 to do that.
I tried but I perfer the quick fix one more.Thanks I'll try it out
-
This post is deleted! -
@immaintheme said in Collapsing vertical tabs that expand on-hover (with and without floating tabs):
@nirin i've make a quick fix that expand the newtab and lock icon and make it keep it position like your first solutions.
change the line 163 from
#tabs-subcontainer:not(:hover) .subcontainer-lock:has(.newtab) {flex-direction: column;}
to
#tabs-subcontainer .subcontainer-lock {flex-direction: column;.button-toolbar{width:100%}}
And for the .tab-strip one, you might try on changing line 6-9, 16-19 to do that.
I tried but I perfer the quick fix one more.I've realised that you are talking about the 'new tab' and 'lock' icons, which are in the sub-container panel (which makes more sense now as I see the code you changed is specific to the subcontainer). Which explains why this code doesn't work haha.
I was talking about the 'deleted tabs' and 'synced tabs' icons, which are in the .sync-and-trash-container section I think.
Though now that you mention it, having the 'new tab' and 'lock' icons being left-justified when the tab bar expands would also probably be useful.
However the code you gave seems to do nothing at all. I tried !important on parts of it to try and force it but it just doesn't seem to effect anything on my browser.
-
@nirin try this. I misunsterstand that your problem on sub tab bar. This should be the one works on main tab bar
#tabs-container .sync-and-trash-container {flex-direction: column !important;width:100%;.button-toolbar{width:100%}}
-
@immaintheme said in Collapsing vertical tabs that expand on-hover (with and without floating tabs):
@nirin try this. I misunsterstand that your problem on sub tab bar. This should be the one works on main tab bar
#tabs-container .sync-and-trash-container {flex-direction: column !important;width:100%;.button-toolbar{width:100%}}
This keeps the icons stacked, but they still slide out with the tab-bar as it expands. Is there any way to keep them to the far left of the tab bar as it expends (so tthey end up not moving at all)
Sorry to keep asking for this stuff!
Edit: I've been trying to solve it myself, but changing all the 'align' options I could find in the dev debug window doesn't seem to have any effect on the location of the icons, so I must be missing an important step somewhere.
-
@nirin they did slide out but you should be able to click it without chasing the 'real' icon just like new tab. I've changed its width to whole line as a temp fix.
If you want them to stick on to left, you may try to set align-content: flex-start
on sync-and-trash-container -
@immaintheme said in Collapsing vertical tabs that expand on-hover (with and without floating tabs):
@nirin they did slide out but you should be able to click it without chasing the 'real' icon just like new tab. I've changed its width to whole line as a temp fix.
If you want them to stick on to left, you may try to set align-content: flex-start
on sync-and-trash-container#tabs-container .sync-and-trash-container { flex-direction: column !important; width:100%; align-content: flex-start !important; .button-toolbar{width:100%}; }
This is what I have atm but it doesn't seem to be leaving the icons on the left side..
-
@nirin delete those width:100% line and add margin:0
that works for me#tabs-container .sync-and-trash-container { flex-direction: column !important; align-content: flex-start !important; margin: 0 !important; }
-
Perfect, thankyou
-
Sorry, me again!
Minor thing, but hopefully someone here has a quick fix for it. I have noticed that when hovering over the sub-container (the right-hand stacked-tabs column) if the mouse is over the right edge of that column (where the 'resize' symbol would appear on the mouse) then instead of opening the sub-column, it opens the main tab column instead.
It's fairly annoying, as of course this mod reduces the column sizes for the tab bar to something quite narrow, and having a good 10-15% of the right hand column being an activator for the wrong column means you get a lot of false-openings.
I made a video showing the issue, as I dunno how much sense my description makes! Hopefully theres a way to limit the mouse-hover activation for the different tab columns.
Edit:
So I found a solution, but it is probably not the most efficient and I suspect it will break if people use different layouts (I don't have any logic for left/right tabs) but maybe someone can correct it to be the 'better version' lol..tabbar-workspace-button ~ #tabs-tabbar-container .SlideBar.SlideBar--FullHeight {visibility: hidden;}
-
@nirin this should be more fit in ur case.
#tabs-subcontainer:has(~ .SlideBar.SlideBar--FullHeight:hover) { scrollbar-width: auto !important; min-width: 200px !important; transition-delay: 70ms !important; /* Change "70ms" to how long you want to delay the animation */ .tab-position {min-width:200px !important;} }
-
@immaintheme said in Collapsing vertical tabs that expand on-hover (with and without floating tabs):
@nirin this should be more fit in ur case.
#tabs-subcontainer:has(~ .SlideBar.SlideBar--FullHeight:hover) { scrollbar-width: auto !important; min-width: 200px !important; transition-delay: 70ms !important; /* Change "70ms" to how long you want to delay the animation */ .tab-position {min-width:200px !important;} }
This seems to not work unfortunately. Hovering over the subcontainer sliderbar still opens up the primary tab column instead of the secondary.
I think it's because the 'subcontainer' slidebar isn't actually the one being used, it's the tabbar-container one. (As it's there even when you don't have a subcontainer column).
-
@nirin thats weird tho. It works perfectly fine on my side.
That code not using subcontainer, just expanding subcontainer if the slidebar next to it has hovered.
If that's the case then your code might be a better option -
hello there !
I have a problem with the last css that has been shared in this topic. It's probably a wrong vivaldi settings...
When I reduce the width of the first row of tab, the second row is well shrank, but the tab label of the second row is going outside of it...
The problem is different when i try to reduce the width of the second row : first row is expanded a bit and the second row doesn't have label anymore when expanded.
Can someone help me on this ^^ ?
thanks ! -
Is anyone else having the random issue where sometimes the bookmark panel does not retract. That happens for me from time to time and there doesn't appear to be any real pattern as to why. Sometimes bringing up the context menu while in the bookmarks panel causes it to go back to normal, but sometimes it doesn't. It's a very annoying issue.
-
@oneakira said in Vertical Tabs | Collapsed & 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 { 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-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%; } /* Show the close button on hover */ .tab:hover .close { display: flex !important; }
@LilaUraraka This is what the final code from @immaintheme looks like, hopefully, it works for you.
@n8chavez I haven't faced this bug on my side.Yeah this broke in v6.9.3447.37
-
@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
-
I guess my fumbling about with CSS proved capable of finding a solution that keeps both the sync button and the trash can.
I changed this:
#tabs-subcontainer { overflow:hidden; &.overflow {flex:1 1 auto !important} &:hover .tab-position {min-width:200px !important;} &:not(:hover) .subcontainer-lock {flex-direction: column;} }
So that it would include .toolbar-tabbar.sync-and-trash-container.left which is what contains those buttons and now it moves to a row when hovered and collapses to a column when not hovered.
#tabs-subcontainer { overflow: hidden; &.overflow { flex: 1 1 auto !important } &:hover { .tab-position { min-width: 200px !important; } .toolbar-tabbar.sync-and-trash-container.left { flex-direction: row; } } &:not(:hover) { .subcontainer-lock { flex-direction: column; } .toolbar-tabbar.sync-and-trash-container.left { flex-direction: column; } } }
-
@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.