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

[Luigi_Peluso]

HI all,

i am working on a mushroom based card for my video survillance . I am having issue ( i think with css ) with a part of the code here an exemple of it, for 3 rooms )

square: false
type: grid
cards:

• type: entities
  entities:
  • type: custom:stack-in-card
    keep:
    margin: false
    box_shadow: false
    background: false
    cards:
    • square: false
      type: grid
      cards:

      • type: custom:mushroom-template-card
        entity: binary_sensor.presenza_terrazzo_salone_presence
        card_mod:
        style:
        mushroom-shape-icon$: |
        .shape {
        {% if states(‘alarm_control_panel.alarmo’) in [‘armed_home’, ‘armed_night’,‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.presenza_terrazzo_salone_presence’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% elif states(‘alarm_control_panel.alarmo’) in [‘armed_home’, ‘armed_night’,‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.motion_salone_occupancy’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% endif %}
        } @keyframes ping {
        0% {
        box-shadow: 0 0 5px 1px rgba(var(–rgb-pink), 0.7);
        }

            100% {
              box-shadow: 0 0 5px 15px transparent;
            }
          }
        style: |
          ha-card {
          } 
            :host {
            --mush-icon-border-radius: 10px;
            --mush-icon-size: 70px;
        

        primary: Salone
        icon: >
        {% set motion_state_salone =
        is_state(‘binary_sensor.motion_salone_occupancy’, ‘on’) %} {%
        set all_occupancy_state_salone =
        is_state(‘binary_sensor.salone_all_occupancy’, ‘on’) %} {% if
        not motion_state_salone and not all_occupancy_state_salone %}
        mdi:sofa-outline
        {% elif not motion_state_salone and all_occupancy_state_salone
        %}
        mdi:cctv
        {% elif motion_state_salone and all_occupancy_state_salone %}
        mdi:security
        {% elif motion_state_salone and not all_occupancy_state_salone
        %}
        mdi:motion-sensor
        {% endif %}
        icon_color: >
        {% set alarm_armed_salone =
        states(‘alarm_control_panel.alarmo’) in [‘armed_home’,
        ‘armed_night’, ‘armed_away’, ‘armed_vacation’] %} {% set
        motion_salone_on =
        is_state(‘binary_sensor.motion_salone_occupancy’, ‘on’) %} {%
        set all_occupancy_on_salone =
        is_state(‘binary_sensor.salone_all_occupancy’, ‘on’) %} {% if
        alarm_armed_salone and all_occupancy_on %}
        red
        {% elif alarm_armed_salone and motion_salone_on %}
        orange
        {% else %}
        grey
        {% endif %}
        secondary: >-
        {{ ‘:’ + states(‘binary_sensor.salone_all_occupancy’) }} {{
        ': ’ + states(‘binary_sensor.motion_salone_occupancy’) }}
        layout: vertical
        fill_container: false
        badge_icon: |
        {% if is_state(‘switch.salone_detect’, ‘on’) %}
        mdi:webcam
        {% else %}
        mdi:webcam-off
        {% endif %}
        badge_color: >-
        {% set alarm_state_salone =
        states(‘alarm_control_panel.alarmo’) %} {% set occupancy_state
        = states(‘binary_sensor.salone_all_occupancy’) %} {% set
        motion_state_salone =
        states(‘binary_sensor.motion_salone_all_occupancy’) %} {% set
        detect_state_salone = states(‘switch.salone_detect’) %}

        {% if alarm_state_salone in [‘armed_home’, ‘armed_night’,
        ‘armed_away’, ‘armed_vacation’] and occupancy_state == ‘on’ %}
        red
        {% elif alarm_state_salone in [‘armed_home’, ‘armed_night’,
        ‘armed_away’, ‘armed_vacation’] and motion_state_salone ==
        ‘off’ %}
        blue
        {% elif alarm_state_salone == ‘disarmed’ and
        detect_state_salone == ‘on’ %}
        green
        {% elif alarm_state_salone == ‘disarmed’ and
        detect_state_salone == ‘off’ %}
        grey
        {% endif %}
        multiline_secondary: false
        tap_action:
        action: call-service
        service: switch.toggle
        service_data:
        entity_id: switch.salone_detect

      • type: custom:mushroom-template-card
        entity: binary_sensor.salone_all_occupancy
        card_mod:
        style:
        mushroom-shape-icon$: |
        .shape {
        {% if states(‘alarm_control_panel.alarmo’) in [‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.salone_all_occupancy’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% elif states(‘alarm_control_panel.alarmo’) in [‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.motion_cucina_occupancy’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% endif %}
        } @keyframes ping {
        0% {
        box-shadow: 0 0 5px 1px rgba(var(–rgb-pink), 0.7);
        }

            100% {
              box-shadow: 0 0 5px 15px transparent;
            }
          }
        style: |
          ha-card {
          } 
            :host {
            --mush-icon-border-radius: 10px;
            --mush-icon-size: 70px;
        

        primary: Cucina
        icon: >
        {% set motion_state_cucina =
        is_state(‘binary_sensor.motion_cucina_occupancy’, ‘on’) %} {%
        set all_occupancy_state_cucina =
        is_state(‘binary_sensor.salone_all_occupancy’, ‘on’) %} {% if
        not motion_state_cucina and not all_occupancy_state_cucina %}
        mdi:countertop-outline
        {% elif not motion_state_cucina and all_occupancy_state_cucina
        %}
        mdi:cctv
        {% elif motion_state_cucina and all_occupancy_state_cucina %}
        mdi:security
        {% elif motion_state_cucina and not all_occupancy_state_cucina
        %}
        mdi:motion-sensor
        {% endif %}
        icon_color: >
        {% set alarm_armed_cucina =
        states(‘alarm_control_panel.alarmo’) in [‘armed_home’,
        ‘armed_night’, ‘armed_away’, ‘armed_vacation’] %} {% set
        motion_cucina_on =
        is_state(‘binary_sensor.motion_cucina_occupancy’, ‘on’) %} {%
        set all_occupancy_on_cucina =
        is_state(‘binary_sensor.salone_all_occupancy’, ‘on’) %} {% if
        alarm_armed_cucina and all_occupancy_on %}
        red
        {% elif alarm_armed_cucina and motion_cucina_on %}
        orange
        {% else %}
        grey
        {% endif %}
        secondary: >-
        {{ ‘:’ + states(‘binary_sensor.salone_all_occupancy’) }} {{
        ': ’ + states(‘binary_sensor.motion_cucina_occupancy’) }}
        layout: vertical
        fill_container: false
        badge_icon: |
        {% if is_state(‘switch.salone_detect’, ‘on’) %}
        mdi:webcam
        {% else %}
        mdi:webcam-off
        {% endif %}
        badge_color: >-
        {% set alarm_state_cucina =
        states(‘alarm_control_panel.alarmo’) %} {% set occupancy_state
        = states(‘binary_sensor.salone_all_occupancy’) %} {% set
        motion_state_cucina =
        states(‘binary_sensor.motion_cucina_all_occupancy’) %} {% set
        detect_state_cucina = states(‘switch.salone_detect’) %}

        {% if alarm_state_cucina in [‘armed_home’, ‘armed_night’,
        ‘armed_away’, ‘armed_vacation’] and occupancy_state == ‘on’ %}
        red
        {% elif alarm_state_cucina in [‘armed_home’, ‘armed_night’,
        ‘armed_away’, ‘armed_vacation’] and motion_state_cucina ==
        ‘off’ %}
        blue
        {% elif alarm_state_cucina == ‘disarmed’ and
        detect_state_cucina == ‘on’ %}
        green
        {% elif alarm_state_cucina == ‘disarmed’ and
        detect_state_cucina == ‘off’ %}
        grey
        {% endif %}
        multiline_secondary: false
        tap_action:
        action: call-service
        service: switch.toggle
        service_data:
        entity_id: switch.salone_detect

      • type: custom:mushroom-template-card
        entity: binary_sensor.terrazzo_salone_all_occupancy
        card_mod:
        style:
        mushroom-shape-icon$: |
        .shape {
        {% if states(‘alarm_control_panel.alarmo’) in [‘armed_home’, ‘armed_night’,‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.terrazzo_salone_all_occupancy’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% elif states(‘alarm_control_panel.alarmo’) in [‘armed_home’, ‘armed_night’,‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.presenza_terrazzo_salone_presence’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% endif %}
        } @keyframes ping {
        0% {
        box-shadow: 0 0 5px 1px rgba(var(–rgb-pink), 0.7);
        }

            100% {
              box-shadow: 0 0 5px 15px transparent;
            }
          }
        style: |
          ha-card {
          } 
            :host {
            --mush-icon-border-radius: 10px;
            --mush-icon-size: 70px;
        

        primary: T.salone
        icon: >
        {% set motion_state_terrazzo_salone =
        is_state(‘binary_sensor.presenza_terrazzo_salone_presence’,
        ‘on’) %} {% set all_occupancy_state_terrazzo_salone =
        is_state(‘binary_sensor.terrazzo_salone_all_occupancy’, ‘on’)
        %} {% if not motion_state_terrazzo_salone and not
        all_occupancy_state_terrazzo_salone %}
        mdi:balcony
        {% elif not motion_state_terrazzo_salone and
        all_occupancy_state_terrazzo_salone %}
        mdi:cctv
        {% elif motion_state_terrazzo_salone and
        all_occupancy_state_terrazzo_salone %}
        mdi:security
        {% elif motion_state_terrazzo_salone and not
        all_occupancy_state_terrazzo_salone %}
        mdi:motion-sensor
        {% endif %}
        icon_color: >
        {% set alarm_armed_terrazzo_salone =
        states(‘alarm_control_panel.alarmo’) in [‘armed_home’,
        ‘armed_night’, ‘armed_away’, ‘armed_vacation’] %} {% set
        motion_terrazzo_salone_on =
        is_state(‘binary_sensor.presenza_terrazzo_salone_presence’,
        ‘on’) %} {% set all_occupancy_on_terrazzo_salone =
        is_state(‘binary_sensor.terrazzo_salone_all_occupancy’, ‘on’)
        %} {% if alarm_armed_terrazzo_salone and all_occupancy_on %}
        red
        {% elif alarm_armed_terrazzo_salone and
        motion_terrazzo_salone_on %}
        orange
        {% else %}
        grey
        {% endif %}
        secondary: >-
        {{ ': ’ +
        states(‘binary_sensor.presenza_terrazzo_salone_presence’) }}
        layout: vertical
        fill_container: false
        multiline_secondary: false
        columns: 1

it is working as i was expected in the fronted ,

but when i try to edit it ( edit mode in yaml editor ), after a while, it lag and stop my webpage … i have to refresh page and re-edit again… it’s very frustrating .

For any room, i have : motion sensor, camera detected and i want that icon have three state :
icon status & color with alarm home disarmed

1. camera icon / gray color – if motion and camera detection off and alarm home is disarmed
2. motion icon / gray color – if motion is ON and camera detection off and alarm home is disarmed
3. camera icon / gray color – if motion is OFF and camera detection ON and alarm home is disarmed
4. alarm icon / gray color – if motion is ON and camera detection ON and alarm home is disarmed

icon status & color with alarm home armed

1. camera icon / red color – if motion and camera detection off and alarm home is armed
2. motion icon / red color – if motion is ON and camera detection off and alarm home is armed
3. camera icon / red color – if motion is OFF and camera detection ON and alarm home is armed
4. alarm icon / red color – if motion is ON and camera detection ON and alarm home is armed

any idea how to solve it? also with a different approach

Thanks a lot

[RkcCorian]

So… I have my own my_theme.yaml file. I added your code but without an affect.

Below is my code

my_theme

my_theme:
  # Dashboard Background
  background-image: center / cover no-repeat fixed url(/local/pictures/moon_in_space_4k.jpg)
  lovelace-background: var(--background-image)

  # Cards
  ha-card-background: "rgba(0, 0, 0, 0.5)"
  ha-card-border-radius: "10px"
  ha-card-border-width: "0px"
  ha-card-box-shadow: none

  #Testbereich
  mush-rgb-state-cover-open: "var(--mush-rgb-pink)"
  mush-rgb-state-cover-closed: "var(--mush-rgb-orange)"
  #state-cover-open-color: "#ff0000"
  #mush-rgb-state-cover-open: "#ff0000"
  #mush-rgb-state-cover-closed: "#ff0000"

dashboard

      - type: custom:mushroom-cover-card
        entity: cover.schlafzimmerrollladen
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: none !important;
              }

[LiQuid_cOOled]

You have to define the colors too…

mush-rgb-pink: 233, 30, 99
mush-rgb-orange: 255, 152, 0

[_Mitch07]

Try to get the washing machine animation working with the following, but it doesn’t work. What am I doing wrong or what am I missing?

  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: amber
    primary: Washing Machine
    secondary: ''
    entity: >-
      binary_sensor.bosch_waxh2m90nl_68a40e43ddf0_bsh_common_status_remotecontrolactive
    card_mod:
      style: |
        mushroom-shape-icon$: |
          ha-icon {
            --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); }
          }

[dimitri.landerloos]

Using the old version of the animations. Have a look here:

Mushroom Cards - Build a beautiful dashboard easily

Hi @rhysb, i have made a general mushroom - card-mod styling guide that i have posted here. i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here. i will …

[zanixmechanix (Joshua)]

This looks great! I’ve been wanting to redo my remote cards.
I would love to see the number pad and favorite cards.

[_Mitch07]

Thank you, just what i was looking for.

[tvds (Tim)]

@LiQuid_cOOled

Then you can simply add the status of that sensor entity to the icon_color: in lovelace

Many thanks for pointing me in the right direction
Meanwhile I tried a lot of things but none was working. At the end I ended up in this one which is working well now.

Create a template sensor:

template:
  - sensor:
      - name: Lichten Aan Woonkamer
        state: >-
          {{ expand(area_entities('woonkamer'))
            | selectattr('state', 'eq', 'on') 
            | selectattr('domain','eq','light')
            | rejectattr('attributes.device_class','eq','DNDMode')
            | list 
            | count
          }}

And then indeed add the state of this sensor in lovelace:

icon_color: >-
          {%if is_state('sensor.lichten_aan_woonkamer', '0') %} grey {% else %}
          amber {% endif %}

Your support is really appreciated!! Thanks once again!

@LiQuid_cOOled

My only concern is I haven’t seen device_class: use capital letters so DNDMode as device_class may need adjusted. Let me know…

It’s a smart plug and the entity is used to represent the LED light use.

[yafengwy]

Hi! Would you mind sharing the entire code for this part? Thx!

[LiQuid_cOOled]

@tvds I am glad I could help and I appreciate the follow up!!

[Faecon (Jo)]

              - type: horizontal-stack 
                cards:   
                  - type: custom:mushroom-template-card
                    primary: Stand
                    icon: mdi:sun-snowflake-variant
                    secondary: >-
                      {% set state=states('climate.tv_ruimte') %} 
                      {% if state=='off' %}
                        Offline
                      {% elif state=='heat' %}
                        Verwarmen
                      {% elif state=='cool' %}
                        Koelen
                      {% elif state=='dry' %}
                        Drogen
                      {% else %}
                        Ventileren
                      {% endif %}   
                    entity: climate.tv_ruimte
                    fill_container: true
                    layout: horizontal
                    multiline_secondary: false
                    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);
                        } 
                        ha-card {pointer-events: none;}

                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        entity: climate.tv_ruimte
                        icon: >
                            {% if is_state("climate.tv_ruimte", 'heat_cool') %}
                            mdi:autorenew
                            {% elif is_state("climate.tv_ruimte", 'heat') %}
                              mdi:fire
                            {% elif is_state("climate.tv_ruimte", 'cool') %}
                              mdi:snowflake
                            {% elif is_state("climate.tv_ruimte", 'dry') %}
                              mdi:water-percent
                            {% elif is_state("climate.tv_ruimte", 'fan_only') %}
                              mdi:fan
                            {% else %}
                              mdi:air-conditioner 
                            {% endif %};
                        icon_color: |-
                          {{ iif(not is_state("climate.tv_ruimte", 'off'), 'white', '[84,84,84]') }}   
                        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);
                            }  
                            ha-icon {
                              --mdc-icon-size: 24px;
                            } 
                            ha-card {pointer-events: none;}                  
                    alignment: end

gives me

It looks I have some wrong code, because the second card has to give me an icon, but gives me nothing. Can someone help me ?

Second question… The backgroundcolours of the 2 cards are diffrent. How do I make them like the first card ?

[LiQuid_cOOled]

Try removing the ; after {% endif %} The one right before icon_color :

[Faecon (Jo)]

you are a legend. haha.
And you know the solution for the second question ?

[LiQuid_cOOled]

working on that now. It’s the card_mod code.

[LiQuid_cOOled]

@Faecon

rgba(var(--rgb-primary-background-color), 0.2);

Lets start here and see if that is what you were looking for…

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Stand
    icon: mdi:sun-snowflake-variant
    secondary: |-
      {% set state=states('climate.tv_ruimte') %}  {% if state=='off' %}
        Offline
      {% elif state=='heat' %}
        Verwarmen
      {% elif state=='cool' %}
        Koelen
      {% elif state=='dry' %}
        Drogen
      {% else %}
        Ventileren
      {% endif %}   
    entity: climate.tv_ruimte
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
         pointer-events: none;
        --ha-card-border-width: 0px;
        background: rgba(var(--rgb-primary-background-color), 0.2) !important;
        box-shadow: none;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: climate.tv_ruimte
        icon: >
          {% if is_state("climate.tv_ruimte", 'heat_cool') %} mdi:autorenew {%
          elif is_state("climate.tv_ruimte", 'heat') %}
            mdi:fire
          {% elif is_state("climate.tv_ruimte", 'cool') %}
            mdi:snowflake
          {% elif is_state("climate.tv_ruimte", 'dry') %}
            mdi:water-percent
          {% elif is_state("climate.tv_ruimte", 'fan_only') %}
            mdi:fan
          {% else %}
            mdi:air-conditioner 
          {% endif %}
        icon_color: >-
          {{ iif(not is_state("climate.tv_ruimte", 'off'), 'white',
          '[84,84,84]') }}   
    card_mod:
      style: |
        ha-card {
         pointer-events: none;
        --ha-card-border-width: 0px;
        background: rgba(var(--rgb-primary-background-color), 0.2) !important;
        box-shadow: none;
        }
    alignment: end

My background colors are different so we may need an additional edit.

Based on our multiple interactions, I’d suggest installing vertical stack in card. It allows for a little easier control with card mod. It has both vertical and horizontal mode and eliminates card borders.

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card

[Faecon (Jo)]

What card do I need to change to vertical stack in ?

I have this now

          - type: "custom:stack-in-card"
            cards:              
              - type: horizontal-stack 
                cards:   
                  - type: custom:mushroom-template-card
                  - type: custom:mushroom-chips-card
              - type: horizontal-stack 
                cards:   
                  - type: custom:mushroom-template-card
                  - type: custom:mushroom-chips-card
              - type: horizontal-stack 
                cards:   
                  - type: custom:mushroom-template-card
                  - type: custom:mushroom-chips-card

and I have to add this code to all cards ?

                    card_mod:
                      style: |
                        ha-card {
                        pointer-events: none;
                        --ha-card-border-width: 0px;
                        background: rgba(var(--rgb-primary-background-color), 0.2) !important;
                        box-shadow: none;
                        }

it gives me

[LiQuid_cOOled]

@Faecon

:host([dark-mode]) {
                          background: rgba(var(--rgb-primary-background-color), 0.2);

No it just needs to be on the main card.

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Stand
        icon: mdi:sun-snowflake-variant
        secondary: |-
          {% set state=states('climate.tv_ruimte') %}  {% if state=='off' %}
           Offline
          {% elif state=='heat' %}
          Verwarmen
          {% elif state=='cool' %}
          Koelen
          {% elif state=='dry' %}
           Drogen
          {% else %}
           Ventileren
          {% endif %}   
        entity: climate.tv_ruimte
        fill_container: true
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: climate.tv_ruimte
            icon: >
              {% if is_state("climate.tv_ruimte", 'heat_cool') %} mdi:autorenew
              {% elif is_state("climate.tv_ruimte", 'heat') %}
                mdi:fire
              {% elif is_state("climate.tv_ruimte", 'cool') %}
                mdi:snowflake
              {% elif is_state("climate.tv_ruimte", 'dry') %}
                mdi:water-percent
              {% elif is_state("climate.tv_ruimte", 'fan_only') %}
                mdi:fan
              {% else %}
                mdi:air-conditioner 
              {% endif %}
            icon_color: >-
              {{ iif(not is_state("climate.tv_ruimte", 'off'), 'white',
              '[84,84,84]') }}  
        alignment: end
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Stand
        icon: mdi:sun-snowflake-variant
        secondary: |-
          {% set state=states('climate.tv_ruimte') %}  {% if state=='off' %}
           Offline
          {% elif state=='heat' %}
          Verwarmen
          {% elif state=='cool' %}
          Koelen
          {% elif state=='dry' %}
           Drogen
          {% else %}
           Ventileren
          {% endif %}   
        entity: climate.tv_ruimte
        fill_container: true
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: climate.tv_ruimte
            icon: >
              {% if is_state("climate.tv_ruimte", 'heat_cool') %} mdi:autorenew
              {% elif is_state("climate.tv_ruimte", 'heat') %}
                mdi:fire
              {% elif is_state("climate.tv_ruimte", 'cool') %}
                mdi:snowflake
              {% elif is_state("climate.tv_ruimte", 'dry') %}
                mdi:water-percent
              {% elif is_state("climate.tv_ruimte", 'fan_only') %}
                mdi:fan
              {% else %}
                mdi:air-conditioner 
              {% endif %}
            icon_color: >-
              {{ iif(not is_state("climate.tv_ruimte", 'off'), 'white',
              '[84,84,84]') }}  
        alignment: end
card_mod:
  style: |
    ha-card {
        pointer-events: none;
        --ha-card-border-width: 0px;
        background: rgba(var(--rgb-primary-background-color), 0.2) !important;
        box-shadow: none;
    
        }

We need to figure out exactly what background you are looking for:

This changes the card’s background to green so you can see the one line is controlling the entire background.

card_mod:
  style: |
    ha-card {
        pointer-events: none;
        --ha-card-border-width: 0px;
        background: rgba(var(--mush-rgb-green), 1) !important;
        box-shadow: none;
        }

[Faecon (Jo)]

that did it. It is what I want. Thanks… again…

[Faecon (Jo)]

and can I align the icon verticaly centerend (the second card) ?

i tried this on the card…

                        card_mod:
                          style: |
                            ha-card {
                              vertical-align: middle;
                            }

[LiQuid_cOOled]

The are quite a few ways, but you can simply add an another card_mod: after alignment.

 alignment: end
 card_mod:
     style: |
           ha-card {
            padding-top: 15px;
              }

Add padding-right: if you want to adjust it away from the edge

 alignment: end
 card_mod:
     style: |
           ha-card {
            padding-top: 15px;
            padding-right: 4px;
              }

one more way…

 alignment: end
 card_mod:
    style: |
         ha-card {
           padding: 15px 10px;
                    }