Anyone figure out how to make all fan icons spin when active? I think this example can be super useful as it will allow to also change colors of icons globally based on state without the need for “Custom UI” add-on that’s on its last leg 
1 Like
For the color change, i have this in my button template:
state: &button_state
- value: 'on'
styles:
card: [background-color: 'rgba(79, 79, 79, 0.4)', box-shadow: '0px 0px 10px 1px var(--button-card-light-color-no-temperature)']
Its only the shadow that changes the color on state, but for me, ist right.
and for the spinning fan icon i use animate SVG (have it form Mattias_Persson)
8 Likes
Thats pretty great looking, your css only shows a change in background color and addition of box shadow. Did you have to add that css to each button separately or you can do it globally? Also where can i see the animation example for the fan? Did you have to use keyframes?
Its set on a Button-Card Template, you have to set it one time and use “template: xxx” in the butten config.:
light:
aspect_ratio: 1/1
show_state: false
show_icon: false
state: &button_state
- value: 'on'
styles:
card: [background-color: 'rgba(79, 79, 79, 0.4)', box-shadow: '0px 0px 10px 1px var(--button-card-light-color-no-temperature)']
name: [color: 'rgba(255, 255, 255, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
custom_fields:
info: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness / 2.54);
const radius = 14.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style="
transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="#8d8e90" font-size="10" text-anchor="middle" alignment-baseline="middle">${brightness}<tspan font-size="7">%</tspan></text></svg>`; } ]]]
styles:
name: &button_styles_name
[top: 68.7%, left: 6%, position: absolute, line-height: 2vw]
state: &button_styles_state
[top: 74%, left: 11%, position: absolute, line-height: 2vw]
custom_fields:
info: &circle_pos
[top: 38.5%, left: 62.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
card: &button_styles_card
[font-family: Sf Display, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.54vw,
background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw,]
action: toggle
haptic: light
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: '[[[ return entity.attributes.friendly_name ]]]'
deviceID: this
card:
type: entities
entities:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionSize: 4.5em
actionsInARow: 2
style: |
#popup {
margin: -2.4em 0 1.4em 0; }
#popup > div.range-holder > input[type=range] {
cursor: grab; }
#brightnessValue {
color: rgba(255, 255, 255, 0.8); margin: -1em 0 0 0; font-size: 2em; font-weight: 400;
position: absolute; z-index: 100; font-family: SF Display; letter-spacing: 0.02em; pointer-events: none;
mix-blend-mode: difference; text-align:center; width: 3.4em; height: 3.4em; }
#popup > div.range-holder > input[type=range]::-webkit-slider-thumb {
border: 0; eight: 0; width: 0; cursor: grabbing; }
#popup > div.action-holder > div > div {
margin: 0.8em 0.5em -0.8em 0.5em; }
#popup > div.action-holder > div:nth-child(2) > div:nth-child(2) > span {
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%),
conic-gradient(rgb(120,39,230), rgb(230,34,231), rgb(228,5,136), rgb(228,25,25), rgb(229,105,30), rgb(232,226,46),
rgb(125,230,41), rgb(52,232,40), rgb(51,231,92), rgb(52,232,224),rgb(32,125,229), rgb(18,39,229), rgb(120,39,230));
border-width: 2px; border-color: #e6e6e6; --size: 4.4em !important; }
actions:
- service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
color_temp: 153
color: "#d8d9e1"
- service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
color_temp: 326
color: "#d5b08d"
- service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
color_temp: 500
color: "#ce944b"
- service: browser_mod.popup
service_data:
title: '[[[ return entity.attributes.friendly_name ]]]'
deviceID: this
card:
type: entities
show_header_toggle: false
entities:
- entity: '[[[ return entity.entity_id ]]]'
secondary_info: last-changed
- type: custom:light-entity-card
entity: '[[[ return entity.entity_id ]]]'
brightness: false
color_temp: true
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
and this is the button:
- type: custom:button-card
entity: light.pc
style:
top: 42%
left: 70%
width: 8%
custom_fields:
icon_bad: >
<svg viewBox="0 0 35.02 31.02">
<path style="clip-path: url(#mask);" fill="#9da0a2" <path d="M14.34,6.69c-.15,0-.25-.09-.31-.32h.58C14.57,6.6,14.48,6.69,14.34,6.69Zm-1.4-1a1.84,1.84,0,0,1,1.28-1.8c.9-.08,1.49,1,1.49,1.8Zm8.88,1c-.15,0-.25-.09-.31-.32h.58C22.05,6.6,22,6.69,21.82,6.69Zm-1.4-1a1.84,1.84,0,0,1,1.29-1.8c.9-.08,1.45,1,1.48,1.83ZM15,3.39c-.13-.07-.28-.12-.42-.18H14c-.84.21-1.51,1.38-1.53,2.7,0,.33.07.45.28.45h.72c.07,0,.1,0,.12.14.1.53.39.86.73.86s.63-.33.73-.87c0-.11.06-.14.12-.13h.72c.21,0,.28-.13.28-.43A3.06,3.06,0,0,0,15,3.39Zm7.48,0a1.56,1.56,0,0,0-.33-.14h-.67A2.77,2.77,0,0,0,20,6c0,.33.06.45.27.45H21c.07,0,.09,0,.12.14.1.53.39.86.73.86s.62-.33.73-.87c0-.11,0-.14.12-.13h.72c.21,0,.28-.13.28-.43a3.07,3.07,0,0,0-1.21-2.58Zm-.89,0H22V.05h-.49Zm-7.48,0h.5V0h-.5ZM2,17.25h.72c.19,0,.22,0,.22.23a2.09,2.09,0,0,0,0,.26h.91a1.82,1.82,0,0,0-.11-.28s-.07-.06-.11-.07a.51.51,0,1,1,0-1h0v0c.08-.5,0-.44.53-.44H5.37c.18,0,.21,0,.24.22a2.8,2.8,0,0,1-.2,1.61H9.23l.22-1H9.24c-.79,0-1.58,0-2.38,0A.67.67,0,0,1,6.15,16c0-1.72,0-3.44,0-5.17a.62.62,0,0,1,.68-.68h7.81a.62.62,0,0,1,.65.66v5.25a.61.61,0,0,1-.65.64H12l.22,1h3.4c.24,0,.26,0,.26.27v.73c0,.2,0,.22-.22.23H14.6v3.94c0,.1,0,.25-.13.25s-.13-.14-.13-.25V19h-.55v1.06c0,1,0,2,0,2.95,0,.09,0,.17-.13.17s-.14-.09-.14-.18c0-.46,0-.92,0-1.38V20.29H2.37c0,.06,0,.12,0,.18v2.45a.27.27,0,0,1,0,.16.19.19,0,0,1-.11.09.2.2,0,0,1-.12-.1.37.37,0,0,1,0-.15V19H1.54V22.9c0,.05,0,.11,0,.15s-.09.12-.13.12-.1-.07-.12-.12a.53.53,0,0,1,0-.18V19c-.36,0-.71,0-1,0S0,19,0,18.75s0-.53,0-.79.06-.22.21-.21H.77v-.26c0-.22,0-.24.23-.24h.69V17c0-1.41,0-2.82,0-4.23a.3.3,0,0,1,.2-.32L3,11.91s.07-.06.1-.05a.65.65,0,0,1,.19,0c0,.06,0,.15-.08.18a7.56,7.56,0,0,1-.89.47.55.55,0,0,0-.37.61c0,1.3,0,2.6,0,3.9Zm12.47-2.19c0-.21,0-.41,0-.6s0-.2.14-.19.13.09.12.19v.6H15V10.85c0-.33-.1-.43-.43-.43H6.85c-.34,0-.44.09-.44.43v4.21ZM.27,18.7H15.61V18H.27ZM15,15.34H6.41V16c0,.36.08.44.44.44h6c.63,0,1.25,0,1.88,0,.22,0,.34-.1.35-.3ZM5.91,20V19H2.37v1Zm3.81-1H6.19v1H9.72ZM10,20h3.52V19H10ZM9.5,17.74H12c-.07-.32-.13-.63-.2-.93a.16.16,0,0,0-.12-.09H9.82a.16.16,0,0,0-.12.09C9.63,17.11,9.57,17.42,9.5,17.74ZM5.35,16.16H3.94s-.09.06-.1.1a2.38,2.38,0,0,0,.21,1.39.29.29,0,0,0,.15.09H5a.17.17,0,0,0,.13-.07A2.4,2.4,0,0,0,5.35,16.16ZM2.62,17.52H1v.22H2.62Zm.93-.87c-.21,0-.28.11-.25.3s.13.2.29.16Zm-1.1-3.58a.63.63,0,0,1,.33-.57l1.41-.69a.54.54,0,0,1,.69.2c.08.14.14.29.22.43a.14.14,0,0,1-.07.2l-2.12,1a.17.17,0,0,1-.17,0C2.63,13.45,2.53,13.23,2.45,13.07Zm2.37-.61-.14-.28c-.1-.19-.19-.22-.38-.13l-1.21.59c-.46.21-.46.27-.21.73,0,0,0,0,0,0ZM5,14.88c0-.06-.12-.14-.18-.14s-.12.1-.07.2a.18.18,0,0,1,0,.12.42.42,0,0,0,0,.49.21.21,0,0,0,.18,0,.22.22,0,0,0,0-.16.21.21,0,0,1,0-.29S5,15,5,15,5,14.9,5,14.88Zm-.77.68a.2.2,0,0,0,.17,0,.17.17,0,0,0,0-.15.23.23,0,0,1,0-.27s0-.15,0-.16a.19.19,0,0,0-.18,0,1.27,1.27,0,0,0-.11.26A2.21,2.21,0,0,0,4.25,15.56Zm10.43-3.65c0-.1,0-.2-.13-.2s-.13.1-.13.19c0,.64,0,1.27,0,1.91,0,.1,0,.2.13.2s.13-.11.13-.21V11.91Zm-6.09.65-.26-.27-1-1a.33.33,0,0,0-.17-.07s-.09.07-.09.1a.35.35,0,0,0,.08.16L8.37,12.7s.06.07.1.08a.13.13,0,0,0,.18-.13A.35.35,0,0,0,8.59,12.56Zm0,.89-.83-.82a.2.2,0,0,0-.15,0,.17.17,0,0,0,0,.17c.26.28.54.55.81.81a.15.15,0,0,0,.13,0s.06-.07.09-.1S8.65,13.47,8.63,13.45Zm2.09-2.54a1.93,1.93,0,0,0,.34,0s.1-.08.15-.13-.09-.11-.14-.12h-.69c-.05,0-.09.08-.14.13s.09.11.14.12a1.93,1.93,0,0,0,.34,0ZM8.87,13.12a3.49,3.49,0,0,0,.43.43.16.16,0,0,0,.15,0s.06-.12,0-.14L9,12.94H9C8.88,12.93,8.8,13,8.87,13.12Zm1.72,2.75a.22.22,0,0,0,.14.14s.12-.08.13-.12-.07-.1-.13-.19C10.66,15.78,10.58,15.84,10.59,15.87ZM4.28,19.65a.93.93,0,0,0,.15-.13s-.09-.11-.14-.12a.86.86,0,0,0-.32,0c-.05,0-.1.08-.14.12a.93.93,0,0,0,.15.13s.09,0,.14,0S4.24,19.67,4.28,19.65Zm3.83,0a.25.25,0,0,0,.12-.13s-.07-.11-.12-.12a1,1,0,0,0-.35,0,.18.18,0,0,0-.11.13.23.23,0,0,0,.12.12s.11,0,.16,0A.54.54,0,0,0,8.11,19.65Zm3.64-.25a.48.48,0,0,0-.17,0c-.05,0-.12.08-.12.12a.18.18,0,0,0,.12.13,2.16,2.16,0,0,0,.36,0,.16.16,0,0,0,.11-.12.2.2,0,0,0-.11-.13.6.6,0,0,0-.19,0Z"/></clipPath></defs><path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14,6.41h.58a.3.3,0,0,1-.27.32C14.2,6.74,14.09,6.69,14,6.41Zm.19-2.52a1.84,1.84,0,0,0-1.28,1.8h2.77C15.71,4.92,15.12,3.81,14.22,3.89Zm7.49,0a1.84,1.84,0,0,0-1.29,1.8h2.76C23.15,4.92,22.6,3.81,21.71,3.89Zm.11,2.8c.13,0,.23-.13.27-.32h-.58C21.57,6.69,21.71,6.74,21.82,6.69Zm-7.4,8.37h-8V10.85c0-.34.1-.43.44-.43h7.76c.33,0,.43.1.43.43v4.21h-.36v-.6c0-.1,0-.19-.12-.19s-.14.09-.14.19S14.42,14.85,14.42,15.06Zm.26-2.2v-.95c0-.1,0-.2-.13-.2s-.13.1-.13.19c0,.64,0,1.27,0,1.91,0,.1,0,.2.13.2s.13-.11.13-.21Zm-6-.21a.35.35,0,0,0-.06-.09l-.26-.27-1-1a.33.33,0,0,0-.17-.07s-.09.07-.09.1a.35.35,0,0,0,.08.16L8.37,12.7s.06.07.1.08A.13.13,0,0,0,8.65,12.65Zm0,.89s0-.07,0-.09l-.83-.82a.2.2,0,0,0-.15,0,.17.17,0,0,0,0,.17c.26.28.54.55.81.81a.15.15,0,0,0,.13,0S8.64,13.57,8.67,13.54Zm2.05-2.63h0a1.93,1.93,0,0,0,.34,0s.1-.08.15-.13-.09-.11-.14-.12h-.69c-.05,0-.09.08-.14.13s.09.11.14.12A1.93,1.93,0,0,0,10.72,10.91ZM9,12.93c-.1,0-.18.11-.11.19a3.49,3.49,0,0,0,.43.43.16.16,0,0,0,.15,0s.06-.12,0-.14L9,12.94Zm-4.3-.75c-.1-.19-.19-.22-.38-.13l-1.21.59c-.46.21-.46.27-.21.73,0,0,0,0,0,0l1.91-.94Z"/></svg>
styles:
custom_fields:
icon_bad:
[top: 0%, left: 2%, width: 100%, position: absolute]
template: light
The Animation you can see here, this is my button-card for the pool heater (Heizung), there is a animated svg with spinning and color changing fan. its made with a custom field:
- type: custom:button-card
entity: switch.sonoff_1000851ce1
name: Heizung
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.sonoff_1000851ce1
hold_action:
action: more-info
style:
top: 78.35%
left: 53.0%
width: 8%
custom_fields:
air_propeller: >
[[[ const path = '<circle cx="25" cy="25" r="6.6"/> <path d="M31.9 30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5 4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/>';
const style = '<svg viewBox="0 0 50 50"> <style>@keyframes rotate{0%{visibility: visible; transform: rotate(0deg);}100%{transform: rotate(1080deg);}}.start{animation: rotate 2.8s ease-in; transform-origin: center; fill: #f74608; visibility: hidden;}.on{animation: rotate 1.8s linear infinite; transform-origin: center; fill: #f74608; animation-delay: 2.8s; visibility: hidden;}.end{animation: rotate 2.8s; transform-origin: center; fill: #9ca2a5; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);}</style>';
if (entity.state === 'on') { return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`; }
else { return `${style}<g class="end">${path}</g></svg>`; } ]]]
air: >
<svg viewBox="0 0 340.32 263.79">
<path style="clip-path: url(#mask);" fill="#9da0a2" d="M181.07.09H288.25c9.24,0,18.5-.33,27.71.24s16.1,5.39,20.76,13.42a28,28,0,0,1,3.57,14.51q0,64.08,0,128.16c0,21.05-.15,42.1,0,63.14a27.35,27.35,0,0,1-27.62,27.57c-36.91-.18-73.81-.06-110.72-.06q-75.78,0-151.55,0a50.71,50.71,0,0,1-50-43.74A46.38,46.38,0,0,1,0,197Q0,145.84,0,94.7,0,72.79,0,50.87A50.62,50.62,0,0,1,43.59.61a51.93,51.93,0,0,1,7.27-.5q53.31,0,106.62,0h23.59Zm0,9.74H148.08Q103,9.83,58,9.84a100.19,100.19,0,0,0-12.14.31,40.94,40.94,0,0,0-36.05,41q0,26.79,0,53.58,0,45.15,0,90.3c0,1.87.1,3.75.28,5.61a40.93,40.93,0,0,0,30.83,35.53c6.28,1.56,12.64,1.2,19,1.2q69.5,0,139,0,56.85,0,113.7,0a20.13,20.13,0,0,0,4.46-.41,17,17,0,0,0,13.5-17.06q0-37.09,0-74.18V55.93c0-9.43,0-18.86,0-28.29a21.57,21.57,0,0,0-.6-5c-1.9-7.72-8.66-12.75-17.21-12.8-9.85-.05-19.7,0-29.56,0ZM160.47,39.76c3.7,2.27,7.17,4,10.18,6.35,5.22,4,10.12,8.49,15.21,12.69a5.11,5.11,0,0,0,2.9,1.2c10.81.09,21.61,0,32.42.06s21.58.12,32.38.11c17.73,0,35.47-.08,53.21-.11,3.11,0,4.91,1.24,5.52,3.72a4.77,4.77,0,0,1-3.94,5.92,8.12,8.12,0,0,1-1.3.09H196.9c-.49,0-1,0-1.7.07a14,14,0,0,0,.68,1.35,89.25,89.25,0,0,1,10.33,20.27c.47,1.36,1.22,1.69,2.61,1.69q31.67-.08,63.33,0,17.61,0,35.22,0a4.8,4.8,0,0,1,4.81,6.46c-.67,2-2.6,3.26-5.17,3.26-6.87,0-13.74,0-20.61,0H209.87c.73,5.31,1.42,10.45,2.15,15.8h94.51c3.25,0,5.37,2,5.34,5s-2.21,4.83-5.47,4.83H213.28c-.43,0-.86,0-1.18.06-.91,6-1.8,11.89-2.71,18h2.83q47,0,94,0a10.37,10.37,0,0,1,3,.34,4.83,4.83,0,0,1-1.11,9.37c-.74.07-1.5.05-2.25.05h-97.8c-1.18,0-2.07,0-2.61,1.41a88.16,88.16,0,0,1-11.46,21,8.52,8.52,0,0,0-.43.81c.71,0,1.24.11,1.77.11l49.46,0H306.6c3.34,0,5.29,1.41,5.77,4.13a4.74,4.74,0,0,1-3.84,5.51,16.32,16.32,0,0,1-2.62.16H253.45c-21.47,0-42.95.09-64.42-.1a8.76,8.76,0,0,0-7,2.7,87.17,87.17,0,0,1-20,14.38c-.37.21-.74.44-1.1.67,0,0,0,.11-.1.38h2.36q27.83,0,55.64.08,43.38,0,86.75-.05a9.53,9.53,0,0,1,3.3.4,4.71,4.71,0,0,1,2.9,5.31,5,5,0,0,1-4.33,4.06,10.74,10.74,0,0,1-1.5,0H226q-53.29,0-106.6,0c-38.87,0-72.76-22.41-87.69-58.26a88.79,88.79,0,0,1-6.26-46.19c4.2-32.23,20.85-56.15,49.12-71.88A88.61,88.61,0,0,1,118.2,30q94.06-.07,188.12,0c3.41,0,5.29,1.18,5.95,3.72a4.79,4.79,0,0,1-4.19,6.06,10.68,10.68,0,0,1-1.13,0l-56,0-88.43,0ZM118.34,207.41c45.77.07,83.47-37.48,83.84-83,.36-45.68-36.74-85.9-86.29-84.62a83.54,83.54,0,0,0-81.34,86C35.58,171.32,73.05,207.4,118.34,207.41ZM93.08,263.7V250H65.68V263.7Zm198.74-13.78H264.6v13.87h27.22Z"/></svg>
styles:
custom_fields:
air_propeller:
[top: 19%, left: 15%, width: 1.8vw, position: absolute, opacity: 0.6]
air:
[top: 12%, left: 10%, width: 4vw, position: absolute, opacity: 0.6]
template: pool_smal
This all is based on the work of Mattias_Persson, you can see his work here:
4 Likes
Could I please get a little help with selecting the correct css attribute. I’m trying to remove the box shadow from the four buttons:
I’ve tried this but without success:
style: |
'#mmp-shortcuts' mmp-button:
$: |
button {
box-shadow: none !important;
}
The : | should only be used on the very last step when navigating the tree, as that turns what follows into a string, rather than a dictionary which can be parsed.
The exception is in themes, where the entire variable must be a string - but which parses to a dictionary…
4 Likes
That is an excellent explanation. Thank you.
EDIT. Damn. Thought I had it:
style:
mmp-shortcuts:
$: |
mmp-button.mmp-shortcuts__buttons {
box-shadow: none;
background: none;
}
.: |
ha-card {
border: solid 1px var(--primary-color);
}
But no.
I tried adding !important after the style options and before the semi-colon but it did not help.
EDIT2: Got it to work:
style:
mmp-shortcuts:
$: |
mmp-button {
box-shadow: none;
background: none;
border: solid 1px var(--primary-color);
border-radius: 10px
}
.: |
ha-card {
border: solid 1px var(--primary-color);
}
hello, I open the tools for google chrome developers but that inspector tab does not come out, I have also installed the visual inspector extension but nothing comes out either, could you tell me how it is enabled or maybe you are using another browser?
greetings and thanks
Is it possible to change the color of the icon in picture-glance card with card-mod?
- type: picture-glance
title: Baby
camera_image: camera.baby_monitor
camera_view: live
entities:
- entity: sensor.babymonitor_battery_level
- entity: binary_sensor.babymonitor_motion_active
- entity: switch.babymonitor_motion_detection
- entity: switch.babymonitor_night_vision
- entity: light.hue_bar_1
- entity: script.kodi
tap_action:
action: call-service
service: script.kodi
confirmation:
text: Cast to TV?
icon: mdi:cast
2 Likes
I’ll add that to The List.
1 Like
Ok. Thanks!
Hello, Help me please find the error in my yaml.
I have mistake like that:
duplicated mapping key at line 116, column -185:
state-card-cover:
^
My yaml:
- type: custom:more-info-card
entity: cover.73731581a4cf12e748f2
debug_cardmod: true
title: Ролеты на кухне
style:
.: |
ha-card {
height: 100%;
}
state-card-cover:
$:
state-info:
$: |
div.info > .name {
display: none;
}
:host {
max-width:30px;
min-width:10px;
}
state-card-cover:
$: |
.justified {
justify-content: space-around!important;
}
I understood that. Maybe someone will help this.
Thanks to the author for this excellent work.
style:
.: |
ha-card {
height: 100%;
}
ha-card > .card-header{
text-align: center;
}
'state-card-cover':
$:
state-info:
$: |
:host{
display:none;
}
div.info > .name {
display: none;
}
'state-card-content state-card-cover':
$: |
.horizontal{
justify-content: center!important;
flex-direction: column!important;
margin: auto;
}
Good day. I’m trying to apply spin animation to an icon inside a picture-elements card. Found this thread, searched through and saw your reply. It made me wonder… do you know if it is possible to define @keyframes for a card so that I could use them for an icon style? I was trying this but it didn’t work:
style: |
ha-card {
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
}
and then on an element:
style:
animation: spin 4s linear infinite
You define the keyframes outside of the specification for the element style.
Yep. Thank you for such a quick answer!
That’s what I was afraid of 
… if I go and use the dev-tools in my browser and inject that keyframes definition right into the shadowroot of the icon, then it starts spinning.
So just to sum up - no way I can do a spinning icon with the card-mod, and I have to look somewhere else. Correct?
Of course there is.
Just move it out of the specification for the element style.
style: |
@keyframes spin {
}
ha-card {
}
1 Like
Oh… you had this info right on the readme page, I should have seen that.
Thanks for your help!
Sharing the final solution
How to make a rotating icon with picture-elements in Lovelace with card-mod
style: |
@keyframes spin-office-ac {
100% {transform: translate(-50%, -50%) scale(1.5) rotate( {% if is_state('input_boolean.air_conditioner_office', 'on') %} -360deg {% else %} 0deg {% endif %} )}
}
- entity: input_boolean.air_conditioner_office
icon: 'mdi:fan'
style:
left: 73.5%
top: 23%
transform: 'translate(-50%, -50%) scale(1.5)'
animation: spin-office-ac 1s linear infinite
padding: 0 0 0.4% 0
type: state-icon
Things to note:
-
When you edit a picture-elementsdo not trust auto-preview. In my case at least, it did not update the@keyframessection correctly. In order to see the result you have to save. -
@keyframeswill have to have the default transform style of the icontranslate(-50%, -50%). If you do not do that, the the animation will look very weird (as a shift instead of rotation). - if the icon is not perfectly centered then you will see wiggling along with rotation. Use
padding:in order to place the icon perfectly in the center of the container<hui-state-icon-element>element
2 Likes
Is there a way how to refactor the CSS written, hence being able to reuse a string ( containing css props and values ) in multiple cards?