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

dimitri.landerloos · July 19, 2023, 7:22pm

card_mod:
  style: |
    ha-state-icon {
      {% if is_state('switch.ventilator','on') %}
        animation: spin 1s linear infinite;
      {% else %}

      {% endif %}
    }

You only need this.

@arythm

try like this.

card_mod:
  style: |
    ha-card {
      border: inset gold;
      background-color:  rgb( 255 215 0 / 0.1);
    }
    ha-state-icon {
      {% if states('timer.waschmaschine')!= 'idle' %}
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      {% else %}
      
      {% endif %}
    }
    @keyframes shake {
      0%, 100% { transform: translate(0, 0) rotate(0); }
      20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
      40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
      60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
      80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
    }
    @keyframes drum {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
    }

arythm · July 19, 2023, 8:01pm

I really appreciate the quick reply. It works perfectly again. <3
Now I can adjust the rest of the code myself.

dimitri.landerloos · July 19, 2023, 9:16pm

I would do it like this.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('media_player.gh_mini', 'playing') %}
          --shape-animation: ping 2s infinite;
        {% else %}
        
        {% endif %}
      }
      @keyframes ping {
        0% {box-shadow: 0 0 5px 1px rgba(var(--rgb-teal), 0.7);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
    .: |
      ha-state-icon {
        {% if is_state('media_player.gh_mini', 'playing') %}
          animation: music 2s ease-in-out infinite alternate;
          transform-origin: 50% 100%
        {% else %}
        
        {% endif %}
      }
      @keyframes music {
        0%, 100% { transform: translateY(0px) scaleX(1); }
        20% { transform: translateY(2px) scaleX(0.9); }
        40% { transform: rotateY(10deg) rotateZ(-10deg); }
        60% { transform: translateY(-4px) scaleX(1.1); }
        80% { transform: rotateY(-10deg) rotateZ(10deg); }
      }

So split up your animation that is for the “background” or the outside shape of the icon. and then seperately for your animation that is for the mdi icon itself.

MrGrey · July 19, 2023, 10:31pm

Mushroom Input Time Card

Mushroom_Input_Time

My meager offering… I really wanted a card like this and managed to hack one together. The example shows a “card” configured to a simple “morning lights” automation that is triggered by an even simpler “morning lights” time helper. The “card” allows the user to edit the time (without a popup) and to enable/disable the automation entirely. It’s been received well in my family and I can imagine several places this might be useful.

Disclaimer: I’m a beginner. I’ve been using this “card” for a few weeks, on different platforms, without any issues, but I’ve likely made some rookie mistakes.

Requirements: Aside from Lovelace and Mushroom, this “card” (its not really a card) requires card-mod and vertical-stack-in-card or equivalent(s).

Credit and many thanks to @Ildar_Gabdullin for his endless examples of input_datetime CSS styling.

Code

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    primary: Morning Lights
    secondary: >-
      {{ iif (is_state('automation.bedroom1_morning_lights', 'on'), 'Enabled
      at:', 'Disabled') }}
    icon: >-
      {{ iif (is_state('automation.bedroom1_morning_lights', 'on'),
      'mdi:alarm-light-outline', 'mdi:alarm-light-off-outline') }}
    icon_color: >-
      {{ iif (is_state('automation.bedroom1_morning_lights', 'on'), 'green',
      'grey') }}
    entity: automation.bedroom1_morning_lights
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        :host {
          --primary-text-color:
              {% if is_state('automation.bedroom1_morning_lights', 'on') %}
                var(--primary-text-color)
              {% else -%}
                var(--secondary-text-color)
              {% endif %}
        }          
  - type: entities
    entities:
      - entity: input_datetime.bedroom1_morning_lights
        secondary_info: none
        card_mod:
          style:
            hui-generic-entity-row $: |
              state-badge { display: none; }
              div.info.pointer { display: none; }
            ha-time-input:
              $ ha-base-time-input $:
                ha-textfield:
                  $: |
                    .mdc-text-field {
                      height: 40px !important;
                    }
                    .mdc-line-ripple::after,
                    .mdc-line-ripple::before {
                      border-bottom-style: none !important;
                    }
                    .mdc-text-field__ripple {
                      display: none !important;
                    }
                ha-select $: |
                  .mdc-select__anchor {
                    height: 40px !important;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                  .mdc-select__ripple {
                    display: none !important;
                  }
            .: |
              :host {
                --mdc-text-field-fill-color: transparent;
                --mdc-select-fill-color: transparent;
                {% if is_state('automation.bedroom1_morning_lights','off') %}
                  --mdc-text-field-ink-color: var(--disabled-text-color);
                  color: var(--disabled-text-color);
                  --mdc-select-ink-color: var(--disabled-text-color);
                  --mdc-text-field-idle-line-color: var(--disabled-text-color);                  
                  --mdc-select-idle-line-color: var(--disabled-text-color);
                  --mdc-select-dropdown-icon-color: var(--disabled-text-color);
                  --paper-item-icon-color: var(--disabled-text-color);
                  pointer-events: none;
                {% endif %}
              }
    card_mod:
      style: |
        #states {
          padding-top: 12px;
          padding-bottom: 12px;
          padding-left: 0px;
          align-self: end;
        }
        #states > div{
          border: 1px solid rgba(127,127,127,0.5);
          border-radius: 6px !important;
          box-shadow: 3px 2px 5px rgba(0,0,0,0.16);
        }

Edit: I fixed the last line of code so it works properly in dark mode (rookie mistake).

MrGrey.

MNL · July 20, 2023, 5:46am

Thanks for helping me out. It worked! Yay

Kabala · July 20, 2023, 6:15am

Unfortunately my animation doesn’t work anymore.
Can you help me?
Thanks.

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: sunny 8s ease-in-out infinite alternate;'
        if is_state(config.entity, 'on') }}
      }
      @keyframes sunny {
        70% { transform: rotate(360deg) scale(1); }
        80% { transform: scale(1); }
        90% { transform: scale(1.15); }
        100% { transform: scale(1); }
      }

dimitri.landerloos · July 20, 2023, 7:52am

Look up in some of the recent posts.
You need to remove --icon-animation and replace with just animation

Then you need to use ha-state-icon instead of ha-icon. But this also means removing mushroom-shape-icon$: | and just using style: |

Posreg · July 20, 2023, 7:56am

good thinking, it worked! thank you, I will now rewrite all of my animations and will follow that approach from now on!

thanks again

WW983 · July 20, 2023, 9:38am

Doesn’t quite fit in here, but maybe someone knows a solution.

I have a popup card about browser mode. Can I set the popup card to close when I click on a room?

swifty · July 20, 2023, 1:41pm

Anyone know if it’s possible to address a template chip icon directly for animation, rather than using nth-child from the mushroom-chips-card to select it? - The issue is i’m using decluttering card with some conditional chips so depending on what is visible the ‘nth’ number changes meaning the wrong chip animates.
I’d like to use clip animation but place it directly in the card mod for just that chip, but I can’t see to get it to work.

dimitri.landerloos · July 20, 2023, 2:10pm

Short and sweet. No.

you have to go via the nth-child.

i dont know what the decluttering card does exactly but if you have a conditional chip with a template chip inside of it it would be the conditional chip that you are getting the nth-child of.

        mushroom-conditional-chip:nth-child(1):
          mushroom-template-chip$: |
            ha-state-icon {
              animation: charge 3s linear infinite;
            }
            @keyframes charge {
              0%, 80% { clip-path: inset(0 0 0 0); }
              70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
              60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
              50% { 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%); }
              30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
              20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
              10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
            }

