Switch 3 values : different text colors

Community Usage questions
1

Well... i think i worked too hard today...

Cause i just can't do this with my 3 values's switch :

label color value 1 : blue (on) - grey (off)
label color value 2 : green (on) - grey (off)
label color value 3 : orange (on) - grey (off)

Now... 2 a.m. ... go to sleep...

3

Found...

Using this :

:nth-child(1) {#{@{this} == 1 ? "color:blue" : "color:grey"}}

:nth-child(2) {#{@{this} == 2 ? "color:green" : "color:grey"}}

:nth-child(3) {#{@{this} == 3 ? "color:orange" : "color:grey"}}
4

hi,

i suppose you put all that code into the style property of a matrix widget ?
Any screenshots to see the context or a json fragment ?

This is the main issue with o-s-c, everybody - or at least myself - struggles with syntax and how to use which syntax in which property in which context.

Thanks !

5

Yep... it's not that easy... :crazy_face: Looooooooot of things to learn !

Here is what i've done in this case. It's "just" a switch, not a matrix.

So :
boutons QC

In the switch's css field :

:nth-child(1) 
{
   #{@{this} == 1 ? 
      "background:url(Images/Cubase_Divers/QC_Pistes_original.png);" 
         : 
            "background:url(Images/Cubase_Divers/QC_Pistes_off.png);" 
                 };
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

:nth-child(2) 
{
   #{@{this} == 2 ? "color:#32cd32" : "color:grey"};
   font-size:120%;
   background:url(Images/Cubase_Divers/QC_EQ.png);
   background-repeat:no-repeat;
   background-position:center;
   background-size:contain;
}

:nth-child(3) 
{
   #{@{this} == 3 ? "color:orange" : "color:grey"};
   font-size:110%;
   background:url(Images/Cubase_Divers/QC_MIDI.png);
   background-repeat:no-repeat;
   background-position:center;
   background-size:contain;
}

Mon émul QC