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

RadekPilich

@barbudo2005 my local pages have favicon, see this https://forum.vivaldi.net/post/736356 I want to use the color from that favicon for the whole tab, to make it more distinctive.

barbudo2005

@RadekPilich

To use automatically the color of the favicon you need the setting "Accent from Page" and it is only valid for the active tab.

For the inactive tab you have to do it manually using this code:

.tab:not(.active):has(img[srcset*="vivaldi.net"] )

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

The code in the post https://forum.vivaldi.net/post/736356 use "href="data:image" to define the data of the img of the favicon.

<!-- Optional favicon (a colored circle) -->
<link rel="shortcut icon" href="data:image/svg+xml,
%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='.8%20.8%2014.4%2014.4'%3e%3cpath%20d='M6.508%201C3.48%201%201.002%203.474%201.002%206.5S3.48%2012%206.508%2012s5.504-2.474%205.504-5.5S9.536%201%206.508%201zm0'%20fill='lightcoral'/%3e%3c/svg%3e">

There is not "[srcset*="vivaldi.net"]".

So 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;}

RadekPilich

@barbudo2005 thanks, I've started with the simple direct bg color definition, but this means, that I have to define the color in two places - both in htmls as well as in the custom.css. I was hoping, that it would be possible to automate the color transfer from favicon via the css and define the colors in the htmls. I will try that later.

barbudo2005

@RadekPilich

For easy recognition, the background color is more important than the favicon, which is small, so it is not necessary to define a favicon for each page, just the name is enough.

RadekPilich

@barbudo2005 true, I'm aware of that, but still - when I decide to create new html, I have to edit the css as well. My initial impression of this post was, that it would be possible to have stable code in css and only edit / create the htmls. Anyways, I am truly thankful for your help and patience.

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.

Demo of separator in action

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"