card riscaldamento + batterie

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    icon: mdi:radiator
    icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
    primary: ''
    secondary: Richiesta media {{ states('sensor.heating_medio') }} %
    entity: binary_sensor.caldaia
    tap_action:
      action: navigate
      navigation_path: /iphone-riscaldamento/0
    fill_container: true
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |

          ha-icon {
            {{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
            transform-origin: 29% 88%;
          }
          @keyframes clip {
            0% {
              clip-path: inset(50% 0 0 0);
            }
            100% {
              clip-path: inset(0 0 0 0);
            }
          }
          .shape {
            --shape-animation: ping 2s infinite;
          }
          @keyframes ping {
            0% {
              box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
            }

            70% {
              box-shadow: 0 0 0 10px transparent;
            }

            100% {
              box-shadow: 0 0 0 0 transparent;
            }
          ha-card {
            background-color: rgba(0,0,0,0);
            box-shadow: none;
            border-style: hidden;
          }
  - type: custom:mushroom-template-card
    icon: mdi:battery-high
    primary: null
    icon_color: green
    secondary: >-
      {{ states('sensor.iphone_13_battery_level') | round(0) }}% iPhone  | {{
      states('sensor.ipad_490_battery_level') | round(0) }}% iPad
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /lovelace-casa2/iphone-13
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-casa2/andrea
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ states('sensor.iphone_13_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
          }
          .shape:before {
            content: "";
            background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-teal)) {{ states('sensor.ipad_490_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
            position: absolute;
            border-radius: var(--icon-border-radius);
            width: 81%;
            height: 81%;
          }
          .shape:after {
            content: "";
            height: 100%;
            width: 100%;
            position: absolute;
            border-radius: var(--icon-border-radius);
            background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
          }
card_mod:
  style:
    mushroom-shape-icon$: |

      ha-icon {
        {{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
        transform-origin: 29% 88%;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
        }

        70% {
          box-shadow: 0 0 0 10px transparent;
        }

        100% {
          box-shadow: 0 0 0 0 transparent;
        }
      ha-card {
        background-color: rgba(0,0,0,0);
        box-shadow: none;
        border-style: hidden;
      }