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

Guys, please tell me how to place the chip cards all in a row, how to reduce the distance between icons? I tried a couple of settings, but it doesn’t work.

image

        - type: custom:stack-in-card
          cards:
          - type: custom:mushroom-chips-card
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 0.3em;
                  --chip-icon-size: 0.6em;
                  --chip-border-width: 0;
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-border: none;
                  --chip-font-weight: normal;
                }
            alignment: justify
          - type: custom:mushroom-light-card
            entity: light.kitchen_downlights_group
            icon: phu:bulb-group-centura-round
            name: Потолочные
            secondary_info: none
            #show_brightness_control: true
            #show_color_temp_control: true
            tap_action:
              action: toggle
            double_action:
              action: none
            hold_action:
              action: more-info
            vertical: true
            card_mod:
                style: |
                  ha-card {
                    border: none !important;
                  }
                  ha-state-icon {
                    {% if is_state('light.kitchen_downlights_group','on') %}
                    animation: beat 1.3s ease-out infinite both;
                    transform-origin: 50% 80%;
                    {%- else -%}
                    {%- endif %}
                  }
                  @keyframes beat {
                    0% { transform: scale(1); }
                    10% { transform: scale(1.1); }
                    17% { transform: scale(1.05); }
                    33% { transform: scale(1.25); }
                    60% { transform: scale(1); }
                  }
                  :host {
                    --icon-size: 80px !important;
                    perspective: 900px;
                  }
                  ha-card:active {
                    transform: rotateX(25deg);
                    transform-origin: center bottom;
                    transition: 0s;
                  }
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: light.kitchen_downlights_group_normal
                content_info: none
                icon: mdi:weather-sunny
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_normal', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none
                    }
                alignment: center
              - type: template
                entity: light.kitchen_downlights_group_tv
                content_info: none
                icon: mdi:television
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_tv', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none
                    }
                alignment: center
              - type: template
                entity: light.kitchen_downlights_group_warm
                content_info: none
                icon: mdi:weather-sunset
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_warm', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none
                    }
                alignment: center
              - type: template
                entity: light.kitchen_downlights_group_midnight
                content_info: none
                icon: mdi:weather-night
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none
                    }
                alignment: center
          card_mod:
            style: |
              ha-card {
                border: none !important;
              }

Ensure you’re border: none entries have a semi colon after them and add a negative margin to the last 3 chips.

-17px appears to be the max with over lapping the other chip.

card_mod:
                  style: |
                    ha-card {
                      border: none;
                      margin-left: -17px;
                    }
2 Likes

Home Assistant TV Card

Finally, I finished and published the user manual for the television card. By the way, I’ve also opened a new YouTube channel. Soon, I’ll start posting videos on all topics related to smart homes, Home Assistant, smart living, and dashboards. You’ll be able to easily implement all the projects I’ve done.

To follow my channel click below:
Teach me Smart Life

Page Properties:

I don’t actually know from where to start. This card has tons of features.

  • Ability to control both TV and the Android TV at the same time
  • Live view. See what is playing on your Android TV screen with pictures. (Streaming services like Netflix don’t allow passthrough images due to copyrights)
  • Remote controls for Samsung TV and Android TV
  • Ability to start Hue light integration with a single click. Even the official hue integration of HA does not have this future.
  • Start Apps directly from the card (Works both on Samsung and Android TV apps)
  • See which apps are currently on
  • Media Controls for Samsung TV, Change HDMI, Switch sound between soundbar and TV, Turn on Ambient Mode and change Picture Mode
  • Show you cameras on Android TV with a click to a button
  • Switch between Android Tv and Samsung TV remotes with a single click
  • Information area about what is happening on your Android TV or Samsung TV
  • Turn on your Samsung or Android TV with a single click
  • Browse and start your favorite Netflix show straight from the card
  • All Multimedia files are included.
  • Start listening your favorite radio stations on your Android TV
  • Whatever device is active on the television screen, the remote control of that device is shown on the card. If the input on the TV screen changes, your card will also automatically switch to that card.
  • You can also launch some apps from your Android TV remote.
  • Remotes are fully customizable you can assign your own remote controls via scripts.
  • The card will show you which device is being shown on your TV screen at that exact momemnt.
  • Full installation manual available
  • Dark and White theme compatible
  • You can use your Own IR device and bring any button to your remote control. You are not only tied to the Samsung integration.

