Speed Dial Navigation toolbar is now a Menu button



  • A toolbar with ONLY 3 buttons? That's a lot of wasted space for Speed Dial, Bookmark, & History manager tab. Why not use a pop-up menu button instead? Here is a CSS mod to do just that:

    Icon + title menu button:

    /* speed dial nav */
    .startpage .startpage-navigation {position:fixed; z-index:9; min-height:0; border-radius: var(--radius) 0 0 0; bottom:-2px; right:0; width:fit-content; padding:0; display:grid; box-shadow:inset 0 0 0 1px var(--colorBgDark); transform-origin: bottom right; transition: transform .17s linear !important}
    .startpage .startpage-navigation .startpage-navigation-group, .startpage-navigation-group .editable-title-container {display:grid; border-radius: var(--radius) 0 0 0; border:none !important;}
    .startpage .startpage-navigation .startpage-navigation-group:last-of-type .button-startpage {text-align:left;}
    .startpage .startpage-navigation:not(:hover) {transform:scale(.8);}
    .startpage .startpage-navigation:not(:hover) .button-startpage:not(.active) {display:none;}
    
    

    The menu button will be pin on the bottom right corner, just mouseover it to access the menu. That's 1 less click than regular menu button!

    Thanks, & have fun.



  • Updated! Now the menu button will be even more compact inside the manager tab, with icon ONLY when not needed... 😉

    For icon ONLY menu button, just add below code after above one:

    .startpage .startpage-navigation:not(:hover) .startpage-navigation-group:last-of-type .button-startpage.active {max-width:36px;}
    


  • @dude99
    I actually like that toolbar (cause it's full) but also this mod is interesting ^^
    Replacing bottom with top and bottom right with top right do a nice menu button on top, too 😛



  • @Hadden89 But won't the menu button cover up last button on the top right corner in manager tab?



  • @dude99 Whoops.
    You're right, didn't test the manager view.
    Yeah, right bottom has more sense ^^,



  • @dude99 Interesting and well done! Great job.



  • I prefer the autohide method. It takes no space at all until needed and does not spoil the look of the Start Page. One can access it more easily too.

    /*Show Start Page Navigation Bar on Hover*/
    @keyframes hide-startpage-navigation {
    	from {
    		top: 0;
      }
    	to {
    		top: -45px;
        opacity: 0;
      }
    }
    .startpage-navigation {
    	animation: hide-startpage-navigation 1s ease forwards;
    	animation-delay: 0.1s;
    }
    .startpage-navigation:hover {
    	animation: show-startpage-navigation 0.1s ease forwards;
    }
    
    


  • @Pesala Unfortunately, your solution is still taking up full toolbar of height space in manager tab, it seems not quit optimized.
    I improved it with this:

    .startpage-navigation {margin-top:-45px; z-index:1; opacity:0; transition: .15s ease-out .3s !important;}
    .startpage-navigation:hover {transform:translateY(45px); opacity:1; transition: .13s ease-out .1s !important;}
    

    Now it only take up about 6px of horizontal space in both speed dial & manager tab. 😎


    And that's not all, it can be even further improve by hiding the entire toolbar; & reveal by mouseover the header (titlebar):

    .startpage-navigation {margin-top:calc(var(--toolbarHeight) * -1.5); z-index:1; opacity:0; transition: .15s ease-out .3s !important;}
    #header:hover ~ #main .inner .startpage-navigation, .startpage-navigation:hover {transform:translateY(calc(var(--toolbarHeight) * 1.5)); opacity:1; transition: .13s ease-out .1s !important;}
    
    

    Hope u like the improved mod. Enjoy! 😁



  • @dude99 Not my solution, but one kindly provided by @pafflick. It takes up no space at all because it is hidden until needed.

    To be honest, I just want the feature request implemented to hide the navigation bar completely, which can be done with this simpler code:

    /*Hide Start Page Navigation Bar*/
    .startpage-navigation {
    display: none !important;}
    

    It beats me why the developers cannot implement a dozen or more of such easy to fix feature requests in one Snapshot. Why are we still faffing about with CSS code after three years? Your code broke mine, and I haven't got time to debug it.

    It is a great service provided by you coders of course, but it should be only for testing stuff before it gets implemented after a week or two.



  • @Pesala said in Speed Dial Navigation toolbar is now a Menu button:

    It beats me why the developers cannot implement a dozen or more of such easy to fix feature requests in one Snapshot.

    Because implementing a new feature without breaking other stuff is hard, & it will only get harder as more & more features pilling on top of each other. Just imagine u install one more extension & then the browser begin to go nuts because it's not compatible with another extension u installed earlier... 😱

    Why are we still faffing about with CSS code after three years? Your code broke mine, and I haven't got time to debug it.

    See? Our solution/mod doesn't necessary work for all setup & some of 'em will cause problem when use together. When Vivaldi dev implementing a requested feature, it gotta work on all supported platform, & various of setup. So i guess it took a lot of testing & bug fixing before it's good enough for the public consumption. I rather have fewer but stable improvement over a lot of buggy halfass new features.

    I also have similar feeling as u do, sometimes. But be grateful that Vivaldi is mod friendly, i remember many years ago we have to keep begging developer to grant us our request, cuz Opera can't be mod with simple language like CSS & JS.



  • Here r a few different variation which are less optimized for performance, but able to play nice with other mod which also moving stuff around with transform:translate():

    Pesala's suggested solution:

    .startpage-navigation {margin-top:-45px; top:0; z-index:1; opacity:0; transition: .15s ease-out .4s !important;}
    .startpage-navigation:hover {top:45px; opacity:1; transition: .13s ease-out .1s !important;}
    


    Mouseover both Title bar or Address bar to show Nav toolbar:

    .startpage-navigation {margin-top:calc(var(--toolbarHeight) * -1.5); top:0; z-index:1; transition: .15s ease-out .4s !important;}
    #header:hover ~ #main .inner .startpage-navigation, .toolbar-addressbar:hover ~ .inner .startpage-navigation, .startpage-navigation:hover {top:calc(var(--toolbarHeight) * 1.5); transition: .13s ease-out .1s !important;}
    


    Same as above, just with different approach:

    .startpage-navigation {margin-top:calc(var(--toolbarHeight) * -1.5); top:calc(var(--toolbarHeight) * 1.5); z-index:1; transition: .13s ease-out .1s !important;}
    #header:not(:hover) ~ #main .toolbar-addressbar:not(:hover) ~ .inner .startpage-navigation:not(:hover) {top:0; transition: .15s ease-out .4s !important;}
    
    

    The idea is transform:translate() usually is the most efficient way to move object with best performance compare to top. However transform usually doesn't play well with other mod with transformation which affecting the same object, it might cause weird & unpredictable result. Thus, hopefully using top can work around this problem.



  • @Pesala said in Speed Dial Navigation toolbar is now a Menu button:

    Your code broke mine, and I haven't got time to debug it.

    That's because you still use the old way of patching your mods into Vivaldi. Read the Modding Vivaldi thread and implement the modifications with the help of browser.html and dedicated files. Messing with common.css is a bad idea. If I want to test something, I open the custom.css/custom.js file, delete everything that's in there and paste the code provided. Afterwards I simply undo the changes and am back to standard.

    Testing/running mods isn't restricted like on Firefox, but you gotta know what you are doing. The only prerequisites are basic coding knowledge and a willingness to follow directions.



  • @luetage said in Speed Dial Navigation toolbar is now a Menu button:

    That's because you still use the old way of patching your mods into Vivaldi.

    No, it is because I have more than another to do with other work.

    Updating my Blog is just one of several projects I have done in the last few days.



  • @Pesala Hey Pesala, did my 2nd improved mod working properly for u here? https://forum.vivaldi.net/post/264959

    Also, someone have made a .bat to make reapply mod much easier:
    https://forum.vivaldi.net/post/183357



  • @dude99

    Your Pesala's suggestion has an error, should be top: 0 for the hover. Otherwise you are starting the animation 45px from the original point which makes it float on the page.

    The next 2 didn't work for me.

    This is what I've been using (I stole a line of your code for an interesting effect to replace the active highlight). It has a generous trigger area under the addressbar with a long enough delay to avoid false triggers

    .startpage .startpage-navigation {
        position: absolute;
        z-index: 1;
        box-shadow: none !important;
        top: -32px;
        min-height: 42px;
        font-size: 1.1em;
        font-weight: 700;
        width: 100%;
        opacity: 0;
        transition: .3s ease-out .5s !important;
    }
    
    .startpage .startpage-navigation:hover {
        top: 0;
        background: var(--colorBgAlphaHeavier);
        backdrop-filter: blur(5px);
        opacity: 1;
        transition: .3s ease-out .3s !important;
    }
    
    .button-startpage.active, .button-startpage:active {
        background-color: transparent !important;
        border: 0 !important
    }
    
    .startpage .button-startpage {top: 2px}
    
    .startpage .button-startpage:hover, button.button-startpage:hover svg {
        color: var(--colorHighlightBg);
        fill: var(--colorHighlightBg)
    }
    
    .startpage .startpage-navigation .startpage-navigation-group,
    .startpage-navigation-group .editable-title-container {border: none !important}
    
    .startpage .startpage-navigation:not(:hover) .button-startpage:not(.active) {display: none}
    

    There is a blur effect for the transparent navbar that needs to enabled in flags chrome://flags/#enable-experimental-web-platform-features



  • @sjudenim Hmm... This is weird, I tested all 3 mods with blank custom.css mod & they all work as intended.

    The margin-top:-45px; top:0; should move the Nav toolbar & everything below it upward by 45px, leaving about 6px of space below address bar for mouseover activation. So on hover state top:45px will move it downward to reveal the Nav toolbar without moving everything below it.

    The 2nd version using the same method but hide the entire bar, & the 3rd version is the exact opposite. What OS you tested on? I'm using win8.1.



  • @dude99

    The last 2 work for me too now that you have edited the post. Win 8.1 as well by the way.

    The first one still does not work for me. Hiding a bar that is 45px by 45px leaves no trigger point, when you remove the opacity there is nothing showing



  • @sjudenim Oh. I only remove :not(:focus-within) from version 3 because it feel too sticky & unpractical. Didn't edit version 1 & 2 though. 🤔

    I'm glad it's working properly now. At first I thought those mod are dependent on other mod I'm using, so i keep doing rechecking over & over but found nothing wrong... 😵

    Anyway, thank you for sharing your mod. I learn something new after study it a bit. backdrop-filter is a pretty cool new feature, now I can do opacity stuff with the background & keep the foreground object intact!



  • @dude99

    Actually, the first one still isn't working for me. I've stated why above

    backdrop-filter is great but it comes with one caveat, it doesn't play nice with box-shadow



  • @sjudenim Oh I see. So a fixed toolbar height value is the problem. In that case simply change the value to margin-top: calc(var(--toolbarHeight) * -1.3) on the 1st line, & top: calc(var(--toolbarHeight) * 1.3) for the 2nd line.

    I use the fixed height of 45px because that's the proposed value by Pesala in his solution, my nav toolbar height is 51px so I assumed that's the default toolbar height for everyone. Guess I'm wrong. 😅

    backdrop-filter is great but it comes with one caveat, it doesn't play nice with box-shadow

    Oh yeah, I can imagine how difficult it would be to render a filter box on top of another special effect... I don't think web browser is that good yet & it might crashed most potato. 🤣


 

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