Schriftgröße und Position in Mushroom-Card

[Fidibus]

Moin,
ich versuche seit gestern mit Hilfe der KI folgende Anzeige umzusetzen:

Inzwischen habe ich folgende yaml, welche aber nicht greift.

type: custom:mushroom-template-card
entity: sensor.hotwater_temp
primary: Warmwasser
secondary: "{{ states('sensor.hotwater_temp') }} °C"
icon: mdi:thermometer
icon_color: |
  {% set temp = states('sensor.hotwater_temp') | float(0) %}
  {% if temp < 30 %}
    blue
  {% else %}
    red
  {% endif %}
content: ""
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      /* Dynamischer Hintergrund */
      {% set temp = states('sensor.hotwater_temp') | float(0) %}
      {% if temp < 30 %}
        background: rgba(0, 0, 255, 0.3) !important;
      {% else %}
        background: rgba(255, 0, 0, 0.3) !important;
      {% endif %}
    }
    /* Zielgenaues CSS für den sekundären Text innerhalb der info Sektion */
    .info .secondary {
      font-size: 1.1em !important;
      font-weight: bold !important;
      opacity: 0.9 !important;
    }

Kann jemand noch einen Tipp geben?

 

[Nival]

mit Hilfe der KI

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        flex-flow: row nowrap !important;
        justify-content: space-between;
        --card-secondary-font-size: 30px;
        --card-primary-font-size: 30px;
        --secondary-text-color: #000;
        }

 

[Fidibus]

Moin,
danke dir für die Antwort - ich und die KI sind unfähig, diesen Code im Gesamtkontext so zu verwenden, das keine Fehler und trotzdem ein Ergebnis erreicht wird :-/.

 

[Nival]

type: custom:mushroom-template-card
entity: input_number.123
primary: Warmwasser
secondary: "{{ states('input_number.123') }} °C"
icon: mdi:thermometer
icon_color: |
  {% set temp = states('input_number.123') | float(0) %}
  {% if temp < 30 %}
    blue
  {% else %}
    red
  {% endif %}
tap_action:
  action: more-info
card_mod:
  style:
    .: |
      ha-card {
        {% set temp = states('input_number.123') | float(0) %}
        {% if temp < 30 %}
          background: rgba(0, 0, 255, 0.3) !important;
        {% else %}
          background: rgba(255, 0, 0, 0.3) !important;
        {% endif %}
      }
    mushroom-state-info$: |
      .container {
        flex-flow: row nowrap !important;
        justify-content: space-between;
        --card-secondary-font-size: 30px;
        --card-primary-font-size: 30px;
        --secondary-text-color: #000;
      }