Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Sorry but that didnā€™t work either.

Posting my whole card yaml for reference.

It works when i post your code in a single card, but not when i add it to my code. :stuck_out_tongue:

square: false
columns: 2
type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.verisure_rv_stua_temp
    icon: mdi:television
    icon_color: blue
    name: Stua
    tap_action:
      action: false
    hold_action:
      action: navigate
      navigation_path: /lovelace-panel/stua
  - type: custom:mushroom-entity-card
    entity: sensor.aqara_multisensor_kjokkenet_temp
    icon: mdi:silverware-fork-knife
    icon_color: purple
    name: KjĆøkkenet
    tap_action:
      action: false
    hold_action:
      action: navigate
      navigation_path: /lovelace-panel/kjokken
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |-
          {% if is_state(config.entity, 'on') %}
            mdi:radiator
          {% else %}
            mdi:radiator-off
          {% endif %}
        entity: switch.hue_kontakt_stua_1
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          red
          {% else %}
          blue
          {% endif %}
        tap_action:
          action: more-info
      - type: light
        entity: light.stua_uten_stuebordlys_dz
        icon: mdi:lamp-outline
        content_info: none
        tap_action:
          action: toggle
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:mushroom
            icon_color: red
            entity: binary_sensor.aqara_motion_stua_motion_1
        card_mod:
          style:
            mushroom-template-chip:nth-child(2)$: |
              ha-icon {
                animation: wink 4s ease-in-out infinite;
              }
              @keyframes wink {
                0%, 100% { transform: scale(1, 1); }
                19% { transform: scale(1.05, 0.6); }
                20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
                25% { transform: scale(1, 1); }
                28% { transform: scale(0.95, 1.05); }
                30% { clip-path: inset(0 0 0 0); }
              }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |-
          {% if is_state(config.entity, 'heat') %}
            mdi:radiator
          {% else %}
            mdi:radiator-off
          {% endif %}
        entity: climate.mill_ovn_kjokkenet
        icon_color: |-
          {% if is_state(config.entity, 'heat') %}
          red
          {% else %}
          blue
          {% endif %}
        tap_action:
          action: more-info
      - type: light
        entity: light.taklyset_pa_kjokken
        icon: mdi:ceiling-light-outline
        content_info: none
        tap_action:
          action: toggle
      - type: light
        entity: light.kjokkenbenken
        content_info: none
        icon: hue:lightstrip
        tap_action:
          action: toggle
      - type: template
        entity: switch.aqara_kontakt_kjokkenet_1
        content_info: none
        icon: |-
          {% if is_state(config.entity, 'on') %}
            hue:plug
          {% else %}
            hue:plug
          {% endif %}
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          green
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: toggle
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          margin-top: -10px;

Your indentation is incorrect. Chip card_mod needs to be moved left to align with chips:.

Whatever i change i cant seem to figure it out, it looks aligned correctly but there might be something im overlooking or dont understand. :stuck_out_tongue: Thank you for your time though :slight_smile:

Hello, how do you create entity: media_player.currently_playing ?
thank you

Have a look here:

1 Like

Try like this:

square: false
columns: 2
type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.verisure_rv_stua_temp
    icon: mdi:television
    icon_color: blue
    name: Stua
    tap_action:
      action: false
    hold_action:
      action: navigate
      navigation_path: /lovelace-panel/stua
  - type: custom:mushroom-entity-card
    entity: sensor.aqara_multisensor_kjokkenet_temp
    icon: mdi:silverware-fork-knife
    icon_color: purple
    name: KjĆøkkenet
    tap_action:
      action: false
    hold_action:
      action: navigate
      navigation_path: /lovelace-panel/kjokken
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |-
          {% if is_state(config.entity, 'on') %}
            mdi:radiator
          {% else %}
            mdi:radiator-off
          {% endif %}
        entity: switch.hue_kontakt_stua_1
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          red
          {% else %}
          blue
          {% endif %}
        tap_action:
          action: more-info
      - type: light
        entity: light.stua_uten_stuebordlys_dz
        icon: mdi:lamp-outline
        content_info: none
        tap_action:
          action: toggle
      - type: template
        icon: mdi:eye
        icon_color: red
        entity: binary_sensor.aqara_motion_stua_motion_1
    card_mod:
      style:
        mushroom-template-chip:nth-child(3)$: |
          ha-icon {
            {% if is_state('binary_sensor.aqara_motion_stua_motion_1', 'on') %}
              animation: wink 4s ease-in-out infinite;
            {% endif %}
          }
          @keyframes wink {
            0%, 100% { transform: scale(1, 1); }
            19% { transform: scale(1.05, 0.6); }
            20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
            25% { transform: scale(1, 1); }
            28% { transform: scale(0.95, 1.05); }
            30% { clip-path: inset(0 0 0 0); }
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |-
          {% if is_state(config.entity, 'heat') %}
            mdi:radiator
          {% else %}
            mdi:radiator-off
          {% endif %}
        entity: climate.mill_ovn_kjokkenet
        icon_color: |-
          {% if is_state(config.entity, 'heat') %}
          red
          {% else %}
          blue
          {% endif %}
        tap_action:
          action: more-info
      - type: light
        entity: light.taklyset_pa_kjokken
        icon: mdi:ceiling-light-outline
        content_info: none
        tap_action:
          action: toggle
      - type: light
        entity: light.kjokkenbenken
        content_info: none
        icon: hue:lightstrip
        tap_action:
          action: toggle
      - type: template
        entity: switch.aqara_kontakt_kjokkenet_1
        content_info: none
        icon: |-
          {% if is_state(config.entity, 'on') %}
            hue:plug
          {% else %}
            hue:plug
          {% endif %}
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          green
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: toggle
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          margin-top: -10px;
        )

Mobile version:

Very simple request here: How/what am i missing to move the slider below the temperature and color button?

Use Case: On mobile the slider is too small so moving the slider below and not next to will give more access room.

Code below, thanks in advance!

Also side note - is my spacing off? Any extra help on aligning the titles center?

