Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2)

[beurdy]

I use the tap_action to call a script. The scripts accepts an argument, in this case either to turn on the tv or turn it off. That depends in the current state of the script;

see this snippet:

 tap_action:
      action: perform-action
      perform_action: script.audio_management
      data:
        triggerID: >-
          {% if is_state("input_text.audio_state","TV") %} Off {% else %} TV {%
          endif %}
      target: {}

But now the whole template is send as the argument to the script; it’s not evaluated.

Did I do something wrong? Or is this just not possible? Any other ways to do this?

[aquinter (Nick)]

I’m not sure if someone has made this by now, but I saw several people were looking to have a room card in their mushroom dashboard as can be done with the ‘Minimalist’ UI. It’s not entirely foolproof and may need polishing or might be be conflicting some basic CSS rules, I’m not a web developer but used card-mod to get it at least looking like what I wanted.

Maybe it can be a useful start for someone looking for something like this.

This is the code used for the left living room card:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.badkamer_temperature
        name: Living Room
        primary_info: name
        secondary_info: state
        icon: ''
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                display: none !important;
              }
            .: |
              ha-card {
                border: 0px;
                padding-left: 2px;
                padding-top: 10px;
                width: 500px;
              }
      - type: custom:mushroom-entity-card
        entity: scene.food
        layout: horizontal
        icon: mdi:sofa
        icon_color: blue
        primary_info: none
        secondary_info: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-size: 150px;
              }
            .: |
              ha-card {
                border: 0px;
                margin-left: -30px;
                margin-bottom: -30px;
              }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: scene.food
        tap_action:
          action: perform-action
          perform_action: scene.turn_on
          target:
            entity_id: scene.food
          data:
            transition: 5
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon: mdi:silverware-fork-knife
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(255,165,0,0.1) !important;
              --color: orange;
              justify-content: center;
              height: 44px !important;
              width: 44px !important;
              border: 0 !important;
              box-shadow: none !important;
              border-radius: 22px !important;
            }
      - type: template
        icon: mdi:television
        tap_action:
          action: perform-action
          perform_action: script.tv
          target: {}
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(37,57,38,255);
              --color: rgba(76,175,80,255);
              justify-content: center;
              height: 44px !important;
              width: 44px !important;
              border: 0 !important;
              box-shadow: none !important;
              border-radius: 22px !important;
            }
      - type: template
        icon: mdi:sleep
        tap_action:
          action: perform-action
          perform_action: script.bedtime
          target: {}
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              height: 44px !important;
              width: 44px !important;
              border: 0 !important;
              box-shadow: none !important;
              border-radius: 22px !important;
              --chip-background: rgba(51,43,62,255);
              --color: rgba(146,107,199,255);
            }
    card_mod:
      style: |
        .chip-container {
          flex-flow: column wrap-reverse !important;
          display: flex !important;
          --chip-spacing: 8px;
          margin: 12px;
        }
        .: |
        .container {
          align: end;
        }
card_mod:
  style: |
    ha-card {
      max-width: 100%;
      min-width: 50%;
    }

For those interested, I’m using it on an NS Panel Pro looking like this:

[chillhahn]

Hey is it maybe possible to add a plus and minus button to the fan card?

[Faecon (Jo)]

              - type: custom:mushroom-entity-card
                entity: sensor.date_templated
                name: " "
                icon: none
                icon_color: white
                card_mod:
                  style: 
                    mushroom-state-info$: |
                      .container {
                      --card-secondary-font-weight: bold;    
                      }   
                    .: |                     
                      ha-state-icon {
                        --icon-symbol-size: 0px;
                      }

How can I remove the icon background, and also the space provided for the icon ?
I want my entity centered over the card withoud an icon…

[beurdy]

Nice! Pretty much what I am looking for.

One question: How can I reduce the space between the icon and the temperature? Currently, the card is taking up a bit too much space for me.

[queerco]

Last time i shared a dash on here aas about a year ago. Ive since moved and changed a lot around - first im now using ipad mini 4s instead of nest hubs, and im using them on iport launchport dock bases (the loung room one is cut into my coffee table).

Mushroom continues to be the overarching theme, but i am running lots of other custom HACS and many of the cards i have made are modified version of examples from these hacs and presumably made by their creators (including bubble cards, android tv remote card, sonos card and universal remote card). Insprarion was also taken from many random cards ive seen people post in this very thread (sorry for not naming anyone specifically, i jist cant really remember as its been a many months slow side project).

Im incredibly happy finally with my take on a mushroom edit of the famous sonos card.

The iframe casts directly to my tv and the universal remote bar below it controls it amazingly well, even better than the real thing.

Where i want more options ive got bubble popup cards hidden under buttons - like speaker volumes and groups, media, a full googletv remote, and the full normal sonos card too.

The main reason for switching to ipad is so now i can play music video media in the iframe and airplay to sonos, and this really works well.

There are so few light and other entity controls because ive set them all up for motion, time of day, day of week, and geofence - thanks to browser mod the ipads turn their screen off till you enter the room and are turned as part of my automations that turn on and off the lights and sonos as you enter and exit the room.

I will share my yaml with you all, but as i have said in the past, please be kind and try not to judge it too harshly, as i really dont know how to write any code and ive created it with messy and clunky brute force (there will be a lot of stuff that shouldn’t be in there or could have been done better). I hope some of you might instead do as i have done and use this as a guide to half mod and mess around with to create something special and bespoke for you.

[queerco]

The iframe and remote

type: custom:stack-in-card
cards:
  - type: iframe
    url: Http://10.0.0.x:8096
    aspect_ratio: 1x0.615
  - type: custom:android-tv-card
    custom_actions:
      - type: button
        name: remote
        icon: mdi:remote
        tap_action:
          action: navigate
          navigation_path: "#remote"
      - type: touchpad
        name: touchpad
        tap_action:
          action: key
          key: DPAD_CENTER
        up:
          tap_action:
            action: key
            key: DPAD_UP
          hold_action:
            action: repeat
          type: button
        down:
          tap_action:
            action: key
            key: DPAD_DOWN
          hold_action:
            action: repeat
          type: button
        left:
          tap_action:
            action: key
            key: DPAD_LEFT
          hold_action:
            action: repeat
          type: button
        right:
          tap_action:
            action: key
            key: DPAD_RIGHT
          hold_action:
            action: repeat
          type: button
        styles: |-
          toucharea {
            height: 85px;
            width: 170px;
            background-color: rgba(0,0,0,0.5);

          }
        autofill_entity_id: true
    keyboard_id: remote.android_tv_10_0_0_105
    media_player_id: media_player.master_bedroom_tv_2
    rows:
      - - - power
        - - keyboard
        - - home
        - - back
        - - touchpad
        - - jellyfin
        - - plex
        - - netflix
        - - remote
    autofill_entity_id: true
    styles: |-
      :host {
        --size: 35px;
      }
    remote_id: remote.master_bedroom_tv
    card_mod:
      style:
        mushroom-state-info$: |
          .container {
          align-items: end;
          }
        .: |
          ha-card {
            margin-top: -20px;
            margin-bottom: -10px;
            padding-left: 10px;
            padding-right: 10px;
          }
view_layout:
  grid-area: main2
card_mod:
  style: |
    ha-card:before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

      

      filter: blur(10px) saturate(20%) opacity(20%);
      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }

The climate control

type: custom:stack-in-card
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.humidity_53
        name: Inside Temperature
        color: "#4caf50"
      - entity: sensor.the_breville_airactive_3dtm_4
        name: Outside Temperature
        color: "#2196f3"
        y_axis: secondary
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          margin-top: 15px !important;
          margin-bottom: -25px !important;
          filter: blur(2px) opacity(90%);
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: "{{state_attr(entity, 'current_temperature')}} °C"
        entity: climate.thermostat
        icon: mdi:home-thermometer
        icon_color: green
      - type: template
        double_tap_action:
          action: none
        content: "{{ states(entity) }}% "
        entity: sensor.humidity_32
        icon: mdi:water
        icon_color: blue
        tap_action:
          action: none
        hold_action:
          action: none
    card_mod:
      style: |
        ha-card {
          margin-top: -63px !important;
          padding-bottom: 0px !important;
          --chip-background: none;
                    
        }
    alignment: justify
  - type: custom:simple-thermostat
    entity: climate.thermostat
    header:
      name: false
      icon: false
    decimals: "0"
    fallback: "Off"
    hide:
      temperature: true
      state: true
    layout:
      mode:
        names: false
        icons: true
        headings: false
      step: row
    step_size: "1"
    control:
      hvac:
        "off": true
        heat: true
        cool: true
        fan: true
      fan: true
    card_mod:
      style: |
        ha-card {
          margin-top: -67px !important;
          margin-bottom: -6px !important;
          margin-left: -5px;
          margin-right: -5px;
          --st-font-size-xl: 34px;
          --st-font-size-m: 20px;
          --st-font-size-title: 20px;
          --st-font-size-sensors: 30px;
          --st-spacing: 2px;
        }
        ha-card .thermostat-trigger { 
          color: #9e9e9e;
        }
