Vertical Tabs | Collapsed & Expand On-Hover
-
@immaintheme sadly adding this fix the f11 fullscreen bar, the bar does disappear when i go fullscreen in youtube or other media platforms but in the case of f11 fullscreen the vertical tabbar just stays there blank. Also this code that I'm running gets the vertical tabbar in panel tabs too, like I used discord as the mobile version in panels and the bar isn't visible there but at the left edge of the panel tab it just exists; being invisible but functioning
this is my current code:
# VERTICAL FLOATING COLLAPSE WHEN HOVER TABS .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.inner #webpage-stack { margin-left: 0px; } .theme-dark .tab-position .tab.active .tab-header .favicon { filter: none !important; }
-
@krishpiscool hmmm I help you with adding left panel size to margin. Please try if it fit you.
.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; margin-left: 35px; } #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; }
-
@immaintheme This fixed the fullscreen and panel tab issues but it is a whole different bar of its own now lol just have a look at this
Thanks for using your precious time on this btw! much appreciated.
-
@immaintheme also, the favicons; the tab icons in the vertical tabbar are not centered. Not only that I can't hide the audio icon for active tabs playing audio that mutes the tab. I tried a lot of code lines from vivaldi forum and reddit but not a single one was able to hide that icon
-
@krishpiscool isn't your panel bar should be there? I thought you have your panel bar on left
-
@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!