square: false
columns: 2
type: grid
cards:
  - type: conditional
    conditions:
      - entity: light.lr_light_group
        state_not: unavailable
    card:
      type: custom:stack-in-card
      cards:
        - type: custom:layout-card
          layout_type: custom:grid-layout
          layout:
            grid-template-columns: auto 42px
            margin: '-4px -4px -8px -4px;'
          cards:
            - type: custom:mushroom-light-card
              entity: light.lr_light_group
              name: 'All Living Room Lights '
              show_brightness_control: true
              use_light_color: true
              show_color_control: true
              show_color_temp_control: true
              icon: mdi:sofa-outline
              layout: vertical
              hold_action:
                action: toggle
              tap_action:
                action: fire-dom-event
                browser_mod:
                  service: browser_mod.popup
                  data:
                    title: All Lights
                    content:
                      type: custom:stack-in-card
                      cards:
                        - type: custom:mushroom-light-card
                          entity: light.lr_couch_lightbulb
                          name: 'Couch Lightbulb '
                          show_brightness_control: true
                          use_light_color: true
                          show_color_control: true
                          show_color_temp_control: true
                          collapsible_controls: true
                          icon: mdi:sofa
                          tap_action:
                            action: toggle
                          card_mod:
                            style: |
                              ha-card {
                                padding: 8px 24px !important;
                              }
                        - type: custom:mushroom-light-card
                          entity: light.lr_porch_lightbulb
                          name: Porch Lightbulb
                          show_brightness_control: true
                          use_light_color: true
                          show_color_control: true
                          show_color_temp_control: true
                          collapsible_controls: true
                          icon: mdi:outdoor-lamp
                          tap_action:
                            action: toggle
                          card_mod:
                            style: |
                              ha-card {
                                padding: 8px 24px !important;
                              }
                        - type: custom:mushroom-light-card
                          entity: light.lr_small_couch_lightbulb
                          name: 'Small Couch Lightbulb '
                          show_brightness_control: true
                          use_light_color: true
                          show_color_control: true
                          show_color_temp_control: true
                          collapsible_controls: true
                          icon: mdi:sofa-single-outline
                          tap_action:
                            action: toggle
                          card_mod:
                            style: |
                              ha-card {
                                padding: 8px 24px !important;
                              }
                        - type: custom:mushroom-light-card
                          entity: light.lr_small_porch_lightbulb
                          name: 'Small Porch Lightbulb '
                          show_brightness_control: true
                          use_light_color: true
                          show_color_control: true
                          show_color_temp_control: true
                          collapsible_controls: true
                          icon: mdi:coach-lamp
                          tap_action:
                            action: toggle
                          card_mod:
                            style: |
                              ha-card {
                                padding: 8px 24px !important;
                              }
                        - type: custom:mushroom-light-card
                          entity: light.lr_tv_light_bars
                          name: TV Light Bars
                          show_brightness_control: true
                          use_light_color: true
                          show_color_control: true
                          show_color_temp_control: true
                          collapsible_controls: true
                          icon: mdi:led-strip
                          tap_action:
                            action: toggle
                          card_mod:
                            style: |
                              ha-card {
                                padding: 8px 24px !important;
                              }
                    layout: vertical
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          --ha-card-box-shadow: 0px;
                        }
  - type: custom:stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: auto 42px
          margin: '-4px -4px -8px -4px;'
        cards:
          - type: custom:mushroom-entity-card
            entity: switch.lr_switch_group
            name: 'All Living Room Switches '
            show_brightness_control: true
            use_light_color: true
            icon_color: blue
            icon: mdi:sofa-single
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  background: none;
                  --ha-card-box-shadow: 0px;
                }
            hold_action:
              action: toggle
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: All Living Room Switches
                  content:
                    type: grid
                    square: false
                    columns: 2
                    cards:
                      - type: custom:mushroom-entity-card
                        entity: switch.lr_couch_light
                        name: 'Couch Light '
                        icon: mdi:sofa
                        layout: vertical
                        tap_action:
                          action: toggle
                      - type: custom:mushroom-entity-card
                        entity: switch.lr_porch_light_switch
                        name: Porch Light
                        icon: mdi:outdoor-lamp
                        layout: vertical
                        tap_action:
                          action: toggle
                      - type: custom:mushroom-entity-card
                        entity: switch.lr_tv
                        name: 'TV '
                        icon: mdi:television-box
                        layout: vertical
                        icon_type: icon
                        tap_action:
                          action: toggle
                      - type: custom:mushroom-entity-card
                        entity: switch.lr_light_bars
                        name: Light Bars
                        layout: vertical
                        icon: mdi:led-strip
                        tap_action:
                          action: toggle
                      - type: custom:mushroom-entity-card
                        entity: switch.lr_vinyl_player
                        name: Vinyl Player
                        icon: mdi:album
                        layout: vertical
                        tap_action:
                          action: toggle
                      - type: custom:mushroom-entity-card
                        entity: switch.lr_video_games
                        name: Video Games / Air Purifer
                        icon: mdi:video-input-component
                        layout: vertical
                        tap_action:
                          action: toggle
                      - type: conditional
                        conditions:
                          - entity: fan.cr_air_purifier
                            state_not: unavailable
                        card:
                          type: custom:mushroom-fan-card
                          entity: fan.cr_air_purifier
                          icon_animation: true
                          name: 'Air Purifier Fan '
                          icon: mdi:fan
                          layout: vertical
                          secondary_info: state
                          icon_type: entity-picture
                          show_percentage_control: true
                          show_oscillate_control: false
                          collapsible_controls: true
                          tap_action:
                            action: toggle
                          hold_action:
                            action: more-info

Wow thanks :smiley:

Is there any way to remove the background of the chips, they are a little diffrent from the other chips. (see image below)

image

2 Likes