view_layout:
  grid-area: air
card_mod:
  style: |
    ha-card {
      margin-left: -5px !important;

      }

[queerco]

The media player

type: custom:stack-in-card
view_layout:
  grid-area: sidebar
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.club
        icon: phu:sonos
        name: Club
        secondary_info: none
        primary_info: none
        use_media_info: false
        icon_type: icon
        layout: horizontal
        tap_action:
          action: navigate
          navigation_path: "#media2"
        show_name: false
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                 padding-right: 0px;
                 padding-left: 0px;
                 padding-top: 0px;
                 border-radius: 0px !important;
                 
                 --icon-symbol-size: 90px;
                 --icon-size: 0px;
               }
            .: |
              ha-card {
                  padding-left: 50px;
                   padding-top: 22px;
                   margin-bottom: px;
                   margin-top: -5px;
                   
                   
                }
                
      - type: custom:mini-media-player
        entity: media_player.club
        artwork: none
        icon: mdi:decimal
        hide:
          volume: true
          mute: true
          power: true
          prev: true
          info: true
          next: true
          name: true
          source: false
          icon: true
          progress: true
          play_pause: true
        group: true
        card_mod:
          style:
            .: |
              ha-card {
                   margin-right: 8px;
                   padding-top: 5px;
                   margin-left: 100px;
                   margin-top: -45px;
                   margin-bottom: 0px;
                   padding-bottom: 0px;
                   
                   
                }
                
      - type: custom:stack-in-card
        cards:
          - type: custom:mushroom-media-player-card
            entity: media_player.club
            icon: phu:sonos
            name: Club
            use_media_info: true
            icon_type: none
            layout: vertical
            fill_container: false
            card_mod:
              style:
                .: |
                  ha-card {
                     margin-bottom: -10px;
                     padding-left: 10px;
                     padding-right: 10px;
                     margin-top: 15px;
                  }
          - type: custom:android-tv-card
            media_player_id: media_player.club
            rows:
              - - touchpad
              - - media_position
            custom_actions:
              - type: slider
                name: media_position
                value_attribute: media_position
                range:
                  - 0
                  - "{{ state_attr(config.entity, \"media_duration\") }}"
                tap_action:
                  action: perform-action
                  perform_action: media_player.media_seek
                  data:
                    seek_position: "{{ value }}"
                step: 1
                styles: |-
                  :host {
                    --thumb-width: 5px;
                    --tooltip-label: '{{ (value / 60) | int }}:{{ 0 if (value - 60*((value / 60) | int)) < 10 else "" }}{{ (value - 60*((value / 60) | int)) | int }}';
                    height: 10px;
                    border-radius: 0% 0% 0;
                    top: 2px
                  }
                  .label {
                    filter: invert(1);
                    mix-blend-mode: difference;
                  }
                label: |2-
                    {% set minutes = (value / 60) | int %} {% set seconds = (value - 60 * minutes)
                    | int %} {{ minutes }}:{{ 0 if seconds < 10 else "" }}{{ seconds | int }}/{{ (state_attr(config.entity, "media_duration") / 60) | int }}:{{ 0 if
                    (state_attr(config.entity, "media_duration") - 60*((state_attr(config.entity,
                    "media_duration") / 60) | int)) < 10 else "" }}{{ (state_attr(config.entity,
                    "media_duration") - 60*((state_attr(config.entity, "media_duration") / 60) |
                    int)) | int }}
              - type: touchpad
                name: touchpad
                tap_action:
                  action: perform-action
                  perform_action: media_player.media_play_pause
                up:
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  type: button
                down:
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  type: button
                left:
                  tap_action:
                    action: perform-action
                    perform_action: media_player.media_next_track
                  hold_action:
                    action: none
                  icon: mdi:skip-previous
                  type: button
                  styles: |-
                    :host {
                      padding: 0;
                      filter: invert(1);
                      background-blend-mode: difference;
                      margin: 0;
                      --size: 60px;
                      --icon-color: rgb(0, 0, 0, 0.5)
                    }
                right:
                  tap_action:
                    action: perform-action
                    perform_action: media_player.media_previous_track
                  hold_action:
                    action: none
                  icon: mdi:skip-next
                  type: button
                  styles: |-
                    :host {
                      padding: 0;
                      margin: 0;
                      filter: invert(1);
                      background-blend-mode: difference;
                      margin: 0;
                      --size: 60px;
                      --icon-color: rgb(0, 0, 0, 0.5)
                    }
                styles: |-
                  toucharea {
                    background-color: rgb(0, 0, 0, 0.9);
                    background-image: url("http://homeassistant.local:8123{{ state_attr(config.entity, 'entity_picture') }}");
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    background-blend-mode: difference;
                    height: 250px;
                    width: 200px;
                    border-radius: 0% 0% 0;
                    --background-blend-mode: multiply;
                  }
                hold_action:
                  action: more-info
                icon: mdi:play-pause
          - type: custom:mushroom-media-player-card
            entity: media_player.club
            icon: phu:sonos
            name: Club
            use_media_info: false
            icon_type: none
            layout: horizontal
            secondary_info: none
            primary_info: none
            volume_controls:
              - volume_set
              - volume_mute
            card_mod:
              style:
                mushroom-state-info$: |
                  .container {
                    align-items: end;
                  }
                .: |
                  ha-card {
                     margin-top: -10px;
                     padding-bottom: 5px;                   padding-left: 10px;
                     padding-right: 15px;
                  }
        card_mod:
          style: |
            ha-card:before {
              transform: translate3d(0,0,0);
              -webkit-transform: translate3d(0,0,0);
              content: "";
              position: absolute;
              height: 100%;
width: 100%;

              background: url('/local/idle_art.png') center no-repeat;
             {% if not is_state('media_player.currently_playing', 'idle') %}
               background: url( '{{ state_attr('media_player.club', "entity_picture") }}' ) center no-repeat;
              {% endif %};
              filter: blur(100px) saturate(300%);
              background-size: 100% 100%;
            }
            ha-card {
              transform: translate3d(0,0,0);
              -webkit-transform: translate3d(0,0,0);
            }
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        cards: []
      - type: custom:mushroom-media-player-card
        entity: media_player.club
        icon: mdi:album
        use_media_info: false
        icon_type: icon
        secondary_info: name
        primary_info: none
        tap_action:
          action: navigate
          navigation_path: "#media"
        name: Media
        layout: horizontal
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                 padding-right: 0px;
                 padding-left: 0px;
                 padding-top: 0px;
                 border-radius: 0px !important;
                 
                 --icon-symbol-size: 15px;
                 --icon-size: 0px;
               }
            .: |
              ha-card {

                 margin-left: 0px;
                 margin-top: 2px;
                 padding-left: 10px;
                 padding-bottom: 5px;
               }
               
      - type: custom:mushroom-media-player-card
        entity: media_player.club
        icon: mdi:speaker-multiple
        use_media_info: false
        icon_type: icon
        secondary_info: name
        primary_info: none
        tap_action:
          action: navigate
          navigation_path: "#sonos"
        name: Groups
        layout: horizontal
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                 padding-right: 0px;
                 padding-left: 3px;
                 padding-top: 0px;
                 border-radius: 0px !important;
                 
                 --icon-symbol-size: 15px;
                 --icon-size: 0px;
               }
            .: |
              ha-card {

                 margin-left: 0px;
                 margin-right: 0px;
                 padding-left: 0px;
                 margin-top: 2px;
               }
