(Almost) Autohide vertical tab bar

sdfg

Hello. I suck at CSS, so I was wondering if anyone could give me some pointers. Right now I've got my tab bar vertical on the left, and I was wondering if there was a way to autohide just the text of the tabs, so the favicons are still visible? Makes it a bit easier to go right to roughly the one you want.

greenenemy

try this:

#tabs-container{
    width: 30px !important;
}
#tabs-container:hover{
    width: 180px !important;
}

Kabouik

If you want the tabs to behave as an overlay instead of resizing the web page (see thread on overlay panels), this should work (this is for a right vertical bar):

/*Vertical tab bar auto-hide*/
#tabs-container{
    width: 30px !important;
}
#tabs-container:hover{
    width: 200px !important;
}

/*Tab bar is an overlay instead of resizing the page*/
#main .inner {
	position: relative;
}
#tabs-container {
    position: absolute !important;
    z-index: 25;
    height: 100%;
}
#tabs-container.right {
	right: 0;
}

Is there a way to force the trash icon to stay on the edge of the screen instead of being centered when the tab bar is hovered? And how to remove the border of the tabs-container?

Also, I'm looking for a way to highlight/mark the currently active tab. My theme doesn't have a different color for accent (because it would change the color of the bookmark bar too). This could be a dot marker on the favicon, a different color for the active tab, or even a colored favicon (all my favicons are transformed to grayscale). Not sure how to achieve that.

greenenemy

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

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

.tab-position .tab.active {
    background-color: orange;
}

change orange to whatever background color suits you

Kabouik

Thanks! Unfortunately, none of the three changes works on my side. I have slightly altered the code so that it is adapted to tabs on the right, but no luck. I also tried after removing the "overlay" code for the tab bar, but same result.

greenenemy

It doesn't work because it is for tabs on the left.
Im not sure how your favicons are transformed to grayscale but this should work.
For tabs on right use this:

/*Vertical tab bar auto-hide*/
#tabs-container{
    width: 32px !important;
}
#tabs-container:hover{
    width: 180px !important;
}

/*Tab bar is an overlay instead of resizing the page*/
#main .inner {
	position: relative;
}
#tabs-container {
    position: absolute !important;
    z-index: 25;
    height: 100%;
}
#tabs-container.right {
	right: 0;
}




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

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

.tab-position .tab.active {
    filter: grayscale(0%) !important;
    background-color: orange;
    
}

Kabouik

I already had modified the code from your previous message to adapt it to right tabs (and I carefully checked, exactly the same as in your last message), not working. I'm using Vivaldi-snapshot. I have tried with no other modifications to check if there are any incompatibilities with something else, but same result.

As for favicons, I'm using:

.tab-strip .favicon {
-webkit-filter: grayscale(100%);
}

greenenemy

Best thing you can do is to inspect vivaldi UI code yourself.
"How To Inspect With Dev Tools
You can use the Developer Tools to inspect the Vivaldi UI and do live edits on it. To do so you'll have to run Vivaldi with this command line: –flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end, once you run Vivaldi you should be able to right click anywhere in the UI and choose Inspect. On Windows you can right-click a shortcut and open its properties. "

You can then check IDs and Classes, change some values and see results Immediately. That's how I do it.

Maybe some of the vivaldi hooks make the code incompatible.

Kabouik

Thanks, it helped me investigate the name of the elements, but still no success. I think I just have not enough knowledge of the css basics to know how to prioritize, "and", "or", etc.

I managed to remove the right margin of the trash element (which turns out to be named .button-tabbar .toggle-trash) but it only aligns right when the tab bar is collapsed. It still centers in the expanded tab bar.

As for the rest, could not figure out what makes this border even after inspecting using devtools, but it's not a big deal, I'll probably just leave it as it is.

I think I should use .tab-header instead of .tab-position to change the color of the active tab, but again, I failed horribly. :>

sdfg

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

If you want the tabs to behave as an overlay instead of resizing the web page (see thread on overlay panels), this should work (this is for a right vertical bar):
/*Vertical tab bar auto-hide*/
#tabs-container{
    width: 30px !important;
}
#tabs-container:hover{
    width: 200px !important;
}

/*Tab bar is an overlay instead of resizing the page*/
#main .inner {
	position: relative;
}
#tabs-container {
    position: absolute !important;
    z-index: 25;
    height: 100%;
}
#tabs-container.right {
	right: 0;
}
Is there a way to force the trash icon to stay on the edge of the screen instead of being centered when the tab bar is hovered? And how to remove the border of the tabs-container?

Also, I'm looking for a way to highlight/mark the currently active tab. My theme doesn't have a different color for accent (because it would change the color of the bookmark bar too). This could be a dot marker on the favicon, a different color for the active tab, or even a colored favicon (all my favicons are transformed to grayscale). Not sure how to achieve that.

I put that in, and changed it to

/*Vertical tab bar auto-hide*/
#tabs-container{
    width: 30px !important;
}
#tabs-container:hover{
    width: 200px !important;
}
#tabs-container.left .trash{
    margin-left: 0;
}

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

/*Tab bar is an overlay instead of resizing the page*/
#main .inner {
    position: relative;
}
#tabs-container {
    position: absolute !important;
    z-index: 25;
    height: 100%;
}
#tabs-container.left {
    left: 0;
}

as I've got tabs on the left, but it didn't work. I checked using the devtools as @greenenemy suggested but I can't see what I've missed. Any pointers?

Kabouik

I'm not sure. Maybe an incompatibility with another modification in your custom.css?

There is something we need to improve with the auto-hiding tab bar overlay: at the moment, it behaves as an overlay even when collapsed, which means it's hiding web content. It would be ideal if it could be default (resize the content) when collapsed and if the extra width when extended could be an overlay.

