(CSS Request) Hide Header and Mainbar unless mouse hovers top of window

[wannabevivaldiuser]

I am currently using Firefox, only because I want to be able to hide the UI unless I hover near the top of the window.
Video: https://imgur.com/a/d8zmyin
CSS: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_toolbox.css

I tried hard to get this to work in Vivaldi, but I kept running into problems. I tried adapting the CSS that I use for Firefox to Vivaldi but its not really working.
I tried from the ground up just hiding #header and .mainbar unless I hover over where #header used to be. Spend hours using w3 school and stackoverflow, but I just cant.

I bet someone here can do it in 5-10 minutes. I would be grateful.

[Pesala]

@wannabevivaldiuser I bet someone has already done it.

Look at Autohide Address Bar for example.

[wannabevivaldiuser]

Thanks for replying.
The CSS thread you linked isnt it.
It only hides .mainbar, not also the #header.
I can't get the .mainbar to reappear on hovering anywhere with that CSS either, only by pressing CTRL+L.

I have looked for a forum post that already does what I am looking for, but I cant find one.

[dude99]

@wannabevivaldiuser Pls show me a screenshot of your vivaldi setup, I need to know how your toolbars' setup looks like before I can turn your code to be compatible with your setup in Vivaldi. Also, it would be kinda helpful if you also provide current code you are working on #header that doesn't work.

Warning: The code you provided in OP utilize transform: rotateX() to animate the header - it's not a bad solution, but it could cause various unwanted effects & made it incompatible with other CSS mod if you want to mod any part of the header/tabbar/mainbar in the future.

So are you sure you want me to use transform to animate the header, or maybe utilize other CSS mod friendly method?

[wannabevivaldiuser]

@dude99 thanks alot for replying!
I just use stock Vivaldi settings, and no other CSS code.
Stock Vivaldi where the tabs bar and addressbar hide unless having the cursor near the top of the window is perfect for me.
It doesn't matter to me which css function is used to accomplish it.

I threw away most of the code cause it kept only half working and losing progress by fixing one thing that broke another and I forgot what I did before.

But I still have this:
https://pastebin.com/jU74Kc3q
https://pastebin.com/x86ErA2f

I have to say, if class .mainbar was a part of the #header div, instead of #main div, this would be much simpler for me to wrap my head around.

[dude99]

/* automate header */
.address-top.tabs-top:not(:has(.toolbar-editor)) #header {min-height: 0; max-height: 165px; transition: max-height .8s ease-out 0s !important;}
.address-top.tabs-top:not(:has(.toolbar-editor)):not(:has(.toolbar-mainbar:is(:hover, :focus-within, :has(.button-pressed)))) #header:not(:hover):not(:focus-within) {max-height: 0; transition: max-height .8s ease-out 0s !important;}
/* automate mainbar */
.address-top.tabs-top:not(:has(.toolbar-editor)) #main > .mainbar > .toolbar-mainbar {margin-bottom: -34px; transition: margin-top .2s ease-out 0s !important;}
.address-top.tabs-top:not(:has(.toolbar-editor)) #header:not(:hover):not(:focus-within):not(:has(.button-pressed)) + #main > .mainbar > .toolbar-mainbar:not(:hover):not(:focus-within):not(:has(.button-pressed)) {margin-top: -34px; transition: margin-top .4s ease-in .4s !important;} 
/* trigger zone */
.address-top.tabs-top:not(:has(.toolbar-editor)) #main > .mainbar > .toolbar-mainbar::before {content:''; position: absolute; inset: 100% 0 -17px 0; background: #0ff6;}

First, you need to go to & enabled vivaldi://flags/#enable-experimental-web-platform-features, & restart browser for this CSS mod to work properly, because it require access to :has() experimental function.

Customization:

1. in the last line, you can alter the trigger zone thickness/height via -17px value, currently it's 17px height.

2. remove background: #0ff6; to made trigger zone transparent.

---

