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

dimitri.landerloos · September 28, 2023, 3:57pm

Hopefully you can see just from this

square: false
columns: 2
type: grid
cards:
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          box-shadow: 0 0 10px 5px rgb{{state_attr('light.office_desk_lamp','rgb_color')}};
        }
    cards:
      - type: custom:mushroom-template-card
        entity: light.office_desk_lamp
        primary: Garten
        secondary: |-
          {% if is_state(entity, 'off') %}
            ausgeschaltet
          {% elif is_state(entity, 'on') %}
            {{ states('sensor.anzahl_lampen_garten_eingeschaltet') }} eingeschaltet
          {% else %}
            nicht verfügbar
          {% endif %}
        icon: hue:bulb-group-pillar-turaco-short-tall
        icon_color: '{{ state_attr(entity, ''rgb_color'') }}'
        layout: vertical
        hold_action:
          action: more-info
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                align-items: start;
                padding-bottom: 10px;
              }
              .secondary {
                  font-weight: 400 !important;
            mushroom-shape-icon$: |
              .shape {
                margin-right: 140px;
                margin-top: 20px;
                --shape-color: none !important;
                --icon-size: 30px;
              }
            .: |
              ha-card {
                height: 110px !important;
                width: 200px;
                --card-secondary-font-size: 13px;
              }
              ha-state-icon {
              --icon-symbol-size: 30px;
              }
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - entity: light.office_desk_lamp
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: none
              entity: light.office_desk_lamp
              layout: vertical
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
              primary: ''
              multiline_secondary: false
              fill_container: false
              card_mod:
                style:
                  mushroom-shape-icon$: |
                    .shape {
                    --icon-size: 35px; 
                      /* Radial progress bar */
                      background: radial-gradient(var(--card-background-color) 60%, 
                                                  transparent calc(60% + 1px)), 
                                  conic-gradient(var(--icon-color) {{ (state_attr(config.entity,'brightness') | int / 255 * 100)| round(0) }}% 0%, 
                                                  var(--card-background-color) 0% 100%);
                      --icon-symbol-size: 21px; 
                      --shape-color: none !important;
                    }
                    .shape:after {

                      /* Add back icon shape */
                      content: "";
                      position: absolute;
                      border-radius: var(--icon-border-radius);
                      background: var(--shape-color);
                      content: "{{ (state_attr(config.entity, 'brightness') | int / 255 * 100)| round(0) }}%";
                      font-weight: light;
                      font-size: 10px;
                    }
                  .: |
                    ha-card {
                      /* Center card on row */
                      width: fit-content;
                      left: 40px;
                      top: 5px;
                      --ha-card-background: none;
                      --ha-card-box-shadow: none;
                      --ha-card-border-width: 0;
                      /* Make card non-responsive to select and pointer */
                      user-select: none;
                      pointer-events: none;
                    }
          - type: conditional
            conditions:
              - entity: light.office_desk_lamp
                state: 'on'
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: light.office_desk_lamp
                  double_tap_action:
                    action: none
                  tap_action:
                    action: more-info
                  hold_action:
                    action: none
                  icon: mdi:dots-vertical
                  content_info: none
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    margin: 5px 0px 0px 50px;
                    width: 44px;
                    border-radius: 100px !important;
                    --chip-border-width: 0px;
                  }

Marc_de · September 28, 2023, 4:04pm

thank you so much

Nettuno69 · September 28, 2023, 5:03pm

Great suggestion but, I would like to do just one color… is that possible?

dimitri.landerloos · September 28, 2023, 5:14pm

