Being working to fine tune dashboards using extra CSS code on traditional dashboards.
After some experimenting was able to get a toggle switch icon to turn from white to black and bold font when the switch is on (because background is yellow). Seems to work fine.
.tile-primary.on .material-icons {
color: black;
font-weight: bold;
}
I wanted to change the tile title to black as well when the switch is on but I can't seem to get that to work. I thought the code below would work but only the switch toggle changes color and font size..
.tile-primary.on .material-icons,
,tile-primary.on .tile-title {
color: black;
font-weight: bold;
}
Then I tried separating things and still no luck
.tile-primary.on .material-icons {
color: black;
font-weight: bold;
}
.tile-primary.on .tile-title {
color: black !important;
}
But this works to change title color to black
.tile .tile-title {
color: black !important;
}
I thought .tile-primary.on would trigger on the active switch but the rest would be the resultant action. Maybe I can;t do this across different classes?
Any help appreciated.. I'm a newbee at CSS...