Link:

8 Likes

Amazing! Thanks! How to correctly move the entire line relative to the center? Can it move all over or spread out evenly?

image

I wanted to achieve a result with these chips so that the outer ones would be located at the edges (where the beginning and end of the line are), and in the middle two icons would be evenly spaced with the same distance between each other, and between the icon on the left and right, i.e. first and fourth.

UPD:

It looks like I was able to implement this for desktop by adding an offset to the first icon.

image

              - type: template
                entity: light.kitchen_downlights_group_normal
                content_info: none
                icon: mdi:weather-sunny
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_normal', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      margin-left: 10px;
                    }
                alignment: center
              - type: template
                entity: light.kitchen_downlights_group_tv
                content_info: none
                icon: mdi:television
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_tv', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      margin-left: -10px;
                    }
                alignment: center
              - type: template
                entity: light.kitchen_downlights_group_warm
                content_info: none
                icon: mdi:weather-sunset
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_warm', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      margin-left: -10px;
                    }
                alignment: center
              - type: template
                entity: light.kitchen_downlights_group_midnight
                content_info: none
                icon: mdi:weather-night
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      margin-left: -10px;
                    }
                alignment: center
          card_mod:
            style: |
              ha-card {
                border: none !important;
              }

Now I need to figure out how to implement a narrower design between icons for a mobile application:

As far as I remember, this can be implemented using screen media settings.

Anyone know? Also, how is the variable to change mushroom icon background?

Thanks

Use Card-Mod

Guys, I playing with @media screen and (max-width: 400px) settings, and got question, how to get smaller radius of this chips borders? At screenshot below the third icon overlaps slightly with the fourth icon, and I can’t do anything about it, since the slightest shift to the right already sends the last icon to the second line.

I just add to these four chips the next:

                    @media screen and (max-width: 400px) {
                    ha-card {
                      border: none;
                      margin-left: -21px;
                    }
                    }

…with different value from 0 at first icon to -21 at four icon.

          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: light.kitchen_downlights_group_normal
                content_info: none
                icon: mdi:weather-sunny
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_normal', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      margin-left: 10px;
                    }
                    @media screen and (max-width: 400px) {
                    ha-card {
                      border: none;
                      margin-left: -5px;
                    }
                    }
                alignment: center
              - type: template
                entity: light.kitchen_downlights_group_tv
                content_info: none
                icon: mdi:television
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_tv', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      margin-left: -10px;
                    }
                    @media screen and (max-width: 400px) {
                    ha-card {
                      border: none;
                      margin-left: -17px;
                    }
                    }
                alignment: center
              - type: template
                entity: light.kitchen_downlights_group_warm
                content_info: none
                icon: mdi:weather-sunset
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_warm', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      margin-left: -10px;
                    }
                    @media screen and (max-width: 400px) {
                    ha-card {
                      border: none;
                      margin-left: -17px;
                    }
                    }
                alignment: center
              - type: template
                entity: light.kitchen_downlights_group_midnight
                content_info: none
                icon: mdi:weather-night
                icon_color: |-
                  {% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
                    amber
                  {% else %}
                    #44739e
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      margin-left: -10px;
                    }
                    @media screen and (max-width: 400px) {
                    ha-card {
                      border: none;
                      margin-left: -17px;
                    }
                    }
                alignment: center
          card_mod:
            style: |
              ha-card {
                border: none !important;
              }

Question is removed, moved the first icon a little to the left, I hope I do everything right.