Next, I got a very bad news for you. There is an ancient #header mouseover detection bug that I can't work around... I have tried many method & spend hours try to work around this bug, but I don't think I can do anything about it cuz it's a f#*%ing bug! You will need to file a bug report on this because only v team can fix this, if they wanted to that is. I have reported this to 'em years ago, but it never got fixed. I don't think even JS mod can fix this.

Basically whenever you mouseover any empty section of the header (with no tab or button), Vivaldi will repeatedly trigger mouseout event incorrectly. This causing the header to be very jumpy & unpleasant to navigate. So the only work around until v team fixed this bug is avoid mouseover empty space inside the header! LOL

[wannabevivaldiuser]

@dude99
THANKS SO MUCH! this is PERFECT.
really appreciate making it so easy to change the thickness of the trigger.

About the #header bug, I encountered it too while writing the CSS code. (one of the many problems i encountered)
I'll try to make a bug report about it, although I dont know how I would begin to describe the problem in a way that the devs will understand lol.
Luckily I usually have lots of tabs open so the #header will be 95% filled most of the time. (maybe we can use css to increase the minimum tab width to fill most of the bar? or fill #header with some dummy thing?)

I hope many people like me who are looking for this CSS enhancement will find this post. I can now actually switch to Vivaldi, you made me SO happy!
I documented your steps and the code on my local drive so I cant lose it.

[dude99]

@wannabevivaldiuser said in (CSS Request) Hide Header and Mainbar unless mouse hovers top of window:

maybe we can use css to increase the minimum tab width to fill most of the bar? or fill #header with some dummy thing?

I have tried to expand the New Tab button to fill all the empty space, but can't get it to work properly (you can try if you want). I have also create pseudo element to cover the entire header with ::before & content:'' trick on header, titlebar, tabbar, & mainbar, but all failed. I have also expand the titlebar to full height (42px) to cover up all header space but also doesn't work.

---

I just thought of another unorthodox way to work around header's bug, using "negative space" & :has() trick might work. Basically, when mouseover #main (except .mainbar) = hide header.

Are you good in CSS? You can try this trick, else I might take a crake at it later when I have some time. I don't use horizontal tabbar, & rarely create CSS mod I don't use myself, so this will be an one-off effort.

[dude99]

Here is the new version that able to work around the header's bug, replace header mouseover trigger with a "negative trigger" - it hide the header when you mouseover anything not header... sounds weird but it works. LOL

/* automate header */
.address-top.tabs-top:not(:has(.toolbar-editor)) #header {min-height: 0; max-height: 165px; transition: max-height .4s ease-out 0s !important;}
#app:has(#browser > :not(#header):hover, #panels-container:focus-within) .address-top.tabs-top:not(:has(.toolbar-editor)):not(:has(.toolbar-mainbar:is(:hover, :focus-within, :has(.button-pressed)))) #header {max-height: 0; transition: max-height .4s ease-out 0s !important;}
/* automate mainbar */
.address-top.tabs-top:not(:has(.toolbar-editor)) #main > .mainbar > .toolbar-mainbar {margin-bottom: -34px; transition: margin-top .2s ease-out 0s !important;}
#app:has(#browser > :not(#header):hover, #panels-container:focus-within) .address-top.tabs-top:not(:has(.toolbar-editor)) #main > .mainbar > .toolbar-mainbar:not(:hover):not(:focus-within):not(:has(.button-pressed)) {margin-top: -34px; transition: margin-top .2s ease-in .2s !important;} 
/* trigger zone */
.address-top.tabs-top:not(:has(.toolbar-editor)) #main > .mainbar > .toolbar-mainbar::before {content:''; position: absolute; inset: 100% 0 -17px 0; background: #0ff6;}

Now this negative trigger method do come with some quirks, I have try to eliminate most of 'em with a few trade-off:

• show header & mainbar when browser is off focus. (might be actually a pro if you like it... LOL)

• show header & mainbar when evoke context menu from statusbar or panel GUI (when panel is not already in focus).

Lastly, to make these quirks less annoying, I shorten the animation so that you don't have to "wait" for 'em when they occurs. That's all I can do for now, the best solution is of course for v team to fix the damned mouseover bug!