I managed to restore the normal behaviour of the collapsed bar and have the expanded bar as overlay, but then the whole bar is an overlay, not just the extra width (expanded width - collapsed width), so the content is resized again during hover. I'm trying to compensate by moving #panel.slideout-panel (which I believe corresponds to the main web content) 30px from the right border (for my right tabs) when the tab bar is hovered, but no success so far.

sdfg

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

I'm not sure. Maybe an incompatibility with another modification in your custom.css?

ahem Not quite, I forgot to close the previous brace...

There is something we need to improve with the auto-hiding tab bar overlay: at the moment, it behaves as an overlay even when collapsed, which means it's hiding web content. It would be ideal if it could be default (resize the content) when collapsed and if the extra width when extended could be an overlay.

I managed to restore the normal behaviour of the collapsed bar and have the expanded bar as overlay, but then the whole bar is an overlay, not just the extra width (expanded width - collapsed width), so the content is resized again during hover. I'm trying to compensate by moving #panel.slideout-panel (which I believe corresponds to the main web content) 30px from the right border (for my right tabs) when the tab bar is hovered, but no success so far.

main .inner { padding-right: 30px; } worked for me. Well, padding-left, but you get the idea.

Now I just need it to dynamically alter that width for when I have a scrollbar for the tabs...

sdfg

Ok, I've added a transition. Still trying to move the newtab button to stick to the left, and I can't work out how to remove the transition-delay so it'll wait 1s before expanding the tabs, but start instantly when mousing-out.

I've also duplicated this for my panels on the right (which is why I've increased the width to 34px).

Still need to figure out a more elegant way of doing the scrollbar though. Perhaps have it only appear when hovered maybe? It's been years since I last looked at CSS, I imagine that's possible somehow.


.toolbar-addressbar {
    padding-left: 34px;
}

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

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

#tabs-container:hover {
    width: 260px !important;
    transition-delay: 0;
}

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

#tabs-container .newtab {
    margin-left: 0;
    position: relative;
}

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

greenenemy

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

Kabouik

Excellent, thanks! I've tried with padding-right already but I probably messed up the rest too much before so it didn't work. It was simpler than expected actually! I've added some padding to my bookmark bar too because it slides down when I hover it, which makes it hit the collapsed tab bar, ultimately hiding the » icon. Looks like this now:

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

I've considered transitions too but in the end I think I want the tabs to appear immediately. It's already a bit longer to select the right tab when you only see the favicon in advance, and I think vertical tabs are also a little harder to hit accurately with the cursor, so I didn't want any additional delay.

I see that you have the same problem with the newtab button that I have with the trash button. Please let me know if you find a solution. My fix for the newtab button was to delete it. :>

I doubt I will face the scrollbar issue very often given the number of tabs you need to make it appear, but it would indeed be nice to find a way to dynamically alter the collapsed tab bar width.

greenenemy

http://imgur.com/9EJDhtM
This is how my css from above looks for me.

@Kabouik
It is much harder to fix new tab button on the right side, actually i do not know how to.
That's the best workaround so far. http://imgur.com/PtuOYfZ

#tabs-container{
    width: 32px !important;
    position: absolute !important;
    z-index: 25;
    height: 100%;
}
#tabs-container:hover{
    width: 180px !important;
}

#main .inner {
    position: relative;
    padding-right: 32px;
}

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

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

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

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

 .tab.active {
    -webkit-filter: grayscale(0%) !important;
    background-color: orange !important;
}

.tab-strip .favicon {
-webkit-filter: grayscale(100%);
}

.newtab{
    left: 150px !important;
}

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

.color-behind-tabs-on .tab-position .tab {
    background-color: white;
}

sdfg

@greenenemy

Thanks for all your help. I even changed your grayscale favicons so the active tab has the grayscale removed. Getting back into my CSS groove slowly! Now just to fix my auto-hiding address bar.

Kabouik

@greenenemy Excellent, thanks a lot for your help! I tried your code and I see that you managed to have the trash icon on the right, but could not reproduce it on my side. I can't see what part of your code does that. Any pointer?

@sdfg I did the same to restore colors of the active tab's favicon!

For the auto-hiding address bar, one thing I don't like with all the modifications I've seen is they make the address bar inactive by using the visibility: hidden argument, meaning you cannot interact with the bar when it is hidden. Ctrl+L has no effect. If you intend to show the bookmark bar in your UI, then maybe the following code would work for you:

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

I posted it in another thread but improved it slightly so it works better with overlay-auto-hiding vertical tab bar.

[Edit] At some point when altering the css, I have seen a blue and thin progress bar under my address bar/bookmark bar. I thought it was great in combination with my hidden addressbar, but it's not there anymore and I can't find what caused it. Was it from your code?

greenenemy

@Kabouik this part.

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

=======

.tab-strip .favicon {
-webkit-filter: grayscale(100%);
}

-webkit-filter: grayscale(100%); cannot be with !important .

 .tab.active {
    -webkit-filter: grayscale(0%) !important;
    background-color: orange !important;
}

Kabouik

Oh thanks, I guess I missed it. I have had to make it !important to make it work, I guess I have another incompatible modification somewhere; I'll investigate that. The icon was moving by 2 pixels during hover too, but the following works perfectly:

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

I have use a different way to restore colors on the active favicons, it might be a bit dirty but it works.

Here's my current custom.css at the moment:

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

The last things I miss are (i) the progress bar indicator that I briefly observed in a previous temporary custom.css and could not get it back nor identify what code chunk was responsible for it, and (ii) white progress bar in active tab (I haven't identified the name of the corresponding element yet).