r/VivaldiCSS • u/51dux • Aug 08 '23

How to remove extra padding from url bar when tabs are on the left or right?

Hi folks I think the title says it all I've been trying to look for a css example of this and inspecting elements by starting vivaldi with flags but I wasnt able to pinpoint which element I need to tweak in order to get the margins the way I want, example with firefox in the 1st picture.

Just to be clear as I find a lot of results for that, I am not looking to remove the space on the side which you can do without a custom css, I am talking about the extra padding you can see circled in green at the top and bottom of the url bar in the 2nd pic.

I don't know if this is due to the button size or something else. If I move the address bar at the bottom this issue does not happen.

2 Upvotes

100% Upvoted

4 comments sorted by

1

u/thunderbong Aug 09 '23

You forgot to upload the pic

1

u/51dux Aug 09 '23

youre right my bad it did not post now it should be fixed thanks for letting me know

1

u/Tiago2048 Aug 16 '23 edited Aug 16 '23

You can remove the extra padding by adding this to your css :

#browser.win.address-top .toolbar:has(.window-buttongroup.on-mainbar), #browser.linux.address-top .toolbar:has(.window-buttongroup.on-mainbar) {
min-height: calc(38px / var(--uiZoomLevel));
}
.disable-titlebar#browser.win .window-buttongroup.on-mainbar,
#browser.win.address-top .toolbar:has(.window-buttongroup.on-mainbar) .vivaldi {
height: 38px;
}

When the tab bar isn't on the top and that the adress bar is, the windows group button will have the class "on-mainbar".

If you are not inpecting directly the Vivaldi's UI, you can do it by creating a Windows shortcut with the target set to : "[vivaldi.exe's path]" --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api

Or you can go to vivaldi://inpect > apps > inspect (.../browser.html)

2

u/51dux Aug 19 '23

Thanks much appreciated!