Unfortunately the only solution is to use two genericapability, one for time and one for status, the first remain with default color, the second you has the .on and you can manipulate it
EDIT i found a little CSS tricks for this
You need to create two genericcapability, the first is the status and the second is the time.
The two widget must be one after the other.
In the first, add this css rule:
.on + li .content {background: red !important}
With the magic command + you can select the next widget (li) and iteract with it
EDIT #2: a complete sample
If you whant hide the first widget, you can work in CSS panel.
If the panel is the #1 and the widgets are #9 (capability onoff dishwasher) and #10 (capability time dishwasher), you must:
In CSS panel settings add this:
.dashboard #widget_0_9 { display: none }
where 0 is the panel number and 9 is the position of the widget in list
In CSS widget 9 settings add this:
.on + li .content {background: red !important}
When the widget #9 has .on next widget (#10) has background red
I tryed and fully work!