Therefore the numbers should never change. (but again, not sure what the decluttering card does).

post your yaml and ill see if i can help

macraspberrypi · July 20, 2023, 3:48pm

Hi
With Update 3.0.5
I can’t get my FIRE animation to work
Can you help me?
Thanks in advance

primary: Fire
icon: mdi:fire
icon_color: red
card_mod:
  style: |
    ha-states-icon {
      animation: fire 1.5s infinite;
      transform-origin: 50% 85%;
    }
      @keyframes fire {
          0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      }

dimitri.landerloos · July 20, 2023, 4:13pm

tiniest of error.

ha-states-icon should be ha-state-icon.

works fine after

RobertoCravallo · July 20, 2023, 4:25pm

type: custom:mushroom-template-card
icon: mdi:truck-cargo-container
icon_color: red
primary: Vroom
secondary: ''
card_mod:
  style: |
    ha-state-icon {
      animation: vroom 2s ease-in-out infinite;
      }
      .shape {
      clip-path: inset(55% 55% 55% 55%);
      }
      @keyframes vroom {
        49% { opacity: 1;}
        50% { transform: translate(32px); opacity: 0; }
        51% { transform: translate(-30px); opacity: 0; }
        52% { opacity: 1; }
      }

Works nicely, except the truck “leaves” the icon and enters from outside of the icon. Can’t figure out, how to fix that, in the demo at the top of the page, it worked just fine. The truck should stay within the bounds of the icon (red circle)!

