(Request) Remove highlight on selected tab in Window Panel

[Aelius]

By default, the Window Panel highlights the selected tab and bolds the active tab:

This is a problem for two reasons, in my opinion:

1. The selection highlight is far more conspicuous than the bold text and black dot of the active tab. I want to immediately recognize which tab is the active tab, and the highlighting deceptively draws my eyes.
2. Even without the distracting highlight competing for my attention, bold is just too subtle. When I have so many tabs open, it can take a while to find the bold tab.

Frankly, if, like me, you enabled "activate with single click" in the web panel settings, then the grey selection highlight is actually pointless anyway, unless you're dragging the tab.

I did find a CSS tweak by @dude99 that handles the second problem. Now the highlighted tab is much more easy to spot, as you can see below:

But the first problem remains: that pointless grey highlight, like a zombie whose rotting grey flesh still clings to a tab I long ago clicked on.

I gotta think this is something CSS can help with, right? Does anyone have any ideas?

Thanks!

[luetage]

@Aelius You can look up the highlights yourself ☛ https://forum.vivaldi.net/post/135732
This one should be fairly easy to adjust, use .vivaldi-tree .tree-row[data-selected]

[Pesala]

@Aelius I agree that the bold text is quite hard to spot, but did you not notice the bullet point on the active tab?

The highlighting of selected tabs is not pointless. If you want to move, close, or reopen selected tabs it is very useful.

The usual Ctrl and Ctrl+Shift+Click shortcuts can be used to select multiple tabs or a range of tabs for moving, closing, or reopening.

[Aelius]

@luetage said in (Request) Remove highlight on selected tab in Window Panel:

@Aelius You can look up the highlights yourself ☛ https://forum.vivaldi.net/post/135732
This one should be fairly easy to adjust, use .vivaldi-tree .tree-row[data-selected]

Thank you for identifying the UI element that needs customizing. Unfortunately, I still cannot help myself from here. I have no idea how CSS works and would have no idea where to begin. This coding language is as opaque as a magic incantation to me.

If anyone can provide something I can directly copy and paste into a .css file to put in my CSS folder, it would be greatly appreciated! To clarify, I'd like the selection highlight to be disabled (so, something with 100% transparency would work, I guess?)

[luetage]

@Aelius It will pay off manifold, if you learn just the basics ☛ https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics. Modding Vivaldi is not strictly DIY, but since the UI changes constantly and you apparently have a desire for very specific modifications, you would be forever dependent. CSS is very easy to get started with. Feel free to ask for help, if you can’t find the answer, but try to do it first.

[shifte]

@Aelius
As @luetage mentioned above.

.vivaldi-tree .tree-row[data-selected]

/* Remove highlight on selected tab in Window Panel */
.vivaldi-tree .tree-row[data-selected] {
  background-color:transparent;
 }

/* active tab marker */
#window-panel .vivaldi-tree .title.active:before {content: '\039f';}

/* active tab highlighter */
#window-panel .vivaldi-tree .title.active:after {content: ''; position: absolute; left: 0; width: -webkit-fill-available; height: 24px; background: var(--colorHighlightBgAlpha); mix-blend-mode: overlay;}

[dude99]

There are actually 2 state for selected tab (focused & off-focus), so you probably need to modify both state to make 'em less annoying...

when it's focused:

/* outline */
.win .vivaldi-tree .tree-item[data-lead] .tree-row.tree-row:not([data-nofocus]), .linux .vivaldi-tree .tree-item[data-lead] .tree-row.tree-row:not([data-nofocus]) {
    box-shadow: inset 0 0 0 1px var(--colorHighlightBgDark);
}

/* background & title */
.hasfocus .vivaldi-tree:focus-within .tree-row[data-selected] {
    background-color: var(--colorHighlightBg);
    color: var(--colorHighlightFg);
}

when it's off-focus:

.vivaldi-tree .tree-row[data-selected] {
    background-color: var(--colorFgAlpha);
}

Above code are the default code related to selected tab, you can modify 'em to your liking.

---

As for active tab you can replace the older code #window-panel .vivaldi-tree .title.active:after line with this simpler code:

#window-panel .vivaldi-tree .tree-row:has(.title.active) {
    background-image: linear-gradient( var(--colorHighlightBgAlpha),var(--colorHighlightBgAlpha)), linear-gradient( var(--colorHighlightBgAlpha),var(--colorHighlightBgAlpha));
    border-radius: var(--radius);
}

NOTE: Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.

[luetage]

@dude99 @shifte Oh well, good job. You two are responsible for keeping this updated 🫠

[Aelius]

@dude99 said in (Request) Remove highlight on selected tab in Window Panel:

There are actually 2 state for selected tab (focused & off-focus), so you probably need to modify both state to make 'em less annoying...

when it's focused:

/* outline */
.win .vivaldi-tree .tree-item[data-lead] .tree-row.tree-row:not([data-nofocus]), .linux .vivaldi-tree .tree-item[data-lead] .tree-row.tree-row:not([data-nofocus]) {
    box-shadow: inset 0 0 0 1px var(--colorHighlightBgDark);
}

/* background & title */
.hasfocus .vivaldi-tree:focus-within .tree-row[data-selected] {
    background-color: var(--colorHighlightBg);
    color: var(--colorHighlightFg);
}

when it's off-focus:

.vivaldi-tree .tree-row[data-selected] {
    background-color: var(--colorFgAlpha);
}

Above code are the default code related to selected tab, you can modify 'em to your liking.

---

As for active tab you can replace the older code #window-panel .vivaldi-tree .title.active:after line with this simpler code:

#window-panel .vivaldi-tree .tree-row:has(.title.active) {
    background-image: linear-gradient( var(--colorHighlightBgAlpha),var(--colorHighlightBgAlpha)), linear-gradient( var(--colorHighlightBgAlpha),var(--colorHighlightBgAlpha));
    border-radius: var(--radius);
}

NOTE: Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.

Hmm, the code you provided doesn't seem to do anything. I pasted it to a text file, renamed the file extension to .css, made sure the file name had no spaces (I've done all this before with other css mods), and enabled experimental web platform features.

[dude99]

@Aelius The code I provided are the default CSS code related to selected/highlighted tab(s). You have to alter 'em to get the looks you wanted. I strongly recommend you learn a bit of the basics of CSS to mod Vivaldi to your liking, because it's not really that hard & there are really no shortcut to get everything to looks exactly the way you wanted.

---

CSS is a human readable code/language, & it's pretty easy to understand, examples:
background-color = background color of the element
color = text color of element
border-radius = corners of element
box-shadow = create a shadow around an element

Now, you can search these terms like CSS background-color property to learn how to manipulate 'em. For example, you can remove 'em with none or transparent; like if you want to get rid of background color, then replace background-color: var(--colorFgAlpha); with background-color: none; = no more background color!

or if you want to turn the background into red color, then do background-color: red;. Pretty easy, right?

[Aelius]

Got it. Thank you so much @dude99 and @shifte! It looks awesome now.