Mushroom card

[diemon24]

Hi. 👋 Pls insert in your instructions for Mushroom card. This card working with light call-service and shows the real time of the timer, which is created in the auxiliary.
This configuration I not see in instructions. I think this use many people.

- type: custom:timer-bar-card
  entity: timer.your_timer
  name: Light name
  invert: true
  bar_direction: rtl
  bar_width: 90%
  icon: mdi:your_light_mdi
  mushroom:
    layout: vertical
    fill_container: true
    secondary_info: none
  tap_action:
    action: call-service
    service: light.toggle
    target:
      entity_id: light.your_light 

[bozman2021]

/Thanks for sharing...
This fixed something that I missed and managed to add this into one card, instead of having multiple cards:
So this one is actually a combination of changing color and icon when in different stages:

Sharing this back.. 👍

type: custom:timer-bar-card
name: Garage door
mushroom: null
entity:
  - timer.timer_lock
translations:
  idle: Locked
invert: true
bar_direction: rtl
icon: mdi:lock
text_width: 4em
bar_height: 5px
bar_foreground: linear-gradient(to right, green, orange, red)
tap_action:
  action: call-service
  service: input_boolean.toggle
  target:
    entity_id: input_boolean.garage_dummy_switch
modifications:
  - elapsed: 0%
    bar_foreground: green
    bar_height: 12px
  - elapsed: 40%
    bar_foreground: orange
  - elapsed: 80%
    bar_foreground: red
card_mod:
  style: |
    ha-card {
      transition: none !important;
      padding: 0px !important;
      --spacing: var(--mush-spacing, 5px) !important;
      --icon-size: var(--mush-icon-size, 32px) !important;
    }
    div.bar-container.pointer {
      min-height: 1em !important;
    }
    ha-state-icon {
      {% if is_state('input_boolean.garage_dummy_switch', 'on') %} color: #228B22;--card-mod-icon: mdi:lock-open; {% else %} color: red; --card-mod-icon: mdi:lock; {% endif %}
    }
    .container {
       --card-secondary-font-size: 12px;
       --card-primary-font-size: 10px;
      }