macraspberrypi · July 20, 2023, 4:58pm

Thanks a lot some days we need an outside perspective

paddy0174 · July 20, 2023, 5:21pm

Nice popup! Mind sharing the code?

Anyway, if nothing else or simpler comes up, you could try it via a script. Set the tap_action to call a script, where you can have as many actions/service calls as you want. Would be in this case the action you want to call by pushing the button, and afterwards you can call the browser_mod.close_popup service to, yeah, close the popup.

WW983 · July 20, 2023, 6:59pm

Great Idea! Thank you. I will try it.

Here is my Popup Code:

type: custom:popup-card
entity: input_boolean.menu
card:
  type: vertical-stack
  cards:
    - type: custom:button-card
      show_icon: false
      show_state: true
      show_name: true
      tap_action:
        action: none
      name: RÄUME
      styles:
        card:
          - background-color: transparent
        name:
          - font-size: 30px
          - color: var(--primary-color)
          - font-weight: lighter
      card_mod:
        style: |
          ha-card { border-radius: 50px;
          background: transparent;
          box-shadow: none;
    - type: horizontal-stack
      cards:
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Badezimmer
              entity_id: climate.heizung_ankleidezimmer
              secondary: >-
                {{ state_attr('climate.heizung_badezimmer',
                'current_temperature') }} °C
              icon: mdi:shower
              entity: group.badezimmer_licht
              tap_action:
                action: navigate
                navigation_path: badezimmer
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: group.badezimmer_licht
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:lightbulb
                - type: conditional
                  conditions:
                    - entity: switch.tasmota2
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:fan
                    card_mod:
                      style: |
                        @keyframes rotation {
                          0% {
                            transform: rotate(0deg);
                          }
                          100% {
                            transform: rotate(360deg);
                          }
                        }
                        ha-card {
                          animation: rotation 2s linear infinite;
                        }
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('group.badezimmer_licht', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Schlafzimmer
              icon: mdi:bed
              entity: group.schlafzimmer_licht
              tap_action:
                action: navigate
                navigation_path: schlafzimmer
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: group.schlafzimmer_licht
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:lightbulb
                - type: conditional
                  conditions:
                    - entity: binary_sensor.fenstersensor_schlafzimmer_contact
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:window-open-variant
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('group.schlafzimmer_licht', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
    - type: horizontal-stack
      cards:
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Kinderzimmer
              secondary: >-
                {{ state_attr('climate.heizung_kinderzimmer',
                'current_temperature') }} °C
              icon: mdi:teddy-bear
              entity: group.kinderzimmer_licht
              tap_action:
                action: navigate
                navigation_path: kinderzimmer
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: group.kinderzimmer_licht
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:lightbulb
                - type: conditional
                  conditions:
                    - entity: group.kinderzimmer_fenster
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:window-open-variant
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('group.kinderzimmer_licht', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Ankleidezimmer
              secondary: >-
                {{ state_attr('climate.heizung_ankleidezimmer',
                'current_temperature') }} °C
              icon: mdi:wardrobe
              entity: ankleidezimmer_licht
              tap_action:
                action: navigate
                navigation_path: ankleidezimmer
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: group.ankleidezimmer_licht
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:lightbulb
                - type: conditional
                  conditions:
                    - entity: binary_sensor.fenstersensor_ankleidezimmer_contact
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:window-open-variant
                - type: conditional
                  conditions:
                    - entity: binary_sensor.presence_ankleiderzimmer_presence
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:motion-sensor
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('group.ankleidezimmer_licht', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
    - type: horizontal-stack
      cards:
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Wohnzimmer
              secondary: >-
                {{ state_attr('climate.heizung_wohnzimmer',
                'current_temperature') }} °C
              icon: mdi:television
              entity: group.wohnzimmer_licht
              tap_action:
                action: navigate
                navigation_path: wohnzimmer
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: group.wohnzimmer_licht
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:lightbulb
                - type: conditional
                  conditions:
                    - entity: binary_sensor.terrassentursensor_contact
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:window-open-variant
                - type: conditional
                  conditions:
                    - entity: binary_sensor.presence_wohnzimmer
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:motion-sensor
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('group.wohnzimmer_licht', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Essbereich
              secondary: null
              icon: mdi:table-chair
              entity: light.shelly_kuche_essbereich_channel_2
              tap_action:
                action: navigate
                navigation_path: essbereich
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: light.shelly_kuche_essbereich_channel_2
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:lightbulb
                - type: conditional
                  conditions:
                    - entity: sensor.rolladen_essbereich_level
                      state: closed
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('light.shelly_kuche_essbereich_channel_2', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
    - type: horizontal-stack
      cards:
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Küche
              secondary: null
              icon: mdi:countertop
              entity: group.kuche_licht
              tap_action:
                action: navigate
                navigation_path: kuche
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: group.kuche_licht
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:lightbulb
                - type: conditional
                  conditions:
                    - entity: group.kuche_fenster
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:window-open-variant
                - type: conditional
                  conditions:
                    - entity: binary_sensor.presence_kuche_presence
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:motion-sensor
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('group.kuche_licht', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Arbeitzimmer
              icon: mdi:chair-rolling
              entity: group.arbeitszimmer_licht
              tap_action:
                action: navigate
                navigation_path: arbeitszimmer
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: group.arbeitszimmer_licht
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:lightbulb
                - type: conditional
                  conditions:
                    - entity: binary_sensor.fenstersensor_arbeitszimmer_contact
                      state: open
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:window-open-variant
                - type: conditional
                  conditions:
                    - entity: binary_sensor.presence_az_presence
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:motion-sensor
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('group.arbeitszimmer_licht', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
    - type: horizontal-stack
      cards:
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Atelier
              secondary: >-
                {{ state_attr('climate.heizung_atelier', 'current_temperature')
                }} °C
              icon: mdi:face-woman-shimmer
              entity: climate.heizung_atelier
              tap_action:
                action: navigate
                navigation_path: atelier
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: binary_sensor.fenstersensor_atelier_contact
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:window-open-variant
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('group.atelier_licht', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
        - type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Waschraum
              secondary: >-
                {{ states('sensor.feuchtigkeitssensor_waschraum_temperature') |
                round(0) }} °C
              icon: mdi:washing-machine
              entity: light.2_deckenlicht_luftung_wasc_channel_1
              tap_action:
                action: navigate
                navigation_path: waschraum
              hold_action:
                action: toggle
              icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
              fill_container: true
              layout: horizontal
              multiline_secondary: false
            - type: custom:mushroom-chips-card
              chips:
                - type: conditional
                  conditions:
                    - entity: light.2_deckenlicht_luftung_wasc_channel_1
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:lightbulb
                - type: conditional
                  conditions:
                    - entity: light.2_deckenlicht_luftung_wasc_channel_2
                      state: 'on'
                  chip:
                    type: template
                    icon_color: disabled
                    icon: mdi:fan
                    card_mod:
                      style: |
                        @keyframes rotation {
                          0% {
                            transform: rotate(0deg);
                          }
                          100% {
                            transform: rotate(360deg);
                          }
                        }
                        ha-card {
                          animation: rotation 2s linear infinite;
                        }
              alignment: end
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    top: -36px;
                  } 
          card_mod:
            style: |
              ha-card {
                height: 66px;
                {% if is_state('light.2_deckenlicht_luftung_wasc_channel_1', 'on') %}
                   background: rgba(255, 152, 0, 0.1);
                {% endif %}
              }
    - type: custom:stack-in-card
      cards:
        - type: custom:mushroom-template-card
          primary: Garten
          icon: mdi:tree
          entity: sensor.garten_licht
          tap_action:
            action: navigate
            navigation_path: garten
          hold_action:
            action: toggle
          icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
          fill_container: true
          layout: horizontal
          multiline_secondary: false
        - type: custom:mushroom-chips-card
          chips:
            - type: conditional
              conditions:
                - entity: sensor.garten_licht
                  state: 'on'
              chip:
                type: template
                icon_color: disabled
                icon: mdi:lightbulb
            - type: conditional
              conditions:
                - entity: sensor.garten_steckdosen
                  state: 'on'
              chip:
                type: template
                icon_color: disabled
                icon: mdi:power-socket-eu
            - type: conditional
              conditions:
                - entity: sensor.garten_bewasserung
                  state: 'on'
              chip:
                type: template
                icon_color: disabled
                icon: mdi:sprinkler
          alignment: end
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0;
                top: -36px;
              } 
      card_mod:
        style: |
          ha-card {
            height: 66px;
            {% if is_state('light.2_deckenlicht_luftung_wasc_channel_1', 'on') %}
               background: rgba(255, 152, 0, 0.1);
            {% endif %}
          }

Foltifeki · July 20, 2023, 10:49pm

Hello
for some reason the animation does not work with any of the template cards

however, it is perfect with the climate card

type: custom:mushroom-climate-card
entity: climate.c6c489b1
hvac_modes:
  - heat_cool
  - heat
  - cool
  - fan_only
  - dry
show_temperature_control: true
collapsible_controls: false
name: Air Conditioner
card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'heat_cool') %}
        --card-mod-icon: mdi:autorenew;
        animation: spin 3s ease-in-out infinite alternate;
      {% elif is_state(config.entity, 'heat') %}
        --card-mod-icon: mdi:fire;
        animation: heat 2s infinite;
      {% elif is_state(config.entity, 'cool') %}
        --card-mod-icon: mdi:snowflake;
        animation: cool 6s ease-in-out infinite;
      {% elif is_state(config.entity, 'dry') %}
        --card-mod-icon: mdi:water-percent;
        animation: dry 1.5s linear infinite;
      {% elif is_state(config.entity, 'fan_only') %}
        --card-mod-icon: mdi:fan;
        animation: spin 1s linear infinite;
      {% else %}
        --card-mod-icon: mdi:air-conditioner; 
      {% endif %}
      display: flex;
    }
    @keyframes cool {
      0%, 100% { transform: rotate(25deg); }
      25% { transform: rotate(-25deg); }
      50% { transform: rotate(50deg); }
      75% { transform: rotate(-50deg); }
    }
    @keyframes heat {
      0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
      10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
      20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
      30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
      40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
      50% { --icon-color: rgba(var(--rgb-red), 0); }
    }
    @keyframes dry {
      0%, 100% { --icon-symbol-size: 21px; }
      10%, 90% { --icon-symbol-size: 22px; }
      20%, 80% { --icon-symbol-size: 23px; }
      30%, 70% { --icon-symbol-size: 24px; }
      40%, 60% { --icon-symbol-size: 25px; }
      50% { --icon-symbol-size: 26px; }
    }

type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1s linear infinite;
      }

I copied both from here, the card mod is installed

MrGrey · July 21, 2023, 1:11am

There was a breaking change effecting some animations. The following works.

type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
  style: |
      ha-state-icon {
        animation: spin 1s linear infinite;
      }

In general:

style:
    mushroom-shape-icon$: |

becomes:

style: |

ha-icon

becomes:

ha-state-icon

and

--icon-animation: ...

becomes:

animation: ...

Clear as mud.

MrGrey.

davidnestico · July 21, 2023, 2:08am

@rhysb Im following you’re great animations guide that you made and am trying to use it to apply a lightbulb animation when the light is toggled on, problem I’m facing is the toggle is obviously fast so its not enough time for it to play the animation.

Any way around this? I tried speeding it up a little but didn’t work.

type: custom:mushroom-light-card
entity: light.huego
show_brightness_control: true
icon: mdi:lightbulb
hold_action:
  action: toggle
card_mod:
  style: |
    ha-card:active ha-state-icon {
      animation: eureka 2.8s infinite;
    }
    @keyframes eureka {
      0%, 45%, 55%, 100% { transform: translateY(0) scale(1); clip-path: polygon(20% 100%, 21% 38%, 36% 22%, 62% 21%, 79% 37%, 80% 100%, 53% 100%, 55% 67%, 62% 62%, 66% 55%, 67% 46%, 62% 38%, 55% 34%, 47% 34%, 39% 37%, 34% 44%, 33% 53%, 36% 60%, 41% 64%, 45% 66%, 45% 76%, 56% 76%, 54% 100%); }
      10%, 40% { transform: translateY(-5px) scale(1.12); clip-path: inset(0 0 0 0); }
      50% { transform: translateY(-2px) }
    }