Card-mod question - how to make media query work with animation of state-icon

Configuration Frontend
1

Hi all:

I’m fighting with some tricky CSS styling issue with card-mod, I’d like apply to a state-icon (in a PE card) so that:

  1. Animation works on the SVG icon
  2. The background hides with screen size is below 750px

I can achieve either goal easily but when I put them together, looks like the selector always only take what’s defined first, for example with the code below animation and color work, but media query style doesn’t apply:

  - type: state-icon
    <<: *toggle_actions
    entity: switch.kitchen_aquarium_plug
    title: Pump
    style:
      <<: *icon_style
      top: 18%
      left: 40%
    card_mod:
      style:
        state-badge:
          $:
            ha-state-icon:
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      {% if is_state(config.entity, 'off') %}
                        color: var(--error-color);
                        animation: none;
                      {% else %}
                        color: var(--running-color);
                        animation: wave 5s linear infinite;
                      {% endif %}
                    }
                    @keyframes wave {
                      0% { transform: rotate(0deg); }
                      20% { transform: rotate(15deg); }
                      60% { transform: rotate(-15deg); }
                      100% { transform: rotate(0deg); }
                    }

        $: |
          @media (max-width: 750px) {
            :host {
              /* This targets the outer state-icon element for small screens */
              background-color: transparent !important;
              backdrop-filter: none !important;
            }
          }

I’m no expert of CSS and already tried more than 10 ways suggested by ChatGPT without luck.
So would like to confirm here if this is even possible with css?

2

Hi,
seems plausible for me - have you had a look at the results within the browser tools to inspect the css code that results?
cheers Franky

3

Thanks for your reply!
I’m not really good at CSS and HTML, would appreciate some hint on where to look.
So what I notice is that if I only keep the ha-svg-icon and animation part, it works.
Same if I only keep the @media (without $: |) it also works. Put them together it doesn’t work :frowning:

4

Two things to try:

  1. change
        state-badge:
          $:

to

        state-badge $:
  1. change
        $: |
          @media (max-width: 750px) {
            :host {
              /* This targets the outer state-icon element for small screens */
              background-color: transparent !important;
              backdrop-filter: none !important;
            }
          }

to

        .: |
          :host {
            @media (max-width: 750px) {
              /* This targets the outer state-icon element for small screens */
              background-color: transparent !important;
              backdrop-filter: none !important;
            }
          }
1 Like
5

Thank you for your help!
:pray: