[MOD] Address bar autohide + reveal on hover

barbudo2005

Or this with Multiline tabs Mod by Gorsash:

https://forum.vivaldi.net/topic/58450/multiline-tabs
https://gist.github.com/gorsash/0d4de703a84c620c7280830aba582758

smerugu28

@emvaized I don’t see it working. Is it still valid MOD?

Kein

Here is updated for 6.0, it is same code it still works for me just fine.
It works just fine in non-maximized window as well.
Do note that I run OS with DPI scaling so if you have any issues with items being misaligned let me know. And, as mentioned before, this CSS mod is intended to be used with keyboard since this is how I prefer it. I can't stand url bar popping-up when I hover mouse over on my way to select other tab.

/* TITLEBAR */

/* Removing the close/maximize buttons and expanding tab space */
.window-buttongroup, button.vivaldi { display: none!important; }
.win #tabs-container.top, .win #tabs-container:not(.none).top, .win #tabs-container.top {
	padding-right: 1px;
	padding-left: 1px;
}

/* Fixing new header "padding" in 5.7*/
#browser.tabs-at-edge #header, #browser.tabs-top #header {
    min-height: 30px;
}

/* URLbar text for readability's sake */
.UrlField { font-size: 125% }


/*Addressbar settings&fixes when hidden*/
#main > .mainbar {
	position: absolute;
	width: 100%;
	z-index: 0;
}

#main > .mainbar:focus-within,
#main > .mainbar:hover,
#main > .mainbar:focus {
	z-index: 1;
	filter: drop-shadow(0 1mm 1mm #000000);
}

.extension-popup.top {
    top: 40px!important;
}

galejb

This post is deleted!

Iryse

@Kein
Unfortunately, it doesn't seem to work anymore as I'm trying in the 6.7. It appears that the CSS only disappears completely with the search bar currently.
Do you have any solutions?

FoxieFox

Autohide mainbar on mouse hover: https://github.com/JoyHak/Vivaldi-CSS-mods/blob/main/hide_UI.css

AhmadRehan98

@FoxieFox

Thanks a lot for sharing.

Empty parts in the title bar result in the titlebar to appear and disappear constantly, unlike if you hover on the url bar or the close-maximize-minimize buttons.

Does anyone know of a way to have empty parts also make the title bar appear on hover?

Recording2025-02-03144756-ezgif.com-video-to-gif-converter.gif

FoxieFox

@AhmadRehan98
It shouldn't be like this. What is your screen resolution and what other CSS mods do you use?

Hadden89

@AhmadRehan98 check if animations are enabled in vivaldi settings

(otherwise just add !important to transform selectors)

FoxieFox

@Hadden89
thats true: transform in the mod requires animation

@AhmadRehan98

Type vivaldi:inspect/#apps in your browser.
Find the line that contains window.html
Start screen recording.
Click little rectangle with pointer.
Move the pointer over the upper borders of the browser. Blue hover area should appear/disappear/glitch.

Send this recording pls.

AhmadRehan98

@FoxieFox

It's 1440p.
I tried removing all CSS mods except yours and restarted but it still glitched.
I checked animations as well, it is enabled.

the blue hover area hasn't glitched:

here's all my other mods. I tried disabling them and the problem still occurs.

Note that if i disable the [left oriented tab auto hiding and show on hover] CSS mod (the first block of code below), i.e. the tabs are always there, the glitch doesn't happen on the left upper area like my initial gif, it only happens on the right side where the title bar and tabs bar don't intersect.
but if i put my tabs on bottom for example, all the empty parts in the title bar still glitch.

:root{
    --tabbar-size: 0px;
}

/* tabbar transparent */
.inner > .tabbar-wrapper:not(:hover) .tabbar-wrapper div {
    opacity: 0;
}

/* tabbar workspace */
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu{
    width: calc(var(--tabbar-size) + var(--densityGap))!important;
    transition: unset;
}

.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title,
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
    display: none;
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-icon{
    position: absolute;
    left: var(--densityGap);
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title{
    position: absolute;
    left: calc(32px + var(--densityGap)) !important;
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
    position: absolute;
    right: var(--densityGap);
}

/* tabbar container */
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container,
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container .resize{
    width: calc(var(--tabbar-size) + var(--densityGap)) !important;
    transition: unset;
}


.inner > .tabbar-wrapper{
    position: relative;
    width: calc(var(--tabbar-size) + var(--densityGap));
}

.inner > .tabbar-wrapper > .tabbar-wrapper{
    position: absolute;
    overflow: hidden;
    z-index: 1;
}

.inner > .tabbar-wrapper > .tabbar-wrapper:hover{
    position: absolute;
    background:var(--colorImageLeftBg, var(--colorBgLight)) ;
}

.inner #tabs-tabbar-container,
.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu {
    transition: width 0.1s;
}

/* hide tabbar scrollbar */
#browser #tabs-container.right ::-webkit-scrollbar,
#browser #tabs-container.left ::-webkit-scrollbar{
    display: none;
}

/* tab close button position */
.overflow.tab-strip .tab .tab-header{
    max-width: calc(var(--Width) + 12px)
}

.tab-position .tab.audio-on {background-repeat:no-repeat; width: 50%; background-size:50%; background-image: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); !important;}

span.tab-audio { color: red; transform: scale(1.75); }

display: flex !important