Maybe doing it like i have done can help you save space? Put the switch in the light card.
Im also building a mobile dashboard and are all into saving space, but keep the availibility of controls. :smiley:

image

image

Hi all,

on the animated icons on the chips cards: Iā€™m struggling to get the animations working in a chip as well. Iā€™m using a conditional to display the chips only when the referring entity is turned on.

I would love to animate these chips as well. My dryer and washing-machine should be displayed on when running and the chip should be animated. Right now, I get a black chip (should be amber) and no animation.

Hereā€™s may complete card for reference. Thanx for any push in the right directionā€¦ :wink:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Flur/HWR
    secondary: '{{ states(''sensor.temperature_44'') |  round (1) }} C'
    icon: mdi:door
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: call-service
      service: light.toggle
      service_data: {}
      target:
        entity_id: light.flur_unten
    icon_color: deep-orange
    hold_action:
      action: navigate
      navigation_path: flur
    double_tap_action:
      action: none
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 56px;
          margin-left: -18px !important;
        }
        :host([dark-mode]) {
          background-blend-mode: darken;
        }
        :host {
          background-image: url('/local/flur.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
          background-size: 50% 100%;
          background-position: right;
          background-repeat: no-repeat;
          background-blend-mode: lighten;
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
      - type: conditional
        conditions:
          - entity: light.flur_unten
            state: 'on'
        chip:
          type: entity
          entity: light.flur_unten
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.flur_unten
          content_info: none
          icon: mdi:lamp
      - type: conditional
        conditions:
          - entity: light.flur_oben
            state: 'on'
        chip:
          type: entity
          entity: light.flur_oben
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.flur_oben
          content_info: none
          icon: mdi:ceiling-light
      - type: conditional
        conditions:
          - entity: light.licht_hwr
            state: 'on'
        chip:
          type: entity
          entity: light.licht_hwr
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.licht_hwr
          content_info: none
          icon: mdi:light-flood-down
      - type: conditional
        conditions:
          - entity: binary_sensor.openclose_38
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.openclose_38
          icon_color: red
          tap_action:
            action: none
          content_info: none
          icon: mdi:door-open
      - type: conditional
        conditions:
          - entity: binary_sensor.openclose_8
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.openclose_8
          icon_color: red
          tap_action:
            action: none
          content_info: none
          icon: mdi:toilet
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon_color: red
            icon: mdi:washing-machine
            entity: sensor.washing_machine
          - type: template
            icon_color: red
            icon: mdi:tumble-dryer
            entity: sensor.trockner
        card_mod:
          style:
            mushroom-template-chip:nth-child(1)$: |
              ha-icon {
                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% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
              }
            mushroom-template-chip:nth-child(2)$: |
              ha-icon {
                --icon-animation: shake 400ms ease-in-out infinite, drum 1s infinite;
                transform-origin: 50% 65%;
              }
              @keyframes shake {
                0%, 100% { transform: rotate(4deg); }
                50%  { transform: rotate(-4deg); }
              }
              @keyframes drum {
                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); }
              }
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          margin-right: 6px;
        }
