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

Share your Projects! Dashboards & Frontend
1702

Here is an example after consolidating your code…

type: custom:mushroom-template-card
primary: Primary Text
secondary: Secondary Text
icon: mdi:mushroom
entity: light.bathroom_lights
card_mod:
      style:  
        mushroom-shape-icon$: |
                .shape {
                  --shape-color: blue !important; 
                  --icon-symbol-size: 50px;
                  --icon-size: 70px;
                } 
        .: |        
         ha-state-icon {
                color: {{ 'orange' if is_state(config.entity, 'on') else 'white' }};
                }
         ha-card {
                padding: 10px 0px 10px 0px !important; 
                                  }
2 Likes
1703

Excellent - not only very efficient,but also working :slight_smile:
Thanks a lot!

1704

Why is here no animation?

type: custom:mushroom-template-card
icon: mdi:shower-head
icon_color: light-blue
primary: Shower
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: clip 0.7s ease-out infinite;
      }
      @keyframes clip {
        0% {clip-path: inset(0 0 45% 0); }
        100% { clip-path: inset(0 0 0 0); }
1705

You are using outdated code… Try this:

type: custom:mushroom-template-card
icon: mdi:shower-head
icon_color: light-blue
primary: Shower
card_mod:
  style: |
     ha-state-icon {
        animation: clip 0.7s ease-out infinite;
        }
      @keyframes clip {
        0% {clip-path: inset(0 0 45% 0); }
        100% { clip-path: inset(0 0 0 0); }
1 Like
1706

Thanks, that is the solution :raised_hands:

1707

Try this

type: custom:mod-card
card:
 type: custom:mushroom-template-badge
 content: ""
 icon: mdi:shield-alert-outline
 color: >-
  {% if is_state("alarm_control_panel.omnilink_main", "armed_away") or
  is_state("alarm_control_panel.omnilink_main", "arming") %} Red {% else %} Grey
  {% endif %}
 tap_action:
  action: perform-action
  perform_action: alarm_control_panel.alarm_arm_away
  target:
    entity_id: alarm_control_panel.omnilink_main
  data: {}
card_mod:
  style:
    mushroom-template-badge$: |
     ha-state-icon {
        animation: blink 1s linear infinite;
     }
      @keyframes blink {
       50% {opacity: 0;}
     }