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

Hey,

within a template card it should work like this

type: custom:mushroom-template-card
    primary: Info/Aktuelles
    icon: mdi:information-outline
    icon_color: '#FF8C00'
    card_mod:
      style: |
        ha-card {
          --icon-size: 48px;
        }
1 Like

more of a design question.

What default colours do people use in dark mode for

Off
On
Heating Off
Auto/Idle
Heating ON

Trying to be consistent but not found anything that works and its the Auto/Idle thats throwing me as, its technically off as not using anything but cant keep it Grey as its in a different state

I was using

Off Grey
On Green
Heating Off Grey
Auto/Idle Amber
Heating On Red

Just wanting other peoples thoughts ?

Thanks

Hint: try padding-bottom: 0px !important; :grin:

1 Like

Yes:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: conditional
    conditions:
      - entity: switch.fungi
        state: 'on'
    chip:
      type: template
      icon: mdi:mushroom
      icon_color: red
      card_mod:
        style: |
          .content {
            animation: spin 1s linear infinite;
          }
          @keyframes spin {
            100% { transform: rotate(360deg); }
          } 
card_mod:
  style:
    mushroom-conditional-chip:nth-child(3):
      mushroom-template-chip$: |
        ha-icon {
          animation: beat 1.3s ease-out infinite both;
          transform-origin: 50% 60%;
        }
        @keyframes beat {
          0% { transform: scale(1); }
          10% { transform: scale(1.1); }
          17% { transform: scale(1.05); }
          33% { transform: scale(1.75); }
          60% { transform: scale(1); }
        }

Thx. appreciate it.

Iā€™ve re-done my Mushroom Welcome Card to add a collapsible sticky header. Iā€™m still working on the Person and weather popups, so have just put in placeholders for now.

Mushroom Collapsible Welcome Card:

Mushroom Welcome Card

