🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
3634

Because you specified a path for the 1st element (of some type) only.
Read this.
If your are using rows of different types (sensor-entity, text-entity, number-entity, …) - then probably easier to specify card-mod for each row - see example below.
But if you want to specify styles on the card-level (like you tried) - then you paths should be changed.

Your code:

        hui-text-entity-row $: |
          hui-generic-entity-row {

creates a “card-mod” element in the shadowRoot of the 1st element (of this type) only.
Use this instead:

        hui-text-entity-row:
          $: |
            hui-generic-entity-row {

Correct, since you need to INCREASE the height.
Btw, there is also a difference in part of MDC input elements:

изображение
изображение940×394 17.2 KB

Changing "height" - on the left, "line-height"- on the right.

type: horizontal-stack
cards:
  - type: entities
    entities:
      - entity: sun.sun
        name: Tpyq
        card_mod: &ref_0
          style: |
            hui-generic-entity-row {
              height: 50px;
              font-size: 26px;
            }
      - entity: sensor.processor_use
        name: Tpyq
        card_mod: *ref_0
      - entity: input_boolean.test_boolean
        name: Tpyq
        card_mod: *ref_0
      - entity: input_number.test_number
        name: Tpyq
        card_mod: *ref_0
      - entity: input_number.test_number_2
        name: Tpyq
        card_mod: *ref_0
      - entity: input_select.test_value
        name: Tpyq
        card_mod: *ref_0
  - type: entities
    entities:
      - entity: sun.sun
        name: Tpyq
        card_mod: &ref_1
          style: |
            hui-generic-entity-row {
              line-height: 50px;
              font-size: 26px;
            }
      - entity: sensor.processor_use
        name: Tpyq
        card_mod: *ref_1
      - entity: input_boolean.test_boolean
        name: Tpyq
        card_mod: *ref_1
      - entity: input_number.test_number
        name: Tpyq
        card_mod: *ref_1
      - entity: input_number.test_number_2
        name: Tpyq
        card_mod: *ref_1
      - entity: input_select.test_value
        name: Tpyq
        card_mod: *ref_1
1 Like