card_mod:
  style: |
    ha-card:before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

      background: url('/local/idle_art.png') center no-repeat;
      {% if not is_state('media_player.currently_playing', 'idle') %}
      background: url( '{{ state_attr('media_player.club', "entity_picture") }}' ) center no-repeat;
      {% endif %}

      filter: blur(56px) hue-rotate(25deg) saturate(90%);
      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform:

[whininie]

Hi, maybe somebody can help me.

  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: sensor.telefoon_van_elwin_battery_level
        icon: >
          {% set battery_level =
          states('sensor.telefoon_van_elwin_battery_level') | default('0') | int
          %} {% if is_state('binary_sensor.telefoon_van_elwin_is_charging',
          'on') %}
            mdi:battery-charging
          {% else %}
            {% if battery_level >= 90 %}
              mdi:battery
            {% elif battery_level >= 80 %}
              mdi:battery-80
            {% elif battery_level >= 70 %}
              mdi:battery-70
            {% elif battery_level >= 60 %}
              mdi:battery-60
            {% elif battery_level >= 50 %}
              mdi:battery-50
            {% elif battery_level >= 40 %}
              mdi:battery-40
            {% elif battery_level >= 30 %}
              mdi:battery-30
            {% elif battery_level >= 20 %}
              mdi:battery-20
            {% elif battery_level >= 10 %}
              mdi:battery-10
            {% else %}
              mdi:battery-alert
            {% endif %}
          {% endif %}
        icon_color: >
          {% set battery_level =
          states('sensor.telefoon_van_elwin_battery_level') | default('0') | int
          %} {% if battery_level >= 30 %}
            green
          {% elif battery_level >= 10 %}
            amber
          {% else %}
            red
          {% endif %}
        card_mod:
          style: |
            ha-card {
              background: transparent !important;
              box-shadow: none !important;
              border-width: 0 !important;
              padding-left: 35px;
              margin-top: -5px;
            }
            .content {
              {% if is_state('binary_sensor.telefoon_van_elwin_is_charging', 'on') %}
                animation: charge 5s linear infinite;
              {% endif %}
            }
            @keyframes charge {
              0%, 80% { clip-path: inset(0 0 0 0); }
              10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
              20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
              30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
              40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
              50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
              60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
              70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
            }

