🔴🔵🟡🟢 Automatic color for Active tabs & Active tab stacks using favicon. 🟢🟡🔵🔴

[barbudo2005]

@RadekPilich

Use this page for the All named CSS colors:

https://codepen.io/dudleystorey/pen/XKVRoJ

[RadekPilich]

@barbudo2005 how is that relevant? see my screenshot above, I have this one pinned as my color pallet https://www.w3schools.com/cssref/css_colors.php

[barbudo2005]

@RadekPilich

I didn't notice, I just wanted to help, they serve the same function.

[barbudo2005]

If you have a clear theme and some of the elements do not have a well-defined outline, then you can use this code to improve it.

In the case of my active tab, when it has a clear border, its outline is not well defined:

When you add a black second line to the element, then the definition of the outline improves:

{border: 3px var(--colorAccentBg) solid;
outline: 2px black solid;
outline-offset: -3px;} 

The outline and the outline-offset properties achieve this goal. A negative value places the outline inside the element.

[DavidBevi]

@barbudo2005 said:

if you know the color of each page use the code: ("lightcoral" in the data above)

.tab:not(.active)[title*="Page1"]
{background-color: color of Page1 !important;}

Hey, do you think that CSS might use the title itself as the color of the tab? If that's possible I can see a single HTML with a text field that changes its own title, and bam!

[barbudo2005]

@DavidBevi

Sorry, I don't understand your point.

[DavidBevi]

@barbudo2005 I thought that instead of making a CSS with Page1=Color1, Page2=Color2 ... There could be a CSS that checks for the title of the page and if it finds a color keyword it uses that keyword to color the tab accordingly. I know some various bits of HTML/CSS and also Vivaldi, but I can't put together if it's something feasible.

[barbudo2005]

@DavidBevi
Said:

There could be a CSS that checks for the title of the page..

1.- @RadekPilich was referring to local pages. Are you referring to the same thing?

2.- CSS is static. Can't check. You need JS to check.

[aminought]

@DavidBevi try this mod: Colorful tabs

[DavidBevi]

1.- @RadekPilich was referring to local pages. Are you referring to the same thing?

Yep, I did the HTML with embedded favicon after their suggestion.

2.- CSS is static. Can't check. You need JS to check.

Bummer, but ok. Thanks for the info, I will not bang my head on this.

[DavidBevi]

Previously I said: I can see a single HTML with a text field that changes its own title, and bam!!

I made it.

Working separator: https://davidbevi.github.io/separator/
Info, demo, code: https://github.com/DavidBevi/separator

This post by @RadekPilich gave me the idea. I'm very open to contributions, or just ideas.

[RadekPilich]

My tab coloring styled as below somehow stopped working in the recent version.

How are you doing?

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

{background-color: BlueViolet !important;}

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

{background-color: green !important;}

[barbudo2005]

@RadekPilich

If you change the tab title this is what happens:

The original title is in a tab attribute called title :

title="Novela histórica archivos - La Historia en mis Libros"

The new title is in a selector called title which has no attribute to refer to :

span class="title">BOOKS</span

[barbudo2005]

@RadekPilich

Unlike the title change of the tab offered by Vivaldi, the script I use does change the original attribute and therefore the code you mentioned is still valid:

title="Home"