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

rhysb · September 17, 2022, 4:17am

Yes, content: '{{ states(entity) }} °C' should do the trick.

Vandana · September 17, 2022, 5:02am

Done

thanks a lot…

    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: ''
            icon: mdi:wifi-alert
            icon_color: red 
            content: >
              {% set val =
              (states("sensor.fiber").split(",")[2]|float)/100*states("sensor.fiber").split(",")[1]|float+states("sensor.fiber").split(",")[1]|float
              %} {% set recharge =
              strptime(states("sensor.fiber").split(",")[0],'%d-%m-%Y') +
              timedelta(states("sensor.fiber").split(",")[3]|int) %} {% set dl =
              recharge.date() - now().date() %} {{ (dl.days)}} days
            tap_action:
              action: none
        card_mod:
          style:
            mushroom-template-chip:nth-child(1)$: >
              {% set val =

              (states("sensor.fiber").split(",")[2]|float)/100*states("sensor.fiber").split(",")[1]|float+states("sensor.fiber").split(",")[1]|float

              %} {% set recharge =

              strptime(states("sensor.fiber").split(",")[0],'%d-%m-%Y') +

              timedelta(states("sensor.fiber").split(",")[3]|int) %}  {% set dl
              =

              recharge.date() - now().date() %}
               ha-icon {
                 {% if dl.days <=5 and dl.days >=1 %}
                   animation: blink 4s linear infinite;
                 {% else %}
                   animation: blink 1s linear infinite;
                 {% endif %}
              }
               @keyframes blink {
                 50% {
                   opacity: 0
                 }
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                }
               }

where to use the below style correctly in the above code ? The place where I am using has not effect

                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                }

Kindly help

Sddawson · September 17, 2022, 6:00am

@rhysb Your contributions are invaluable. Thank you! I might put in an enhancement request for an animation of some sort as an option. That and being able to colour title text. It gets a bit laborious putting all this card_mod code on every single Mushroom card! I understand the need to keep things simple, but I think there is room for a few more options. Might be just me though. The cards are incredibly useful as is.

rhysb · September 17, 2022, 6:38am

You can add global CSS to your theme using Card-Mod:

Mushroom Custom:
    card-mod-theme: "Mushroom Custom"

    card-mod-card: |
        ha-card:active {
            transform: scale(1.02);
        }

rhysb · September 17, 2022, 6:50am

Try like this:

    .: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
      }

Sddawson · September 17, 2022, 7:00am

Oh wow, you live and learn (especially when it comes to HA!). Thanks. I suppose doing this would affect any non-Mushroom cards too?

I do find, though, that with those mods for visual feedback, if you tap the card quickly you don’t see much. Tap a little longer (but less than a long tap), and you see the effect. Is there a way to make that more responsive, and also a way to have the standard HA button ripple effect? Sorry, new to all the card-modding stuff!

Vandana · September 17, 2022, 7:17am

Agreed… +1

Thanks a lot… it worked…

rhysb · September 17, 2022, 8:06am

For Scent you could try something like this:

Scent Animation

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:scent
    icon_color: light-green
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        animation: wave 6s infinite;
      }
      @keyframes wave {
        50% {
          transform: rotatey(180deg);
          --color: rgb(var(--rgb-cyan));
        }
      }

I like my kettle boil animation:

Kettle Boil Animation

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:kettle-steam
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        animation: boil 0.5s linear alternate infinite;
      }
      @keyframes boil {
        0% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      }

And this one is just for fun, so why not:

Mushroom Snail Animation

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:snail
    icon_color: green
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      ha-icon {
        animation: flip 1s ease-in-out infinite;
      }
      @keyframes flip {
        0% {
          transform: scaley(1.05);
        }
        50% {
          transform: scaley(0.9);
        }
      }
    .: |
      mushroom-template-chip:nth-child(2) {
          animation: slide 8s linear infinite;
        }
        @keyframes slide {
          0% {
            transform: translate(0px, 0px) rotateY(0deg);
          }
          50% {
            transform: translate(100px, 0px) rotateY(0deg);
          }
          50.1% {
            transform: translate(100px, 0px) rotateY(180deg);
          }
          100% {
            transform: translate(0px, 0px) rotateY(180deg);
          }
        }

