Color a Single Tab (or Tab Group)

luetage

@petertown We can already rename tab stacks. I do not use stacks myself regularly, I’m more in favor of sessions, but when I do I use two level stacking. Even if you don’t like sessions, it’s important you save your current session from time to time anyway, since it’s not guaranteed Vivaldi will be able to restore your last session all the time. The forum has many topics about people losing hundreds of tabs because their last session didn’t restore. Auto‐saving sessions isn’t implemented, but you can use a modification for that ☛ https://forum.vivaldi.net/topic/33047/autosave-sessions-mod

Pesala

Several similar topics were merged.

Pesala

@petertown said in Color coded tabs:

Create new tab-stacks from second layer tabs

Select them and move them to a new window.

OrchestraBrowser2021

@petertown I understand, I hate it when another browser has a feature that Vivaldi doesn't (for example chrome, edge, and brave having color-coded tab groups) but there are some other things that you can do to manage tabs such as using extensions like

Toby to save tabs into collections. this can give you easier on the eyes access to websites and can be a great alternative to bookmarks AND sessions
Workona to group tabs into even bigger categories. a nice (but possibly bulky) alternative to tab stacks in tab stacks
And even more extensions. I remember an older extension that let you rename tabs and change their icon in chromium browsers called Tab modifier by syl

[edit] didn't realize there was a way to color tabs.

barbudo2005

@petertown

1.- COLOR TAB

You can define any format of the tab by using some part of the title of the tab.

Use this code:

.tab[title*="Vivaldi Forum"]:not(.active)

{color: #85adf1 !important;
font-weight: bold ! important;}

2.- COLOR TAB STACKS

Different border color for stack N° 1, N° 2, N° 3, N° 4, etc.

Use this code:

/* For me the tabs in the first level have "--PositionX"  with a multiple of 180*/

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:62px"]  >  .tab:not(.active)

{border: 2px rgba(59, 129, 230, 0.6) solid !important;}

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:242px"]   >  .tab:not(.active)

{border: 2px rgba(130, 0, 4, 0.6) solid !important;}

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:422px"]   >  .tab:not(.active)

{border: 2px rgba(0, 140, 137, 0.6) solid !important;}

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:602px"]   >  .tab:not(.active)

{border: 2px rgba(255, 99, 29, 0.6) solid !important;}

.tab-strip > span  >  .tab-position.is-substack[style*="--PositionX:782px"]   >  .tab:not(.active)

{border: 2px rgba(233, 187, 54, 0.6) solid !important;}

Leothwyn

I'm new to Vivaldi, and came here looking for info on how to change the color of different stacks. I'll try the CSS for now, but would love to see this as a built in option, like the chrome groups.

Quercius

I just saw how Edge implemented this feature and I think it's elegant and easy to use. I'd be really happy to see something similar (or exactly) like this... I know, devs are working hard and I'm not complaining or what, just wondering if in the future this could be implemented among the other useful stuff they had already added...

luetage

@quercius I feel straight up copying a feature that has been copied from Vivaldi is not a viable option. Moreover it would get really messy with themes, position of tabs, accents and transparency. In my personal opinion the whole stacking thing is a one way street and not forward‐thinking. But I guess that’s not a good topic to mention this in lol

dude99

@luetage Is that your polite way of saying the tab stacking is undercooked? LOL

IMHO the tab bar system need revamp completely with stacking in mind. As of now it feel like they are using workaround to get the stacking effect added on top of the original tab bar system. This is my proposed solution: https://forum.vivaldi.net/post/553215

As for coloring stacked tab, it's shouldn't be much of a problem with theme or transparency, because we can simply treat 'em like renaming stack tab - once user marked a stack with specific color, then excluded it from theme & transparency. Also, Vivaldi can use other method to color a stack, like color outlined the entire stack, or a bottom/top stroke to "group" the stack, or create an indent color like unread marker...etc.

To be honest, currently some theme (example: default Dark) do make it kinda difficult to separate stacked tab from solo tab. I have to constantly spot the # of tab label to pick out stacked tab from solo tab. Thus, the current theme color system ain't really good for stacking, colorized stack tab can resolve this problem for better accessibility.

barbudo2005

With this code you can define the color of the stack by part of the title of the stack (the host):

.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"][title*="Vivaldi Forum"]

{border: 2.5px rgba(59, 129, 230, 0.7) solid !important;}

.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"][title*="IMDb"]

{border: 2.5px rgba(226, 185, 37, 0.7) solid !important;}

.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"][title*="YouTube"]

