[MOD] Address bar autohide + reveal on hover
-
Here's little custom.css I wrote for myself based on information from different topics on this forum. I consider it a slight modification of this mod.
Addressbar automatically hides, and shows up on hovering the tab bar.
It also shows up when focused (for example by hitting Ctrl + L), as well as on Speed Dial (when "focus on content" option is disabled in Vivaldi Settings), and also when window is not in focus (in order to get drag-n-drop from other windows to work).Showing and dissapearing of adressbar is animated with slide-up/down effect.
Here's the CSS code [updated 20.10.21]:
/* Auto-hide adressbar + reveal on hovering tabbar or focus */ /* Some variables for quick configuration */ :root { --hidden-addressbar-opacity: 0; --revealed-addressbar-opacity: 1.0; --focused-addressbar-opacity: 1.0; --transition-duration: 150ms; --transition-delay: 350ms; /* Delay before addressbar will be hidden */ --addressbar-width: 85%; /* Addressbar width when have enough horizontal space (screen width > 1280px) */ --focused-addressbar-shadow-opacity: 0.75; --hidden-addressbar-percent: -100%; /* -100% to fully hide addressbar, -50% to hide halfway */ } .UrlBar { position: absolute; transform: translateY(var(--hidden-addressbar-percent)); left:0; right:0; margin: 0 auto; opacity: var(--hidden-addressbar-opacity); transition: opacity var(--transition-duration) ease-out, transform var(--transition-duration) ease-out, filter var(--transition-duration) ease-out; border-radius: 0 0 var(--radius) var(--radius); /* Adds small corner roundness on bottom (defined by Vivaldi) */ transition-delay: var(--transition-delay); } /* Reveal addressbar */ .UrlBar:is(:hover, :focus-within, :focus), .address-top.isblurred .UrlBar, #header:hover + #main > .UrlBar { transform: translateY(0); opacity: var(--revealed-addressbar-opacity); transition-delay: 0ms; } /* Add shadow when addressbar has keyboard focus */ .UrlBar:is(:focus-within, :focus) { filter: drop-shadow(0 1mm 4mm rgba(0,0,0,var(--focused-addressbar-shadow-opacity))); opacity: var(--focused-addressbar-opacity); } /* Apply panel width only when have enough horizontal space*/ @media only screen and (min-width: 1280px) { .UrlBar {width: var(--addressbar-width);} } /* Disable tab preview on hover (when this feature is enabled in Vivaldi Settings) */ #vivaldi-tooltip { display: none; }
For other versions of the script please see the discussion below.
Thanks for @Kein and @dude99 for help. -
Here's slightly another version, with all-width adress bar and shifting issue fixed (at least on my monitor).
It leaves small part of addressbar visible, and reveals panel on hovering this visible part.#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; } .toolbar-addressbar { visibility: visible; position: absolute; top: -6%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); width: 100%; opacity: 0; z-index: 2; transition: opacity .2s linear .2s, visibility 0s linear 1s, top .2s linear; } #header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover, .toolbar-addressbar:focus-within, .toolbar-addressbar:focus { position: absolute; top: 18px; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); visibility: visible; opacity: .75; } .toolbar-addressbar:focus-within, .toolbar-addressbar:hover, .toolbar-addressbar:focus { visibility: visible; opacity: 1; transition-delay: 0s; }
-
Nice mod. I might put the address bar auto-hide to use. For the panel, I like having it displayed for a couple of reasons: 1, I use a lot of web panels and the bookmark panel is incredibly useful for maintaining my library, and 2, it resizes the content pane which centers the content on my screen making it more readable. But good work man.
-
@bonetone
Thanks
As for your case, I may suggest to enable "Floating panel" flag in Vivaldi Settings, with this option enabled side panel will be drawn on top of content and screen proportions will not be changed. Works as charm with my mod.Otherwise, just remove these lines from code, and side panel will not be hidden:
#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; }
-
@emvaized said in [MOD] Address bar/Sidepanel Autohide + Show on Speed Dial:
@bonetone
Thanks
As for your case, I may suggest to enable "Floating panel" flag in Vivaldi Settings, with this option enabled side panel will be drawn on top of content and screen proportions will not be changed. Works as charm with my mod.Sorry if I wasn't clear... I want the proportions to be changed. With such a large widescreen monitor, when I have the browser fullscreen the page & content is just too wide. Having to move your eyes so far left & right reduces readability. Having one of my panels open on the right, along with my tabs on the left, pushes the content into the center of my screen & resizes to a comfortable position & size.
Generally speaking, I have never liked any auto-hide stuff, but the address bar is one of the few things I may like having auto-hide. Currently I have all the various UI elements tied to easy keyboard shortcuts to show/hide them, and I can quickly switch between all my two dozen or so panels using them. Even if I have something like Ctrl-Alt-Shift-Win-F15 tied to an action, I can invoke that with a two-key shortcut since I program & flash the firmware for my keyboard.
So I want the panel to be a hard pane, not a floating one. When I tile some tabs vertically or toss the browser window over to the side of my screen and tile it with another app's window, I just tap a keyboard shortcut and the panel & tabs disappear (I can have one shortcut send what are usually two separate shortcuts). I have shortcuts for all the bars too: address, status, bookmarks. Typically I'm using those when I want to have a cleaner screen, I'll first either go fullscreen, or more commonly toggle UI, then pull up the panel & bars I want to have. In that scenario, I might enjoy having an auto-hide address bar, so I'm going to give it a try.
Otherwise, just remove these lines from code, and side panel will not be hidden:
Thanks. I can I code & have made a few of my own mods, but I appreciate someone who's always trying to help, modifying advice & clarifying info. Thanks for sharing.
-
Oh, I just realized I have some code for auto-hide panel. Since I've never used it, I don't know how well it works. Your code is more concise, but in case you want to compare with what the other authors did, if you run into any issues with your own, here's the thread... multiple versions of the code there so read through to see the issues & fixes they did.
-
@bonetone
I see.
That thread implements a slightly different panel operation mechanism. As for this moment I'm fully satisfied with solution I implemented, but it will be great to have this link in this thread. Thanks for sharing! -
Thanks a lot for this guys this is exactly what I had in mind a few minutes ago when I googled it. 5 minutes later I have it up and running, gotta love Vivaldi :smiling_face_with_open_mouth_smiling_eyes:
-
@maiku Glad you liked it!
-
Somewhat updated this mod. Now fully-visible adressbar drops a little shadow on hovering to make it mode distinguishable + implemented sidebar mod provided by @bonetone
/* Sidepanel settings */ #panels-container.overlay.left, #panels-container.overlay.right { opacity: 1; position: absolute; z-index: 1; height: 100%; /*transition-property: opacity; transition-duration: .05s .05s;*/ transition: transform .05s linear .05s, opacity .05s linear .05s; } #panels-container.overlay.right { right: 0px; } #panels-container.overlay.left:not(:hover) { transform: translateX(-28px); opacity: 0.15; transition-property: transform, opacity; transition-duration: .2s , .2s; transition-delay: .2s !important; } #panels-container.overlay.right:not(:hover) { transform: translateX(28px); opacity: 0.2; transition-property: transform, opacity; transition-duration: .2s , .2s; transition-delay: .2s !important; } /*Addressbar settings*/ .toolbar-addressbar { visibility: visible; position: absolute; top: -6%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); width: 100%; opacity: 0; z-index: 2; transition: opacity .1s linear .1s, visibility 0s linear 1s, top .2s linear, filter .1s linear .1s; } #header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover, .toolbar-addressbar:focus-within, .toolbar-addressbar:focus { position: absolute; top: 18px; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); visibility: visible; opacity: .60; } .toolbar-addressbar:focus-within, .toolbar-addressbar:hover, .toolbar-addressbar:focus { visibility: visible; opacity: 1; transition-delay: 0s; filter: drop-shadow(0 1mm 4mm #000000); }
[UPDATE]
I removed sidebar code in order to shift focus of this mod only to addressbar. -
Firstly, thank you for this custom.css mod! I see one issue come up for me when the window isn't maximized - the address bar doesn't show up properly when the mouse isn't over it. Compare the first screenshot where the mouse is just below the tab and the second screenshot where the mouse is above the address bar - the address bar shifts to the left. Could you please help me fix this? I also noticed a small gap between the address bar and the tab bar (there's a thin white line between the two).
-
If you want to fix just his code, replace similar section with new code:
#header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover, .toolbar-addressbar:focus-within, .toolbar-addressbar:focus { position: absolute; top: 18px; left: 0%; margin-right: -50%; transform: translate(0, -50%); visibility: visible; opacity: .60; }
However, he is doing excessive transformation for no apparent reason, this should be enough for responsive address bar on focus
/*Addressbar settings*/ .toolbar-addressbar { position: absolute; width: 100%; z-index: 0; } .toolbar-addressbar:focus-within, .toolbar-addressbar:hover, .toolbar-addressbar:focus { z-index: 1; filter: drop-shadow(0 1mm 2mm #000000); } .extension-popup.top { top: 40px!important; }
It wont appear on hover, though (I personally find it annoying). If you set your hotkeys "F1" to focus address bar and ctrl+F1 to focus tab content you can essentially switch it on/off just with CSS.
With JS, you can do permanent on/off but I yet to find it worth much. -
@Kein, thank you so much! Your fix works pefectly.
-
Update of my CSS for 3.6:
/* Removing the close/maximize buttons and expanding tab space */ .window-buttongroup { display: none!important; } .win #tabs-container.top, .win #tabs-container:not(.none).top, .win #tabs-container.top { padding-right: 0; } /* No unread icon for hibernated tabs */ .tab.isdiscarded .button-badge { display: none; } /*Addressbar settings&fixes when hidden*/ #main > .UrlBar { position: absolute; width: 100%; z-index: 0; } #main > .UrlBar:focus-within, #main > .UrlBar:hover, #main > .UrlBar:focus { z-index: 1; filter: drop-shadow(0 1mm 2mm #000000); } .extension-popup.top { top: 40px!important; }
Remember that if you use it, make some easy accessible key as "Focus Addres bar". I use F1.
-
@Kein Thanks for your fixes!
However, I'm not fine with revealing panel keyboard-only, so I've updated my reveal-on-hover code and can confirm it works fine in 3.7Also removed excessive transformations and added variables for quick configuration.
It now also includes fix for non-maximized windows issue mentioned by @ashwith/* Auto-hide adressbar + reveal on hover or focus */ /* Some variables for quick configuration */ :root { --hidden-addressbar-percent: -65%; /* Hide addressbar by this amount ("-100%" for fully hidden) */ --hidden-addressbar-opacity: 0.15; /* Opacity when hidden */ --revealed-addressbar-opacity: 0.65; /* Opacity when revealed on hover */ --focused-addressbar-opacity: 1.0; /* Opacity when focused */ --addressbar-transition-duration: 200ms; /* Transitions duration */ --addressbar-width: 75%; /* Addressbar width when window is maximized (centered) */ --focused-addressbar-shadow-opacity: 0.75; /* Opacity of shadow when addressbar is focused */ } .UrlBar { position: absolute; transform: translate(0, var(--hidden-addressbar-percent)); width: var(--addressbar-width); opacity: var(--hidden-addressbar-opacity); transition: opacity var(--addressbar-transition-duration) ease-in-out, transform var(--addressbar-transition-duration) ease-in-out, filter var(--addressbar-transition-duration) ease-in-out; } .UrlBar:hover, .UrlBar:focus-within, .UrlBar:focus { transform: translate(0%, 0%); opacity: var(--revealed-addressbar-opacity); } .UrlBar:focus-within, .UrlBar:focus { opacity: var(--focused-addressbar-opacity); filter: drop-shadow(0 1mm 4mm rgba(0,0,0,var(--focused-addressbar-shadow-opacity))); } .maximized#browser .UrlBar { /* Center addressbar horizontally */ left: 0; right: 0; margin-left: auto; margin-right: auto; }
-
@oneteaday You need to include the css selector too:
selectors { style: value; }
I donβt think you need to add a border to have a border radius, but you can use border-color
Finally, Vivaldi should have a CSS variable to store the border rounding amount that has been set for your theme. You may want to use this variable.
-
I just figured out a better way of doing this modification.
Here's new variant of script, which hides addressbar completely off-screen, and reveals on hovering the tab bar (whole browser header to be precise). It differs from the old approach, which left some part of addressbar visible (and semitransparent), and revealed it on hovering that visible part.
Here's quick preview on how it looks like:
And here's the code:
/* Auto-hide adressbar + reveal on hover tab bar or keyboard focus */ /* Some variables for quick configuration */ :root { --hidden-addressbar-percent: -100%; --hidden-addressbar-opacity: 0; --revealed-addressbar-opacity: 1.0; --focused-addressbar-opacity: 1.0; --addressbar-transition-duration: 150ms; --addressbar-width: 90%; --focused-addressbar-shadow-opacity: 0.75; } .UrlBar { position: absolute; transform: translate(0, var(--hidden-addressbar-percent)); width: var(--addressbar-width); opacity: var(--hidden-addressbar-opacity); transition: opacity var(--addressbar-transition-duration) ease-out, transform var(--addressbar-transition-duration) ease-out, filter var(--addressbar-transition-duration) ease-out; border-radius: 0 0 var(--radius) var(--radius); } .UrlBar:hover, .UrlBar:focus-within, .UrlBar:focus { transform: translate(0%, 0%); opacity: var(--revealed-addressbar-opacity); } .UrlBar:focus-within, .UrlBar:focus { opacity: var(--focused-addressbar-opacity); filter: drop-shadow(0 1mm 4mm rgba(0,0,0,var(--focused-addressbar-shadow-opacity))); } .maximized#browser .UrlBar { left: 0; right: 0; margin-left: auto; margin-right: auto; } /* Reveal addressbar on hovering tab bar (header) */ #header:hover + #main > .UrlBar { transform: translate(0%, 0%); opacity: var(--revealed-addressbar-opacity); } /* Disable tab tooltips */ #vivaldi-tooltip .tooltip { display: none; }
-
I tried it and noticed a flaw, the script does not always work reliably. It happens that when you hover over the tab bar, the address bar does not expand.
I am using another simpler and very reliable script:#tabs-container.top { -webkit-app-region: no-drag; } .UrlBar { visibility: hidden; /*position: fixed;*/ position: absolute; width: 100%; opacity: 0; z-index: 2; transition: opacity .2s linear .1s, visibility 0s linear 1s; transition-delay: 1s !important; } #header:hover ~ #main .UrlBar, .UrlBar:is(:hover, :active, :focus-within){ visibility: visible; opacity: 1; transition-delay: 0s !important; }
-
@kichrot
Hm, I'm not sure β "transform" version above works quite reliably for me...
But thanks for sharing! I like the simplicity of this. -
@kichrot if u use
visibility:hidden
to hide the entire addressbar, u won't be able to focus & reveal on the addressfield with keyboard shortcut (F8) when it's hidden, also u can't drag & drop text/link into the addressfield.Also, header's mouseover detection is finicky most of the time... if u have the tabbar on top, then only mouseover the tab or window buttons will trigger the mouseover detection.
If u really want to hide the whole addressbar without losing these 2 functionality, then u can try using this code to lower both addressfield & searchfield when u hide the addressbar 100% upward, it will leave a few pixels at the bottom to let u drop text & link into 'em, plus reveal the addressbar by pointing at the bottom of tabbar/header:
.address-top #header:not(:hover) ~ #main .UrlBar:not(:focus-within):not(:hover) input:is(.vivaldi-addressfield, .vivaldi-searchfield) {height:35px !important; transition: height 0s .5s !important;}
Note: I have not tested this code with @emvaized OP code, but it should work, else u just have to replace
height:35px
withtransform: translateY(8px)
.
I think @emvaized solution is a good balance between saving space on top of the screen & preserving functionality.
If I want to nitpick his code, I would change
width: var(--addressbar-width);
toleft:0; right:0; margin: 0 auto;
then add another section to only shrink & centered the addressbar width when the window's width is too wide, like 1280+px:@media only screen and (min-width: 1280px) { .UrlBar {width: var(--addressbar-width);} }
Next, move
transform: translate(0, var(--hidden-addressbar-percent));
to another section to only hide the addressbar when it's window is on focus:
corrected code: https://forum.vivaldi.net/post/526572And then, I would add a slight transition delay to hide the addressbar so that it won't be hidden by accident when I mouseout of the addressbar by accident. Then, it's pretty much perfect for both big & small screen.