Styling custom:template-entity-row:
Code
type: entities
entities:
- type: custom:template-entity-row
entity: binary_sensor.test_value_from_input_boolean
name: name
secondary: some value
state: state
icon: mdi:engine
card_mod:
style:
div#wrapper:
state-badge $: |
ha-state-icon {
color: red !important;
}
.: |
.state {
color: magenta;
}
.info {
color: cyan;
}
.info .secondary {
color: orange;
}
Animation - rotating & coloring:
2 variants for resizing are provided:
– changing “–mdc-icon-size”;
– changing “height” & “width”.
Resizing in the 1st variant currently does not work in iOS & MacOS.
It was was promised to be fixed in Safari 16.
Code
type: entities
entities:
- type: custom:template-entity-row
entity: sun.sun
name: '--mdc-icon-size'
secondary: some value
state: state
icon: mdi:fan
card_mod:
style:
div#wrapper: |
state-badge {
animation: rotation 0.5s linear infinite, resizing 1s linear infinite alternate, coloring 8s linear infinite alternate;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes resizing {
0% {
--mdc-icon-size: 10px;
}
25% {
--mdc-icon-size: 15px;
}
50% {
--mdc-icon-size: 20px;
}
75% {
--mdc-icon-size: 26px;
}
100% {
--mdc-icon-size: 32px;
}
}
@keyframes coloring {
0% {
color: red;
}
17% {
color: orange;
}
34% {
color: yellow;
}
51% {
color: green;
}
68% {
color: lightblue;
}
85% {
color: blue;
}
100% {
color: violet;
}
}
- type: custom:template-entity-row
entity: sun.sun
name: height & width
secondary: some value
state: state
icon: mdi:fan
card_mod:
style:
div#wrapper state-badge $ ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: rotation 0.5s linear infinite, resizing 1s linear infinite alternate, coloring 8s linear infinite alternate;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes resizing {
0% {
height: 10px;
width: 10px;
}
25% {
height: 15px;
width: 15px;
}
50% {
height: 20px;
width: 20px;
}
75% {
height: 26px;
width: 26px;
}
100% {
height: 32px;
width: 32px;
}
}
@keyframes coloring {
0% {
color: red;
}
17% {
color: orange;
}
34% {
color: yellow;
}
51% {
color: green;
}
68% {
color: lightblue;
}
85% {
color: blue;
}
100% {
color: violet;
}
}