Blur doubly applied for custom:mushroom-chips-card

[basnijholt]

Hi @Nezz,

I thought to look up what happened to your awesome work on adding blur to the frontend (previously you mentioned this on https://github.com/basnijholt/lovelace-ios-themes.)

I noticed you created this awesome theme!

I decided to copy the blur bits here (still WIP) and noticed some problems.

For example:

Using

entities:
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: template
        icon: mdi:sofa
        content: |
          Living room
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_living_room', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_living_room
        tap_action:
          action: more-info
      - type: template
        icon: mdi:knife
        content: |
          Kitchen
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_kitchen', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_kitchen
        tap_action:
          action: more-info
      - type: template
        icon: mdi:bed-king
        content: |
          Bedroom
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_master_bedroom', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_master_bedroom
        tap_action:
          action: more-info
      - type: template
        icon: mdi:baby
        content: |
          Baby room
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_baby_room', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_baby_room
        tap_action:
          action: more-info
      - type: template
        icon: mdi:bed
        content: |
          Guest room
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_guest_room', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_guest_room
        tap_action:
          action: more-info
      - type: template
        icon: mdi:washing-machine
        content: |
          Utility room
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_utility_room', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_utility_room
        tap_action:
          action: more-info
      - type: template
        icon: mdi:garage
        content: |
          Outside house
        icon_color: |-
          {% if is_state('binary_sensor.activity_outside_house', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_outside_house
        tap_action:
          action: more-info
  - type: divider
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: template
        entity: binary_sensor.mailbox_vibration
        icon: mdi:mailbox
        icon_color: |-
          {% if is_state('input_boolean.mailbox_full', 'on') %}
            amber {% else %} white {% endif %}
        tap_action:
          action: call-service
          service: input_boolean.toggle
          target:
            entity_id: input_boolean.mailbox_full
          data: {}
        content: |-
          {% if is_state('input_boolean.mailbox_full', 'on') %}
            Got mail! {% else %} No mailbox activity {% endif %}
      - type: template
        entity: switch.space_heater
        icon: mdi:patio-heater
        icon_color: |-
          {% if is_state('switch.space_heater', 'on') %}
            amber {% else %} white {% endif %}
        tap_action:
          action: toggle
        content: |-
          {% if is_state('switch.space_heater', 'on') %}
            Space heater on {% else %} Space heater off {% endif %}
show_header_toggle: false
title: Activity
type: entities
state_color: true

Seems to be fixed by adding card_mod:

  - type: entities
    entities:
      - type: custom:mushroom-chips-card
        alignment: center
        card_mod:
          style: |
            ha-card {
                --ha-card-background: rgba(0, 0, 0, 0);
                --ha-card-backdrop-filter: blur(-1px) !important;
            }
        chips:
...

However, this is not a nice solution.

Since you seem to have a lot more frontend experience, I thought you might have a better idea.

[Nezz]

Sounds like an issue with mushroom-chips-card. Is ha-card nested three times in that case?

[basnijholt]

It is custom:mushroom-chips-card nested in entities. So nested twice (depending on your counting ;)