Room Card Minimalistic Style 2 colonne

type: custom:button-card
name: Soggiorno
icon: mdi:sofa
entity: light.soggiorno
show_state: false
show_label: true
label: |
  [[[
    return Math.round(states['sensor.broadlink_rm4_soggiorno_temperature'].state) + "°C" + "<br>" + Math.round(states['sensor.broadlink_rm4_soggiorno_humidity'].state) + " %";
  ]]]
tap_action:
  action: none
double_tap_action:
  action: toggle
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          entity: light.soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:lightbulb-on
            {% else %}
              mdi:lightbulb-outline
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}

            {% endif %}
        - type: template
          tap_action:
            action: more-info
          entity: vacuum.vacky
          icon: mdi:vacuum
        - type: template
          tap_action:
            action: toggle
          entity: entita.radiatore
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:radiator
            {% else %}
              mdi:radiator-disabled
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              yellow
            {% else %}

            {% endif %}
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(235, 204, 52, 1)' if is_state('light.soggiorno', 'on') else 'rgba(1235, 204, 52, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('light.soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('light.soggiorno', 'on') }};
              }
              @keyframes illumination {
                0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(166, 207, 152, 0.3)' if is_state('vacuum.vacky', 'docked') else 'rgba(166, 207, 152, 1)' }};
                animation: {{ 'ping 2.5s ease-out infinite' if not is_state('vacuum.vacky', 'docked') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(166, 207, 152, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(166, 207, 152, 0);
                }
            .: |
              ha-state-icon {
                animation: {{ 'scan 5s ease-in-out infinite' if not is_state('vacuum.vacky', 'docked') }};
              }
              @keyframes scan {
                0%, 100% { transform: rotate(20deg); }
                50% { transform: rotate(-15deg); }
              }
          mushroom-template-chip:nth-child(3)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(197, 22, 5, 0.8)' if is_state('entita.radiatore', 'on') else 'rgba(197, 22, 5, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('entita.radiatore', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(197, 22, 5, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(197, 22, 5, 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'clip 1s linear infinite' if is_state('entita.radiatore', 'on') }};
              }
              @keyframes clip {
                0% {
                clip-path: inset(50% 0 0 0);
                }
                100% {
                clip-path: inset(0 0 0 0);
              }
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: more-info
          entity: cover.tapparella
          icon: |
            {% if is_state(entity, 'closed') %}
              mdi:window-shutter
            {% else %}
              mdi:window-shutter-open
            {% endif %}
          icon_color: black
        - type: template
          tap_action:
            action: more-info
          entity: binary_sensor.finestra_aperta
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:window-open
            {% else %}
              mdi:window-closed
            {% endif %}
        - type: template
          tap_action:
            action: more-info
          entity: sensor.aria_soggiorno_pm25
          icon: mdi:leaf
          icon_color: black
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(137, 207, 239, 1)' if is_state('cover.tapparella', 'open') else 'rgba(137, 207, 239, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('cover.tapparella', 'open') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(137, 207, 239, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(137, 207, 239, 0);
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(0, 128, 254, 1)' if is_state('binary_sensor.finestra_aperta','on') else 'rgba(0, 128, 254, 0.2)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('binary_sensor.finestra_aperta', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(0, 128, 254, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(0, 128, 254, 0);
              }
          mushroom-template-chip:nth-child(3)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: rgba(191, 234, 124, 1);
                padding: 5px !important;
                border-radius: 100px !important;
              }
styles:
  grid:
    - grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
    - grid-template-columns: 1fr min-content min-content
    - grid-template-rows: min-content min-content 1fr
  img_cell:
    - justify-content: center
    - position: absolute
    - width: 150px
    - height: 150px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -30px
    - background: '#FFC47E'
    - border-radius: 200px
  icon:
    - width: 60px
    - color: black
    - opacity: '0.6'
  card:
    - padding: 22px 8px 22px 22px
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
    btn1:
      - justify-content: end
      - align-self: start
  name:
    - justify-self: start
    - align-self: start
    - font-size: 18px
    - font-weight: 500
    - color: null
  label:
    - min-height: 80px
    - justify-self: start
    - align-self: start
    - font-size: 14px
    - font-weight: 300
    - opacity: '0.7'
state:
  - value: 'off'
    styles:
      img_cell:
        - background: '#FFC47E'
        - opacity: 0.2
  - value: unavailable
    styles:
      img_cell:
        - background: '#FFC47E'
        - opacity: 0.2