Automate Overlay Address bar without position changed!



  • EDIT: Older code are obsolete.
    Please refer to 2nd post for best result...



  • FINALLY! It is DONE!! Best solution EVER!!! 😎

    This is so stupidly simple I can't believe it took me so many try, so fxxking long time to figure this out! 🤣 🤣 🤣

    Here it is, just 2 lines of code:

    /* automate addressbar */
    .toolbar-addressbar {margin-top: calc(var(--toolbarHeight) * -1); top: var(--toolbarHeight); z-index:9; transition: top .1s 0s !important;} 
    #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) {top:0px; transition: top ease-out .15s 1s !important;}
    

    Another new year gift to all of you.
    Thanks, & enjoy.🤟🏻



  • More surprise! More improvement! 🤪

    Now you can drag & drop item into Addressfield & Searchfield even when the Address bar is hidden! Just add this:

    /* drag & drop for hidden address bar */
    .addressfield input, .searchfield input {min-height:0;}
    #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) :matches(.addressfield, .searchfield) input { min-height:32px; color:transparent; transition: min-height 0s 1.15s, color 0s 1.15s !important;}
    
    1. It's ONLY tested with the above mod. This mod increased the input field's height when Address bar is raise & hidden under the header, thus mod which did the similar task might compatible with this mod.

    2. Drag item to below the header, right underneath the text box until you see a Drop OK cursor, then drop it.

    3. Don't drop it on the header of the window, or the top edge screen when maximized, it will never work!

    4. You can increase min-height:32px value to enlarge the drop zone. But doing so will lose more interaction space on the top most section of webpage, but rarely any website would insert any link/button there...

    Ok, I need to go to sleep now... 😪


 

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