(Almost) Autohide vertical tab bar

Hadden89

Testing the code, it works nicely (panel on left, tabs on right) but then you can't resize anymore (from Vivaldi, via code works) the tab bar width.

Kabouik

@sdfg I don't know anything about coding or css to be honest so I'm not sure my help is very valuable, but I do agree that using y-translation would be more convenient than visibility, since it keeps the bar active (it does in my setup).

A few thoughts on how you could achieve what you want without a bookmark bar as I did:

Having the address bar 99% out of your screen on a screen edge, just keeping 1 px inside the screen, and slide in when you hover it (if it's on a screen edge, it's easy to hover without accurate targeting with the cursor). Dirty workaround though unless you can make the 1 px invisible.
Have the address bar hidden behind the web content and configure a higher z-value when hovered (but not sure the "hover" state would be triggered if the bar is at a lower level). If not, then you could fiddle with browser.html to add a transparent box on top that can be hovered instead to trigger the action, but fiddling with the html is not recommended I think. Dirty.
Key combination to make the bar slide in (don't know if this is doable with css).
Same as me using the status bar instead, if you use it.

As for the progress bar, yes, exactly the same as on Firefox Android. But believe me or not, I did see this in my Vivaldi setup just before my earlier message. There was a blue thin bar exactly like that. It was perfect. And pouf, suddenly it disappeared after the next Vivaldi restart and I couldn't see what caused it in my css. Maybe it was just a bug or the address bar under (z speaking) slightly protruding below (y speaking) my bookmark bar? If anyone has an idea, please don't hesitate!

After a few days of use, I'm pretty satisfied with my current configuration. Minimalist, lots of space for the content, privacy with tabs not very visible, still convenient to use, not ugly extension icons but I can still interact with them if I hover the bookmark bar. Now I guess I just need to actually have really useful bookmarks in that bar instead of outdated stuff I don't visit anymore (oh, and by the way, before anyone asks, this "Squirt" bookmark in earlier screenshots is just the speedreader tool D:, a friend asked me when I showed him the UI D:). I just miss this mysterious this progress bar, as well as white progress bar in selected tab. And @Hadden89 is right that a way to resize tabs from the UI would be better, although I don't think I'll need it.

Kabouik

Ok, I'm not crazy, am I?

http://i.imgur.com/r7SaJ69.png

It's probably just something specific to the Vivaldi forum and I hadn't noticed it before. Would be great to have this progress bar for every domain.

greenenemy

@Kabouik
You might have to tweak it but try this for progress bar under address bar:

.addressfield .pageload:not(.unstarted).progress-done{
    opacity:0;
    
} 
.addressfield .pageload:not(.unstarted).progressing{
     opacity:1;
    
}
.addressfield .pageload .pageload-indicator{
    height: 8px;
    left: -200px;
    right: -200px;
    top: 30px;
    z-index:1;
    
}
.pageload-indicator{
    opacity:1 !important;
}

Kabouik

Excellent, thanks a lot for this @greenenemy! I edited it this way and it seems to work correctly. I'm not sure about the -200px though.

/*Thin progress bar under bookmark-bar*/
.addressfield .pageload:not(.unstarted).progress-done{
    opacity: 0;
}
.addressfield .pageload:not(.unstarted).progressing{
     opacity: 1;
}
.addressfield .pageload .pageload-indicator{
    height: 2px;
    left: -200px;
    right: -200px;
    top: 25px;
    z-index: 1;
}
.pageload-indicator{
    opacity: 1 !important;
}

Kabouik

For some reason, probably a recent update, my addressbar is now full width and hides the extension icons on the right. I tried changing my custom.css with the following:

.toolbar-addressbar {
	max-height: 0;
	max-width: 60%;
}

But it just shrinks the addressbar and probably everything that comes with it. The Minimize/Maximize/Close buttons are now away from the right edge of the window, at 40%, but no extension icons.

Any idea on what I should do?

Kabouik

@greenenemy said in (Almost) Autohide vertical tab bar:

@sdfg transitions+scroll hover&thin

#tabs-container{
    width: 34px !important;
    position: absolute !important;
    z-index: 25;
    height: 100%;
    transition: width 0.2s linear 0s;
}
#tabs-container:hover{
    width: 260px !important;
    transition: width 0.2s linear 1s;
}

