Can anyone pls help me eliminate a 1px line?

[Darthagnon]

I edited a chrome-style tabs mod into this, so that it respects colour. Unfortunately, I've identified an issue inherited from the original code that makes an annoying 1px line at the bottom of the Vivaldi window, whether it is maximised, or a small window (this line is cumulative with any other border CSS mods you may use).

Here's the troublesome code:

#main {
	top: -1px;
	bottom: -1px;
	z-index: 1;
	border-top: 1px solid var(--colorFg);
}

It is used to make a 1px line along the top of the address-bar, to connect with the chrome-shaped tabs' outlines, so can't be eliminated completely. Anyone have any ideas/equivalent code?

Screenshots are available on the threads linked above.

[Darthagnon]

The px line looks like this: Imgur album

[Pathduck]

@Darthagnon When I add the code above to my custom CSS I get a white line (from colorFg) above the address bar, like this:

The 1px line above your status bar is most likely caused by the default CSS for .toolbar-statusbar:
border-top: 1px solid var(--colorBorder);

The value of colorBorder would usually be a dark version of your theme's "highlight" colour. Check the vivaldi://themecolors/ page to see what you have there. I suspect some other part of your CSS mod is causing this, possibly overriding the value of colorBorder.

Have you tried to open Vivaldi in UI Inspect mode and examining the code yourself?
vivaldi --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end

[Darthagnon]

@Pathduck The code is supposed to put a line at the top of the address bar. However, it also adds a second line to the top of the status bar (confirmed by running just the code snippet in Vivaldi latest snapshot, no other mods) - you'll notice if you "disable status bar" and then fullscreen vivaldi - a 1px line in a highlight colour will appear at the bottom of the window.

Thank you for the reply! I appreciate your help

I also tested

.toolbar-statusbar{
border-top: 5px solid var(--colorBorder);
}

like you suggested, but turns out this is separate:

as you can see, .border-top for the Status Bar is the 5px darker gray, whereas the 1px brightly coloured line is the undesired one, that remains when the Status Bar is disabled and Vivaldi is fullscreen.

atm, I'm trying some workarounds, but none look as good.

[Darthagnon]

I managed to fix it!!!

#main {
	border-top: 1px solid var(--colorFg); /* line along top of address bar. Should appear to go over the active tab, then in front of background tab, along address bar top */
}

Then, as this by itself cuts through the active tab, I used the following to give the active tab a THICC lower border in the foreground colour, which hides the cut-through:

/* overwrite active tab bottom border (hides 1px address bar border from cutting active tab)*/
.tab.active::before {
	border-bottom: 1px solid var(--colorBg);
}

And I don't use the following line, which caused all the trouble, at all:

#main {
	top: -1px; /* EVIL, DELETE, DO NOT USE,  NOT NEEDED, DISCARDED -  set to -1px for hacky 1px line above address bar, but it makes the "bottom" border appear, whether it's enabled/visible or not */
	bottom: -1px; /* NOT NEEDED, DISCARDED - dedicated Bottom border */
	z-index: 1; /* NOT NEEDED - DISCARDED: set to 0 = eliminate line under background tabs, less than 0 = weird blank Vivaldi, greater than 1 = line in front of active AND background tabs */

}

Thank you for your help, @Pathduck! Solved!

[Pathduck]

@Darthagnon Good

Yes, the top and bottom controls positioning of elements and is not a way to create borders.
https://www.w3.org/TR/CSS21/visuren.html#position-props

z-index controls layering of elements, if you want overlapping.
https://www.w3.org/TR/css-position-3/#layered-presentation

Once you start moving the #main element it could potentially show whatever is behind it, for instance on the bottom edge.

Glad you fixed it