Hide paper buttons when active

[rovo89]

I just started using the card for a DIY irrigation valve controller that I control via MQTT. This is what it looks like now:

My config:

type: custom:timer-bar-card
entities:
  - valve.ventil_v0
active_icon: mdi:water
icon: mdi:water-outline
active_state: open
bar_direction: rtl
invert: true
start_time:
  attribute: requestedAt
end_time:
  attribute: closeAt
translations:
  open: " "
  closed: " "
tap_action:
  action: toggle
hold_action:
  action: more-info
sync_issues: fix
extend_paper_buttons_row:
  position: right
  buttons:
    - name: 15 min
      tap_action:
        action: call-service
        service: mqtt.publish
        service_data:
          topic: watering/valve/V/0/request
          payload: 900
    - name: 30 min
      tap_action:
        action: call-service
        service: mqtt.publish
        service_data:
          topic: watering/valve/V/0/request
          payload: 1800

My goal would be to hide the triggering buttons (15/30 min) once the "timer" becomes active and the progress bar is showing. Any suggestions how I could do this? I found jcwillox/lovelace-paper-buttons-row#211, but it's only a feature request and I'm not sure if it would help me. I wouldn't strictly need a per-button control, although it might be nice to show a stop button instead.

By the way, while looking into this with the Chrome developer tools, I've seen that the <paper-buttons-row> element keeps blinking, seems that it's getting recreated on each tick along with all the buttons in it.

[proud-nerd]

You can use state_styles for this and set css for different states:

...
  buttons:
    - name: 15 min
      ...
      state_styles:
        active:
          button:
            display: none