#main .inner {
    position: relative;
    padding-left: 34px;
}

#tabs-container.left .trash{
    margin-left: 0px;
}

#tabs-container.left {
    border-right-width: 0px;
}

#main .inner {
    position: relative;
}

#tabs-container.left, .newtab {
    left: 0px !important;
}

.tab-strip {
    overflow-y: hidden !important;
}
.tab-strip:hover {
    overflow-y: auto !important;
}

#tabs-container ::-webkit-scrollbar {
    width: 7px;
}

@greenenemy, for some reason the scrollbar in vertical tab-bar doesn't work anymore (speaking about the tab scrollbar, not the content scrollbar). It is permanently displayed and partly hides the favicons, plus the tab-bar won't extend anymore when hovered. Am I the only one with this issue?

I'd be very grateful if someone could help solving this issue, Vivaldi is barely useable at the moment with this.

greenenemy

@Kabouik
It would be best if you could post your whole custom css. This code you quoted above is indeed broken in latest vivaldi but there are different issues with it than those you describe.

Kabouik

Sure, here's my current custom.css:

/*Auto move bookmark-bar bar over addressbar*/
.toolbar-addressbar{
	position: relative !important;
}
.bookmark-bar{
	position: relative !important;
	top: 0px;
	width: 100%;
	transform: translateY(0%);
	transition: transform 0.2s ease-out 1.5s;
	z-index: 2;
	padding-right: 30px;
}
.toolbar-addressbar:hover ~ .bookmark-bar, .bookmark-bar:hover
{
	transform: translateY(100%);
	transition: transform 0s ease-out 0s;
}

/*Addressbar size*/
.toolbar-addressbar {
	max-height: 0;
}

/*Auto hide panel bar*/
#panels-container {
position: fixed;
height: 100%;
max-width: 0vw;
opacity: 0;
z-index: 1;
transition: max-width .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity .2s linear .2s;
}
#panels-container:hover {
max-width: 99vw;
opacity: 1;
transition-delay: 0s;
}

/*Panel are overlays instead of resizing the page*/
#main .inner {
	position: relative;
}
#panels-container {
    position: absolute !important;
    z-index: 25;
    height: 100%;
}
#panels-container.right {
	right: 0;
}

/*Vertical tabs as overlay*/
#main .inner {
    position: relative;
    padding-right: 30px;
}

/*Vertical tabs auto-hide*/
#tabs-container{
    width: 30px !important;
    position: absolute !important;
    z-index: 25;
    height: 100%;
}
#tabs-container:hover{
    width: 200px !important;
}

/*Align trash icon to right in vertical tab bar*/
#tabs-container.right .trash{
    margin-right: -2px !important;
}

/*No border in vertical tab bar*/
#tabs-container.right {
    border-left-width: 0px;
    right: 0px;
}

/*Hide scroll bar in collapsed vertical tab bar*/
.tab-strip {
    overflow-y: hidden !important;
}
.tab-strip:hover {
    overflow-y: auto !important;
}
#tabs-container ::-webkit-scrollbar {
    width: 7px;
}
.color-behind-tabs-on .tab-position .tab {
    background-color: white;
}

/*Color the active tab in the tab bar*/
.tab.active {
    -webkit-filter: grayscale(0%) !important;
    background-color: #5294E2 !important;
}
.tab-strip .tab.active .favicon {
    -webkit-filter: grayscale(0%) !important;
}
.tab.active .title {
	  color: white !important;
}
.tab.active .pageload-indicator {
	  color: white !important;
}

/*Remove favicons from tab OR set them as grayscales*/
.tab-strip .favicon {
    -webkit-filter: grayscale(100%);
}

/*Buttons grayscale*/
.button-toolbar.back, .button-toolbar.forward, .button-toolbar.next, .button-toolbar.rewind, .button-toolbar.reload, .button-toolbar.home, #tabs-container .trash {
-webkit-filter: grayscale(100%) !important;
}
.toolbar.toolbar-addressbar .button-toolbar {
-webkit-filter: grayscale(80%) !important;
}

/*Loading colour in address bar and adjusted position of addfressfield*/
.addressfield {
top: 2px !important;
}
.addressfield .pageload-indicator {
background-color: #5294E2 !important;
}

/*Hide new tab button*/
.button-tabbar.newtab {
	display: none !important;
}