card_mod:
  style: |
    ha-card {
      height: 92px;
      {% if is_state('light.flur_unten', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

This should get you going :slight_smile:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Flur/HWR
    secondary: '{{ states(''sensor.temperature_44'') |  round (1) }} C'
    icon: mdi:door
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: call-service
      service: light.toggle
      service_data: {}
      target:
        entity_id: light.flur_unten
    icon_color: deep-orange
    hold_action:
      action: navigate
      navigation_path: flur
    double_tap_action:
      action: none
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 56px;
          margin-left: -18px !important;
        }
        :host([dark-mode]) {
          background-blend-mode: darken;
        }
        :host {
          background-image: url('/local/flur.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
          background-size: 50% 100%;
          background-position: right;
          background-repeat: no-repeat;
          background-blend-mode: lighten;
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
      - type: conditional
        conditions:
          - entity: light.flur_unten
            state: 'on'
        chip:
          type: entity
          entity: light.flur_unten
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.flur_unten
          content_info: none
          icon: mdi:lamp
      - type: conditional
        conditions:
          - entity: light.flur_oben
            state: 'on'
        chip:
          type: entity
          entity: light.flur_oben
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.flur_oben
          content_info: none
          icon: mdi:ceiling-light
      - type: conditional
        conditions:
          - entity: light.licht_hwr
            state: 'on'
        chip:
          type: entity
          entity: light.licht_hwr
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.licht_hwr
          content_info: none
          icon: mdi:light-flood-down
      - type: conditional
        conditions:
          - entity: binary_sensor.openclose_38
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.openclose_38
          icon_color: red
          tap_action:
            action: none
          content_info: none
          icon: mdi:door-open
      - type: conditional
        conditions:
          - entity: binary_sensor.openclose_8
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.openclose_8
          icon_color: red
          tap_action:
            action: none
          content_info: none
          icon: mdi:toilet
      - type: template
        icon_color: red
        icon: mdi:washing-machine
        entity: sensor.washing_machine
      - type: template
        icon_color: red
        icon: mdi:tumble-dryer
        entity: sensor.trockner
    alignment: end
    card_mod:
      style:
        mushroom-template-chip:nth-child(7)$: |
          ha-icon {
            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% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
          }
        mushroom-template-chip:nth-child(8)$: |
          ha-icon {
            animation: shake 400ms ease-in-out infinite, drum 1s infinite;
            transform-origin: 50% 65%;
          }
          @keyframes shake {
            0%, 100% { transform: rotate(4deg); }
            50%  { transform: rotate(-4deg); }
          }
          @keyframes drum {
            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 {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
            margin-right: 6px;
          }
card_mod:
  style: |
    ha-card {
      height: 92px;
      {% if is_state('light.flur_unten', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }
2 Likes

Yes, just like this:

    card_mod:
      style:
        mushroom-template-chip:nth-child(3)$: |
          ha-icon {
            {% if is_state('binary_sensor.aqara_motion_stua_motion_1', 'on') %}
              animation: wink 4s ease-in-out infinite;
            {% endif %}
          }
          @keyframes wink {
            0%, 100% { transform: scale(1, 1); }
            19% { transform: scale(1.05, 0.6); }
            20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
            25% { transform: scale(1, 1); }
            28% { transform: scale(0.95, 1.05); }
            30% { clip-path: inset(0 0 0 0); }
          }
        .: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
            margin-top: -10px;
          )
2 Likes

@rhysb

Huge thanks for all the animations you posted - truly inspiring stuff!

I do have one question, for the washing machine animation, is it possible to rotate just the ā€˜drumā€™ when using the MDI icons ?
Itā€™s something Iā€™ve been trying to do, and looking at your code it seems that clip allows selecting a path, but Iā€™m not sure if that can somehow be combined with transform: rotate so it spins?

1 Like

These animations are amazing! Thank you so much :grinning:
I would appreciate to see an animation for ā€œpartlycloudyā€. Thanks!

1 Like

anyone knows how i can move the navbar to the bottom?

This did the trick AND I think I finally understood the logic behind the chip templates as well. Amazing! THANK YOU!

1 Like

Itā€™s a bit hacky, but Iā€™ve added one for you.

1 Like

Added one for you.

Can you post the code? I like the idea!

@rhysb Can this be done? Not too sure on where the slider is located here and think card-mod is the way to go?

    type: custom:stack-in-card
      cards:
        - type: custom:layout-card
          layout_type: custom:grid-layout
          layout:
            grid-template-columns: auto 42px
            margin: '-4px -4px -8px -4px;'
          cards:
            - type: custom:mushroom-light-card
              entity: light.lr_light_group
              name: 'All Living Room Lights '
              show_brightness_control: true
              use_light_color: true
              show_color_control: true
              show_color_temp_control: true
              icon: mdi:sofa-outline
              layout: vertical