@SoulAssassin I found a simpler solution you can play around with and eliminates the need to add card mod to every chip.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: light.kitchen_downlights_group_normal
    content_info: none
    icon: mdi:weather-sunny
    icon_color: |-
      {% if is_state('light.kitchen_downlights_group_normal', 'on') %}
        amber
      {% else %}
        #44739e
      {% endif %}
    alignment: center
  - type: template
    entity: light.kitchen_downlights_group_tv
    content_info: none
    icon: mdi:television
    icon_color: |-
      {% if is_state('light.kitchen_downlights_group_tv', 'on') %}
        amber
      {% else %}
        #44739e
      {% endif %}
    alignment: center
  - type: template
    entity: light.kitchen_downlights_group_warm
    content_info: none
    icon: mdi:weather-sunset
    icon_color: |-
      {% if is_state('light.kitchen_downlights_group_warm', 'on') %}
        amber
      {% else %}
        #44739e
      {% endif %}
  - type: template
    entity: light.kitchen_downlights_group_midnight
    content_info: none
    icon: mdi:weather-night
    icon_color: |-
      {% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
        amber
      {% else %}
        #44739e
      {% endif %}
card_mod:
  style: |
    ha-card {
      border: none !important;
      --chip-spacing: -10px;
      left: 180px;
        }
      
    }
    @media screen and (max-width: 400px) {
          ha-card {
                  border: none !important;
      --chip-spacing: -10px;
      left: 140px;
          }
          }

1 Like

Not works for me. All chips is gone, maybe it’s affiliated with my main card of templating light.