/*Thin progress bar under bookmark-bar*/
.addressfield .pageload:not(.unstarted).progress-done{
    opacity: 0;
}
.addressfield .pageload:not(.unstarted).progressing{
     opacity: 1;
}
.addressfield .pageload .pageload-indicator{
    height: 2px;
    left: -200px;
    right: -200px;
    top: 25px;
    z-index: 1;
}
.pageload-indicator{
    opacity: 1 !important;
}

I haven't updated in a long time because I don't know much about coding so it never is an easy task, but until now there was no dramatic issue.

Current issues:

Tab bar scrollbar
Tab bar does not expand anymore on hover
Inactive favicons not in grayscale anymore
Panels/Downloads/Bookmarks/Notes on the left are not behaving as overlays anymore
Not related to the custom.css actually, but cannot run vivaldi-snapshot as root anymore without the required flag, which prevents me from saving vendor-bundle.js with the correct permissions, required by jdhooks that I use for hiding the V button and Minimize/Maximize/Close bar when Vivaldi is maximized (therefore I can't hide this bar anymore, but it is not critical).

sjudenim

@Kabouik

I can help you out with 2 of your issues since I am using working code (though I hide my favicons)

For the favicons. I've added a background because the white doesn't suit all themes

.favicon,
.tab-position .tab .favicon,
.tab-position .tab.active .tab-header .favicon {
    background-color: var(--colorBg) !important;
    -webkit-filter: grayscale(100%);
}

Are you saying that the panel resizes the page like the default behavior? That kind of looks like my code but you have some extra bits that are not necessary. I have the toggle on with this ( I've lowered my z-index so my statusbar overlay will go over top of the panels so yours should still be fine)

#panels-container {
    position: absolute !important;
    z-index: 15;
    height: 100%;
}

Of course to get the toggle to look better you have edit that as there is a line after it. I've also recoloured it for the theme. You can fool around with this if you want

.panel-group, #panel_switch.off:hover {
    background-color: var(--colorBgDark) !important;
}
#switch,
#panel_switch:hover,
#panel_switch.off {
    background-color: var(--colorBg) !important;
}
#panels-container:after {
    background-color: transparent !important;
}

greenenemy

@Kabouik
Sorry for late response. I just checked your custom.css and there is something else that makes it not work correctly. For me everything behaves as expected.

alt text

Kabouik

Sorry for my later answer too! I have been away lately and could not check this. Weird, I tried uninstalling Vivaldi-snapshot and using stable instead, but I have had the same issues. However I after reinstalling VivaldiHooks on this new Vivaldi install, everything works correctly again. I guess there was an issue with my vendor-bundle.js!

Glad to see my Vivaldi browser perfect again! :>

sdfg

Ok, so with a recent update there is no background to any tab except the current tab and the hovered tab. Have they changed the DOM or something?

luetage

@sdfg Tabs have a background color, vertical tabs too. But it depends on your theme. If you have a very dark color behind tabs, then the background won't be very visible, since the background is a shade and always darker. I wonder if Vivaldi shouldn't switch it up to go lighter on dark colors, which would be somewhat logical. And make sure you don't have transparent tabs selected in your theme.

sdfg

@luetage Yes, transparent tabs was selected. Interesting that it didn't do this before now with that option selected. Thanks for the reminder though!

Kabouik

My Vivaldi setup is now completely borked with the latest update to 2.3.1440.41-60. I just get a white window with no UI at all whenever I change my browser.html to load custom.css. Not sure what is wrong, as my custom.css was still working so far (except from the extensions icons that have disappeared 3 or 4 updates ago).

This is my (rather long) custom.css, discussed here in the previous messages (this is the reason why I post in this thread):

/*Auto move bookmark-bar over addressbar*/
.toolbar-addressbar{
	position: relative !important;
}
.bookmark-bar{
	position: relative !important;
	top: 0px;
	width: 100%;
	transform: translateY(0%);
	transition: transform 0.2s ease-out 1.5s;
	z-index: 2;
	padding-right: 30px;
	font-size: 10.5;
}
.toolbar-addressbar:hover ~ .bookmark-bar, .bookmark-bar:hover
{
	transform: translateY(100%);
	transition: transform 0s ease-out 0s;
}

/*Addressbar size*/
.toolbar-addressbar {
	max-height: 0;
}

