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

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