Auto hide tabs and address bar
-
Hello friends, a while ago they assisted me with my modifications, I leave the link below:
https://forum.vivaldi.net/topic/90184/my-mods-don-t-work-anymore?_=1713354185134
NOW what I want to do is that when you open a website no bar is displayed, only the page.
I need to know what modifications I have to make to self-hide the tab bar and address bar.I leave you the code I have so far
/* * Auto hide bookmark bar * Written by Tam710562 */ #browser.tabs-top.address-top.bookmark-bar-top .mainbar, #browser.tabs-top.address-bottom.bookmark-bar-bottom .mainbar, #browser.tabs-top.address-bottom.bookmark-bar-top .mainbar, #browser.tabs-bottom.address-top.bookmark-bar-top .mainbar, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .mainbar, #browser.tabs-left.address-top.bookmark-bar-top .mainbar, #browser.tabs-left.address-bottom.bookmark-bar-bottom .mainbar, #browser.tabs-right.address-top.bookmark-bar-top .mainbar, #browser.tabs-right.address-bottom.bookmark-bar-bottom .mainbar { z-index: 5; } #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar, #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar, #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar, #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar, #browser.tabs-left.address-top.bookmark-bar-top .bookmark-bar, #browser.tabs-left.address-bottom.bookmark-bar-bottom .bookmark-bar, #browser.tabs-right.address-top.bookmark-bar-top .bookmark-bar, #browser.tabs-right.address-bottom.bookmark-bar-bottom .bookmark-bar { position: absolute !important; width: 100%; transition: transform 0.2s !important; z-index: 4; } /* tabs-top address-top bookmark-bar-top */ #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar { top: 34px; transform: translateY(-100%); } #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar:focus-within, #browser.tabs-top.address-top.bookmark-bar-top .mainbar:hover~.bookmark-bar, #browser.tabs-top.address-top.bookmark-bar-top #header:hover~#main .bookmark-bar { transform: translateY(0); } /* tabs-top address-bottom bookmark-bar-bottom */ #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar { bottom: 34px; transform: translateY(100%); } #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar:hover, #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar:focus-within, #browser.tabs-top.address-bottom.bookmark-bar-bottom .mainbar:hover~.bookmark-bar { transform: translateY(0); } /* tabs-top address-bottom bookmark-bar-top */ #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar { top: 0; transform: translateY(-100%); } #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar:focus-within, #browser.tabs-top.address-bottom.bookmark-bar-top #header:hover~#main .bookmark-bar { transform: translateY(0); } /* tabs-bottom address-top bookmark-bar-top */ #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar { top: 34px; transform: translateY(-100%); } #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar:focus-within, #browser.tabs-bottom.address-top.bookmark-bar-top .mainbar:hover~.bookmark-bar { transform: translateY(0); } /* tabs-bottom address-bottom bookmark-bar-bottom */ #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar { bottom: 5px; transform: translateY(0); } #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar:hover, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar:focus-within, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .mainbar:hover~.bookmark-bar { transform: translateY(-100%); } /* tabs-left address-top bookmark-bar-top */ #browser.tabs-left.address-top.bookmark-bar-top .bookmark-bar { top: 34px; transform: translateY(-100%); } #browser.tabs-left.address-top.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-left.address-top.bookmark-bar-top .bookmark-bar:focus-within, #browser.tabs-left.address-top.bookmark-bar-top .mainbar:hover~.bookmark-bar { transform: translateY(0); } /* tabs-left address-bottom bookmark-bar-bottom */ #browser.tabs-left.address-bottom.bookmark-bar-bottom .bookmark-bar { bottom: 5px; transform: translateY(0); } #browser.tabs-left.address-bottom.bookmark-bar-bottom .bookmark-bar:hover, #browser.tabs-left.address-bottom.bookmark-bar-bottom .bookmark-bar:focus-within, #browser.tabs-left.address-bottom.bookmark-bar-bottom .mainbar:hover~.bookmark-bar { transform: translateY(-100%); } /* tabs-right address-top bookmark-bar-top */ #browser.tabs-right.address-top.bookmark-bar-top .bookmark-bar { top: 34px; transform: translateY(-100%); } #browser.tabs-right.address-top.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-right.address-top.bookmark-bar-top .bookmark-bar:focus-within, #browser.tabs-right.address-top.bookmark-bar-top .mainbar:hover~.bookmark-bar { transform: translateY(0); } /* tabs-right address-bottom bookmark-bar-bottom */ #browser.tabs-right.address-bottom.bookmark-bar-bottom .bookmark-bar { bottom: 5px; transform: translateY(0); } #browser.tabs-right.address-bottom.bookmark-bar-bottom .bookmark-bar:hover, #browser.tabs-right.address-bottom.bookmark-bar-bottom .bookmark-bar:focus-within, #browser.tabs-right.address-bottom.bookmark-bar-bottom .mainbar:hover~.bookmark-bar { transform: translateY(-100%); } /* Panel automate switch */ #panels-container.overlay, #panels-container.icons {width:0 !important;} #panels {overflow:visible; padding:0 !important;} :not(.resizing)#panels-container.overlay .panel-group {transition: width .1s linear !important;} #panels-container.right.overlay > .SlideBar--FullHeight.alternate {margin-left:-35px;} #panels-container.overlay #switch, #panels-container:not(.overlay).icons #switch {background-color: var(--colorBgAlphaBlur);} #panels-container #switch {height: 100%; flex-basis:35px; visibility:visible !important; z-index:3;} #panels-container.icons:not(:hover) #switch, #panels-container.switcher:not(:hover) #switch {height:50px; flex-basis: 4px; opacity:0; margin: 0 2.5px; transition: .1s .9s, background-color 0s 0s, opacity 0s 1s !important;}
Thanks!
-
Hi, I'm not sure it's possible with just
css
since the elements are independent of one another. It's probably going to requirejs
or you could create some toggles. You have a few options going that route:-
You could create keyboard shortcuts for each element or just use the full screen toggle which is F11
-
With mouse gestures you can also hide each element or again, make a full screen one
-
Lastly you could create some command chains that would let you have buttons to toggle the elements
-
-
You could use this JS mod: https://forum.vivaldi.net/post/745942
-
Thanks for your response.
You could tell me how to apply it? please. I'm a novice at these hehe things -
@muchosoft you can find a tutorial on how to use JS mods in Vivaldi here. And here you can find a post about how to do this more automated with a batch file.
-
@oudstand Thanks!