Solved Tab color and spacing code

mudshark

Low vision user here. Vivaldi needed some tweaks to make things clearer for me.

I successfully differentiated tabs by color by adding some text to the CSS file (see below).

However, I don't see where I can

1. change the color of the active tab or
1. the text color on all the tabs.
  It would also be nice to
1. insert a space of a few pixels between each tab for even better clarity.

Can anyone help with what code to add or change?

PS, once I'm done can the tweaked UI be saved as a theme?

Thanks, all.
RG

CSS file location:
C:\Users\userID\AppData\Local\Vivaldi\Application\version\resources\vivaldi\style\common.css

Code to change tab color that will differentiate tabs:

#browser span:nth-child(odd) .tab-position .tab:not(.active) {
background-color: #A9A9F5 !important;
}
#browser span:nth-child(even) .tab-position .tab:not(.active) {
background-color: blue !important;
}

Pathduck

@mudshark Hi,
I pasted your code into the modding tools on a clean profile, this was the result in the tab bar:

So that code seems to work just "fine"?

As for the other lines - this section:

.startpage-navigation {
background-color: #149;
opacity: 0.4;
min-height: 30px !important;
}

This sets the background-color of the startpage-navigation to a dark blue/purple and sets the opacity to less than half. Not very good for readability if you ask me...

Maybe set a text color to, like this? And remove the stupid opacity, if you want readability and contrast:

.startpage-navigation {
background-color: #149 !important;
color: white !important;
min-height: 30px !important;
}

Result:

As for this line:

;#browser .tab-position .tab.active {background-color: maroon; color: blue !important;}

You've got a misplaced ; at the start there. That's not valid CSS.
Remove the semicolon and the active tab will look like:

Not great for contrast.
Change to:

#browser .tab-position .tab.active {background-color: yellow !important; color: black!important;}

Much better?

I don't recommend you hardcode colors, instead modify your theme colors for best contrast and readability. And then tweak those later where needed.

Pathduck

@mudshark Hi

Please do not modify common.css directly. It will cause a mess and gets overwritten on every update.

Please read:
https://forum.vivaldi.net/topic/10549/modding-vivaldi

https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

Try that, and if you have any specific questions about how to accomplish this please let us know

PS, once I'm done can the tweaked UI be saved as a theme?

CSS mods can't be saved as themes, unfortunately.

Streptococcus

@mudshark
In the settings for Preferences, you can choose a theme from the Themes section. If you double-click one of the themes there, you can change the colours for background, foreground (text), highlight and accent.

nomadic

@mudshark said in Tab color and spacing code:

change the color of the active tab or

You can most easily change this with theme settings. Make sure "Accent on window" is disabled and you can then change the Accent Color to get the color you want for the active tab.

If you still want more fine control to only change the background color of the active tab, then you can use this:

/* Change the background color of the active tab */
#browser .tab-position .tab.active {
  background-color: yellow;
}

the text color on all the tabs.

This is somewhat controlled by the theme settings by either being white or black depending on if it is a light or dark theme.

You can change the text color of all tabs with this (Also note that you can change font settings with this selector. I changed the font weight as an example):

/* Color tab text and make the font bold */
.tab-strip .tab-position .tab {
  color: white !important;
  font-weight: 500;
}

And if you want to give the active tab a distinct text color or font setting, you could also use this:

/* Color the active tab text and make the font bolder */
.tab-strip .tab-position .tab.active {
  color: red !important;
  font-weight: 700;
}

insert a space of a few pixels between each tab for even better clarity.

You can use this CSS. I chose a value of 4px, but not sure what exact spacing you would want:

/* Add gap between tabs */
.tab-strip span:not(:first-of-type) .tab-position {
  padding-left: 4px;
}

Result of the modifications:
Image showing how the browser UI looks after adding the CSS listed in this post.

kisunviikset

How to get the gap between vertical tabs?
I can get it with .tab-strip .tab-position {
padding-bottom: 8px;} , but it cuts the height of the tabs.

nomadic

@kisunviikset It is definitely more tricky for vertical tabs.

If you don't show tab thumbnails (not the popup kind; the always visible ones), this should work. The gap between tabs is set at the top with the --gap variable. It is a value in pixels, but don't add a px to the end of the value.

/* Add gap between vertical-tabs */
:root {
  --tabHeight: 30;
  --gap: 4;
}
/* Add gap between vertical tabs */
:is(.tabs-left, .tabs-right) .tab-strip span:not(:first-of-type) .tab-position {
  --index: calc(var(--PositionY) / var(--tabHeight));
  --newYPosition: calc(var(--PositionY) + var(--index) * var(--gap));
  transform: translateY(var(--newYPosition));
}
/* Fix position of new tab button to account for gaps */
:is(.tabs-left, .tabs-right) .tab-strip .newtab {
  --index: calc(var(--PositionY) / var(--tabHeight));
  --newYPosition: calc(var(--index) * var(--gap));
  transform: translateY(var(--newYPosition));
}

If you do want to show tab thumbnails, it should be possible if you have a constant height for the thumbnails. I thought there was a way to make the thumbnails always have a consistent height and not shrink as you add more tabs, but I couldn't find a setting. Maybe it was a mod.

But if you do have a constant height thumbnail, you can change the --tabHeight variable to the correct overall tab height including the thumbnail.