[wannabevivaldiuser]

@dude99 Again, thanks so much. This workaround really does help.
And none of the quirks bother me, I don't think I will even notice them. The blinking header however could be kind of annoying.
Thanks!

Just a note,
As I don't use the bookmarks bar at all its no problem for me. But I can see someone else who uses it have a problem with it in this CSS mod. Its not usable anymore when using this CSS

[dude99]

@wannabevivaldiuser The problem with Vivaldi is it has way too many customizable parts. And this made CSS modding very difficult & troublesome if we have to always made 'em compatible with ALL possible setup. That's why I requested a screenshot of the setup you are using in the beginning to scale down the workload. Then, I also pick mod friendly method to achieve the desired result to allow additional CSS mod to work with it later.

It's not really a difficult task to add more toolbar support, but it will add up a lot of work very quickly, because most toolbars in Vivaldi have multiple positions. IMHO adding more toolbar support that no one ask for is really a waste of time. For instance, both Tabbar & Mainbar can also be place at the bottom & I can automate 'em too, but 99.99% of people don't place 'em at the bottom, so no point for me to walk the extra miles to support 'em if no one ask for it, right?

You can browse my other CSS mod via the link in my sig, I think I have made 2 different CSS mod to automate bookmark bar too. Now, with the new powerful :has() function, we can pretty much made many things impossible, possible.

[blackcow]

hey @dude99 you are the man. I'm using your script and it's working like a charm. I have just one request: Is it possible to disable the animation when the bar autohides/show ? I have 'Appearance -> Use animations' already disabled, but the effect still happens when using your custom CSS.

Any clue?
Thank you in advance.

[dude99]

@blackcow Look for code with transition: ..., they control the animation behavior. Example: transition: margin-top .2s ease-in .2s !important;

Pls study these references so you can DIY CSS in the future:
https://www.w3schools.com/cssref/css3_pr_transition.asp
https://www.w3schools.com/css/css3_transitions.asp
https://www.w3schools.com/css/css_important.asp

Now, u can do a few things with this new CSS knowledge & superpower:

1. remove all animation by remove all transition related code. (not recommended, see 2 & 3)

2. or simply remove !important syntax inside all transition related code, so that you can disabled animation when you disabled animation function in Vivaldi, but still retain the animation when you enabled 'em in Vivaldi. But doing so you will loss the DELAY function when u disabled animation in Vivaldi, that means both toolbars will disappear immediately when you mouseout/off-focus from mainbar, this is very bad & annoying for shaky hands. LOL

3. Lastly, you can alter the animation behavior to fit your need. You can get rid of the animation but retaining the DELAY function, like when you mouseout of the mainbar, you don't want both header & mainbar to disappear immediately... So you can do transition: margin-top 0s 1s !important; to keep 'em showing for 1 second before go into hiding with zero animation, regardless of Vivaldi animation setting. (IMHO this is the best solution to your request)

[blackcow]

Working like a charm

Thank you my man.

[dude99]

Last version, I won't be tinkering with this CSS mod any further after this update, so feel free to fork this CSS mod if you want to.

/* automate header */
.address-top.tabs-top:not(:has(.toolbar-editor)) #header {min-height: 0; max-height: 165px; transition: max-height .4s ease-out 0s !important;}
#app:has(#browser > :not(#header):hover, #panels-container:focus-within) .address-top.tabs-top:not(:has(.toolbar-editor, .toolbar-mainbar:is(:focus-within, :hover, :has(.button-pressed)), .bookmark-bar:is(:focus-within, :hover))) #header {max-height: 0; transition: max-height .4s ease-out 0s !important;}
/* automate mainbar */
.address-top.tabs-top:not(:has(.toolbar-editor)) #main > .mainbar > .toolbar-mainbar {margin-bottom: -34px; transition: margin-top .2s ease-out 0s !important;}
#app:has(#browser > :not(#header):hover, #panels-container:focus-within) .address-top.tabs-top:not(:has(.toolbar-editor, .toolbar-mainbar:is(:focus-within, :hover, :has(.button-pressed)), .bookmark-bar:is(:focus-within, :hover))) .mainbar > .toolbar-mainbar:not(:hover):not(:focus-within):not(:has(.button-pressed)) {margin-top: -34px; transition: margin-top .2s ease-in .2s !important;} 
/* trigger zone */
.address-top.tabs-top:not(:has(.toolbar-editor)):not(.bookmark-bar-top) #main > .mainbar > .toolbar-mainbar::before {content:''; position: absolute; inset: 100% 0 -17px 0; background: #0ff6;}

