Schriftgröße und Position in Mushroom-Card

[Fidibus]

Das Problem hatte ich auch, aber die KI konnte das lösen ;-)
KI-Lösung:

content: >
          Innen: {{ states('sensor.shellyht_3be0d7_temperature') | float |
          round(1) }} °C

 

[HA-DAU]

Hallo zusammen,
ich brauche nochmals Eure Hilfe.
Meine Schrift ist zu lang, ich kann die Temperatur nur teilweise auf dem Handy erkennen.
Wie bekomme ich die Schrift kleiner, oder dynamisch hin, damit ich das auch dem Handy/Tablet erkennen kann.
Am PC passt ja alles.

Nachtrag:
Habe da mal daran geschraubt...

        --tile-info-primary-font-size: 30px;
        --tile-info-secondary-font-size: 30px;

Neu

        --tile-info-primary-font-size: 20px;
        --tile-info-secondary-font-size: 20px;

 

[Fidibus]

Moin,
im Beitrag #2 hatte @Nival auch schon eine Lösung gepostet.
2 Optionen sind besser als keine

 

[HA-DAU]

Guten Morgen @Fidibus,

die Lösung habe ich mir ja eingebaut und dann die 30px auf das geändert.
-tile-info-primary-font-size 20px;
-tile-info-secondary-font-size 20px;

Mein Name ist halt länger als nur Warmwasser
Meiner lautet Warmwasser-Vorlauf und Warmwasser-Rücklauf und der Bildschirm halt viel kleiner als der PC Bildschirm.
Dynamisch wäre halt besser gewesen, bei anderen Karten passt das ja auch mit langen Namen.
Aber damit kann ich auch leben....

Fragen kostet ja nichts und wir lernen alle dabei......

 

[Fidibus]

Warmwasser-Vorlauf und Warmwasser-Rücklauf

Kann man das nicht untereinander schreiben?
Warmwasser
Vorlauf
ggf. reicht in mein er naiven Annahme ein einfaches html <br />

 

[Nival]

@HA-DAU

    ha-tile-info$: |
      .info {
        width:100%;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        --tile-info-primary-font-size: 20px;
        --tile-info-secondary-font-size: 20px;
        --tile-info-secondary-color: #000;
        --tile-info-secondary-font-weight: 500;
      }
      @media (min-width: 750px) {
        .info {
          --tile-info-primary-font-size: 30px;
          --tile-info-secondary-font-size: 30px;
        }
      }

Nur die genauen Angaben musst Du selbst anpassen, kenne Dein Handy / Tablet ja nicht - Du kannst mehrere @media untereinander setzen, musst aber die Reihenfolge beachten, was zuletzt steht und zutreffend ist wird genommen.

 

[Holzfred]

Falls es jemand gebrauchen kann:



Es wird bei Untertemperatur (<51°C) rot, das symbol dann grün.

type: custom:button-card
entity: water_heater.dhw1
name: Warmwasser
icon: mdi:thermometer
show_icon: true
show_name: true
show_state: true
layout: grid
styles:
  grid:
    - grid-template-areas: "\"i n s\""
    - grid-template-columns: 30px 1fr auto
    - grid-template-rows: 1fr
    - align-items: center
  card:
    - height: 50px
    - border-radius: 16px
    - padding: 8px 14px
    - transition: background-color 0.3s ease
    - background-color: |
        [[[
          const t = entity?.attributes?.current_temperature;
          if (t < 51) return 'rgba(255, 0, 0, 0.9)';     // Rot unter 51 °C
          if (t >= 51) return 'rgba(0, 150, 0, 1)';      // Grün ab 51 °C
          return 'var(--card-background-color)';
        ]]]
  img_cell:
    - grid-area: i
    - justify-self: start
    - align-self: center
  icon:
    - color: |
        [[[
          const t = entity?.attributes?.current_temperature;
          if (t < 51) return 'rgba(0, 150, 0, 0.9)';     // Rot unter 51 °C
          if (t >= 51) return 'rgba(250, 0, 0, 1)';      // Grün ab 51 °C
          return 'var(--card-background-color)';
        ]]]
    - width: 26px
    - height: 26px
  name:
    - grid-area: "n"
    - justify-self: start
    - align-self: center
    - font-size: 1.4em
    - font-weight: 600
    - padding-left: 8px
  state:
    - grid-area: s
    - justify-self: end
    - align-self: center
    - font-size: 1.6em
    - font-weight: 700
    - white-space: nowrap
state_display: |
  [[[
    const t = entity?.attributes?.current_temperature;
    if (t === null || t === undefined) return "—";
    return t.toFixed(1) + " °C";
  ]]]

 

[Nival]

die Temperatur nur teilweise auf dem Handy

Dazu übrigens noch einen alternativen Lösungsansatz, Du kannst angeben, dass der Bereich der die Temperatur enthält eine gewisse Breite nicht unterschreiten darf und der mangelnde Platz sich nur auf die Beschriftung auswirkt:

      #info > span:nth-child(2) {
        flex-basis: 110px;
        flex-shrink: 0;
      }