Auto-hide tab + navigation bar in full screen mode

[bikelike]

I have this big desire to have a auto-hide of navigation + tabbar for an easy and clean full screen browsing experience. This is only possible (as far as I know) in Firefox (in a nervous way since the whole page drops) and in Yandex (in a stylish way since only tab and navigation bar sink from the top).

My preference would be to only have this functionality in full screen mode, so on mouse-over. This is how I know it from Firefox and Yandex.

Is this possible in Vivaldi?

[Pesala]

@bikelike Vote for Option to Autohide Tab Bar / UI

If you like fullscreen mode, use the Focus URL field shortcuts Ctrl+L or F8 in fullscreen. F4 will show the panels, and Alt+F etc., will show the menus.

[bikelike]

@Pesala I know. I also made an easy shortcut (ctr + `) and a mouse gesture for going in and out full screen, but it is not the same as the auto hide functionality.

I voted that request a long time ago.

Is there no CSS or Java for it?

[dude99]

@bikelike Try search the modification forum, there are already a few CSS mod topic for autohide or automate tab & main bar.

[A Former User]

It should also be possible to write a short JS mod to auto-show the bars when in fullscreen mode (so you have something to hide).

No need to use JS to put them into HTML — they're hidden only with CSS.

[dude99]

@potmeklecbohdan I think it might be possible to do it with just CSS mod. By reverse these codes from common.css, it should enable most browser GUI in fullscreen mode:

#browser.fullscreen:not(.mac).minimal-ui .topmenu,
#browser.fullscreen.mac.inner.minimal-ui .topmenu {
  display: none;
}
#browser.fullscreen.inner #header,
#browser.fullscreen.inner .toolbar-addressbar,
#browser.fullscreen.inner .toolbar-mailbar,
#browser.fullscreen.inner .bookmark-bar,
#browser.fullscreen.inner .find-in-page,
#browser.fullscreen.inner #tabs-container,
#browser.fullscreen.inner #panels-container,
#browser.fullscreen.inner .toolbar-statusbar {
  display: none;
}

Personally, I turn maximize window into pseudo fullscreen mode. it allow me to switch app easier & it can preserve some GUI position between mode.

[A Former User]

@dude99 Ah yes, you're correct. I didn't look at the HTML fo fullscreened Vivaldi before.

[bikelike]

@dude99 Ah, that is worth trying. Just that would be my first mod ever. I checked at the mod post but here I got stuck:

• Choose the folder you want to use

Well, would that be somewhere here?

• Place your CSS files inside it

*So the code you provided need to become a .css file or what? And then placed into which folder?

[dude99]

@bikelike You should place all custom.css folder OUTSIDE of Vivaldi installation folder, anywhere safe & easy to remember will do. Normally we just create a plain text file & name the mod file custom.css, but you can name it anything you want with .css as the file extension.

The code I posted above isn't the code you want to use directly, it's just the default CSS code of Vivaldi which you can use as reference to mod the hidden GUI in Fullscreen mode.

Display: none; means remove the access of target element(s), thus Vivaldi will not display those elements during Fullscreen mode. You can cancel that by overwrite none with unset or relative or absolute or fixed, plus other stuff to automate the GUI to show 'em on mouseover at the edge of the screen.

If you know some basic CSS then it shouldn't be too hard to accomplish, else you will have to search & read a lot of threads in mod forum to patch 'em together... Personally, it took me a few weeks to learn enough CSS language just to do anything useful. LOL

Here is an example of automate addressbar on top, it will hide the addressbar in normal/maximized window, & show it when you mouseover the #header/titlebar or focus on addressfield(F8)/searchfield(CTRL+E). You can use it to test if you have setup the custom.css properly or not:

/* automate addressbar */
.address-top .toolbar-addressbar {position:absolute; left:0; right:0; top:0; transition: top 0s 0s !important;} 
.address-top #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) {top:-34px; transition: top .1s linear .7s !important;}

As for Tabbar, I can't really help u much cuz I don't know your tabbar setup/position...

[bikelike]

@dude99 Oops. OK, well, only a few weeks ;-).

Can you recommend a tutorial which helped a lot?

[dude99]

@bikelike
The first link is where most people start, but there are a ton of free lessons on youtube & google, no need to pay for any lesson... just don't overdo it, learn slowly for fun & eventually you will be good at it.

https://www.w3schools.com/css/
https://ilovecoding.org/courses/htmlcss2 (use only the free stuff)
https://www.google.com/search?q=css beginner
https://www.google.com/search?q=css made easy

Also, this forum already have many example code in many topic about css, just use the search function if you don't want to made your mod from scratch.

[A Former User]

@bikelike And after you know the basic structure, just enjoy w/ Vivaldi. That put me a big step forward. You may also want to bookmark CSS properties and selectors reference or another help on selectors (and a single-table version).

[MaJorDan]

We essentially need the GUI to switch from windowed to fullscreen when it stops sensing scrolling and at the top of a page.

[dude99]

@bikelike This is not my best work, but it works as u wanted, & I think this is the best I can do for now. This CSS mod come with some caveats, mainly some weird Vivaldi bugs causing finicky mouseover detection...

/* fs automate header & tabbar */
#browser.fullscreen:not(.mac) #tabs-container.none {display: flex; padding-left: 34px;}
#browser.fullscreen:not(.mac) #header {position: absolute; width: 100%; z-index: 9; background: var(--colorBg); transition: transform .12s linear 0s, opacity .1s linear 0s !important;}
#browser.fullscreen:not(.mac) #header:not(:hover) { opacity: 0; transform: translateY(-22px); transition: transform .15s linear 1.5s, opacity .1s linear 1.5s !important;}
.address-top-off#browser.win #titlebar .vivaldi, .address-top-off#browser.win #titlebar .window-buttongroup {z-index:9;}
.address-top-off#browser.win #titlebar #pagetitle {visibility:hidden;}

/* fs automate addressbar */
.address-top-off .toolbar-addressbar {top:0; z-index: 9; transform: translateY(-23px); transition: transform .15s linear .6s, opacity .15s linear .6s !important;}
.address-top-off .toolbar-addressbar:not(.add-bookmark):is(:focus-within, :hover), #browser.fullscreen.address-top-off:not(.mac) #header:hover ~ #main > .toolbar-addressbar {opacity: 1; transform: translateY(30px); transition: transform .15s linear 0s, opacity .1s linear 0s !important;}

OK, first you can't activate the tabbar by hover over the edge of top screen. That's because Vivaldi fullscreen mode seems to have 7px of dead zone all around the edges, so you will have to move the pointer slightly downward after touching the top edge to activate the tabbar (just like the swipe down from top edge to reveal top menu in mobile).

2nd problem is mouseover the tab-strip to keep it active seems to be impossible, this is due to glitchy mouseover detection of Vivaldi on the #header. There are nothing I can do about it, only V dev can fix this. But hovering over tabs will work perfectly... LOL

Yeah, I'm not happy with this solution. But I have a much better solution by modding Maximized window into Pseudo Fullscreen mode, it will feel identical to fullscreen mode & it can activate most GUI by hover over the screen's edge. If you are interested I will post the code later.

Happy new year!

[lchiang]

@Pesala
I see that there is toggle for address bar, panel, and menu. But what I need is tab bar...

[Pesala]

@lchiang There is no default shortcut, but you can define your own.

[pierro78]

I have just discovered Vivaldi and at first look I was also disappointed that it doesn t have this Auto Hide feature because I like it in Edge or Yandex (linux or windows) but then I discovered the Quick Commands (F2) feature and it can replace the Auto Hide feature for me

[pierro78]

@lchiang 　to easily switch tabs maybe you can try Quick Commands (F2) ?

[bikelike]

@dude99 Sorry I never got back to you. It is way too complicated for me. I did create a solution which I am using with pleasure and a lot. It is a mouse gesture of just going up once. I happily sacrificed the default of that gesture.

[dude99]

@bikelike Good to hear that u found your own solution. CSS isn't hard to learn, but it will take time to master. Keep trying once awhile & u will get good eventually. So don't give up!

Anyway do u want to try pseudo fullscreen CSS mod? Basically I have turn my maximized window into something similar to fullscreen & have most of the GUI hidden at the edges of the window. Then when I point at the top screen it will show the Addressbar, left for Tabbar, top right for Panel, bottom right for Statusbar. It looks something like this: