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

[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...

[blackcow]

I've just recorded a quick video showing it:
https://file.io/M90SNkOHV1Ka

What I really want is to HIDE the window buttons (close, minimize, etc..) So I set my linux WindowManager to not show it (as you can see on the video there are no buttons) and that's it.

Maybe Vivaldi has an option (command line?) to not show the window buttons as well? would fix all my issues if so..

Thank you for your time @dude99

[blackcow]

Uploaded on imgur: https://imgur.com/a/EDeWGFR

[dude99]

Judging from the gif you posted, it seems they utilize a top priority class in native mode to enforce min-height: 22px;. We can fix this by replace min-height: 0; with min-height: 0 !important; in the first line to overwrite the default value.

Also, if you don't want Vivaldi to display the windows' button in non-native mode, you can try this code to hide 'em permanently:

#header .window-buttongroup {display: none;}

or hide those buttons when you don't need 'em, then mouseover the usual spot to reveal 'em:

#header .window-buttongroup:not(:hover) button {display: none;}

NOTE: I have not tested these code yet, but they should work... I think. LOL

[blackcow]

you're a fucking legend dude.. thank you

[jbird92113]

Hi, love this css option. One item I noticed and hope it's a simple fix is when it's at full screen, I have this aqua bar across the top.

Any help to remediate would be most appreciated.

[dude99]

@jbird92113 1st, try remove background: #0ff6; to see if that will remove the cyan bg color.

If this doesn't work, then pls post the latest version CSS code you have copy/alter from this topic, plus other CSS code that might affect the .mainbar. I will take a look at 'em later when I have time...

[jbird92113]

That worked! Thanks, Dude99...

[jbird92113]

@dude99 Found one more issue I was having and hoping you can help.
When I launch the browser, more often than not, the tab bar will be hidden but the address bar will remain and not auto-hide. I have to shutdown the entire browser and restart it to work again.

Here is my full css file i use. Thanks for all your help!

/* 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;}

/* 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;}

.UrlBar .toolbar-mainbar > .button-toolbar > button:hover {border-radius: 50%; background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important;}
.UrlBar .toolbar-mainbar > .button-toolbar > button:hover:not(:active) :is(svg, img), .UrlBar .profile-popup > button:hover:not(:active) > img {transform: scale(1.3); transition: transform .15s ease-in-out !important;}
.toolbar-extensions .ExtensionIcon--Hidden:hover {border-radius: 50%; background: transparent; transition: .3s ease-out !important;}

/* Automate status bar into clock button */
#browser:not(:has(.toolbar-editor)) > footer > .toolbar-statusbar {margin: -23px 0 0 auto; background-color: var(--colorBgAlphaBlur); height:24px !important; width: fit-content; border-radius: var(--radius) var(--radius) 0 0; border:none; box-shadow: 0 0 0 1px var(--colorBorder), 0 2px 6px rgba(0, 0, 0, 0.25);}
#browser:not(:has(.toolbar-editor)) > footer > .toolbar-statusbar > div:not(.ClockButton) {max-width: 220px; opacity: 1; visibility: visible; transition: max-width 1s ease-out 0s, opacity .15s ease-in 0s, visibility 0s !important;}
#browser:not(:has(.toolbar-editor)) > footer > .toolbar-statusbar:not(:focus-within):not(:hover):not(:has(.button-pressed)) > div:not(.ClockButton) { max-width:0; opacity: 0; visibility:hidden; transition: max-width .25s ease-out .4s, opacity .15s ease-out .5s, visibility .65s !important;}
#browser:not(:has(.toolbar-editor)) > footer > .toolbar-statusbar .StatusInfo {position:fixed; left:2px; bottom:2px; min-height:20px; padding: 1px 3px; background: var(--colorBgDark); border-radius: var(--radiusHalf); pointer-events: none; max-width: calc(100vw - 60px);}
.toolbar-statusbar .button-toolbar {align-self: auto;}

/* 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: 5px; opacity: 0; margin: 0 2px; transition: .1s .9s, background-color 0s 0s, opacity 0s 1s !important;}

.button-toolbar > button:hover {border-radius: 50%; background: var(--colorAccentBgAlpha) !important; transition: .3s ease-out !important;}
.button-toolbar:hover:not(:active) :is(svg, img), .UrlBar .profile-popup > button:hover:not(:active) > img {transform: scale(1.3); transition: transform .15s ease-in-out !important;}
.toolbar-mainbar .toolbar-extensions > .button-toolbar > button:hover {border-radius: 50%; background: transparent; transition: .3s ease-out !important;}

/* tiny searchbox */
.mainbar .UrlBar-SearchField {transition: min-width .5s ease-out, max-width .5s ease-out, flex-basis .7s ease-out !important; } /* add smooth expanding animation */
.mainbar .UrlBar-SearchField:not(:focus-within):not(:hover) {min-width: 26.5px; max-width: 26.5px; transition: min-width .5s ease-in-out, max-width .5s ease-in-out !important;}
.mainbar .UrlBar-SearchField:not(:focus-within):not(:hover) > .searchfield-input {margin-left: -25px; margin-right: -22px; opacity: 0; z-index: 1;}
.mainbar .UrlBar-SearchField > .toolbar-insideinput:last-child {visibility: hidden;}
.mainbar .UrlBar-SearchField:is(:focus-within, :hover) > .toolbar-insideinput:last-child {visibility: visible; transition: visibility 0s .2s !important;}
/* extra expand width when start typing */
.mainbar .UrlBar-SearchField {max-width: 300px;}
.mainbar .UrlBar-SearchField:has(input:not(:placeholder-shown)):focus-within {flex-basis: 300px;}
/* expand dropdown list to full width */
.mainbar .UrlBar-SearchField .OmniDropdown {width: max-content; max-width: 90vw;}

[dude99]

@jbird92113 Sorry for the late reply, I'm a bit busy yesterday. I will try look at 'em later.

[jbird92113]

No worries at all. I appreciate any help you can provide.

[dude99]

@jbird92113 Hi again. I have tested the code u posted many times, but unfortunately I can't reproduce the bug you mentioned. The only time the mainbar will "get stuck" is when Vivaldi's auto translation function is triggered on the active tab... So my guess is maybe you have an active tab that triggered auto translation on startup?

Can u try previously suggested solution to see if it's related to translation button bug? https://forum.vivaldi.net/post/595492

Else, I don't really know what went wrong...