Scrolling Title with Popup Infobar CSS mod

dude99

Tabbar & Addressbar on top, glass style (screenshot speed x 2)

Only Addressbar on top, plain theme style (screenshot speed x 2)

Here is another ancient CSS mod getting a major upgrade, it's not perfect but this is a mission impossible accomplished with just pure CSS. It took me almost 2 years to come up with this entire dirty hack!

ReadMe

This CSS mod auto-scroll the Title from start to end via a scrolling infobar when you mouseover the Vivaldi button or window buttons after 1 sec. The infobar located below the lowest top-position toolbar (Address bar, Tab bar, or the Header).
The infobar will overlay the top position Bookmark bar, to keep infobar as close to the top as possible.
Tabbar-on-top setup doesn't have a Titlebar by default, thus the infobar will only available when the Horizontal menu bar is enabled (see screenshot 1).
The smartest trick of this CSS mod is it ONLY auto-scroll title longer than the width of the window, else it simply centered the title inside the infobar when you mouseover the Vivaldi/window buttons.

Code

/* Pagetitle scrolling popup infobar */
#browser:not(.native):not(.is-settingspage):not(.popup) :is(#titlebar > *, .vivaldi-horizontal-icon):hover ~ :is(#pagetitle, .horizontal-menu-pagetitle),
#browser:not(.native):not(.is-settingspage):not(.popup) #titlebar:hover + .topmenu > .horizontal-menu-pagetitle {
	/* Customization: style for popup infobar */
	background: radial-gradient(at 50% 0%, #0005, transparent); backdrop-filter: blur(20px); -webkit-text-fill-color: white; text-shadow: 0 0 1px lightcyan, 0 0 2px black, 1px 1px 2px black; /* glass style */
	/* background-color: var(--colorBgIntenser); text-shadow: 0 0 .5px; box-shadow: rgba(25, 0, 0, 0.2) 0px 1px 6px; */ /* plain theme style */
	/* Popup infobar positioning & scrolling animation */
	position: absolute; top:59px; left:0; margin: 0 auto; height: 23px; min-width: 100%; width: fit-content; padding: 2px 10vw; z-index:5; font-size: 14px; pointer-events:none; animation: scrolltitle 12s linear 1s forwards !important; 
}
@keyframes scrolltitle {100% {overflow:visible; left: 100%; transform:translateX(-100%);}}
/* when not address-top */
#browser:not(.native):not(.is-settingspage):not(.popup):not(.address-top) #header:hover :is(#pagetitle, .horizontal-menu-pagetitle) {margin-top: -35px !important;} 

/* tabs-top with horizontal menu */
#browser:not(.native):not(.is-settingspage):not(.popup).tabs-top #header:hover :is(#pagetitle, .horizontal-menu-pagetitle) {top:94px;} 
/* when tabs-top & not address-top */
#browser:not(.native):not(.is-settingspage):not(.popup).tabs-top:not(.address-top) #header:hover :is(#pagetitle, .horizontal-menu-pagetitle) {margin-top: -32.5px !important;}

Customization

I have included 2 styles in the customization style section. Glass is default (1st screenshot) & Plain theme (2nd). Plain theme style will match most theme, but I can't guarantee it will work perfectly with millions of colorful combinations. (check vivaldi://themecolors/ for details).
You can increase font-size: 14px value in line 8 for larger title.
You can change the title scrolling speed via animation: scrolltitle 12s linear 1s forwards !important; in line 8. 12s means scroll the entire title in 12 seconds, less time means scrolling faster.
Obviously there are slight differences between all version of Vivaldi browser, thus it's possible the default values of my CSS mod doesn't anchor the infobar at proper height position for your setup. So you might need to adjust all the top: & margin-top: values according to your specific setup:
- top:59px in line 8 refer to setup with just Addressbar on top. Thus 25px (Header) + 34px (Addressbar).
- margin-top: -35px in line 12 refer to when Address bar not on top. Thus, deduct the total height of Address bar from above top value.
- top:94px; in line 15 refer to Tabbar & Addressbar on top plus Horizontal menu bar. 60px (Header & Tabbar) + 34px (Addressbar)
- margin-top: -32.5px in the last line refer to when Tabbar on top while Addressbar is not. This one is tricky to get cuz the header's total height changes slightly, so I adjusting margin-top value via DevTools directly with just my naked eyes.

Alright, that's all for now. I have a feeling I'm not done with this mod, maybe I can further improve it as time past. After all, I will have plenty of spare time to kill until this CCP plague is over...

Ornorm

@dude99 Amazing idea! Well done!

dude99

Forum mod: Can u please move this thread to https://forum.vivaldi.net/category/52/modifications?
I just realized I posted this in the wrong forum from last night...

Thanks.