/* automate top bookmark bar */
.bookmark-bar-top .bookmark-bar {margin-bottom: -29px; z-index: 1; transform: translateY(34px); transition: transform .2s ease-out 0s !important;}
#app:has(#browser > :not(#header):hover, #panels-container:focus-within) .address-top.bookmark-bar-top:has(.toolbar-mainbar:not(:focus-within):not(:hover)) .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%);  transition: transform .2s ease-in .2s !important;}
/* trigger zone */
.bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; inset: 100% 0 -14px 0; background: #0ff6;}

updated stuff:

• add support for top bookmark bar, mouseover bottom BB can also reveal top header/mainbar.

• move trigger zone to below top BB if top BB present.

[wannabevivaldiuser]

Theres an inconsistency where, if a site is being translated by the build-in Vivaldi translator, the .mainbar addresbar will stay visible.

Very easy to reproduce just go to for example https://rutracker.org/ and let it translate.

I use this feature alot, i'm attempting to try and fix it.

[dude99]

@wannabevivaldiuser Unfortunately it's another GUI related bug LOL
Details: https://forum.vivaldi.net/post/595417
I have file a bug report on this bug this morning, hopefully v team will fix this blunder in next stable.

---

Until v team fix this bug, try this temporary workaround I made for this bug from another CSS mod, just replace all instances of :has(.button-pressed) in this CSS mod with :has(.button-pressed:not([title="Revert Page Translation"]):not([title="Reader View"]))

It should work on this mod too, but I didn't test it yet... So please test it & report back the result. Again, I don't use this CSS mod, so I probably won't be coming back to fix this mod if it break in the future.

[dude99]

@wannabevivaldiuser Unfortunately it's another GUI related bug LOL
Details: https://forum.vivaldi.net/post/595417
I have file a bug report on this bug this morning, hopefully v team will fix this blunder in next stable.

---

Until v team fix this bug, try this temporary workaround I made for this bug from another CSS mod, just replace all instances of :has(.button-pressed) in this CSS mod with :has(.button-pressed:not([title="Revert Page Translation"]):not([title="Reader View"]))

It should work on this mod too, but I didn't test it yet... So please test it & report back the result. Again, I don't use this CSS mod, so I probably won't be coming back to fix this mod if it break in the future.

[blackcow]

hey @dude99 , sorry to bother you again my dude.. but I'm having a last issue and maybe you can help me.

Thing is, your custom CSS is working like a charm, but it simple stop working if I enable: Appearance -> Use native window

I'm using Linux btw, so I need to enable "Use native window" option so Vivaldi can have my Linux WindowManager buttons (close, minimize, etc..)

Any clue? Thank you in advance.

[dude99]

@blackcow can u please describe how "it simply stop working"? Or attach a gif to show how it looks during native window mode? I can't guess the result cuz I don't use Linux. And my guess is if it can be done in Linux with native window enabled, then we will need some CSS guru familiar with Linux OS to adapt this CSS mod for Linux with native window, cuz there are some differences between OS when native window mode is enabled.

AFAIK CSS mod can only alter Vivaldi's native GUI, it can't alter OS window GUI. So, if you enabled native window, then all GUI belong to the OS (window's titlebar, borders, & window buttons) will be display as is, designed by the OS, we can't alter it with CSS mod.

I'm not sure about if JS mod can alter OS's GUI, we will need JS guru to answer that...