its working, but the only ugly thing is: After the animation is done, it will dissapear for like a second. This is not the case with a template card using “ha-state-icon”

Somebody knows how to fix this?

[Stuartie (Stuart)]

I have the following but when I add it to a badge using the new sections it doesn’t keep it’s alignment correctly for the bell and the hamburger.

Top is inside a the badge, below is before using a normal card inside a section. I’d like to maintain the layout of the bottom but inside a badge.

Code Snippet

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: "{{ now().strftime(\"%H:%M %a, %-d %b\") }}"
        card_mod:
          style: |
            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;
            }
      - type: template
        content: "{{ states('sensor.office_temperature') }} °C"
        show_conditions: true
        show_temperature: true
        tap_action:
          action: navigate
          navigation_path: heating
        card_mod:
          style: |
            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;
            }
      - type: template
        entity: input_boolean.notifications
        icon: mdi:bell
        tap_action:
          action: toggle
        hold_action:
          action: none
    alignment: justify
  - type: conditional
    conditions:
      - entity: input_boolean.notifications
        state: "on"
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: alarm_control_panel.house
          icon: mdi:shield-home
          icon_color: |-
            {% set alarm_status = states(entity) %}
            {% if alarm_status == 'armed_away' %} 
              green
            {% elif alarm_status == 'disarmed' %}
              orange
            {% elif alarm_status == 'arming' %}
               yellow
            {% elif alarm_status == 'triggered' %}
               red
            {% endif %} 
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Alarm
                content:
                  type: custom:mushroom-alarm-control-panel-card
                  entity: alarm_control_panel.house
                  states:
                    - armed_away
          hold_action:
            action: none
        - type: conditional
          conditions:
            - entity: light.all_lights
              state: "on"
          chip:
            type: template
            icon: mdi:lightbulb
            entity: light.all_lights
            content: >
              {{ expand(states.light.all_lights) | selectattr('state', 'eq',
              'on') | list | count }}
            icon_color: amber
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Lights On
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: light.all_lights
                          state: "on"
                          options:
                            type: custom:mushroom-light-card
                            show_brightness_control: true
                            layout: horizontal
                            tap_action:
                              action: toggle
                            use_light_color: true
                        - entity_id: light.all_lights
                          state: "on"
                          options:
                            type: custom:mushroom-light-card
                            layout: horizontal
                            secondary_info: none
                            tap_action:
                              action: toggle
                            card_mod:
                              style: |
                                /* Style & position All Lights button */
                                ha-card {
                                  background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
                                }
                                :host {
                                  margin: 0px 0px 12px !important;
                                }
                      exclude: []
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: binary_sensor.all_doors
              state: "on"
          chip:
            type: template
            entity: binary_sensor.all_doors
            content: >
              {{ expand(states.binary_sensor.all_doors) | selectattr('state',
              'eq', 'on') | list | count }}
            icon_color: brown
            icon: mdi:door-open
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Doors Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: binary_sensor.all_doors
                          state: "on"
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            icon_color: brown
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: binary_sensor.all_windows
              state: "on"
          chip:
            type: template
            icon_color: grey
            icon: mdi:window-open
            entity: binary_sensor.all_windows
            content: >
              {{ expand(states.binary_sensor.all_windows) | selectattr('state',
              'eq', 'on') | list | count }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Windows Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: binary_sensor.all_windows
                          state: "on"
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: sensor.black_bin_days
              state_not: "2"
          chip:
            type: template
            icon_color: grey
            icon: mdi:trash-can
            tap_action:
              action: none
        - type: conditional
          conditions:
            - entity: sensor.brown_bin_days
              state_not: "2"
          chip:
            type: template
            icon_color: brown
            icon: mdi:trash-can
            tap_action:
              action: none
        - type: conditional
          conditions:
            - entity: sensor.blue_bin_days
              state_not: "2"
          chip:
            type: template
            icon_color: blue
            icon: mdi:trash-can
            tap_action:
              action: none
        - type: conditional
          conditions:
            - entity: sensor.devices_with_low_battery
              state_not: "0"
          chip:
            type: template
            entity: sensor.devices_with_low_battery
            content: |
              {{ states(config.entity) | int }}
            icon_color: red
            icon: mdi:battery-alert
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Low Batteries
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - attributes:
                            device_class: battery
                          state: < 30
                          options:
                            type: custom:mushroom-template-card
                            primary: "{{ states(entity) }}%"
                            secondary: "{{ state_attr(entity, 'friendly_name') | title }}"
                            icon: >
                              {% set battery_level = (states(entity) | int / 10)
                              | round(0) | int * 10 %}

                              {% if battery_level == 100 %}
                                mdi:battery
                              {% elif battery_level > 0 %}
                                mdi:battery-{{ battery_level }}
                              {% else %}
                                mdi:battery-outline
                              {% endif %}
                            icon_color: |-
                              {% set battery_level = states(entity) | int %}
                              {% if battery_level > 90 %} 
                                green
                              {% elif battery_level > 60 %}
                                light-green
                              {% elif battery_level > 50 %}
                                lime
                              {% elif battery_level > 40 %}
                                yellow
                              {% elif battery_level > 30 %}
                                amber
                              {% elif battery_level > 20 %}
                                orange
                              {% elif battery_level > 10 %}
                                deep-orange
                              {% else %}
                                red
                              {% endif %} 
                            layout: horizontal
                            tap_action:
                              action: none
                            badge_icon: >-
                              {{ 'mdi:exclamation-thick' if states(entity) | int
                              < 10 }} 
                            badge_color: red
                      exclude: null
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.smoke_alarm
              state: "on"
          chip:
            type: template
            icon_color: red
            icon: mdi:fire-alert
            tap_action:
              action: more-info
            entity: group.smoke_alarm
            card_mod:
              style: |
                .content {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
      alignment: end
      card_mod:
        style: |
          /* Set margins on notification chips */
          ha-card {
            margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
            transition: all 0s;
          }
card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;

      /* Remove gap at top of card */
      margin-top: calc(-1 * var(--mush-chip-spacing, 8px));

      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Make fixed so element scrolls up */
      position: fixed;
      top: var(--header-height);

      /* Adjust height when notifications visible */
      height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};

      /* Set width to match */
      width: calc(100% - var(--mush-chip-spacing, 8px));
      max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";

      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;

      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));

      /* Position card at back */
      z-index: -1;

      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.8);

      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }

[ID_Ant]

hi @rhysb,

Really like the animated Christmas Icon you’ve pulled together. New to this HA and with Christmas coming up, this icon would look great. However! i cant see any animations, amended the entity but its not looking anything like your one:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.lounge_2
    icon: mdi:pine-tree
    use_light_color: true
    show_brightness_control: true
    show_color_temp_control: false
    show_color_control: false
    collapsible_controls: true
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0;
        }
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    icon_color: yellow
    primary: Star
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: star 8s ease infinite alternate;
          }
          @keyframes star {
            0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
            50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -120px;
            --ha-card-border-width: 0;
          }
  - type: custom:mushroom-template-card
    icon: mdi:grain
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
            clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
          }
          @keyframes flash {
            50% { transform: rotateY(180deg); }
          }
          @keyframes lights {
            0%, 100% {--icon-color: rgb(var(--rgb-red)); }
            6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
            12.5% { --icon-color: rgb(var(--rgb-orange)); }
            18.75% { --icon-color: rgb(var(--rgb-amber)); }
            25% { --icon-color: rgb(var(--rgb-yellow)); }
            31.25% { --icon-color: rgb(var(--rgb-lime)); }
            37.5% { --icon-color: rgb(var(--rgb-light-green)); }
            43.75% { --icon-color: rgb(var(--rgb-green)); }
            50% { --icon-color: rgb(var(--rgb-teal)); }
            56.25% { --icon-color: rgb(var(--rgb-cyan)); }
            62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
            68.75% { --icon-color: rgb(var(--rgb-blue)); }
            75% { --icon-color: rgb(var(--rgb-indigo)); }
            81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
            87.5% { --icon-color: rgb(var(--rgb-purple)); }
            93.75% { --icon-color: rgb(var(--rgb-pink)); }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -186px;
            --ha-card-border-width: 0;
          }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    entity: light.lounge_2
    tap_action:
      action: toggle
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: surprise 4s ease infinite;
          }
          @keyframes surprise {
            0%, 20%, 100% { transform: translateY(0); }
            2.5% { transform: translateY(-2px) rotate(-27deg); }
            5% { transform: translateY(-2px) rotate(21deg); }
            7.5% { transform: translateY(-2px) rotate(-15deg); }
            10% { transform: translateY(-2px) rotate(9deg); }
            12.5% { transform: translateY(0); }
            15% { transform: translateY(-1.2px) }
          }
          .shape {
            --shape-color: none;
            --icon-size: 18px;
            top: 18px;
            left: 18px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -252px;
            --ha-card-border-width: 0;
          }