/*Auto hide panel bar*/
#panels-container {
position: fixed;
height: 100%;
max-width: 0vw;
opacity: 0;
z-index: 1;
transition: max-width .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity .2s linear .2s;
}
#panels-container:hover {
max-width: 99vw;
opacity: 1;
transition-delay: 1s;
}

/*Panel are overlays instead of resizing the page*/
#main .inner {
	position: relative;
}
#panels-container {
    position: absolute !important;
    z-index: 25;
    height: 100%;
}
#panels-container.left {
	right: 16px;
}

#panels-container > .fullheight {
    cursor: sw-resize;
    min-width: 40px;
    right: 5px;
}

/*Vertical tabs as overlay*/
#main .inner {
    position: relative;
}

/*Vertical tabs auto-hide*/
#tabs-container{
    width: 28px !important;
    position: absolute !important;
    z-index: 2;
    height: 100%;
}
#tabs-container:hover{
    width: 200px !important;
}
.color-behind-tabs-on #tabs-container{
    background-color: #f3f3f3eb; !important;
}
#tabs-container > .fullheight {
    min-width: 0;
    right: 0;
}

/*Move webview a little to the right so it's not hidden by the tab favicons (WILL LEAVE A VERTICAL EMPTY BAR DURING FULLSCREEN VIDEOS)*/
#webview-container {
    left: 1.5%;
    max-width: 98.5%;
}

/*Align trash icon to left in vertical tab bar (NOT WORKING)*/
.sync-and-trash-container {
    justify-content: left; !important;
}

/*No border in vertical tab bar*/
#tabs-container.right {
    border-right-width: 0px; !important;
    right: 0px;
}

/*Hide scroll bar in collapsed vertical tab bar*/
.tab-strip {
    overflow-y: hidden !important;
}
.tab-strip:hover {
    overflow-y: auto !important;
}
#tabs-container ::-webkit-scrollbar {
    width: 7px;
}
.color-behind-tabs-on .tab-position .tab {
    background-color: white;
}

/*Color the active tab in the tab bar*/
.tab.active {
    -webkit-filter: grayscale(0%) !important;
    background-color: #5294E2 !important;
}
.tab-strip .tab.active .favicon {
    -webkit-filter: grayscale(0%) !important;
}
.tab.active .title {
	  color: white !important;
}
.tab.active .pageload-indicator {
	  color: white !important;
}

/*Remove favicons from tab OR set them as grayscales*/
.tab-strip .favicon {
    -webkit-filter: grayscale(100%);
}

/*Buttons grayscale*/
.button-toolbar.back, .button-toolbar.forward, .button-toolbar.next, .button-toolbar.rewind, .button-toolbar.reload, .button-toolbar.home, #tabs-container .trash {
-webkit-filter: grayscale(100%) !important;
}
.toolbar.toolbar-addressbar .button-toolbar {
-webkit-filter: grayscale(80%) !important;
}

/*Loading colour in address bar and adjusted position of addfressfield*/
.addressfield {
top: 2px !important;
}
.addressfield .pageload-indicator {
background-color: #5294E2 !important;
}

/*Hide new tab button*/
.button-tabbar.newtab {
	display: none !important;
}

/*Thin progress bar under bookmark-bar*/
.addressfield .pageload:not(.unstarted).progress-done{
    opacity: 0;
}
.addressfield .pageload:not(.unstarted).progressing{
     opacity: 1;
}
.addressfield .pageload .pageload-indicator{
    height: 2px;
    left: -200px;
    right: -200px;
    top: 25px;
    z-index: 1;
}
.pageload-indicator{
    opacity: 1 !important;
}

[Edit] Seems to work again when using the "Vivaldi hooks" fork for compatibility with latest Vivaldi versions (but, weirdly, the old hooks were still working for me, despite them being deprecated since at least Vivaldi 1.11, I just had to chmod the corresponding files).

luetage

@Kabouik This code has a ton of issues. You should use a text editor, which is able to recognise errors.

Example for one of these errors:
Line 75 is:

.color-behind-tabs-on #tabs-container{
    background-color: #f3f3f3eb; !important;
}

should be:

.color-behind-tabs-on #tabs-container {
    background-color: #f3f3f3 !important;
}

Hexadecimal colors can only have 6 characters and there's an extra semicolon before !important which makes the whole line invalid. There are a ton of similar errors, go through it again. Also make sure only to use !important when it's really necessary, always try without it first (or after you get it working).

