Tab-bar auto-hidden behind bookmark-bar + auto-hiding (but still active for shortcuts) address-bar: need improvements



  • Hi,

    I have absolutely no coding skills, you'll certainly feel bad when you see how ugly below code is. There are probably unnecessary lines and/or antagonistic arguments since I really have no knowledge of some of them, but try to combine some of the things I've seen here in others' patches. It sort of works but needs improvements (and cleaning of course, for the aforementioned reasons).

    /*Auto move bookmark-bar over tabs*/
    .tab-strip{0
    	z-index:1;
    }
    .bookmark-bar{
    	position: fixed !important;
    	width: 100%;
    	transform: translateY(-100%);
    	transition: transform 0.2s ease-out 0.2s !important;
    	z-index: 3;
    }
    .bookmark-bar:hover{
    	transform: translateY(0%);
    }
    #header:hover ~ #main .bookmark-bar{
    	transform: translateY(0%);
    }
    .webpanel-header{
    	z-index: 0;
    }
    
    /*Auto hide addressbar*/
    .toolbar-addressbar {
    	position: fixed !important;
    	width: 50%;
    	height: 34px;
    	z-index: 2;
    	opacity: 0;
    	left: 25%;
    	right: 25%;
    	bottom: -33px;
    	background: #ECECEC;
    	border-top: 3px solid #ECECEC;
    	border-bottom: 3px solid #ECECEC;
    	border-left: 3px solid #ECECEC;
    	border-right: 3px solid #ECECEC;
    	transition: transform 0.2s;
    }
    .toolbar:hover {
    opacity: 1;
    transform: translateY(-33px);
    }
    

    https://www.youtube.com/watch?v=auyBLdpSyPE&feature=youtu.be (the glitches come from the recording application, not Vivaldi)

    Many improvements required:

    • code cleaning to remove any unnecessary or antagonistic lines/arguments;
    • make bookmark-bar start to slide down before the mouse hovers it, starting the transition when the cursor is about 40 px lower should be OK (it is very frustrating to target a bookmark and see it evade the cursor, I need to target it twice at the moment if I zant to click on it);
    • the currently active tab is visible above the bookmark-bar, and I haven't found a way to increase the bookmark-bar height to hide it;
    • the address bar does not slide in when Vivaldi is not maximized, I guess it means that the ugly code is not resolution-independent;
    • the address-bar suggestions expand below the bar, it needs to be up (no idea how to do that);
    • there are probably color incompatibilities with some themes.

    Otherwise, I'm relatively satisfied with the behavior. It saves some significant space while keeping everything easily accessible (at leat for me). It is relatively minimalist even when favicons are shown (they are hidden on my configuration, but otherwise the bookmark-bar would still hide them when the cursor is elsewhere). The bookmark-bar also acts as a privacy bar so that your colleagues sneaking in your back cannot see what are your other tabs. Most importantly, the address-bar and associated funky extension icons are hidden but you can still interact with the address-bar when it is hidden (see video when I use Ctrl+L), something I couldn't do with other auto-hiding modifications I've seen. But long story short: the execution is very poor and there are certainly ways to improve this a lot.



  • Another issue I hadn't noticed: extensions' options appear below the toolbar too, so the bottom bar is not convenient at this stage unless it is possible to reverse the direction of the suggestions and extensions' pop-up menus.



  • Ok so, due to too many bugs with the above configuration, I changed my plans a little and decided to keep the address bar on top and hide it with the bookmarks. The address bar and extension icons are by far the least minimalist part of the UI, and I really don't need to see them permanently, so I figured it would be best this way.

    It's just dirty recycling of others' code with superimposed bars, but I haven't seen any other hidden address bar that could still be interacted with when hidden using Ctrl+L, so it may be worth sharing.

    Preview

    I would like to have the the tab bar act as an overlay, either at the bottom or as a vertical bar on the right, like the panels that we see at some point in the gif but I don't know how to achieve that.

    Even better would be a bottom-up translation like with the address bar in first post. Vivaldi is always maximized in my setup and the task bar is at the top, so positioning the cursor at the very bottom of Vivaldi is very easy (it's the screen edge). Ideally, when hidden, a couple pixels should still be visible so that active tab and new tabs can be seen without having to hover the area.

    /*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;
    }
    .bookmark-bar:hover{
    	transform: translateY(100%);
    	transition: transform 0s ease-out 0s;
    }
    
    /*Addressbar size*/
    .toolbar-addressbar {
    	max-height: 0;
    }
    

    Sorry for the typos in the first message, I cannot edit it anymore.



  • @Kabouik Which is the part of the you used for hiding tabs and show them on mouse over? :)



  • Hey @Hadden89, I don't think it was in this .css since I can see the tabs on the animated gif above. Check this instead: https://forum.vivaldi.net/post/80987, and then I think the code is commented so you'll find what you're looking for.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.