switch.fan, skånetrafiken about hass-config HOT 5 CLOSED

button_card_templates:
.....
  switch:
    aspect_ratio: 1/1
    show_icon: false
    show_state: true
    state:
      - styles:
          card:
            - background-color: 'rgba(255, 255, 255, 0.8)'
          name:
            - color: 'rgba(0, 0, 0, 0.6)'
          state:
            - color: 'rgba(0, 0, 0, 0.6)'
        value: 'on'
    styles:
      card: {}
      name: {}
      state: {}`

custom_fields:
  icon_fan: >
    [[[ if (entity.state === 'on') { return '<svg viewBox="0 0 50 50"
    fill="#5daeea"><animateTransform accumulate="none" additive="sum"
    attributeName="transform" attributeType="xml" calcMode="linear" dur="0.5s"
    fill="remove" from="0 0 0" repeatCount="indefinite" restart="always" to="360
    0 0" type="rotate"/><circle cx="25" cy="25" r="6.6"/><path d="M31.9
    30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9
    1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9
    4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17
    28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19
    6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1
    1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5
    4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1
    1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/></svg>'; } else { return
    '<svg viewBox="0 0 50 50" fill="#9ca2a5"><style>@keyframes
    spin{from{transform:rotate(0)}to{transform:rotate(720deg)}}.spin.animated{animation:spin
    1.7s ease-out 1;transform-origin:center center}</style> <g class="spin
    animated"><circle cx="25" cy="25" r="6.6"/><path d="M31.9 30.4c-.5.6-1.1
    1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3
    3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7
    7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1
    6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2
    4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2
    9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5 4.2.6 7.4
    4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1 1.7 3.2.3
    4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/></g></svg>'; } ]]]
  styles:
    custom_fields:
      icon_fan:
        - top: 9%
        - left: 50%
        - width: 3vw
        - position: absolute
  template: switch
entity: switch.flakt
hold_action:
  action: toggle
style:
  left: 80.05%
  top: 37.9%
  width: 10%
tap_action:
  action: more-info
type: 'custom:button-card

  switch:
    aspect_ratio: 1/1
    show_state: true
    show_icon: false
    state: *button_state
    styles:
      name: *button_styles_name
      state: *button_styles_state
      card: *button_styles_card

color: auto
entity: light.sonoff_hallen
hold_action:
  action: toggle
icon: 'mdi:wall'
name: ' '
size: 60%
styles:
  card:
    - height: 70px
    - width: 64px
tap_action:
  action: more-info
type: 'custom:button-card'