How change the tabs colors when active

Community Usage questions
1

I know how to do it in the beta but it doesnt work any more.
In this example of the current version I can change the color of a specific tab in a container, but the color will be the same when it is ON or OFF

inner > .navigation > .tablink:nth-child(1) {
background:black
}

In this case I want to change the color of all tabs in the container assigning the color when they are ON and a different one when they are OFF. Same about the font color.

2

.tablink elements have the extra class “on” when active.You can use the browser development tools (f12) to inspect the html structure of any widget.

3

Checking f12 it has tons of info, but I can not find anything related to different colors when a tab is active or not.
Normally I get CSS commands that work from this forum but I could not find anything related to this in the non beta version (but yes for the beta). Or generitc CSS commands that soemtimes work and sometimes not form CSS pages.
I can not see any where is the “extra class” is.

I’m in this moment porting my beta interface (that was working fine) to the new version and some commands have changed and I try to find the equivalent for the 1.5.3.
With F12 I have found now the CSS commands for root that are interesting. But can not find for tabs.

4

In this moment the only feedback I have about a tab is active is a small line underneath the tab but the tools in the beta to customize feedback in active tabs seem gone. And that line is simply not good enough to make clear a tab is active.
There were some examples of beta layouts from users before where was possible to copy commands. Do we have the same for the 1.3?

Specifically I was using this (for example) in the parent of the tabs, but it doesnt work now:
//edge color;
–color-light:rgba(0,0,0,0.0.05);
//buttons color;
–color-raised:rgba(30,50,80,1);
//color buttons font TAB not highlighted;
color:rgba(150, 150, 170, 1);
z-index:99;
text-shadow: 4px 4px 7px rgba(0,0,0,0.5);

5

Please note that no particular warranty was given about porting any code bit from v0 to v1, especially with the css property that's is typically subject to break because of its hacky nature.

With my previous answer you should be able to customize the tab buttons at will:

inner > .navigation > .tablink {
  /* default style */
}
inner > .navigation > .tablink.on {
  /* active style */
}

Checking f12 it has tons of info, but I can not find anything related to different colors when a tab is active or not.

I'll take more time later to go a bit more in-depth on how to use the inspector.

6

Thanks, I dont expect the beta code will work in the new version. I’m simply trying to find the equvalent code. The new version is a great update as I was quite stuck in many areas and limitations with the beta that have disappeared in the last version.
I guess the inspector is quite useful and important but I can not understand how. A guide would be super useful.

7

I added a short explanation on how to use the inspector : https://openstagecontrol.ammd.net/docs/customization/css-tips/