It is the variable height of tabs with thumbnails that causes issues. Each tab has a --Height variable, but it has a px at the end of the value, so I can't use it to do a calculation because division requires a unitless denominator.

mudshark

My old custom.css stopped working some time ago.
I wanted to keep every other tab a different color, ideally with the active yet a third color and a 3-pixel space between all tabs.
There was a custom.css file that was working but is now broken.
Do we have any custom.css gurus out there who can help?
Much appreciated!

Here is what I was using:
@mudshark said in Tab color and spacing code:

Code to change tab color that will differentiate tabs:

#browser span:nth-child(odd) .tab-position .tab:not(.active) {
background-color: #A9A9F5 !important;
}
#browser span:nth-child(even) .tab-position .tab:not(.active) {
background-color: blue !important;
}

Thanks, all

RadekPilich

@mudshark look here https://forum.vivaldi.net/post/790715

mudshark

@RadekPilich I see that it has changed but 'coding' is still years beyond my understanding. With the right instructions I can make it work but what code do I add (still to custom.css)?

Would I save
[id="tab"].tab-wrapper.extended[title="abcdef"]
in my custom.css file and it'll work again?

It may be asking a lot, but if anyone here can help, again, what I'm looking for is to have every other tab alternate colors, preferably with a couple of pixels between each and with the active tab another color, maybe the background color of the active page.

Thanks all

As a reminder what I have now (if it helps) is:

--------- START CUSTOM.CSS ---------
#browser span:nth-child(odd) .tab-position .tab:not(.active) {
background-color: maroon !important;
}
#browser span:nth-child(even) .tab-position .tab:not(.active) {
background-color: blue !important;
}

.startpage-navigation {
background-color: #149;
opacity: 0.4;
min-height: 30px !important;
}

;#browser .tab-position .tab.active {background-color: maroon; color: blue !important;}
--------- END CUSTOM.CSS ---------

Pathduck

@mudshark Hi,
I pasted your code into the modding tools on a clean profile, this was the result in the tab bar:

So that code seems to work just "fine"?

As for the other lines - this section:

.startpage-navigation {
background-color: #149;
opacity: 0.4;
min-height: 30px !important;
}

This sets the background-color of the startpage-navigation to a dark blue/purple and sets the opacity to less than half. Not very good for readability if you ask me...

Maybe set a text color to, like this? And remove the stupid opacity, if you want readability and contrast:

.startpage-navigation {
background-color: #149 !important;
color: white !important;
min-height: 30px !important;
}

Result:

As for this line:

;#browser .tab-position .tab.active {background-color: maroon; color: blue !important;}

You've got a misplaced ; at the start there. That's not valid CSS.
Remove the semicolon and the active tab will look like:

Not great for contrast.
Change to:

#browser .tab-position .tab.active {background-color: yellow !important; color: black!important;}

Much better?

I don't recommend you hardcode colors, instead modify your theme colors for best contrast and readability. And then tweak those later where needed.

mudshark

@Pathduck Beautious!
Works perfectly and now I can mess with colors easily.

So, in:
{background-color: yellow !important; color: black!important;}
the yellow is obvious, the "color:black" is for the text?
That'll be super helpful also.
Thank you so so much.
Rich

Pathduck

@mudshark said in Tab color and spacing code:

the yellow is obvious, the "color:black" is for the text?

Yes, that's text color.

You should read up on some basic CSS codes
https://www.w3schools.com/cssref/pr_text_color.php
https://www.w3schools.com/cssref/pr_background-color.php

It's important to have good contrast between background and text

Here's a good reference for color codes:
https://www.w3schools.com/colors/colors_picker.asp

mudshark

@Pathduck said in Tab color and spacing code:

Not recommended to hardcode colors

If not hard-coded then how to define them? Is the hex code better / worse / the same as hard coding by color name?
Thanks again. All your suggestions are now implemented and I'm happy with them now.

Pathduck

@mudshark said in Tab color and spacing code:

If not hard-coded then how to define them?

It is more of an advanced topic, so I probably shouldn't have confused you even more

Basically, it's recommended to set your theme colors properly first in Settings > Themes, then use the theme color variants for CSS modding instead of hard-coding the color values so the colors can change according to the theme.

You can see the available colors from your current theme at: vivaldi://themecolors

To use a variable instead of a color value you could do for instance:

{ 
  background-color: var(--colorHighlightBgDark) !important; 
  color: var(--colorFgIntense) !important;
}

The risk with this is that you could end up with bad contrast colors again, depending on your theme color settings. So for your case, for optimal readability and since you probably don't change theme often this isn't something you need to worry about

Is the hex code better / worse / the same as hard coding by color name?

No - using hex codes or names or RGB/HSL values are basicall the same thing.

For instance the color yellow could be put as:

Yellow
#ffff00
rgb(255, 255, 0)
hsl(60, 100%, 50%)

Using color names just limits you to the standard set of 140 colors. Using hex codes or RGB allows you the full 16 million (16777216) colors to select from.
https://www.w3schools.com/colors/default.asp

mudshark

@Pathduck well, since I'm happy now I'm not going to fix what's not broken!

barbudo2005

@mudshark

There is also this code for color:

rgba(255,255,0,0.5)

"0.5" means opacity.