card_mod:
  style: |
    ha-card {
      {{ 'height: 120px;' if is_state('light.lounge_2', 'on') else 'height: 66px;' }}
      {% set r = state_attr('light.lounge_2', 'rgb_color')[0] %}
      {% set g = state_attr('light.lounge_2', 'rgb_color')[1] %}
      {% set b = state_attr('light.lounge_2', 'rgb_color')[2] %}
      background-color: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
    }

forgot to mention even just this from your example doesn’t animate - so guessing i am missing something? i’ve got browser-mod installed, mushroom, what else would be required?

type: custom:mushroom-template-card
icon: mdi:gift
icon_color: deep-orange
primary: Surprise
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: surprise 3s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-6px) rotate(-14deg); }
        5% { transform: translateY(-6px) rotate(11deg); }
        7.5% { transform: translateY(-6px) rotate(-8deg); }
        10% { transform: translateY(-6px) rotate(5deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-3px) }
      }

[hapkoek]

Hi all,

I’m playing around with animated icons based on entity states. For example, if my solar panels are providing energy, make the icon animate.

Now I want to create the same for my air condition units, when one of the three (or more) are active, make the icon animate. But so far I haven’t found an icon of a moving A/C, prefferebly this icon:

And my second question, how can I create this state? I was thinking of creating a helper group and using that to check if any of the A/C’s are running. But so far I haven’t been able to do this.

My thought was, I’m probably not the only one wanting this and someone probably has already created this. Hence why I’m posting here.

Thanks in advance!