Improved FavIcon Contrast in Tab Bar

g_bartsch

@barbudo2005 said in Improved FavIcon Contrast in Tab Bar:

No. The code is simple CSS and work perfect in custom.css.

The code you gave me for the Web Panel side bar icons works perfectly.

barbudo2005

@g_bartsch

Said:

The code you gave me for the Web Panel side bar icons works perfectly.

So the "system" of CSS is Ok.

Maybe there is another code with .favicon that is interfering. Look in your custom.css for this.

g_bartsch

@barbudo2005 I removed all CSS from the file except for the two snippets of code (tried each separately) and no joy. I wonder if my icons are named differently? So far using Developer Tools I can understand how to determine the tab names.

barbudo2005

@g_bartsch

Post this image of developer tools:

barbudo2005

Alternative code considering domain and not tab title:

.tab:has(img[srcset*="atlanticcouncil.org"])  .favicon  img,
.tab:has(img[srcset*="cfr.org"])  .favicon  img


{border: 1px solid #d8d8d8 !important;
border-radius: 4px !important; 
background: #adadad !important;}

barbudo2005

By applying this selector you can give color to the title of webpage groups:

.tab:has(img[srcset*="atlanticcouncil.org"]),
.tab:has(img[srcset*="cfr.org"])

{color:  cyan !important;}

g_bartsch

@barbudo2005 Sorry for replying late.

Is the the relevant code?

The wildcard should have caught all instances of 'Council'?

.tab[title*="Council"]  .favicon img

nomadic

@g_bartsch The problem is that you have the setting Show Popup Thumbnails enabled in tab settings.

This setting removes the title attribute from the tab div. The lack of a space between the parts of .tab[title*="Council"] means both need to apply to the same element. As seen in your image, there isn't a title on the tab. Since the title is in the content of a span, you can't use it for selection.

I recommend using the srcset of the favicon like @barbudo2005 suggested if you want to keep the setting enabled.

.tab .favicon img[srcset*="atlanticcouncil.org"] {

g_bartsch

@barbudo2005 and @nomadic Thank you so much! You are wizards!!

This code is perfect and easier because it's based on the domain.

I'm planning to do as below because I can change background attributes depending on the icon color:

.tab:has(img[srcset*="atlanticcouncil.org"])  .favicon  img
{border: 2px solid #f8f8f8;
border-radius: 2px; 
background: #f8f8f8;}
{color:  white !important;}

.tab:has(img[srcset*="cfr.org"])  .favicon  img
{border: 2px solid #f8f8f8;
border-radius: 2px; 
background: #f8f8f8;}
{color:  white !important;}

.tab:has(img[srcset*="cato.org"])  .favicon  img
{border: 2px solid #f8f8f8;
border-radius: 2px; 
background: #f8f8f8;}
{color:  white !important;}

nomadic

@g_bartsch Happy to help!

That CSS has some structural issues. You also need to use a different selector when setting the color of the text because the img isn't above the title in the HTML hierarchy.

This is what I would personally use:

/* Give specific sites colored tab titles and set their favicon background color */
.tab:has(img[srcset*="atlanticcouncil.org"]) {
  --faviconBgColor: #f8f8f8;
  color: red !important;
}
.tab:has(img[srcset*="cfr.org"]) {
  --faviconBgColor: #f8f8f8;
  color: green !important;
}
.tab:has(img[srcset*="cato.org"]) {
  --faviconBgColor: #f8f8f8;
  color: blue !important;
}

/* Give specific favicons a colored background */
.tab .favicon img[srcset*="atlanticcouncil.org"],
.tab .favicon img[srcset*="cfr.org"],
.tab .favicon img[srcset*="cato.org"] {
  border: 2px solid var(--faviconBgColor);
  border-radius: 2px;
  background: var(--faviconBgColor);
}

It helps remove some unnecessary duplication by using CSS variables and sharing a common group of attributes under multiple selectors. It is also formatted in a way that I find has better readability and is generally considered the standard formatting.

barbudo2005

@g_bartsch

Two comments on the code proposed by @nomadic :
1.- @nomadic said:

"the color of the text because the img isn't above the title in the HTML hierarchy."

You must remember that always the last selector of the list (HTML hierarchy) is the one on which the attributes will be applied.

In this code, the last one is img.

.tab:has(img[srcset*="atlanticcouncil.org"])  .favicon  img

That's the power of the has() command, you can define an attribute of a child (img) based on an attribute of the parent (.tab).

Another example:

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

{color: rgba(230, 111, 33, 0.7) !important;}

2.- Use of variables:

--faviconBgColor: #f8f8f8;

In this code you are assigning the value "#f8f8f8" to the variable --faviconBgColor.

background: var(--faviconBgColor)

In this code you are assigning to the background the value (var()) that has the variable --faviconBgColor.

g_bartsch

@nomadic said in Improved FavIcon Contrast in Tab Bar:

This is what I would personally use:

Thank you so much; that certainly is cleaner and easier to read! I'll definitely need to brush up on my code hacking abilities. I can't generate new code like this, but with a little effort, can understand it.

g_bartsch

@barbudo2005 Thank you for explaining! More homework for me. I last used CSS as a web developer more than 10 years ago and things like has() seem not to have been available then. Or maybe they were and I just didn't know about them. I was just styling web pages.

Hadden89

@g_bartsch Because they're pretty recent.
:has (and probably :is and :not) was officially adopted recently on chromium but still experimental on FF for example

barbudo2005

@g_bartsch

Said:

I last used CSS as a web developer more than 10 years ago…..I was just styling web pages.

Stylus is waiting for you!!!!!

Challenge yourself to modify Vivaldi forum:

Look for my code in the Vivaldi forum Mod post:

https://forum.vivaldi.net/topic/19728/vivaldi-forum-mod

For example, how can it not be comfortable to have 6 lines of new posts, so that most of them do not force me to open them in a new tab?

barbudo2005

@Hadden89

For those who use UBO also have available has-text() :

forum.vivaldi.net##ul.posts li:not(.self-post):has-text(@barbudo2005):style(border-left: 2px dashed  #3b80e6 !important; border-right:2px dashed #3b80e6 !important; border-top: 2px dashed #3b80e6 !important; border-bottom: 2px dashed #3b80e6 !important; border-radius: 15px !important;)

g_bartsch

@barbudo2005 said in Improved FavIcon Contrast in Tab Bar:

Stylus is waiting for you!!!!!

For sure. When I have some extra time and brain-space; two commodities I'm usually short on.

barbudo2005

@g_bartsch

Said:

When I have some extra time and brain-space

It smells like excuses to me.

g_bartsch

@barbudo2005 Maybe, but more so it's the tyranny of the hierarchy of importance. I have trouble finding time for all the myriad of projects I always have on the go and the ones I haven't been able to start. Too many wants; too little time. Priorities, priorities ..