Color a Single Tab (or Tab Group)
-
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;}
-
@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
Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...
-
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.
-
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.
-
@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.
-
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
-
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
-
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)
-
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:
-
This won't work for single tabs, but for tab stacks, you can try renaming the stack with an emoji.
-
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?
-
@barbudo2005 I was responding to the feature request, not you. An option to "color" tab stacks is by renaming a tab stack with an emoji. Sorry for the confusion
-
@legobuilder26
Ok, no problem.Why don't you try the code above?
-
@barbudo2005 I don't really need it, I was just posting for others who check out this feature request
-
This is one thing I prefer about MS Edge. I use vertical tabs, so accordion stacking works best, and the lack of color for them is a downgrade imo.
-
I see the thread has been market as WILL NOT DO: what is the reason? does it mean this feature will never see the light?
-
@paolo-nicora Probably not in short times. Tabs got a lot of changes, so it could mean
neverasvery low priority.
(Even the adblocker was almost a WILL NOT DO but it came. So never lose the hope ^^) -
-
@paolo-nicora From my very limited understanding of stacked tabs via the tabbar's GUI & common.css file, they probably need to revamp the entire structure of the tabbar in order to support this feature.
But, JS & React might able to get it done... I'm not expert of both language so I'm only guessing. But giving different colors to each stacked tab based on tab stack's header ID or order of each stack should be doable.
-
I recently switched from Chrome to Edge and have been extremely glad that I did. In particular, I love how Edge has implemented their tab groups - it is elegant and easy to name a tab group and give it a color. I use that feature all the time.
I just saw a YouTube video about Vivaldi and was super excited about things like side-by-side tabs - viewing multiple tabs' content at the same time. But now seeing that the Vivaldi team can't/won't implement a simple (and very heavily requested) feature like assigning a color to a tab stack means I can't adopt Vivaldi as my default browser. Maybe I'll use it from time to time when I need/want a split layout, but the lack of colored tab stacks/groups is a deal breaker now that I've experienced it with Edge.
It is odd because the Vivaldi team sort of hangs its hat on its ability to let the user customize the browser (or at least their marketing paints that picture). Maybe the Vivaldi team provided an answer as to why this feature will not be implemented, but I didn't see it. I'm new (or at least I would be if I were to stick around and adopt Vivaldi as my default browser) to the community so could someone explain the lack of response from the Vivaldi team? And even better, the reason (no speculation, please) that they're refusing to implement this heavily requested feature that is already implemented by their (arguably) biggest competitor?