gfandrea · September 17, 2022, 8:44am

how can I change the icon color of the climate card?
with card-mod

Thanks

rhysb · September 17, 2022, 9:45am

You can add transition: 0s; to make the effect more responsive.

rhysb · September 17, 2022, 10:13am

Is this what you wanted?

Mushroom Avatar/Picture Border:

type: custom:mushroom-template-card
primary: 'Mushroom '
picture: /local/mushroom_icon.png
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        border: solid rgb(var(--rgb-green));
      }

rhysb · September 17, 2022, 10:20am

You can kind of do it like this.

Mushroom Chip Badge:

Mushroom Chip Badge

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: group.all_windows
        state: 'on'
    chip:
      type: template
      icon: mdi:window-open
      content: >-
        {{ expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') |
        list | count }}
      entity: group.all_windows
      icon_color: light-blue
      tap_action:
        action: none
  - type: conditional
    conditions:
      - entity: group.all_lights
        state: 'on'
    chip:
      type: template
      icon: mdi:lightbulb
      content: >-
        {{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
        list | count }}
      entity: group.all_lights
      icon_color: amber
      tap_action:
        action: none
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        span {
          position: relative;
          right: 6px;
          top: -6px;
          width: 0px;
          font-size: 10px;
          margin-right: -5px;
        }
    mushroom-conditional-chip:nth-child(2):
      mushroom-template-chip$: |
        span {
          position: relative;
          right: 6px;
          top: -6px;
          width: 0px;
          font-size: 10px;
          margin-right: -5px;
        }
    .: |
      ha-card {
        height: 36px !important;
      }

Vandana · September 17, 2022, 10:28am

Thanks @rhysb for all these animation examples. These are really useful.

There was one animation example from your earlier post.

type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: Radiator
secondary: It's HOT!
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: clip 1s linear infinite;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
        }
        
        70% {
          box-shadow: 0 0 0 10px transparent;
        }
        
        100% {
          box-shadow: 0 0 0 0 transparent;
        }
      }

how can I apply this effect to a mushroom chip template card ?

rhysb · September 17, 2022, 10:31am

Like this:

Vandana · September 17, 2022, 10:40am

@rhysb I meant this kind of effect with red ring glow… please guide

Mushroom Radiator Animation

rhysb · September 17, 2022, 10:53am

You can change the default colors of the Mushroom Climate Card like this:

type: custom:mushroom-climate-card
entity: climate.air_conditioner
show_temperature_control: true
collapsible_controls: false
hvac_modes:
  - heat_cool
  - heat
  - cool
  - dry
  - fan_only
card_mod:
  style: |
    :host {
      --mush-rgb-state-climate-auto: var(--rgb-green);
      --mush-rgb-state-climate-cool: var(--rgb-blue);
      --mush-rgb-state-climate-dry: var(--rgb-amber);
      --mush-rgb-state-climate-fan-only: var(--rgb-teal);
      --mush-rgb-state-climate-heat: var(--rgb-deep-orange);
      --mush-rgb-state-climate-heat-cool: var(--rgb-green);
      --mush-rgb-state-climate-idle: var(--rgb-grey);
      --mush-rgb-state-climate-off: var(--rgb-disabled);
    }

rhysb · September 17, 2022, 11:21am

Ah, you can do that like this.

Mushroom Chip Ping animation:

Mushroom Chip Ping

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$:
      mushroom-chip$: |
        ha-card {
          animation: ping 2s ease-out infinite ;
        }
        @keyframes ping {
          0% {
            box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
          }
          100% {
            box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
          }
        }

Tim_Knowlden · September 17, 2022, 11:22am

100% @rhysb should be making his own custom dashboards or working for nabu casa!

rhysb · September 17, 2022, 11:31am

I choose to look on the bright side . Perhaps now we may get a bit of with our HA .

Vandana · September 17, 2022, 11:57am

thank you so much @rhysb

You have really helped alot.

Please tell how to have the same red ring animation effect for mushroom-entity-card

type: custom:mushroom-entity-card
entity: person.myhome
primary_info: none
secondary_info: none
layout: vertical
use_entity_picture: true

Can we change the volume steps when we press volume up or volume down (currently its 5) ?

Kindly guide.