Light card

[acesyde]

Preview

Description

Create a light card with entity (domain light) / action holder / icon_color / background_color / slider

Todo

• translations
• editor
• card
• documentation

Button card code

type: custom:button-card
name: Studeerkamer
icon: mdi:track-light
entity: light.studeerkamer_groep
tap_action:
  action: toggle
  haptic: medium
hold_action:
  action: more-info
  haptic: medium
custom_fields:
  slider:
    card:
      type: custom:my-slider-v2
      entity: light.studeerkamer_groep
      colorMode: brightness
      styles:
        container:
          - background: none
          - border-radius: 100px
          - overflow: visible
        card:
          - height: 16px
          - padding: 0 8px
          - background: |
              [[[
                if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
                else return "var(--contrast4)";
              ]]]
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: |
              [[[
                if (entity.state == "on") return "var(--black)";
                if (entity.state == "off") return "var(--contrast20)";
                else return "var(--contrast8)";
              ]]]
          - top: 2px
          - right: '-6px'
          - height: 12px
          - width: 12px
          - border-radius: 100px
styles:
  grid:
    - grid-template-areas: '"i" "n" "slider"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - font-family: In case of a custom font, otherwise you can remove this line
    - background: var(--contrast2)
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
  img_cell:
    - justify-self: start
    - width: 24px
  icon:
    - width: 24px
    - height: 24px
    - color: var(--contrast8)
  name:
    - justify-self: start
    - font-size: 14px
    - margin: 4px 0 12px 0
    - color: var(--contrast8)
state:
  - value: 'on'
    styles:
      card:
        - background: var(--yellow)
      icon:
        - color: var(--black)
      name:
        - color: var(--black)
  - value: 'off'
    styles:
      icon:
        - color: var(--contrast20)
      name:
        - color: var(--contrast20)