Kabouik

I am using a code editor but I admit I haven't checked this css code since 2 years and did not notice some issues. Something perhaps even worse, I am sure there are also redundancies or contradictory chunks. Finally, I'm not familiar with how to deal with .name headers when there are multiple ones nested into each other, I am sure there are errors there too.

I actually noticed the issue you mentioned a couple hours ago when I decided to go back in the code because of my issue, and to fix the extension-wrapper! However, there are still tons of other issues, you are right. I need to really go into it and review the code, but never took the time and I kind of postpone until the next issue happens, lazy and ugly.

In most cases the !important flag was used only after trying without it without success, but I used it so often that there are probably some conflicts now. This code is definitely not ready for being re-used by others, it would need to be sanitized.

For later reference (who knows, I might need it in two years!), here is the quickly updated code that kind-of-works as of today:

/*Auto move bookmark-bar over addressbar, move addressbar to left side of titlebar, move titlebar to the right*/
.toolbar-addressbar{
	position: relative !important;
	max-height: 0;
	width: 100%;
}
#titlebar #pagetitle {
	left: 30%;
	right: 0;
	text-align: right;
}
.bookmark-bar{
	position: relative !important;
	top: 0px;
	width: 100%;
	transform: translateY(0%);
	transition: transform 0.2s ease-out 0.5s;
	z-index: 2;
	padding-right: 30px;
	font-size: 9.5;
}
.toolbar-addressbar:hover ~ .bookmark-bar, .bookmark-bar:hover
{
	transform: translateY(100%);
	transition: transform 0s ease-out 0s;
}

/*Show extensions under the bookmarkbar*/
.extensions-wrapper {
	overflow: visible;
	position: absolute;
	right: 0px;
}

/*Move burger menu and window buttons to further in top left and top right corners, respectively*/
.window-buttongroup {
	right: 2px !important;
	top: 2px !important;
}
.tabs-left.color-behind-tabs-on .vivaldi span.vivaldi-v, .tabs-left.color-behind-tabs-on .vivaldi span.burger-icon, .tabs-right.color-behind-tabs-on .vivaldi span.vivaldi-v, .tabs-right.color-behind-tabs-on .vivaldi span.burger-icon, .tabs-bottom.color-behind-tabs-on .vivaldi span.vivaldi-v, .tabs-bottom.color-behind-tabs-on .vivaldi span.burger-icon {
	padding-top: 2px !important;
}

/*Limit addressfield size*/
.addressfield {
	position: fixed;
	left: 30px;
	top: 2px;
	width: 40%;
	border: 0;
	height: 22px !important;
	background-color: #FFFF;
	z-index: 3;
}

/*Loading colour in address bar and adjusted position of addfressfield*/
.addressfield .pageload:not(.unstarted).progress-done{
    opacity: 0;
}
.addressfield .pageload:not(.unstarted).progressing{
     opacity: 0.65;
}
.addressfield .pageload .pageload-indicator{
    height: 20px;
    left: 25px;
    width: 90%;
    top: 1px;
		background-color: #5294E2 !important;
    z-index: 1;
}

/*Auto hide panel bar*/
#panels-container {
position: fixed;
height: 100%;
max-width: 0vw;
opacity: 0;
z-index: 1;
transition: max-width .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity .2s linear .2s;
}
#panels-container:hover {
max-width: 99vw;
opacity: 1;
transition-delay: 1s;
}

/*Panel are overlays instead of resizing the page*/
#main .inner {
	position: relative;
}
#panels-container {
    position: absolute !important;
    z-index: 25;
    height: 100%;
}
#panels-container.left {
	right: 16px;
}

#panels-container > .fullheight {
    cursor: sw-resize;
    min-width: 40px;
    right: 5px;
}

/*Vertical tabs as overlay*/
#main .inner {
    position: relative;
}

/*Vertical tabs auto-hide*/
#tabs-container{
    width: 28px !important;
    position: absolute !important;
    z-index: 2;
    height: 100%;
}
#tabs-container:hover{
    width: 200px !important;
}
.color-behind-tabs-on #tabs-container{
    background-color: #f3f3f3 !important;
}
#tabs-container > .fullheight {
    min-width: 0;
    right: 0;
}

