light_card.yaml

type: custom:button-card
entity: light.bedroom_light
name: Bedroom Room
show_icon: false
styles:
  card:
    - border-radius: 25px
    - border-style: none
    - box-shadow: 0px 0px 10px -9px black
  grid:
    - grid-template-areas: '"icon_cells" "n" "slider"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  custom_fields:
    icon_cells:
      - justify-self: start
      - margin-top: 12px
      - margin-left: 13px
  name:
    - font-size: 90%
    - font-weight: bold
    - justify-self: start
    - margin-top: 6px
    - margin-left: 12px
custom_fields:
  icon_cells: |
    [[[
      return `<ha-icon
        icon="ssb:ceiling-light"
        style="width: 25px; height: 25px; color: auto;">
       </ha-icon> 
       `
    ]]]
  slider:
    card:
      type: custom:my-slider-v2
      entity: '[[[ return entity.entity_id ]]]'
      colorMode: brightness
      styles:
        card:
          - height: 20px
          - width: 89%
          - margin-left: 12px
          - margin-top: 15px
          - margin-bottom: 10px
          - border-width: 0px
        container:
          - border-radius: 20px
          - margin-left: '-1px'
          - width: 101%
        track:
          - background: |
              [[[
                if (entity.state == "on") return 'linear-gradient(to right, #ffee96 , white)';
                else return 'var(--primary-background-color)';
              ]]]
        progress:
          - height: 100%
          - background: ''
          - position: absolute
          - width: 0.00%
          - border-radius: 20px
        thumb:
          - height: 100%
          - background: |
              [[[
                if (entity.state == "on") return 'black';
                else return 'var(--primary-text-color)';
              ]]]
          - position: absolute
          - right: |
              [[[
                if (entity.state == "on") return '-5px' ;
                else return '-17px';
              ]]]
          - height: 15px
          - width: 15px
          - margin-top: 2.5px
          - border-radius: 20px
hold_action:
  action: more-info
state:
  - value: 'on'
    styles:
      card:
        - background-color: '#ffe871'
        - color: black