Full card looks like this:

        - type: custom:stack-in-card
          cards:
          - type: custom:mushroom-template-card
            layout: vertical
            entity: light.kitchen_downlights_group
            icon: phu:bulb-group-centura-round
            icon_color: |-
                  {% if is_state('light.kitchen_downlights_group', 'on') %}
                    orange
                  {% else %}
                  {% endif %}
            primary: Потолочные
            secondary: |-
              {% if is_state('light.kitchen_downlights_group_normal', 'on') %}
                Яркий
              {% elif is_state('light.kitchen_downlights_group_tv', 'on') %}
                ТВ
              {% elif is_state('light.kitchen_downlights_group_warm', 'on') %}
                Тёплый
              {% elif is_state('light.kitchen_downlights_group_midnight', 'on') %}
                Ночник
              {% elif is_state('light.kitchen_downlights_group', 'on') 
                 and is_state('light.kitchen_downlights_group_normal', 'off')
                 and is_state('light.kitchen_downlights_group_tv', 'off')
                 and is_state('light.kitchen_downlights_group_warm', 'off')
                 and is_state('light.kitchen_downlights_group_midnight', 'off') %}
                Произвольный
              {% else %}
              {% endif %}
            tap_action:
              action: toggle
            double_action:
              action: none
            hold_action:
              action: more-info
            vertical: true
            card_mod:
                style: |
                  ha-card {
                    border: none !important;
                  }
                  ha-state-icon {
                    {% if is_state('light.kitchen_downlights_group','on') %}
                    animation: beat 1.3s ease-out infinite both;
                    transform-origin: 50% 80%;
                    {%- else -%}
                    {%- endif %}
                  }
                  @keyframes beat {
                    0% { transform: scale(1); }
                    10% { transform: scale(1.1); }
                    17% { transform: scale(1.05); }
                    33% { transform: scale(1.25); }
                    60% { transform: scale(1); }
                  }
                  :host {
                    --icon-size: 80px !important;
                    perspective: 900px;
                  }
                  ha-card:active {
                    transform: rotateX(25deg);
                    transform-origin: center bottom;
                    transition: 0s;
                  }
                  ha-card:after {
                    {% if is_state('light.kitchen_downlights_group', 'on') %}
                    content: "{{ expand('light.kitchen_downlights_group') | selectattr('state','eq','on') | list | count }}";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgb(var(--rgb-orange));
                    color: var(--card-background-color);
                    font-weight: bolder;
                    border-radius: 50%;
                    top: +15px;
                    right: +45px;
                    width: 16px;
                    height: 16px;
                    font-size: 11px;
                    {% endif %} 
                  }
                  @media screen and (max-width: 400px) {
                    ha-card:after {
                    {% if is_state('light.kitchen_downlights_group', 'on') %}
                    content: "{{ expand('light.kitchen_downlights_group') | selectattr('state','eq','on') | list | count }}";
                    position: absolute;
                    background: rgb(var(--rgb-orange));
                    color: var(--card-background-color);
                    font-weight: bolder;
                    border-radius: 50%;
                    top: +15px;
                    right: +20px;
                    width: 16px;
                    height: 16px;
                    font-size: 11px; 
                    }
                    {% endif %} 
                  }
          - type: custom:mushroom-chips-card
            chips:
              - type: conditional
                conditions:
                  - entity: light.kitchen_downlights_group
                    state: 'on'
                chip:
                  type: template
                  entity: light.kitchen_downlights_group_normal
                  content_info: none
                  icon: mdi:weather-sunny
                  icon_color: |-
                    {% if is_state('light.kitchen_downlights_group_normal', 'on') %}
                      amber
                    {% else %}
                      #44739e
                    {% endif %}
                  card_mod:
                    style: |
                      ha-card {
                        border: none;
                        margin-left: 10px;
                      }
                      @media screen and (max-width: 400px) {
                      ha-card {
                        border: none;
                        margin-left: -5px;
                      }
                      }
                  alignment: center
              - type: conditional
                conditions:
                  - entity: light.kitchen_downlights_group
                    state: 'on'
                chip:
                  type: template
                  entity: light.kitchen_downlights_group_tv
                  content_info: none
                  icon: mdi:television
                  icon_color: |-
                    {% if is_state('light.kitchen_downlights_group_tv', 'on') %}
                      amber
                    {% else %}
                      #44739e
                    {% endif %}
                  card_mod:
                    style: |
                      ha-card {
                        border: none;
                        margin-left: -10px;
                      }
                      @media screen and (max-width: 400px) {
                      ha-card {
                        border: none;
                        margin-left: -17px;
                      }
                      }
                  alignment: center
              - type: conditional
                conditions:
                  - entity: light.kitchen_downlights_group
                    state: 'on'
                chip:
                  type: template
                  entity: light.kitchen_downlights_group_warm
                  content_info: none
                  icon: mdi:weather-sunset
                  icon_color: |-
                    {% if is_state('light.kitchen_downlights_group_warm', 'on') %}
                      amber
                    {% else %}
                      #44739e
                    {% endif %}
                  card_mod:
                    style: |
                      ha-card {
                        border: none;
                        margin-left: -10px;
                      }
                      @media screen and (max-width: 400px) {
                      ha-card {
                        border: none;
                        margin-left: -17px;
                      }
                      }
                  alignment: center
              - type: conditional
                conditions:
                  - entity: light.kitchen_downlights_group
                    state: 'on'
                chip:
                  type: template
                  entity: light.kitchen_downlights_group_midnight
                  content_info: none
                  icon: mdi:weather-night
                  icon_color: |-
                    {% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
                      amber
                    {% else %}
                      #44739e
                    {% endif %}
                  card_mod:
                    style: |
                      ha-card {
                        border: none;
                        margin-left: -10px;
                      }
                      @media screen and (max-width: 400px) {
                      ha-card {
                        border: none;
                        margin-left: -17px;
                      }
                      }
                  alignment: center
          card_mod:
            style: |
              ha-card {
                border: none !important;
              }

This worked well for me…Let me know

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    layout: vertical
    entity: light.kitchen_downlights_group
    icon: phu:bulb-group-centura-round
    icon_color: |-
      {% if is_state('light.kitchen_downlights_group', 'on') %}
        orange
      {% else %}
      {% endif %}
    primary: Потолочные
    secondary: |-
      {% if is_state('light.kitchen_downlights_group_normal', 'on') %}
        Яркий
      {% elif is_state('light.kitchen_downlights_group_tv', 'on') %}
        ТВ
      {% elif is_state('light.kitchen_downlights_group_warm', 'on') %}
        Тёплый
      {% elif is_state('light.kitchen_downlights_group_midnight', 'on') %}
        Ночник
      {% elif is_state('light.kitchen_downlights_group', 'on') 
         and is_state('light.kitchen_downlights_group_normal', 'off')
         and is_state('light.kitchen_downlights_group_tv', 'off')
         and is_state('light.kitchen_downlights_group_warm', 'off')
         and is_state('light.kitchen_downlights_group_midnight', 'off') %}
        Произвольный
      {% else %}
      {% endif %}
    tap_action:
      action: toggle
    double_action:
      action: none
    hold_action:
      action: more-info
    vertical: true
    card_mod:
      style: |
        ha-card {
          border: none !important;
        }
        ha-state-icon {
          {% if is_state('light.kitchen_downlights_group','on') %}
          animation: beat 1.3s ease-out infinite both;
          transform-origin: 50% 80%;
          {%- else -%}
          {%- endif %}
        }
        @keyframes beat {
          0% { transform: scale(1); }
          10% { transform: scale(1.1); }
          17% { transform: scale(1.05); }
          33% { transform: scale(1.25); }
          60% { transform: scale(1); }
        }
        :host {
          --icon-size: 80px !important;
          perspective: 900px;
        }
        ha-card:active {
          transform: rotateX(25deg);
          transform-origin: center bottom;
          transition: 0s;
        }
        ha-card:after {
          {% if is_state('light.kitchen_downlights_group', 'on') %}
          content: "{{ expand('light.kitchen_downlights_group') | selectattr('state','eq','on') | list | count }}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgb(var(--rgb-orange));
          color: var(--card-background-color);
          font-weight: bolder;
          border-radius: 50%;
          top: +15px;
          right: +45px;
          width: 16px;
          height: 16px;
          font-size: 11px;
          {% endif %} 
        }
        @media screen and (max-width: 400px) {
          ha-card:after {
          {% if is_state('light.kitchen_downlights_group', 'on') %}
          content: "{{ expand('light.kitchen_downlights_group') | selectattr('state','eq','on') | list | count }}";
          position: absolute;
          background: rgb(var(--rgb-orange));
          color: var(--card-background-color);
          font-weight: bolder;
          border-radius: 50%;
          top: +15px;
          right: +20px;
          width: 16px;
          height: 16px;
          font-size: 11px; 
          }
          {% endif %} 
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: light.kitchen_downlights_group
            state: 'on'
        chip:
          type: template
          entity: light.kitchen_downlights_group_normal
          content_info: none
          icon: mdi:weather-sunny
          icon_color: |-
            {% if is_state('light.kitchen_downlights_group_normal', 'on') %}
              amber
            {% else %}
              #44739e
            {% endif %}
          card_mod:
            style: |
              ha-card {
                border: none;
                margin-left: 10px;
              }
              @media screen and (max-width: 400px) {
              ha-card {
                border: none;
                margin-left: -5px;
              }
              }
          alignment: center
      - type: conditional
        conditions:
          - entity: light.kitchen_downlights_group
            state: 'on'
        chip:
          type: template
          entity: light.kitchen_downlights_group_tv
          content_info: none
          icon: mdi:television
          icon_color: |-
            {% if is_state('light.kitchen_downlights_group_tv', 'on') %}
              amber
            {% else %}
              #44739e
            {% endif %}
          card_mod:
            style: |
              ha-card {
                border: none;
                margin-left: -10px;
              }
              @media screen and (max-width: 400px) {
              ha-card {
                border: none;
                margin-left: -17px;
              }
              }
          alignment: center
      - type: conditional
        conditions:
          - entity: light.kitchen_downlights_group
            state: 'on'
        chip:
          type: template
          entity: light.kitchen_downlights_group_warm
          content_info: none
          icon: mdi:weather-sunset
          icon_color: |-
            {% if is_state('light.kitchen_downlights_group_warm', 'on') %}
              amber
            {% else %}
              #44739e
            {% endif %}
          card_mod:
            style: |
              ha-card {
                border: none;
                margin-left: -10px;
              }
              @media screen and (max-width: 400px) {
              ha-card {
                border: none;
                margin-left: -17px;
              }
              }
          alignment: center
      - type: conditional
        conditions:
          - entity: light.kitchen_downlights_group
            state: 'on'
        chip:
          type: template
          entity: light.kitchen_downlights_group_midnight
          content_info: none
          icon: mdi:weather-night
          icon_color: |-
            {% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
              amber
            {% else %}
              #44739e
            {% endif %}
          card_mod:
            style: |
              ha-card {
                border: none;
                margin-left: -10px;
              }
              @media screen and (max-width: 400px) {
              ha-card {
                border: none;
                margin-left: -17px;
              }
              }
          alignment: center
    card_mod:
      style: |
        ha-card {
        border: none !important;
        --chip-spacing: 1px;
        left: 152px;
         }
card_mod:
  style: |
    ha-card {
    border: none !important; 
    }

image

1 Like

Still, the result is the same, the chips disappear. I believe that this is due to the fact that there is too much shift to the left, since the card works as part of other cards, or there is not enough space, or something else is happening that I cannot explain. Perhaps an independent card will be displayed normally, but I am solving a slightly different problem, where this card is included in a stack along with others…

image

That is the issue. I’m working with just the single card you shared so my margins are completely different.

If the original solution works, stick with it!

1 Like

image

              card_mod:
                style: |
                  ha-card {
                  border: none !important;
                  --chip-spacing: 1px;
                  left: 12px;
                  }

My experiments seem to be ok thanks. 12px. Let’s see what happens at mobile app side…

1 Like

At mobile app I set:

                        @media screen and (max-width: 400px) {
                        ha-card {
                          border: none;
                          margin-left: -15px;
                        }
                        }

Only at the first chip, and it’s looks better :+1:

Again thanks u :+1:

Looks really good, happy to assist!!

1 Like

Btw, yesterday I start to do similar at the second row with additional cooker hood lights, but in mobile app is to hard, 'coz I set the main card size is --icon-size: 64px (first row I’ve is 80px), and set chip --chip-icon-size: 16px; and for mobile media is 12px, but in mobile app I’ve icons overlap. Think I need to try with ya suggestion in second row too…

image

If you get stuck, just message me the entire card and I’ll see if I can help.

1 Like

On desktop it looks so good:

image

          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                layout: vertical
                entity: light.kitchen_cooker_hood_group
                icon: phu:bulb-group-centura-round
                icon_color: |-
                  {% if is_state('light.kitchen_cooker_hood_group', 'on') %}
                    orange
                  {% else %}
                  {% endif %}
                primary: Вытяжка
                secondary: |-
                  {% if is_state('light.kitchen_cooker_hood_group_cold', 'on') %}
                    Холодный
                  {% elif is_state('light.kitchen_cooker_hood_group_neutral', 'on') %}
                    Нейтральный
                  {% elif is_state('light.kitchen_cooker_hood_group_warm', 'on') %}
                    Тёплый
                  {% elif is_state('light.kitchen_cooker_hood_group_midnight', 'on') %}
                    Ночник
                  {% elif is_state('light.kitchen_cooker_hood_group', 'on') 
                    and is_state('light.kitchen_cooker_hood_group_cold', 'off')
                    and is_state('light.kitchen_cooker_hood_group_neutral', 'off')
                    and is_state('light.kitchen_cooker_hood_group_warm', 'off')
                    and is_state('light.kitchen_cooker_hood_group_midnight', 'off') %}
                    Произвольный
                  {% else %}
                  {% endif %}
                tap_action:
                  action: toggle
                double_action:
                  action: none
                hold_action:
                  action: more-info
                vertical: true
                card_mod:
                  style: |
                    ha-card {
                      border: none !important;
                    }
                    ha-state-icon {
                      {% if is_state('light.kitchen_cooker_hood_group','on') %}
                      animation: beat 1.3s ease-out infinite both;
                      transform-origin: 50% 80%;
                      {%- else -%}
                      {%- endif %}
                    }
                    @keyframes beat {
                      0% { transform: scale(1); }
                      10% { transform: scale(1.1); }
                      17% { transform: scale(1.05); }
                      33% { transform: scale(1.25); }
                      60% { transform: scale(1); }
                    }
                    :host {
                      --icon-size: 64px !important;
                      perspective: 900px;
                    }
                    ha-card:active {
                      transform: rotateX(25deg);
                      transform-origin: center bottom;
                      transition: 0s;
                    }
                    ha-card:after {
                      {% if is_state('light.kitchen_cooker_hood_group', 'on') %}
                      content: "{{ expand('light.kitchen_cooker_hood_group') | selectattr('state','eq','on') | list | count }}";
                      position: absolute;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      background: rgb(var(--rgb-orange));
                      color: var(--card-background-color);
                      font-weight: bolder;
                      border-radius: 50%;
                      top: +15px;
                      right: +25px;
                      width: 16px;
                      height: 16px;
                      font-size: 11px;
                      {% endif %} 
                    }
                    @media screen and (max-width: 400px) {
                      ha-card:after {
                      {% if is_state('light.kitchen_cooker_hood_group', 'on') %}
                      content: "{{ expand('light.kitchen_cooker_hood_group') | selectattr('state','eq','on') | list | count }}";
                      position: absolute;
                      background: rgb(var(--rgb-orange));
                      color: var(--card-background-color);
                      font-weight: bolder;
                      border-radius: 50%;
                      top: +15px;
                      right: +10px;
                      width: 16px;
                      height: 16px;
                      font-size: 11px; 
                      }
                      {% endif %} 
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: light.kitchen_cooker_hood_group
                        state: 'on'
                    chip:
                      type: template
                      entity: light.kitchen_cooker_hood_group_cold
                      content_info: none
                      icon: mdi:sun-snowflake-variant
                      icon_color: |-
                        {% if is_state('light.kitchen_cooker_hood_group_cold', 'on') %}
                          amber
                        {% else %}
                          #44739e
                        {% endif %}
                      card_mod:
                        style: |
                          ha-card {
                            border: none;
                          }
                          @media screen and (max-width: 400px) {
                          ha-card {
                            border: none;
                            margin-left: -10px;
                            --chip-icon-size: 12px;
                          }
                          }
                      alignment: center
                  - type: conditional
                    conditions:
                      - entity: light.kitchen_cooker_hood_group
                        state: 'on'
                    chip:
                      type: template
                      entity: light.kitchen_cooker_hood_group_neutral
                      content_info: none
                      icon: mdi:theme-light-dark
                      icon_color: |-
                        {% if is_state('light.kitchen_cooker_hood_group_neutral', 'on') %}
                          amber
                        {% else %}
                          #44739e
                        {% endif %}
                      card_mod:
                        style: |
                          ha-card {
                            border: none;
                            margin-left: -10px;
                          }
                          @media screen and (max-width: 400px) {
                          ha-card {
                            border: none;
                            margin-left: -18px;
                            --chip-icon-size: 12px;
                          }
                          }
                      alignment: center
                  - type: conditional
                    conditions:
                      - entity: light.kitchen_cooker_hood_group
                        state: 'on'
                    chip:
                      type: template
                      entity: light.kitchen_cooker_hood_group_warm
                      content_info: none
                      icon: mdi:fire
                      icon_color: |-
                        {% if is_state('light.kitchen_cooker_hood_group_warm', 'on') %}
                          amber
                        {% else %}
                          #44739e
                        {% endif %}
                      card_mod:
                        style: |
                          ha-card {
                            border: none;
                            margin-left: -10px;
                          }
                          @media screen and (max-width: 400px) {
                          ha-card {
                            border: none;
                            margin-left: -18px;
                            --chip-icon-size: 12px;
                          }
                          }
                      alignment: center
                  - type: conditional
                    conditions:
                      - entity: light.kitchen_cooker_hood_group
                        state: 'on'
                    chip:
                      type: template
                      entity: light.kitchen_cooker_hood_group_midnight
                      content_info: none
                      icon: mdi:weather-night-partly-cloudy
                      icon_color: |-
                        {% if is_state('light.kitchen_cooker_hood_group_midnight', 'on') %}
                          amber
                        {% else %}
                          #44739e
                        {% endif %}
                      card_mod:
                        style: |
                          ha-card {
                            border: none;
                            margin-left: -10px;
                          }
                          @media screen and (max-width: 400px) {
                          ha-card {
                            border: none;
                            margin-left: -20px;
                            --chip-icon-size: 12px;
                          }
                          }
                      alignment: center
                card_mod:
                  style: |
                    ha-card {
                    border: none !important;
                    --chip-spacing: 1px;
                    left: 0px;
                    }
            card_mod:
              style: |
                ha-card {
                border: none !important; 
                }

But in mobile space between chips is so short, even if set up icon size 12px is not resolving this:

It’s possible to hide one icon on mobile app?