{border: 2.5px rgba(230, 32, 32, 0.7) solid !important;}

dude99

@barbudo2005 Nice one!

now if we can use js to fetch the accent color of each domain stack (just like active tab) & apply it as auto colorized for each stack then it would be perfect. LOL

barbudo2005

@dude99

The problem of that code is that not all sites have their "domain name" in the title.

So I tried this code:


.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"].tab
 .tab-header  .favicon  img[srcset*="vivaldi.net"]

{border: 2.5px rgba(59, 129, 230, 0.7) solid !important;}

 
.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"].tab
.tab-header  .favicon  img[srcset*="blogspot.com"]

{border: 2.5px rgba(234, 105,19, 0.7) solid !important;}


.tab-strip > span  >  .tab-position.is-substack  [id*= "tab"].tab
.tab-header  .favicon  img[srcset*="youtube.com"]

{border: 2.5px rgba(230, 32, 32, 0.7) solid !important;}

It works:

So since you can't control "parent selector" with its "children selector" with CSS, then maybe a "Master of the Universe user" in JS could do it.

It would be awesome to be able to use the domain. Please do it.

barbudo2005

@dude99

With the upgrade Chromium to 102.0.5005.55 appeared the pseudo-class :has() which allows you to choose a parent by descendants. (Thanks @kichrot for note it)

So now you can highlight a tab stack by the color of the favicon of the domain(host):

.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="vivaldi.net"] )

{border: 2.5px rgba(88, 115, 211, 1) solid !important;}

.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="vivaldi.net"] ) .stack-counter
 
{color: rgba(88, 115, 211, 1) !important;}


.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="blogspot.com"] )

{border: 2.5px rgba(213, 115, 50, 1) solid !important;}
 
.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="blogspot.com"] )  .stack-counter
 
 {color: rgba(213, 115, 50, 1) !important;}
 
   
 .tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="youtube.com"] ) 

{border: 2.5px rgba(230, 32, 32, 1) solid !important;}

.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="youtube.com"] ) .stack-counter
 
 {color: rgba(230, 32, 32, 1) !important;}

Enjoy.

luetage

@barbudo2005 Damn, it finally dropped. We’ve been waiting years on this. This is worthless when being in charge of your own project, but very helpful when messing with code we don’t have access to.

Seasonly

@barbudo2005

Great job ! I'm discovering this. This is boring that is not native ! and not totally automatic ! It could help a lot to distinguish quickly a tab between a lot of them or simply between tab line

barbudo2005

@Seasonly

Said:

This is boring that is not native ! and not totally automatic !

It could be AUTOMATIC with ACTIVE tab stack very easily!!!!!!!!

Vivaldi has built-in a script to determine the color most used in the favicon when you put on this setting:

The problem is that I don't want this accent color in the bars :

So I revert to my colors with this code:

.mainbar,
 .toolbar,
.bookmark-bar,
.observer,
.toolbar-extensions,
#main.left,
.bookmark-bar-top,
.color-behind-tabs-off .bookmark-bar,
.color-behind-tabs-off .bookmark-bar button

{background-color: #414141  !important;}

/*Some selectors may be in excess*/

So now the AUTOMATIC code is :

.tab-position.is-substack  [id*= "tab"].tab

{border: 2.5px var(--colorAccentBg) solid !important;}

You can use any of this colors:

Enjoy

barbudo2005

Of course you can use it for the active tab also:

#tabs-container  .tab.active

{border: 2.5px var(--colorAccentBg) solid !important;}

I maintain the "old not automatic" code for the no active tab stack.

The best combination could be 2.5px for the active tab or tab stack, and 1px for the no active tab stack. (and also play with the colors. Faded in the no active)

barbudo2005

The native code inside Vivaldi that determine the color of the favicon analize the most used pixel color, but if there are many colors averages across all.

An example is Google:

legobuilder26

This won't work for single tabs, but for tab stacks, you can try renaming the stack with an emoji.

barbudo2005

@legobuilder26

It works for me without any problems.

WITH AUTOMATIC CODE:

Single active tabs.

#tabs-container  .tab.active

{border: 2.5px var(--colorAccentBg) solid !important;}

Active tab stacks.

.tab-position.is-substack  [id*= "tab"].tab

{border: 2.5px var(--colorAccentBg) solid !important;}

WITH NO AUTOMATIC CODE (By defining the host):

Not active tab stacks.

.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="vivaldi.net"] )

{border: 2.5px rgba(88, 115, 211, 1) solid !important;}

Do you follow all steps?

What is the code you are using?

Color a Single Tab (or Tab Group)

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...