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

yes there is, but only referring to the title:

type: entities
title: Luchtreinigers
card_mod:
  class: class-header-margin
entities:

but, in the pond dashboard there is no other mod. Just in case, I just tested it without and that still makes the icon rotate uncentered

Hm. Then I don’t have any clue, because

type: entities
entities:
  - type: custom:template-entity-row
    entity: binary_sensor.tankerkoenig_aral_gyhum_status
    icon: mdi:pump
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          @keyframes colorize {
            0% {
              background: steelblue;
            }
            100% {
              background: steelblue;
            }
          }

is rotating centered here in Desktop Chrome/Safari. With fan and pump.

remarkable.
for the fun of it I just fired up Microsoft Edge, Firefox and Chrome and they all show the off-center swirl

this is on Mac OS btw

cleared out all, completely empty page, no card-mod-themes. still the same…

this makes it a bit clearer:

May-19-2022 17-20-54

      icon: >
        {{'mdi:record-circle-outline' if is_state(config.entity,'on') else 'mdi:fan-off'}}

On the examples page you can see this as well on mouse-down:

image

Of course, this will not be wanted. :joy:

1 Like

Bildschirmfoto 2022-05-18 um 06.18.28

hey, I’m looking for something exactly like the picture to implement.
does anyone have an idea?

only thing that comes close that I know of is flip down timer… but I guess this isnt counting down is it

no, it’s not a countdown… it’s supposed to simulate the electricity meter.
but I can’t find any way how to implement it.

Haha, yes I figured as much.

Guess some things can’t be had. Why not make a picture of it and use that as header or background for some regular states entities.

Might not be live, but still has the touch of the meter

really odd, I took my iPhone out, and the button with the fan does still show some off center behavior on mobile… While the picture-glance looks way better (maybe because its smaller?)

the incomparable HA modifications never cease to amaze.

update

It’s visible on desktop too, when zooming in to the max:

May-20-2022 10-01-35
May-20-2022 10-13-43

which are supposed to be nicely centered icons

Dear Ildar,

Seems to be that animation of resizing is not working on iPhones OS? Or did I miss something else to activate it? :upside_down_face:

Please post your code which is not working on iPhone.
And specify the iOS version…

Dear Ildar,

Just from your sample of animations:

  • entity: sun.sun
    name: resizing
    icon: ‘mdi:radio-tower’
    style:
    hui-generic-entity-row:
    $: |
    state-badge {
    animation: resizing 1s linear infinite alternate;
    }
    @keyframes resizing {
    0% {
    –mdc-icon-size: 10px;
    }
    25% {
    –mdc-icon-size: 15px;
    }
    50% {
    –mdc-icon-size: 20px;
    }
    75% {
    –mdc-icon-size: 26px;
    }
    100% {
    –mdc-icon-size: 32px;
    }
    }

IOS latest 15.5, it works on other platforms, but only the iPhone is problem. Icon didnt change size, just stay as it is.

Regards

  1. The code you posted is not properly formatted. I cannot just copy/paste it for testing.
  2. Are you talking about a code from this post?
    Yes, there is a problem there - iOS devs cannot handle animations based on some “--variable”. A bit later I will update that post with an iOS-compatible code.
  1. Sorry for wrong format
  2. Correct

Thanks, I see. Would be nice from your side :+1:

Resizing is fixed, check that post.
Also, there is a problem with flipping, will see what I can do…

Actually, flipping is OK, I am using it as well. Your code is work well :slight_smile:

No way! Could you send me a video from iOS device with flipping???
Test this code:

type: entities
entities:
  - entity: sun.sun
  - entity: sun.sun
    name: flipping (rotateX)
    icon: mdi:timer-sand
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
          ha-svg-icon {
            animation: flipping 1s linear infinite;
          }
          @keyframes flipping {
            0% {
              transform: rotateX(0deg);
            }
            100% {
              transform: rotateX(360deg);

            }
          }
  - entity: sun.sun

and this:

type: entities
entities:
  - entity: sun.sun
  - entity: sun.sun
    name: flipping (rotateX)
    icon: mdi:timer-sand
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            animation: flipping 1s linear infinite;
          }
          @keyframes flipping {
            0% {
              transform: rotateX(0deg);
            }
            100% {
              transform: rotateX(360deg);

            }
          }
  - entity: sun.sun

For me, iOS is too buggy in part of CSS.

P.S. Safari on Mac: flipping is OK on Edit page (when this card is edited) and same glitches otherwise.

Update 18.04.23: flipping is OK on iOS 15.7.3 (Companion App)

100% working :slight_smile: attached video based on old code
Processing: RPReplay_Final1653051066.MP4…

Seems that it’s not allowed attach video :frowning:

You may upload the clip to some cloud.
Anyway, to be sure - both cards I posted above (same code w/o any changes) work properly?

Only first code is OK

Second one animation with flickering and 3rd entity (sun) disappear