(Almost) Autohide vertical tab bar

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

sdfg

@Kabouik

The fact you can't interact with it is a pain in the bum, I completely agree. I didn't realise it was because it was hidden, that was exactly the property I was trying to change to make the transition use the height (that's in my other thread, maybe we can combine our efforts/code there?)

I don't use the bookmark bar at all, I've never really liked them, when they became a Thing I was using Opera, so got so used to the panels for it (yay autohiding panels now!) However, I'd love to get a progress bar shown under the address bar, I guess you mean something like Firefox does on Android? (I've not other examples to compare).

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