easiest way is to put the chip card in a stack in card like this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    alignment: justify
    chips:
      - type: entity
        entity: person.dimitri_landerloos
        use_entity_picture: true
        card_mod:
          style: |
            ha-card {
              --chip-border-radius: 0;
            }
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              content:
                type: map
                entities:
                  - entity: person.bologni
                  - entity: person.elena
                dark_mode: false
                hours_to_show: 2
                class: border
                style:
                  .: |
                    ha-card {
                      border: solid 1px var(--primary-color);
                      border-radius: 25px;
                    }
      - type: entity
        entity: person.dimitri_landerloos
        use_entity_picture: true
        card_mod:
          style: |
            ha-card {
    
              --chip-border-radius: 0;
            }
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              content:
                type: map
                entities:
                  - entity: person.bologni
                  - entity: person.elena
                dark_mode: false
                hours_to_show: 2
                class: border
                style:
                  .: |
                    ha-card {
                      border: solid 1px var(--primary-color);
                      border-radius: 25px;
                    }
      - type: weather
        card_mod:
          style: |
            ha-card {
                margin-bottom: auto
              --chip-box-shadow: 12;
              --chip-spacing: 150;
              --chip-icon-size: 0.8em;
              --chip-border-radius: 0;
            }
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              content:
                type: weather-forecast
                entity: weather.home
                class: border
                style:
                  .: |
                    ha-card {
                      border: solid 1px var(--primary-color);
                      border-radius: 25px;
    
                    }
        entity: weather.home
        show_temperature: false
        show_conditions: true

you might need to remove borders and box shadow from each chip too like this:

      - type: entity
        entity: person.dimitri_landerloos
        use_entity_picture: true
        card_mod:
          style: |
            ha-card {
              --chip-border-radius: 0;
              border: none !important;
              box-shadow: none !important;
            }

VietNgoc · September 28, 2023, 6:41pm

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: rgb(255,255,255);
    }
card:
  type: custom:mushroom-chips-card
  alignment: justify
  chips:
    - type: entity
      ...
      ...
      ...
      ...

dimitri.landerloos · September 28, 2023, 6:46pm

You are missing the custom font for material icons:

kbrown01 · September 28, 2023, 9:08pm

Here’s an interesting one, just for kicks.
Make your speaker animation dance faster with the volume level:

      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              perspective: 7px;
            }
          .: |
            ha-state-icon {
              {% if is_state(config.entity,'on') %}
                {% set speed = state_attr(config.entity,'volume_level') %}
                {% set animation = (1.25 - 2*speed) %}
                animation: music {{animation}}s ease-in-out infinite alternate;
                transform-origin: 50% 100%
              {% 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); }
            }

dancing

I am sure there is a better formula, just need to figure that out

schumi2004 · September 28, 2023, 9:08pm

I need some assistance.

I’m playing with a header with chip cards and a wobling icon, that works.
But how can i at the same time reduce height using this piece of code?

card_mod:
  style: |
    ha-card {
      margin-bottom: -20px;
      margin-top: -10px;
    }

This is the card i want to adjust height for, removed some code to keep overview.

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: conditional
        conditions:
          - entity: input_boolean.vaatwasser
            state: 'on'
        chip:
          type: template
          entity: input_boolean.vaatwasser
          icon: mdi:dishwasher
          icon_color: light-blue
          content: |
            {{ states('sensor.dishwasher_remaining_time') }}
          card-mod: null
          tap_action:
            action: none
          style: |
            :host {
              --ha-card-background: var(--card-background-color);
            }        
    card_mod:
      style:
        mushroom-conditional-chip:nth-child(2):
          mushroom-template-chip$: |
            ha-state-icon {
                 animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
                 transform-origin: 50% 75%;
               }
               @keyframes bounce {
                 0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
                 40% { transform: translateY(-1.2px) rotate(5deg); } 
                 60% { transform: translateY(-1.1px) rotate(-4deg); } 
               } 
               @keyframes wash {
                 50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
               }

I tried placing the code for height on several places already but everytime i lose the animation.

dimitri.landerloos · September 28, 2023, 9:39pm

untested, but should work.

using .: | resets you back to style, but keep it mind it needs to be placed in the same indendation as any other entry under style:

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: conditional
        conditions:
          - entity: input_boolean.vaatwasser
            state: 'on'
        chip:
          type: template
          entity: input_boolean.vaatwasser
          icon: mdi:dishwasher
          icon_color: light-blue
          content: |
            {{ states('sensor.dishwasher_remaining_time') }}
          card-mod: null
          tap_action:
            action: none
          style: |
            :host {
              --ha-card-background: var(--card-background-color);
            }        
    card_mod:
      style:
        mushroom-conditional-chip:nth-child(2):
          mushroom-template-chip$: |
            ha-state-icon {
              animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
              transform-origin: 50% 75%;
            }
            @keyframes bounce {
              0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
              40% { transform: translateY(-1.2px) rotate(5deg); } 
              60% { transform: translateY(-1.1px) rotate(-4deg); } 
            } 
            @keyframes wash {
              50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
            }
        .: |
          ha-card {
            margin-bottom: -20px;
            margin-top: -10px;
          }

schumi2004 · September 28, 2023, 9:41pm

Thanks (it works)
Didn’t thought it was that easy.

dimitri.landerloos · September 28, 2023, 9:49pm

Sure, you could just do this instead:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        perspective: 7px;
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity,'on') %}
          animation: music {{1.25 - 2 * state_attr(config.entity,'volume_level') }}s ease-in-out infinite alternate;
          transform-origin: 50% 100%
        {% 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); }
      }

kbrown01 · September 28, 2023, 9:50pm

Of course! I was merely testing as I had a few issues but that is the right answer!
Now, what formula gives the most pleasing visual is the key. It’s a little more than straight line for sure, but I suspect it could vary by people’s implementations … you turn up my stereo to 70% and you can hear it for two miles.

Of course

{{1.25 - 2 * state_attr(config.entity,'volume_level') }}

Is not going to work for anything above 1.25/2 = 62.5% volume … I just have not thought it through. I have one implementation that just does graduations and that is OK, but I was hoping not to have to do it that way.

dimitri.landerloos · September 28, 2023, 10:04pm

Well let me know what the fastest speed you think it should be is, and what the slowest speed (before off) you think it should be, and illl see if can come up with a solution

kbrown01 · September 28, 2023, 10:12pm

OK.

Should be about 5s at 0% volume
Scale up to 70%
At 70% I think no more than 0.35s

At the moment, I am happy with this for my stereo:

animation: music {{5 - 7 * state_attr(config.entity,'volume_level') }}s ease-in-out infinite alternate;

schumi2004 · September 28, 2023, 10:24pm

Mmmmm something strange happens on my mobile.

It works perfect in browser but on my mobile the diswasher chip shifts down when active.
Does is have something to do with animation maybe?

dimitri.landerloos · September 28, 2023, 10:36pm

Have this issue too when targeting conditional chips.

what i did instead was ditch the conditional chip and used the condition in css with card mod instead like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    double_tap_action:
      action: none
    entity: sensor.washing_machine_washer_job_state
    icon: |-
      {% if states('sensor.washing_machine_washer_job_state') == 'drying' %}
        mdi:tumble-dryer
      {% else %}
        mdi:washing-machine
      {% endif %}
    icon_color: >-
      {% if states('sensor.washing_machine_washer_job_state') == '' %}
        #5bc779
      {% elif states('sensor.washing_machine_washer_job_state') == 'wash' %}
        #697fff 
      {% elif states('sensor.washing_machine_washer_job_state') == 'rinse' %} 
        #5eccff 
      {% elif states('sensor.washing_machine_washer_job_state') == 'spin' %} 
        #999c9e
      {% elif states('sensor.washing_machine_washer_job_state') == 'drying' %}
        #ff7b2e
      {% elif states('sensor.washing_machine_washer_job_state') ==
      'weightSensing'%} 
        #be9cff 
      {% elif states('sensor.washing_machine_washer_job_state') == 'finish'%}
        #5bc779
      {% endif %}
    content: |-
      {% if states('sensor.washing_machine_washer_job_state') == 'none' %}
        Finished 
      {% else %} 
          {% set ct = states('sensor.washing_machine_washer_completion_time') | as_datetime %}
          {% set final = (ct - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) %}
          {% set test = final.split('h')[0] | int %}
          {% if test == 0 %}
            {{ final.split('h')[1] }}
          {% else %}
            {{final}}
          {% endif %}
      {% endif %}
    tap_action:
      action: more-info
    hold_action:
      action: none
    card-mod: null
    style: |
      @media (prefers-color-scheme: dark) {
        ha-card {
          {% if states('sensor.washing_machine_washer_job_state') == 'none' %}

          {% elif states('sensor.washing_machine_washer_job_state') == 'wash' %}
            --chip-background: #001f5c;
          {% elif states('sensor.washing_machine_washer_job_state') == 'rinse' %}
            --chip-background: #004463;
          {% elif states('sensor.washing_machine_washer_job_state') == 'spin' %}
            --chip-background: #3d3d3d;
          {% elif states('sensor.washing_machine_washer_job_state') == 'drying' %}
            --chip-background: #3b0c0c;
          {% elif states('sensor.washing_machine_washer_job_state') == 'weightSensing' %}
            --chip-background: #42006e;
          {% elif states('sensor.washing_machine_washer_job_state') == 'finish' %}
            --chip-background: #175400;
          {% endif %}; 

        }
      } 
      @media (prefers-color-scheme: light) {
        ha-card {
          {% if states('sensor.washing_machine_washer_job_state') == 'none' %}

          {% elif states('sensor.washing_machine_washer_job_state') == 'wash' %}
            --chip-background: #b8d0ff
          {% elif states('sensor.washing_machine_washer_job_state') == 'rinse' %}
            --chip-background:#bdeaff
          {% elif states('sensor.washing_machine_washer_job_state') == 'none' %}
            --chip-background:#d6d6d6
          {% elif states('sensor.washing_machine_washer_job_state') == 'drying' %}
            --chip-background:#fccdae
          {% elif states('sensor.washing_machine_washer_job_state') == 'weightSensing' %}
            --chip-background:#d3b6f2
          {% elif states('sensor.washing_machine_washer_job_state') == 'finish' %}
            --chip-background:#d3ffc2
          {% endif %}; 

        }
      } 
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        /* washing machine */
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @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% 42%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }
    .: |
      mushroom-template-chip:nth-child(1) {
        {% if states('sensor.washing_machine_washer_job_state') == 'none' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}

        {% endif %}
      }