/*Move webview a little to the right so it's not hidden by the tab favicons (WILL LEAVE A VERTICAL EMPTY BAR DURING FULLSCREEN VIDEOS)*/
#webview-container {
    left: 1.5%;
    max-width: 98.5%;
}

/*Align trash icon to left in vertical tab bar*/
.sync-and-trash-container {
    justify-content: left !important;
}

/*No border in vertical tab bar*/
#tabs-container.right {
    border-right-width: 0px !important;
    right: 0px;
}

/*Hide scroll bar in collapsed vertical tab bar*/
.tab-strip {
    overflow-y: hidden !important;
}
.tab-strip:hover {
    overflow-y: auto !important;
}
#tabs-container ::-webkit-scrollbar {
    width: 7px;
}
.color-behind-tabs-on .tab-position .tab {
    background-color: white;
}

/*Color the active tab in the tab bar*/
.tab.active {
    -webkit-filter: grayscale(0%) !important;
    background-color: #5294E2 !important;
}
.tab-strip .tab.active .favicon {
    -webkit-filter: grayscale(0%) !important;
}
.tab.active .title {
	  color: white !important;
}
.tab.active .pageload-indicator {
	  color: white !important;
}

/*Remove favicons from tab OR set them as grayscales*/
.tab-strip .favicon {
    -webkit-filter: grayscale(100%) !important;
}

/*Buttons grayscale*/
.button-toolbar.back, .button-toolbar.forward, .button-toolbar.next, .button-toolbar.rewind, .button-toolbar.reload, .button-toolbar.home, #tabs-container .trash {
-webkit-filter: grayscale(100%) !important;
}
.toolbar.toolbar-addressbar .button-toolbar {
-webkit-filter: grayscale(80%) !important;
}

/*Hide new tab button*/
.button-tabbar.newtab {
	display: none !important;
}

It moves the address field to the title bar, next to the top left burger menu; the pageload indicator is now inside the address field, the page title is now next to the address field, aligned to the right, and the extension wrapper is back. Short video to illustrate: https://giant.gfycat.com/PlushGlisteningChinesecrocodilelizard.webm

Overall, I really like the result, but I know the execution is horrendous. :<

Slim08

Slimmed down to the auto hide part for the tabbar when displayed at the right side. Also added a smooth transition.

/*Vertical tabs auto-hide*/
#tabs-container{
    transform: translateX(230px) !important;
    transition: transform .3s .6s ease-out !important;
    position: absolute !important;
    z-index: 2 !important;
    height: 100% !important;
}

.tab-position {
min-height: 31px !important;
}

.tab-position .tab .tab-header {
    flex: 0 0 31px !important;
}

#tabs-container:hover{
    transform: translateX(0) !important;
}

#tabs-container > .fullheight {
    min-width: 0 !important;
    right: 0 !important;
}

/*Move webview a little to the right so it's not hidden by the tab favicons (WILL LEAVE A VERTICAL EMPTY BAR DURING FULLSCREEN VIDEOS)*/
#webview-container {
    padding-right: 31px !important;
}

/*Align trash icon to left in vertical tab bar*/
.sync-and-trash-container {
    justify-content: left !important;
    transform: translate(1px,3px) !important;
}

/*No border in vertical tab bar*/
#tabs-container.right {
    border-right-width: 0px !important;
    right: 0px !important;
}

dude99

@Slim08
My take, combine very ancient width method with modern CSS3 solution:

/* vertical tabbar auto-shrink */
#tabs-container.left, #tabs-container.right {position:absolute; height: 100%; z-index:1; transition: width .15s 0s !important;}
#tabs-container.left:not(:focus-within):not(:hover), #tabs-container.right:not(:focus-within):not(:hover) {width: 30px !important; transition: width .2s ease-in .25s !important;}
#tabs-container.right {right:0;}

#browser:not(.fullscreen).tabs-left #webview-container {margin-left:30px;}
#browser:not(.fullscreen).tabs-right #webview-container {margin-right:30px;}

It compatible with both left & right tabbar, width resize, & won't affect fullscreen. Weakness are performance & resource consumption for animation will hit very hard when you have a ton of tabs opened. Solution would be limit the animation period or using steps(6) to limit the animation redraw to 6 frames - it will look slightly choppy but won't lag or freeze the browser on potato machine.

Have fun!

(Almost) Autohide vertical tab bar

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...