Is it possible? Mouse Hover- Floating Address Field/Bar

[ChimeraLove]

Hello there,
I'm new to modding Vivaldi, Is it possible to make the Floating address field appear only when doing top screen mouse hover, like shown in the gif.
I did it with the keyboard shortcuts F8 and Esc to Illustrate it.

If it is, I would love your guidance as to how to do it
Thank you!!
https://imgur.com/34VIZJn

[dude99]

This basically will do exactly what u show in the gif, but IMHO it's not really practical because you won't be able to access all other stuff inside the addressbar. Then, you might wanna tweak the addressfield with minimum width & centered it.

.address-top .toolbar-addressbar { position:absolute; width: 100vw; visibility:hidden;}
.toolbar-addressbar .addressfield {visibility: visible;}
#header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) {margin-top: -34px; transition: margin-top 0s .5s !important;} 

My current addressbar mod is this, it hide & show the full addressbar instead.

.address-top .toolbar-addressbar { z-index:1; margin-top:-34px; top:34px; transition: top 0s 0s !important;} 
#header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) {top:0; transition: top .1s steps(5) .5s !important;}

One more thing, currently Vivaldi have a bug related to drag & drop object into floating browser's GUI, you won't be able to drop anything into the addressbar if you mod it into a floating object.

Hope this is helpful to u.

[ChimeraLove]

Hi, Thanks for answering!
You are very right that the full address bar is much better than the reduced floating one.
I just needed to delete the z-index:1; so it will be on top of the left vertical tabs.

But, actually.. can we take it a step further?

Is it possible to hide both title bar and the address bar, and when hovering the top edge of the window that they will both appear?

It could be so great if it is!
Thank you!

I tried using this code to merge the title bar and the address bar, and then toggle their visibility together without success, but I think this will make it unnecessarily complicated
https://github.com/Sporif/CustomHooks/blob/master/hooks/combine-header-toolbar.css

[dude99]

@ChimeraLove said in Is it possible? Mouse Hover- Floating Address Field/Bar:

Is it possible to hide both title bar and the address bar, and when hovering the top edge of the window that they will both appear?

Yes. In fact that's apart of CSS mod I'm using. I have all GUI automate in maximized window so that it will feel like fullscreen & only show 'em when I hover pointer at the screen edge.

/* maximized hidden header */
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header {background:black; min-height:1px;}
/* floating titlebar */
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover #pagetitle {z-index:1; width: fit-content; height: unset; padding: 1px 8px; margin: 3px auto; border-radius:3.5px; background-color:var(--colorBgIntense);}
/* maximized compact windows button */
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover button.vivaldi {border-top: 1px dashed white; left: -6px;}
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button {border-top: 1px solid transparent;}
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover .window-buttongroup button.window-minimize {border-top: 1px solid white; margin-right: 2.5px;}
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover .window-buttongroup button.window-maximize {border-top: 1px solid cyan; margin-right: 2.5px;}
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover .window-buttongroup button.window-close {border-top: 1px solid red;}
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button:hover {border-top: 1px dotted lavender !important;}
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button:hover:after {position:absolute; z-index:99; padding:0 6px; border-radius: var(--radiusHalf); top:5px;}
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-minimize:hover:after {content:"Minimize"; color:gray; background: beige; right:60px;}
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-maximize:hover:after {content:"Maximize"; color:darkblue; background: aliceblue; right:30px;}
#browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-close:hover:after {content:"Close"; color:firebrick; background: MISTYROSE; right:6px;}

I used to have full titlebar reveal on hover, but then it feel very clumsy because I have to constantly moving the pointer downward 20px to access the addressbar, thus I settled with 1px compact windows buttons & floating titlebar. You might have to tweak it to your liking.

You will have to tweak the :not(.tabs-top) section for tab on top setup, cuz I only use tabbar on the left side - I'm not sure if this mod will work properly with tab on top setup, too lazy to test 'em. LOL

If you want automation for panel, tabbar, statusbar, extensions, etc. you can search the mod forum section for my css mod, I have posted most of 'em here. have fun!

[ChimeraLove]

I've been using your code for a few days, it's great
Thanks!

[remi.flores]

@dude99
Hi, how can you make this work for the address bar at the bottom ?
Cause I'm trying to figure a way to do this without success...

[dude99]

@remi-flores It's a bit hard to write the code without knowing your general OS setup & behavior. Can you post a screenshot of how your browser look like with the OS when browsing? I need to know what's going on with the bottom section of your screen when browsing & how much space you want at the bottom (px) for mouseover activation to show the addressbar.

[remi.flores]

@dude99

So I run W10 with my taskbar on top, Vivaldi snapshot 2.7, My general UI is set to 95%
I already have auto-hide panel and auto hide bookmark bar mods.
In fact I just want to keep my tab-bar permanently on-screen (to the top) so my browsing experience would be very clean !
here is the screen :

Thanks in advance

[dude99]

@remi-flores
This one using fixed position method, might not compatible with some mod:

.address-bottom .toolbar-addressbar {position:fixed; width:100vw; bottom:0; transition: .1s 0s !important;}
.address-bottom .toolbar-addressbar:not(:focus-within):not(:hover) {bottom:-20px; opacity:0; transition: .15s .5s !important;}

Use this if you preferred mod without altering the toolbar's position:

.address-bottom .toolbar-addressbar {margin-top:-34px; bottom:0;}
.address-bottom .toolbar-addressbar:not(:focus-within):not(:hover) {bottom:-20px; opacity:0; transition: .15s .5s !important;}

you can change the -20px to -17px (50% of addressbar height) if you want easier activation.

As of bookmark bar, I'm not sure if it will work properly with your mod. Try and see, & if it doesn't work then post the CSS here I will take a look at it.

[remi.flores]

@dude99

your first CSS works perfectly !!! thanks a lot

is it possible to slow down the animation of apparition ? so it will be more smooth and not just a "pop-up"
(i already modify the disappear animation)

[dude99]

@remi-flores add transition: .1s ease-out 0s !important; on the end of first line.

[remi.flores]

@dude99
This is perfect ! thanks again