the key bit is this:

      mushroom-template-chip:nth-child(1) {
        {% if states('sensor.washing_machine_washer_job_state') == 'none' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}

        {% endif %}
      }

GeorgeCastanza · September 29, 2023, 7:38am

Thanks for this dimitri!

Is it possible to have it popup with multiple lights (say in a light group)?

dimitri.landerloos · September 29, 2023, 8:59am

Sure. Put the lights in a vertical stack and then put them in a pop-up card. (Requires browser mod to be installed).

Code

type: custom:mushroom-light-card
entity: light.bedroom_lights
name: Bedroom Lights
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
layout: horizontal
collapsible_controls: true
use_light_color: true
card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          flex-shrink: 1;
          flex-grow: 1;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --primary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --primary-text-color: #1a1a1a;
            {% else %}
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          flex-shrink: 1;
          flex-grow: 0;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --secondary-text-color: #3b3b3b;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --secondary-text-color: #3b3b3b;
            {% else %}
              --secondary-text-color: #c9c9c9;
            {% endif %}
          {% endif %}
        }
      .: |
        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            flex-direction: row !important;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;
        margin-right: 5px !important;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-button:nth-child(3)$: |
      :host {
        z-index: 1;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }
hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      content:
        type: vertical-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: back
                card_mod: null
                style: |
                  ha-card {
                    border: none !important;
                    box-shadow: none !important;
                    background: none !important;
                  }
          - type: custom:mushroom-light-card
            entity: light.bedroom_main_light
            name: Main Light
            show_brightness_control: true
            show_color_temp_control: true
            show_color_control: true
            layout: horizontal
            collapsible_controls: true
            use_light_color: true
            card_mod:
              style:
                mushroom-state-info$:
                  .container: |
                    .primary {
                      flex-shrink: 1;
                      flex-grow: 1;
                      {% if state_attr(config.entity, 'rgb_color') == none %}
                        {% if states(config.entity) == 'on' %}
                          --primary-text-color: #1a1a1a;
                        {% else %}

                        {% endif %}
                      {% else %}
                        {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                          --primary-text-color: #1a1a1a;
                        {% else %}
                          --primary-text-color: #fafafa;
                        {% endif %}
                      {% endif %}
                    }
                    .secondary {
                      flex-shrink: 1;
                      flex-grow: 0;
                      {% if state_attr(config.entity, 'rgb_color') == none %}
                         {% if states(config.entity) == 'on' %}
                           --secondary-text-color: #3b3b3b;
                         {% else %}

                         {% endif %}
                      {% else %}
                        {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                          --secondary-text-color: #3b3b3b;
                        {% else %}
                          --secondary-text-color: #c9c9c9;
                        {% endif %}
                      {% endif %}
                    }
                  .: |
                    .container {
                      display: flex;
                      {% if states(config.entity) == 'on' %}
                        z-index: 1;
                        flex-direction: row !important;
                        align-items: baseline;
                        pointer-events: none !important;
                        margin-left: 10px;
                        margin-right: -8px;
                      {% else %}
                      {% endif %}
                    }
                mushroom-button:nth-child(2)$: |
                  :host {
                    z-index: 1;
                    margin-right: 5px !important;
                    {% if state_attr(config.entity, 'rgb_color') == none %}
                      --bg-color: rgba(var(--rgb-disabled),0.5) !important;
                      --icon-color: #1a1a1a !important;
                    {% else %}
                      {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                        --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
                        --icon-color: #1a1a1a !important;
                      {% else %}
                        --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
                        --icon-color: #dedede !important;
                      {% endif %}
                    {% endif %}
                  }
                mushroom-button:nth-child(3)$: |
                  :host {
                    z-index: 1;
                    {% if state_attr(config.entity, 'rgb_color') == none %}
                      --bg-color: rgba(var(--rgb-disabled),0.5) !important;
                      --icon-color: #1a1a1a !important;
                    {% else %}
                      {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                        --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
                        --icon-color: #1a1a1a !important;
                      {% else %}
                        --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
                        --icon-color: #dedede !important;
                      {% endif %}
                    {% endif %}
                  }
                mushroom-light-brightness-control$:
                  mushroom-slider$: |
                    .container {
                      position: absolute;
                      flex-basis: max-content;
                      width: calc(100% - 80px);
                      left: 68px;
                      top: 18.2%
                    }
                mushroom-light-color-control$:
                  mushroom-slider$: |
                    .container {
                      position: absolute;
                      flex-basis: max-content;
                      width: calc(100% - 80px);
                      left: 68px;
                      top: 18.2%
                    }
                mushroom-light-color-temp-control$:
                  mushroom-slider$: |
                    .container {
                      position: absolute;
                      flex-basis: max-content;
                      width: calc(100% - 80px);
                      left: 68px;
                      top: 18.2%
                    }
                .: |
                  .actions {
                    display: flex;
                    flex-basis: min-content;
                    align-items: flex-end !important;
                    justify-content: flex-end !important;
                    flex-grow: 0;
                    flex-shrink: 0;
                  }
                  mushroom-state-info {
                    display: flex;
                  }
          - type: custom:mushroom-light-card
            entity: light.bedroom_chest_lamp
            name: Chest Lamp
            show_brightness_control: true
            show_color_temp_control: true
            show_color_control: true
            layout: horizontal
            collapsible_controls: true
            use_light_color: true
            card_mod:
              style:
                mushroom-state-info$:
                  .container: |
                    .primary {
                      flex-shrink: 1;
                      flex-grow: 1;
                      {% if state_attr(config.entity, 'rgb_color') == none %}
                        {% if states(config.entity) == 'on' %}
                          --primary-text-color: #1a1a1a;
                        {% else %}

                        {% endif %}
                      {% else %}
                        {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                          --primary-text-color: #1a1a1a;
                        {% else %}
                          --primary-text-color: #fafafa;
                        {% endif %}
                      {% endif %}
                    }
                    .secondary {
                      flex-shrink: 1;
                      flex-grow: 0;
                      {% if state_attr(config.entity, 'rgb_color') == none %}
                         {% if states(config.entity) == 'on' %}
                           --secondary-text-color: #3b3b3b;
                         {% else %}

                         {% endif %}
                      {% else %}
                        {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                          --secondary-text-color: #3b3b3b;
                        {% else %}
                          --secondary-text-color: #c9c9c9;
                        {% endif %}
                      {% endif %}
                    }
                  .: |
                    .container {
                      display: flex;
                      {% if states(config.entity) == 'on' %}
                        z-index: 1;
                        flex-direction: row !important;
                        align-items: baseline;
                        pointer-events: none !important;
                        margin-left: 10px;
                        margin-right: -8px;
                      {% else %}
                      {% endif %}
                    }
                mushroom-button:nth-child(2)$: |
                  :host {
                    z-index: 1;
                    margin-right: 5px !important;
                    {% if state_attr(config.entity, 'rgb_color') == none %}
                      --bg-color: rgba(var(--rgb-disabled),0.5) !important;
                      --icon-color: #1a1a1a !important;
                    {% else %}
                      {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                        --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
                        --icon-color: #1a1a1a !important;
                      {% else %}
                        --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
                        --icon-color: #dedede !important;
                      {% endif %}
                    {% endif %}
                  }
                mushroom-button:nth-child(3)$: |
                  :host {
                    z-index: 1;
                    {% if state_attr(config.entity, 'rgb_color') == none %}
                      --bg-color: rgba(var(--rgb-disabled),0.5) !important;
                      --icon-color: #1a1a1a !important;
                    {% else %}
                      {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
                        --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
                        --icon-color: #1a1a1a !important;
                      {% else %}
                        --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
                        --icon-color: #dedede !important;
                      {% endif %}
                    {% endif %}
                  }
                mushroom-light-brightness-control$:
                  mushroom-slider$: |
                    .container {
                      position: absolute;
                      flex-basis: max-content;
                      width: calc(100% - 80px);
                      left: 68px;
                      top: 18.2%
                    }
                mushroom-light-color-control$:
                  mushroom-slider$: |
                    .container {
                      position: absolute;
                      flex-basis: max-content;
                      width: calc(100% - 80px);
                      left: 68px;
                      top: 18.2%
                    }
                mushroom-light-color-temp-control$:
                  mushroom-slider$: |
                    .container {
                      position: absolute;
                      flex-basis: max-content;
                      width: calc(100% - 80px);
                      left: 68px;
                      top: 18.2%
                    }
                .: |
                  .actions {
                    display: flex;
                    flex-basis: min-content;
                    align-items: flex-end !important;
                    justify-content: flex-end !important;
                    flex-grow: 0;
                    flex-shrink: 0;
                  }
                  mushroom-state-info {
                    display: flex;
                  }

dimitri.landerloos · September 29, 2023, 11:57am

Here is a proper solution that allows you to set your minimum and maximums for each thing to what you like. it is not short, but it allows the most flexibility

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        perspective: 7px;
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity,'on') %}
          {% set animation_sec_min = 0.35 %}
          {% set animation_sec_max = 5 %}
          {% set vol_min = 0 %}
          {% set vol_max = 0.7 %}
          {% if state_attr(config.entity,'volume_level') > vol_max %}
            {% set input_value = vol_max %}
          {% else %}
            {% set input_value = state_attr(config.entity,'volume_level') %}
          {% endif %}
          {% set output_value = (input_value - vol_max) / (vol_min - vol_max) * (animation_sec_max - animation_sec_min) + animation_sec_min %}
          animation: music {{output_value}}s ease-in-out infinite alternate;
        {% 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); }
      }

for some people they may need to use this instead for the check to see if media player is on:

        {% if is_state(config.entity,'playing') %}

This does assume that a linear relationship between audio level and animation speed is what you want. but this is the easiest. if it isnt linear it will start to get a bit more difficult with the algebra

you could of course also just do this instead, but makes it less intuitive what values to change and where

{% if is_state(config.entity,'on') %}
  {% if state_attr(config.entity,'volume_level') > 0.7 %}
     animation: music {{(0.7 - 0.7) / (0 - 0.7) * (5 - 0.35) + 0.35}}s ease-in-out infinite alternate;
  {% else %}
     animation: music {{(state_attr(config.entity,'volume_level') - 0.7) / (0 - 0.7) * (5 - 0.35) + 0.35}}s ease-in-out infinite alternate;
  {% endif %}
{% endif %}

0tto0o · September 29, 2023, 12:35pm

@dimitri.landerloos

Hi Dimitri: Can I ask, how did you set up which batteries will be shown?