Custom dashboard colors per dashboard

[UkSub]

managed to get something acceptable with the addition of flashing state for the warning condition by putting the inner part in the top-left corner (clears way for the text and 3dots):

/* alarm activated tile */
#tile-2 .on, .off{
	color: black;	
	border-radius: 10px;
	border: black solid;
	position: relative;
	top: -5px;
	left: -5px;
	width: 70px; // THIS LINE HAS NO FUNCTION
}

#tile-2 .on {
	background-color: red !important;
	animation: animate 1s linear infinite;
}

#tile-2 .off {
	background-color: lime !important;
}

@keyframes animate{
	0%{
		opacity: 0.3;
	}
	50%{
		opacity: 0.7;
	}
	100%{
		opacity: 0;
	}
}

I'm guessing this is a

inside the tile so the last part of the quest is to set the width of this internal box. Have tried !important; but that doesnt cut it.

[william2]

@UkSub

Have tried !important; but that doesnt cut it.

That is the fallacy of the switch tile. if you don't mind testing a few changes to see if we can get rid of the box in the box.

So that you don't have to clear what you already have done, comment them out, then copy and paste the following:

/* ON */
#tile-2[style*="background-color"] {
   width: 120px; 
   height: 120px;
   background-color: red !important;
   animation: animate 1s linear infinite;
}
@keyframes animate {
   0%{
	opacity: 0.3;
	}
   50%{
	opacity: 0.7;
	}
   100%{
	opacity: 0;
   } 
}

/* OFF */
#tile-2 {
   width: 120px; 
   height: 120px;
   background-color: green !important;
}

OFF

ON

[UkSub]

this changed the size of the outer box/tile for me.
I'm happy to run with it as it is, with the smaller box in the top-left of the tile works for me. i can control the color and flash per tile and still see the text label and 3 dots.

thanks for your time and help @william2