Borders around the active tab and frame

[gabevilela]

What I'm asking, specifically, is for a border around the active tab and in the top of the address bar (or bookmarks bar, depending on what comes under it)

This should help, especially when the accent color is similar with the background color, or the window background image.
The border color could be either the theme's Highlight color or calculated automatically by vivaldi

Concepts:

With bottom tabs. Basically mirrored

Side tabs is the easiest one to implement

[Hadden89]

@gabevilela Not everyone will like it but an option for such borders would be nice.
(On side tabs the lack of a border/separator triggered me too much I set up a small mod for that).

[barbudo2005]

@gabevilela
This could help (change the color):

.tab.active:not(.tab-group)

{border-top: 1px solid red !important;
border-left: 1px solid red !important;
border-right: 1px solid  red !important;}

Lack the selector of the horizontal line over the address bar.

[stardepp]

This works with this .css modification :

/*Highlight Active Tab*/
.tab-position .tab.active:not(.tab-group) {
  border-top: 2px solid var(--colorHighlightBg) !important;
  border-bottom: 2px solid var(--colorHighlightBg) !important;
}

[barbudo2005]

@gabevilela Not perfect but.....

.tab.active:not(.tab-group)

{border-top: 2px solid red !important;
border-left: 2px solid red !important;
border-right: 2px solid  red !important;}


.UrlBar.toolbar.toolbar-mainbar.toolbar-large

{border-top: 2px solid red;}

[gabevilela]

@barbudo2005 Yeah, I know you can do that with CSS mods
BTW, this is what I've used to make the concept

.tab{
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: transparent;
}

.tab.active{
    border-color: var(--colorHighlightBg);
}


.tab-position[style*="z-index: 2;"]::before,
.tab-position[style*="z-index: 2;"]::after {
    content: " ";
    position: absolute;
    background-color: var(--colorHighlightBg);
    width: 100vw;
    height: 1px;
    bottom: 0px;
}

.tab-position[style*="z-index: 2"]::before{
    left: calc(100% - 1px);
    z-index: 2;
}
.tab-position[style*="z-index: 2"]::after{
    right: 100%;
}

[TsunamiZ]

upvoted. it should be an option.

also see these other related requests...
https://forum.vivaldi.net/topic/40552/advanced-color-settings-for-our-theme

[LonM]

Thank you for your request. As this post has had less than 5 votes over 4 years it will now be archived. You can make a new request if you feel it is still needed in the browser.