define on and off color for blink

[bonelessc]

Hi,

First of all, thanks for some great work.

I am trying to get a blinking button when my UPS is not online, green when it is online. Got it working pretty well, only thing is that I would like it to blink red and white. Now it is blinking red and green. Is there a way to set the other color as well?

Side note, I had to add quotation marks with the animation. You might want to change that in your example?

Thank you so much!

    cards:
      - type: custom:card-modder          
        style:          
          animation: '[[ sensor.server_ups_status_animation.state ]] 2s linear infinite'
          --paper-card-background-color: rgba(0, 200, 0, 1)
          --paper-item-icon-color: white
          border-radius: 5px
          color: rgb(0, 0, 100)
        extra_styles: >
          @keyframes blink {
            50% {
              background: red;
            }
          }
        card:
          type: entity-button
          entity: sensor.server_ups_status

[iantrich]

Your "other color" is your existing background color --paper-card-background-color: rgba(0, 200, 0, 1), so you'll need update that with a template

[bonelessc]

so there is no way to overwrite it when we are in the extra styles bit?

[iantrich]

I don't actually know much about this card, but reviewing the readme, it looks like you are correct. I would suggest using the state-switch or config-template-card to make it more dynamic

[bonelessc]

thank you kindly!

I tried using the conditional card, but it was a bit buggy. I will check the state-switch!

[bonelessc]

Alright, I will close the issue.

This code works great!

      - type: custom:state-switch
        entity: sensor.server_ups_status_animation
        states:
          okay:
            type: custom:card-modder          
            style:          
              --paper-card-background-color: rgba(0, 200, 0, 1)
              --paper-item-icon-color: white
              border-radius: 5px
              color: rgb(0, 0, 100)
            card:
              type: entity-button
              entity: sensor.server_ups_status
          blink:
            type: custom:card-modder      
            style:
              animation: '[[ sensor.server_ups_status_animation.state ]] 2s linear infinite'
            extra_styles: >
              @keyframes blink {
                50% {
                  background: red;
                }
              }
            card:
              type: entity-button
              entity: sensor.server_ups_status

[thomasloven]

Another option is to add keyframes at 0% and 100% where the background is set to white.