🔹 Card-mod - Add css styles to any lovelace card

skynet01 · July 27, 2020, 6:01pm

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

Frank_Hagenbuch · July 27, 2020, 6:36pm

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)

skynet01 · July 27, 2020, 7:03pm

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?

Frank_Hagenbuch · July 28, 2020, 4:51am

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

Unbenannt

This all is based on the work of Mattias_Persson, you can see his work here:

tom_l · July 28, 2020, 11:59am

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;
          }

thomasloven · July 28, 2020, 1:14pm

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…

tom_l · July 28, 2020, 1:19pm

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.

Screenshot_2020-07-28 Administration - Home Assistant

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);
        }

Screenshot_2020-07-28 Administration - Home Assistant(1)

pollinolas · July 28, 2020, 5:31pm

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

tom_l · July 28, 2020, 5:56pm

You want the Elements tab.

Oligarch · July 29, 2020, 6:59pm

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

scr

thomasloven · July 29, 2020, 8:01pm

I’ll add that to The List.

Oligarch · July 29, 2020, 8:42pm

Ok. Thanks!

serega.pte · August 2, 2020, 8:21am

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;
                          }

serega.pte · August 2, 2020, 8:32pm

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;
                          }

Georg · August 3, 2020, 10:44am

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

thomasloven · August 3, 2020, 11:00am

You define the keyframes outside of the specification for the element style.

Georg · August 3, 2020, 11:32am

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?

thomasloven · August 3, 2020, 11:47am

Of course there is.
Just move it out of the specification for the element style.

style: |
  @keyframes spin {
  }
  ha-card {
  }

Georg · August 3, 2020, 12:41pm

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-elements do not trust auto-preview. In my case at least, it did not update the @keyframes section correctly. In order to see the result you have to save.
@keyframes will have to have the default transform style of the icon translate(-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

xiki · August 5, 2020, 10:36am

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?