Top Sticky Card - Part 1:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: '{{ now().strftime("%A, %-d %B") }}'
        card_mod:
          style: |
            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;
            }
      - type: template
        entity: input_boolean.notifications
        icon: mdi:bell
        tap_action:
          action: toggle
        hold_action:
          action: none
        card_mod:
          style: |
            /* Notification indicator */
            ha-card:after {
              /* Turn on indicator if there is a notification */
              {% set notifications = (expand(states.group.all_lights) | selectattr('state', 'eq', 'on') | list | count)
                                   + (expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + (expand(states.group.external_doors) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + states('sensor.devices_with_low_battery') | int %}
              {% if notifications > 0 %}
                content: "";
              {% endif %}

              /* Position & style notification */
              position: absolute;
              background: rgb(var(--rgb-red));
              border-radius: 50%;
              top: 6px;
              right: 6px;
              width: 8px;
              height: 8px;
            } 
    alignment: justify
  - type: conditional
    conditions:
      - entity: input_boolean.notifications
        state: 'on'
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: alarm_control_panel.home_alarm
          icon: mdi:shield-home
          icon_color: |-
            {% set alarm_status = states(entity) %}
            {% if alarm_status == 'armed_home' %} 
              green
            {% elif alarm_status == 'disarmed' %}
              blue
            {% elif alarm_status == 'arming' %}
               yellow
            {% elif alarm_status == 'triggered' %}
               red
            {% endif %} 
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Alarm
                content:
                  type: custom:mushroom-alarm-control-panel-card
                  entity: alarm_control_panel.home_alarm
                  states:
                    - armed_home
                    - armed_away
          hold_action:
            action: none
        - type: template
          entity: lock.front_door
          icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
          icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Front Door
                content:
                  type: custom:stack-in-card
                  cards:
                    - type: custom:layout-card
                      layout_type: masonry
                      layout: {}
                      cards:
                        - type: custom:frigate-card
                          cameras:
                            - camera_entity: camera.doorbell
                              live_provider: webrtc-card
                              webrtc_card:
                                url: >-
                                  rtsp://10.10.90.10/Streaming/Channels/501/
                          dimensions:
                            aspect_ratio_mode: dynamic
                    - type: custom:mushroom-lock-card
                      entity: lock.front_door
                card_mod:
                  style: |
                    .content {
                    }
        - type: conditional
          conditions:
            - entity: group.all_lights
              state: 'on'
          chip:
            type: template
            icon: mdi:lightbulb
            entity: group.all_lights
            content: >
              {{ expand(states.group.all_lights) | selectattr('state', 'eq',
              'on') | list | count }}
            icon_color: amber
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Lights On
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.all_lights
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            show_brightness_control: true
                            layout: horizontal
                            tap_action:
                              action: toggle
                            use_light_color: true
                        - entity_id: group.all_lights
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            layout: horizontal
                            secondary_info: none
                            tap_action:
                              action: toggle
                            card_mod:
                              style: |
                                /* Style & position All Lights button */
                                ha-card {
                                  background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
                                }
                                :host {
                                  margin: 0px 0px 12px !important;
                                }
                      exclude: []
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.all_windows
              state: 'on'
          chip:
            type: template
            icon_color: blue
            icon: mdi:window-open
            entity: group.all_windows
            content: >
              {{ expand(states.group.all_windows) | selectattr('state', 'eq',
              'on') | list | count }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Windows Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.all_windows
                          state: 'on'
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.external_doors
              state: 'on'
          chip:
            type: template
            entity: group.external_doors
            content: >
              {{ expand(states.group.external_doors) | selectattr('state', 'eq',
              'on') | list | count }}
            icon_color: brown
            icon: mdi:door-open
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Windows Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.external_doors
                          state: 'on'
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            icon_color: brown
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: sensor.devices_with_low_battery
              state_not: '0'
          chip:
            type: template
            entity: sensor.devices_with_low_battery
            content: |
              {{ states(config.entity) | int }}
            icon_color: red
            icon: mdi:battery-alert
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Low Batteries
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - attributes:
                            device_class: battery
                          state: < 30
                          options:
                            type: custom:mushroom-template-card
                            primary: '{{ states(entity) }}%'
                            secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
                            icon: >
                              {% set battery_level = (states(entity) | int / 10)
                              | round(0) | int * 10 %}

                              {% if battery_level == 100 %}
                                mdi:battery
                              {% elif battery_level > 0 %}
                                mdi:battery-{{ battery_level }}
                              {% else %}
                                mdi:battery-outline
                              {% endif %}
                            icon_color: |-
                              {% set battery_level = states(entity) | int %}
                              {% if battery_level > 90 %} 
                                green
                              {% elif battery_level > 60 %}
                                light-green
                              {% elif battery_level > 50 %}
                                lime
                              {% elif battery_level > 40 %}
                                yellow
                              {% elif battery_level > 30 %}
                                amber
                              {% elif battery_level > 20 %}
                                orange
                              {% elif battery_level > 10 %}
                                deep-orange
                              {% else %}
                                red
                              {% endif %} 
                            layout: horizontal
                            tap_action:
                              action: none
                            badge_icon: >-
                              {{ 'mdi:exclamation-thick' if states(entity) | int
                              < 10 }} 
                            badge_color: red
                      exclude: null
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.water_leak
              state: 'on'
          chip:
            type: template
            icon_color: light-blue
            icon: mdi:water-alert
            tap_action:
              action: more-info
            entity: group.water_leak
            card_mod:
              style: |
                .content {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
        - type: conditional
          conditions:
            - entity: group.smoke_alarm
              state: 'on'
          chip:
            type: template
            icon_color: red
            icon: mdi:fire-alert
            tap_action:
              action: more-info
            entity: group.smoke_alarm
            card_mod:
              style: |
                .content {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
      alignment: end
      card_mod:
        style: |
          /* Set margins on notification chips */
          ha-card {
            margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
            transition: all 0s;
          }
card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;

      /* Remove gap at top of card */
      margin-top: calc(-1 * var(--mush-chip-spacing, 8px));

      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 9;
      top: 0px;
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Make fixed so element scrolls up */
      position: fixed;
      top: 0px;

      /* Adjust height when notifications visible */
      height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};

      /* Set width to match */
      width: calc(100% - var(--mush-chip-spacing, 8px));
      max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";

      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;

      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));

      /* Position card at back */
      z-index: -1;

      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.8);

      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }

Cont. in next postā€¦

78 Likes

