How to combine different card mods in same card?

Configuration Frontend
1

How to combine different card mods in same card?
I have two card mods that each work separately with the same tile entity card, by when I try to combine them in the same card, they don’t work

One card mod changes the tile icon size:

card_mod:
  style: |
    ha-tile-icon {
      --mdc-icon-size: 12px;
    }

The other changes the secondary info in the tile card:

card_mod:
  style:
    ha-tile-info$: |
      .secondary {
        color: grey !important;
        font-weight: bold !important;
        visibility: hidden;
      }
      .secondary:before {
        visibility: visible;
        content: {% if is_state('media_player.samsung_ue75ju7000', 'on') %}
         'TV is on'
        {% else %}
         '{{state_attr('climate.floorC82B96A543E8_4_climate', 'current_temperature')}} °C'
        {% endif %}
      }

Simply putting the mods into the same does not work (in this case only the icon size changes):

card_mod:
  style: |
    ha-tile-icon {
      --mdc-icon-size: 12px;
    }
    ha-tile-info$: |
      .secondary {
        color: grey !important;
        font-weight: bold !important;
        visibility: hidden;
      }
      .secondary:before {
        visibility: visible;
        content: {% if is_state('media_player.samsung_ue75ju7000', 'on') %}
         'TV is on'
        {% else %}
         '{{state_attr('climate.floorC82B96A543E8_4_climate', 'current_temperature')}} °C'
        {% endif %}
      }

Have tried seeking help in the CSS documentation, CSS validators and asked ChatGBT, but so far no success? What am I doing wrong?

2

Keep asking )).
Or ask in a dedicated card-mod thread instead.
Guess you will get answers faster.

3

I had a similar issue with card-mod.
I must say I don’t understand the syntax but try:

card_mod:
  style:
    .: |   
      ha-tile-icon {
        --mdc-icon-size: 12px;
      }
    ha-tile-info$: |
      .secondary {
        color: grey !important;
        font-weight: bold !important;
        visibility: hidden;
      }
      .secondary:before {
        visibility: visible;
        content: {% if is_state('media_player.samsung_ue75ju7000', 'on') %}
         'TV is on'
        {% else %}
         '{{state_attr('climate.floorC82B96A543E8_4_climate', 'current_temperature')}} °C'
        {% endif %}
      }
1 Like
4

Solution here: 🔹 Card-mod - Add css styles to any lovelace card - #5762 by DIY-techie