Entfernen einer weißen Linie in der grafischen Darstellung einer Stack-in-Card

Einleitung
Die Gestaltung von Dashboards in Smart-Home-Anwendungen kann eine Herausforderung darstellen, insbesondere wenn es um die visuelle Darstellung von Informationen geht. Eine häufige Frage ist, wie man unerwünschte grafische Elemente, wie z.B. Linien oder Ränder, entfernt, um ein ansprechenderes Design zu erzielen. In diesem Artikel wird erläutert, wie man eine weiße Linie in einer Stack-in-Card entfernt, die in einem Dashboard angezeigt wird.

Problem
Ein Benutzer hat ein Dashboard erstellt, das zwei Räume darstellt, in denen sich die Chips abhängig vom Status verändern. Bei der Verwendung der Mushroom Cards, insbesondere der Stack-in-Card, wurde eine unerwünschte weiße Linie festgestellt, die sich durch die Chips zieht. Der Benutzer benötigt Unterstützung, um diese Linie zu entfernen.

Lösung
Um die weiße Linie in der Stack-in-Card zu entfernen, müssen Anpassungen im CSS-Stil der Karte vorgenommen werden. Insbesondere ist es wichtig, die Ränder der Karte auf "none" zu setzen. Dies kann durch die Verwendung von card_mod erreicht werden, einem beliebten Tool zur Anpassung von Home Assistant-Karten.

Hier ist der aktualisierte Code, der die weiße Linie entfernt:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Küche
    secondary: "{{states('sensor.tempsensor_woku_temperature')}} °C"
    icon: mdi:countertop-outline
    entity: null
    tap_action:
      action: navigate
      navigation_path: kuche
    hold_action:
      action: none
      navigation_path: kuche
    icon_color: "{{ '#264e70' if is_state(entity, 'on') else 'disabled' }}"
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.0);
          --mush-icon-size: 96px;
        }
        ha-card {
          margin-left: -25px !important;
          margin-top: -25px !important;
          height: 102px;
          border: none;  # Entfernt die weiße Linie
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.kuchenlicht
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:lightbulb-on
          {% else %}
            mdi:lightbulb-off
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %}
            orange
          {% else %}
            #6f6f6f
          {% endif %}
      - type: template
        entity: light.kuchenspots
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:lightbulb-spot
          {% else %}
            mdi:lightbulb-spot-off
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %}
            orange
          {% else %}
            #6f6f6f
          {% endif %}
      - type: template
        entity: cover.hm_lc_bl1pbu_fm_meq1105977
        icon: |-
          {% if is_state(entity, 'open') %}
            mdi:window-shutter-open
          {% else %}
            mdi:window-shutter
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %}
            yellow
          {% else %}
            purple
          {% endif %}
      - type: template
        entity: binary_sensor.kuchenfenster_contact
        tap_action:
          action: null
        icon: |-
          {% if is_state(entity, 'open') %}
            mdi:window-open-variant
          {% else %}
            mdi:window-closed-variant
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %}
            yellow
          {% else %}
            purple
          {% endif %}
        card_mod:
          style: |
            ha-card {
              {{ 'animation: beat 1.3s ease-out infinite both;' if is_state('media_player.sonos_move', 'playing') }}
              transform-origin: 50% 60%; 
            }
            @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); }
            }
      - type: null
        conditions:
          - entity: binary_sensor.fenster_buro
            state: "on"
        chip:
          type: template
          icon_color: red
          icon: mdi:window-open-variant
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          margin-top: -30px !important;
        }
card_mod:
  style: |
    ha-card {
      {% if is_state('switch.zigbeepowerstrip_l4', 'on') %}
        background: rgba(232,232,232,0.1);
      {% endif %}
    }

Schritte zur Umsetzung
1. Öffne die Konfigurationsdatei deines Dashboards in Home Assistant.
2. Füge den oben angegebenen YAML-Code in die entsprechende Stelle ein.
3. Stelle sicher, dass die card_mod-Anpassungen korrekt implementiert sind, insbesondere die Zeile border: none;.
4. Speichere die Änderungen und lade das Dashboard neu, um die Anpassungen zu sehen.

Hintergrundwissen
Die Stack-in-Card ist eine flexible Möglichkeit, mehrere Karten in Home Assistant zu kombinieren. Die Verwendung von card_mod ermöglicht es Benutzern, CSS-Stile anzupassen, um das Erscheinungsbild von Karten zu verändern. Häufige Probleme wie unerwünschte Ränder oder Linien können durch gezielte CSS-Anpassungen behoben werden.

Zusätzliche Infos

Hinweise & Best Practices
- Überprüfe regelmäßig die Darstellung deines Dashboards, insbesondere nach Änderungen am Code.
- Nutze die Entwicklertools deines Browsers, um CSS-Anpassungen in Echtzeit zu testen, bevor du sie in deinen Code übernimmst.
- Halte deine Home Assistant-Installation und alle verwendeten Custom Cards auf dem neuesten Stand, um Kompatibilitätsprobleme zu vermeiden.