Bottom Collapsible Card - Part 2:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto auto
      margin: 8px 4px 4px 4px;
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.rhys
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Rhys
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.rhys
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.sarah
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Sarah
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.sarah
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.elijah
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Elijah
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.elijah
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.michaela
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Michaela
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.michaela
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
        alignment: end
        card_mod:
          style: |
            ha-card { 
              /* Overlap avatar Chips */
              --chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));

              /* Set size of border around Chips */
              --chip-avatar-padding: 2px;

              /* Reduce width to fit Chips & allow max space for weather */
              width: fit-content;
              transition: all 0s;
            }
      - type: custom:mushroom-template-card
        primary: '{{ state_attr(entity, ''temperature'') | round(1) }} Ā°C'
        secondary: >-
          {% set condition = state_attr(entity, 'forecast')[0]['conditions'] %}
          {% set intensity = states('sensor.unsworth_heights_rain_intensity') %}

          {% if intensity != 'None' %}
            {% set condition = intensity + ' Rain' %}
          {% endif %}

          {{ condition }}
        icon: ' '
        entity: weather.weatherflow_weather_hourly
        picture: >-
          {% set condition = states(entity)  %}

          {% set intensity = states('sensor.weatherflow_rain_intensity') |
          replace(" ", "-") | lower %}

          {% if condition == 'partlycloudy' and is_state('sun.sun',
          'below_horizon') %}
            {% set condition = condition + '-night' %}
          {% endif %}

          {% if intensity != 'none' and condition != 'lightning' %}
            {% set condition = intensity %}
          {% endif %}

          /local/weather_icons/anim/{{ condition }}.svg
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Weather
              content:
                type: custom:layout-card
                layout_type: masonry
                layout: {}
                cards:
                  - type: custom:weather-card
                    entity: weather.weatherflow_day_based_forecast
                    number_of_forecasts: '5'
        card_mod:
          style:
            mushroom-state-info$: |
              /* Align text on the right */
              .container {
                transform: scaleX(-1);
                text-align: right;
                width: fit-content;
              }
            .: |
              ha-card {
                /* Move icon to the right */
                transform: scaleX(-1);

                /* Enlarge icon & remove circular shape */
                --icon-size: 42px;
                --icon-border-radius: 0;

                /* Style secondary text */
                --card-secondary-font-weight: normal;

                /* Remove styling from card */
                --ha-card-background: none;
                --ha-card-box-shadow: none;
                --ha-card-border-width: 0;
                padding: 0px !important;
                transition: all 0s;
              }
  - type: horizontal-stack
    cards:
      - type: custom:mod-card
        card:
          type: custom:mushroom-title-card
          title: |-
            {% set time = now().hour %}
            {% if (time >= 18) %} 
             Good Evening,
            {% elif (time >= 12) %}
             Good Afternoon,
            {% elif (time >= 5) %}
             Good Morning,
            {% else %}
             Welcome,
            {% endif %}
          subtitle: |
            {{ user }}!
          alignment: start
        card_mod:
          style:
            mushroom-title-card$: |
              /* Style greeting */
              .title {
                --title-font-size: var(--mush-title-font-size, 16px);
                --title-font-weight: var(--mush-subtitle-font-weight, light);
                color: var(--secondary-text-color) !important;
              }
              /* Style name */
              .subtitle {
                --subtitle-font-size: var(--mush-title-font-size, 24px);
                --subtitle-font-weight: var(--mush-title-font-weight, bold);
                color: var(--primary-text-color) !important;
                padding-left: 12px;
              }
              /* Set spacing around greeting */
              .header {
                --title-padding: 0px 12px 24px;
                --title-spacing: 8px;
              }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        secondary: House
        icon: mdi:home
        layout: vertical
        icon_color: blue
        tap_action:
          action: navigate
          navigation_path: house
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: Lights
        icon: mdi:lightbulb
        icon_color: amber
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: lights
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Secure
        icon: mdi:shield
        icon_color: green
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: security
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Media
        icon: mdi:speaker
        layout: vertical
        icon_color: red
        tap_action:
          action: navigate
          navigation_path: media
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Net
        icon: mdi:lan
        layout: vertical
        icon_color: cyan
        tap_action:
          action: navigate
          navigation_path: net
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }
            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
card_mod:
  style: |
    ha-card {
      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -20px;

      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);

      transition: all 0s;
    }

Iā€™ve used the new color-mix command, which is supported in Chrome and Edge.

Here are the Animated Weather Icons I have used. Based on amCharts free weather icons.

35 Likes

but if you increase the icon size, the battery indicator ring doesnt resize.

Try something like this:

type: custom:mushroom-person-card
entity: person.rhys
icon_type: entity-picture
card_mod:
  style:
    mushroom-shape-avatar$: |
      .container:before {
        content: "";
        height: 100%;
        width: 100%;
        background: radial-gradient(rgb(var(--rgb-white)) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.rhys_phone_battery_level') }}% 0%, transparent 0% 100%);
        border-radius: var(--icon-border-radius);
        position: absolute;
        -webkit-mask-image: radial-gradient(circle calc(var(--icon-size) / 2 - 0.3em) at 50% 50%, transparent 100%, black 0);
      }
    .: |
      ha-card {
        --icon-size: 72px;
      }
1 Like

Brilliantā€¦THX.

1 Like

Exactly what i searched for .

Thanks.

1 Like

Hi,
iĀ“m a bit confused why the borders of the cards are visible:


Can anyone let me know how to remove them?

change the theme to Mushroom Shadow and that will fix it on the device

1 Like

Many thanks for your help

1 Like

is it possible to share the SVG files you use as part of this? Thanks in advance and awesome work!!!

/local/weather_icons/anim/{{ condition }}.svg
1 Like

Is there something like a ā€œblankā€ card with the dimensions of a mushroom card that can be used as a ā€œfillerā€ guys?

Knew I would forget something :roll_eyes:.

Added.

1 Like

Whats the full path to put the files?

Use the Gap card from Layout Card.

2 Likes

You can put them anywhere in \config\www. I put theme here \config\www\weather_icons\anim.

1 Like