Autohide adress bar
-
Hi. https://i.imgur.com/tcBtOMU.gif
#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: hidden; position: fixed; width: 100%; opacity: 0; z-index: 2; transition: opacity .3s linear .7s, visibility 0s linear 1s; } #header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover { visibility: visible; opacity: 1; transition-delay: 0s; }
I want the adress bar appears at the bottom when you hover the mouse over the status bar. https://i.imgur.com/pnZPItS.png Please help
//MODEDIT: fixed text formatting
-
Weird issue the bar appears to be transparent:
https://i.imgur.com/mEJCz3e.jpgThat's unfrotunate.
Also, any idea how to make it always appear when empty page/speeddial?
-
This is a great way to clean up the screen real estate, thanks!
However, there is one unfortunate downside - now I can't just open a new tab and start typing the address/google search term since the address bar is hidden and not functional. I have to move the mouse to the top to open it and only then I'm able to use the address bar for address/search. Same thing with Ctrl-L shortcut to move the cursor to the address bar - I can't do that since it's not functional when hidden.
Is there a way to fix it? Either make the search bar appear back when the cursor is moved there (new tab/Ctrl-L shortcut), or at least make it functional when it's hidden (so that Ctrl-L would still move the cursor there even if I don't see any typing).
Thanks -
@keks777 Thanks for the code, auto-hiding panel bar is a great improvement. However, for some unknown reason, on my computer the hidden address bar leaves some white space that the page itself cannot use, so there is no real space gain in my case. Any idea why it doesn't work like on your gif? I have had to remove all "!" from your code because nothing was working with them; is it related?
@eugenesv This would be awesome indeed. These are the things that have kept me from using an auto-hiding address bar so far.
-
@eugenesv
Came here 2 years later :smiling_face_with_open_mouth_closed_eyes:
But still. You can change "hidden" for .toolbar-addressbar to "visible", and it will remain always open. Issue will be that you will not be able to click on page elements underneath adressbar. -
-
Since I mostly use hotkeys for navigation I set to hide address bar always unless focused (ctrl+L or when you open new tab with "Autofocus" enabled):
/*Addressbar settings*/ .toolbar-addressbar { position: absolute; transform: translateY(-200%); } .toolbar-addressbar:focus-within, .toolbar-addressbar:hover, .toolbar-addressbar:focus { position: absolute; width: 100%; transform: translateY(0%); filter: drop-shadow(0 1mm 2mm #000000); } .addressfield .pageload:not(.unstarted).progressing { opacity: 1; position: absolute; left: 0; top: 0; transform: translate(-190%, 200%); display: block; width: auto; background-color: white; box-shadow: 2px 2px 2px 0px #535251cf; } .addressfield .pageload .pageload-ticker { padding-left: 5px; text-align: left; border-right: 0; }
This will also display progress bar in the top left corner below Vivaldi button.
Tested with different tab zoom value and window size - everything aligns correctly. Small issue is that the Extension pop-up will be lower than should be and although it can be easily fixed I couldnt be bothered.A proper solution would be use
display:none
and separate elements however ctrl+L searching for existing element to focus and it cant do that with display set to none. You could edit the react JS code where hotkey handled but this would require also handle all over event like mouseleave or enter to apply style.If you want to get rid of Close/Minimize buttons and expand tab space:
.window-buttongroup { display: none } .win #tabs-container.top { padding-right: 0; }
Again, mostly for hotkey users.
-
Updated CSS for 5.3, as usual, bind hotkey duplicate for CTRL+L for easy access to address bar.
This mod/* Removing the close/maximize buttons and expanding tab space */ .window-buttongroup, button.vivaldi { display: none!important; } .win #tabs-container.top, .win #tabs-container:not(.none).top, .win #tabs-container.top { padding-right: 1px; padding-left: 1px; } /* Removing annoying triangle from URL bar*/ .UrlBar-UrlObfuscationWarning { display: none; } /* URLbar text for readability's sake */ .UrlField { font-size: 125% } /*Addressbar settings&fixes when hidden*/ #main > div:nth-child(1) { position: absolute; width: 100%; z-index: 0; } #main > div:nth-child(1):focus-within, #main > div:nth-child(1):hover, #main > div:nth-child(1):focus { z-index: 1; filter: drop-shadow(0 1mm 2mm #000000); } .extension-popup.top { top: 40px!important; }
-
@Kein I've been using this css for a while, but I discovered that it kills stream popout chats, on both youtube and twitch. Trying to do so returns a dead empty box. Is it fixable?