rianadon / timer-bar-card

A progress bar display for Home Assistant timers

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

card_mod support for mushroom timer design

sippeeey opened this issue · comments

Is it possible to support the card_mod with your new mushroom timer design. ...that would be great. :)

msedge_vtEtKiTZKA

here are the code from two of my right cards:

type: custom:mod-card
card:
  type: custom:timer-bar-card
  entity: input_boolean.test
  name: custom:mod-card
  invert: true
  duration:
    entity: input_number.test
    units: seconds
  sync_issues: fix
  bar_radius: 4px
  bar_width: 60%
  mushroom:
    layout: horizontal
    icon_color: blue
    secondary_info: last-changed
    card_mod:
      style: |
        ha-state-icon {
          {% if states('input_boolean.test') == 'on' %}
           animation: spin 1.5s linear infinite;
          {% endif %}
        }
  tap_action:
    action: toggle
  hold_action:
    action: more-info
type: custom:timer-bar-card
entity: input_boolean.test
name: custom:timer-bar-card
invert: true
duration:
  entity: input_number.test
  units: seconds
sync_issues: fix
bar_radius: 4px
bar_width: 60%
mushroom:
  layout: horizontal
  icon_color: blue
  secondary_info: last-changed
tap_action:
  action: toggle
hold_action:
  action: more-info
card_mod:
  style: |
    ha-state-icon {
       {% if states('input_boolean.test') == 'on' %}
         animation: spin 1.5s linear infinite;
       {% endif %}
       }
type: custom:mod-card
card:
  type: custom:timer-bar-card
  entity: sun.sun
  name: Balkon Belechtung (custom:mod-card)
  active_state: below_horizon
  end_time:
    attribute: next_setting
  translations:
    above_horizon: Not yet ☀️
  sync_issues: fix
  text_width: 5em
  invert: true
  mushroom:
    layout: horizontal
    icon_color: grey
    card_mod:
      style: |
        ha-state-icon {
          {% if states('light.balkon_beleuchtung') == 'on' %}
           animation: spin 1.5s linear infinite;
          {% endif %}
        }
  hold_action:
    action: more-info