Huge Pixel Border around Stack Tabs

Clover2021

Hi everyone, it's been a few months since I have used my browser. I use stacked tabs and now I am seeing a huge border in-between my tabs and even a square at the connection points (See attached image). It wasn't like this before. Does anyone know how to edit this? I looked for border and search in settings didn't find it.

Pesala

@Clover2021 The borders around Tiled Tabs was increased to make the separators easier to grab.

Clover2021

@Pesala thanks. Is there a way to edit this?

Pesala

@Clover2021 There is no official option. Perhaps someone in the Modifications forum can offer some CSS code.

DoctorG

@Clover2021 I can not see such border in a tab stack (=grouped tabs).
Did i misunderstood you?

DoctorG

@Clover2021 Welcome in our Vivaldi Community

Enjoy browsing with Vivaldi.

Some useful links for you:

Clover2021

@DoctorG thanks. I just realized, I think Vivaldi calls it "tab tiling". I have multiple web pages open. The border in-between them is now huge, before it was only a few pixels.

DoctorG

@Clover2021 That was introduced to make the tab tiles more visible.
In my opinion the margins are to wide.

I do not know if that can be fixed by a user Modification. If you want to try please ask at https://forum.vivaldi.net/topic/82177/vivaldi-css-for-grey-area-surrounding-page-tiles

nomadic

@Clover2021 If you wanted to change it with a mod, you can use this (guide to adding CSS mod):

:root {
  --tileGap: 4px;
  --tileBorderWidth: 2px;
}

/* Adjust gaps between tiled tabs */
.mosaic-split.-row {
  margin-left: calc(-1 * var(--tileGap));
  width: calc(2 * var(--tileGap));
}
.mosaic-split.-column {
  margin-top: calc(-1 * var(--tileGap));
  height: calc(2 * var(--tileGap));
}
.mosaic-tile {
  margin: var(--tileGap);
}
.mosaic-split.-column .mosaic-split-line {
  height: calc(2 * var(--tileGap));
}
.mosaic-split.-row .mosaic-split-line {
  width: calc(2 * var(--tileGap));
}

/* Adjust tiled tab borders */
.tiled.webpageview:not(.active) {
  box-shadow: 0 0 0 var(--tileBorderWidth) var(--colorBorder);
}
.hasfocus .tiled.webpageview.active {
  box-shadow: 0 0 0 var(--tileBorderWidth) var(--colorHighlightBgFaded);
}
.isblurred .tiled.webpageview.active {
  box-shadow: 0 0 0 var(--tileBorderWidth) var(--colorBorderIntense);
}

The 2 variables at the top --tileGap and tileBorderWidth are both currently set to their default values. Just reduce them until it looks good.

Clover2021

@nomadic thanks for the code. Finally got around to making and editing the css. Unfortunately, once implemented the border and the edges which use division of pixels seems to destroy the frames all together. I tried just shaving things down to:
--tileGap: 2px;
--tileBorderWidth: 1px;

I am wondering if the older version of the browser has some different calculations that work differently.