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

BlackSwan09

@barbudo2005
Screenshot 2023-10-29_19-14-09.png

Ah and the + icons have a messed up background as well.

I also prefer to have Accent on Window turned on if it's possible to work with it as well.

barbudo2005

I also prefer to have Accent on Window turned on if it's possible to work with it as well.

Yes it is, only use this codes:

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

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

#tabs-container  .tab.active

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

1.- "All stacks show in the active stack's color (e.g. if I have 3 stacks and one of them is Youtube, when Youtube is active, all 3 stacks have a red border)"

Very strange since they are not active. Please Inspect the 2 tab stacks not active and post a image of the code containing a border.

2.- "The active stack/tab has a background color, not only a border - is it supposed to have a background or should it only have the border?"

The common.css use this code:

So add the background color and color of text you prefer for the active tab and active tab stack.

BlackSwan09

I tried this as well, but still can't get it to work. Now all background tabs have the accent (of the current tab) background (not only stacks) and only the active tab has the accent border.

However, I played around with CSS myself (I suck at it but can sometimes figure it out) and got this result which is likeable enough:

The only thing I can't figure out is how to also colour the inactive stack (Vivaldi forums - in green) in its own blue accent colour (not Youtube's red). I can't find the right selector for an inactive stack by inspecting the Vivaldi tab. Do you have any ideas?

Edit: Oh I understand now from your first post that it's probably not possible to automate inactive stack colours.

plakonn

How is this thing installed? Sry if its mentioned somewhere but i can find, nor i can't figure it on my own.

barbudo2005

@plakonn

Look this post for instructions:

https://forum.vivaldi.net/topic/61571/generated-color-for-tabs/4

plakonn

@barbudo2005 As far i know i'v had Vivaldi setup correctly. (other css mods works fine). Usually post like this have fewer "code windows" and i know what vivaldi settings to change, what code to copy to css file and what can i change in the code to customize it.
This post has like 6 code windows and no description what to do with each (im clueless). I couldn't get this mod to work no matter what i tried. (but it may be caused by the fact i missed some pice of information cause of my bad English +I started using vivaldi just recently, i don't understand Javascript nor html or whatever the "css" files are written in)

barbudo2005

@plakonn

Copy to your custom.css this code:

.mainbar,
.toolbar,
.bookmark-bar,
.toolbar-extensions,
.bookmark-bar-top,
.bookmark-bar,
.bookmark-bar button,
.toolbar-extensions,
button.ToolbarButton-Button,
.button-toolbar

{background-color: #414141  !important;
color: #d8d8d8 !important;}




.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.address-top .mainbar > .toolbar-mainbar:after,
.bookmark-bar:after,
.bookmark-bar-top:after,
.bookmark-bar button:after,
.bookmark-bar.default:after,
.observer:after,
.bookmark-bar,
.mainbar:before,
.toolbar-mainbar:before,
.toolbar-extensions:before

{content: unset !important;
border: 0px #414141 solid !important;
 background-color: #414141 !important;}


.address-bottom #tabs-tabbar-container.top,
.address-bottom-off #tabs-tabbar-container.top,
.address-top-off #tabs-tabbar-container.top

{border-bottom-width: 0px  !important;}

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

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

#tabs-container  .tab.active

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

RadekPilich

@barbudo2005 pretty please, could you provide css for grabbing colour from the favicon and using it for the tab background limited to URLs with some specified substring? in my case, I want it for tabs, not tab stacks.

barbudo2005

@RadekPilich

1.-Tab active or inactive?

2.- Do you use this setting?

3.- You can't use the URL, only title of the page.

4.- Please give examples of the URLs and the specified substring you want.

RadekPilich

@barbudo2005

Inactive
No
Local html page....
..... such as C:\Users\radek\Desktop\XXX.html

barbudo2005

@RadekPilich

As they are local pages they do not have favicon, therefore the code would be:

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

{background-color: red !important;}

title* means contain the word "Page", so it is not necessary to enter the full name and you can use a substring of the name.

The local URL is:

file:///C:/Instalaci%C3%B3n/2VIVALDI/Page.htm

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.