light_button_rgb

button_card_templates:
  light_button_rgb:
    variables:
      background_off: rgba(220, 221, 247,0.8)
    name: |
      [[[
        var bri = states[entity.entity_id].attributes.brightness
        if (states[entity.entity_id].state === 'on')
        return Math.round((bri ? bri : '0')/255*100) + '%'
        else return 'Luce'
      ]]]
    color_type: card
    show:name: true
    show_icon: true
    show_label: true
    show_state: false
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    custom_fields:
      br:
        card:
          type: custom:my-slider-v2
          entity: '[[[ return entity.entity_id ]]]'
          mode: brightness
          styles:
            container:
              - overflow: visible
            card:
              - border-radius: 100px
              - height: 20px
              - padding: 0px 17px
              - border: |
                  [[[
                    if (states[entity.entity_id].state === 'unavailable')
                    return 'transparent'
                  ]]]
              - background: |
                  [[[
                    if (states[entity.entity_id].state === 'on')
                    return 'linear-gradient(90deg, rgba(211,161,31,1) 0%, rgba(255,211,94,1) 100%)'
                    else if (states[entity.entity_id].state === 'off')
                    return 'linear-gradient(90deg, rgba(211,161,31,0.5) 0%, rgba(255,211,94,0.5) 100%)'
                    else return 'transparent'
                  ]]]
            track:
              - overflow: visible
              - background: none
              - padding: 0 4px 0 5px
            progress:
              - background: none
            thumb:
              - background: |
                  [[[
                    if (states[entity.entity_id].state === 'on')
                    return 'white'
                    else if (states[entity.entity_id].state === 'off')
                    return 'rgba(255,255,255,0.3)'
                    else return 'transparent'
                  ]]]
              - top: 0px
              - right: 0px
              - height: 18px
              - width: 18px
              - border-radius: 100px
      k:
        card:
          type: custom:my-slider-v2
          entity: '[[[ return entity.entity_id ]]]'
          mode: temperature
          styles:
            container:
              - overflow: visible
            card:
              - border-radius: 100px
              - height: 20px
              - top: 5px
              - padding: 0 17px
              - border: |
                  [[[
                    if (states[entity.entity_id].state === 'unavailable')
                    return 'transparent'
                  ]]]
              - background: |
                  [[[
                    if (states[entity.entity_id].state === 'on')
                    return 'linear-gradient(90deg, rgba(177,197,255,1) 0%, rgba(255,175,131,1)100%)'
                    else if (states[entity.entity_id].state === 'off')
                    return 'linear-gradient(90deg, rgba(177,197,255,0.5) 0%, rgba(255,175,131,0.5)100%)'
                    else return 'transparent'
                  ]]]
            track:
              - overflow: visible
              - background: none
              - padding: 0 4px 0 5px
            progress:
              - background: none
            thumb:
              - background: |
                  [[[
                    if (states[entity.entity_id].state === 'on')
                    return 'white'
                    else if (states[entity.entity_id].state === 'off')
                    return 'rgba(255,255,255,0.3)'
                    else return 'transparent'
                  ]]]
              - top: 0px
              - right: 0px
              - height: 18px
              - width: 18px
              - border-radius: 100px
    state:
      - value: 'off'
        styles:
          icon:
            - color: black
          name:
            - color: black
          label:
            - color: black
          card:
            - background: '[[[ return variables.background_off ]]]'
      - value: 'on'
        color: auto
        styles:
          icon:
            - color: black
          name:
            - color: black
          label:
            - color: black
      - value: unavaliable
        color: auto
    styles:
      grid:
        - grid-template-areas: '"n i" "l l" "br br" "k k"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: min-content min-content 1fr
      icon:
        - width: 30px
      img_cell:
        - justify-self: end
        - width: 40px
        - height: 40px
        - bottom: 10px
        - right: 5px
      name:
        - justify-self: start
        - padding-bottom: 5px
        - padding-left: 10px
        - font-size: 20px
        - line-height: 30px
        - font-weight: 600
      label:
        - justify-self: start
        - padding-left: 10px
        - font-size: 14px
        - font-weight: 500
        - margin-bottom: 10px
        - margin-top: '-10px'
      br:
        - bottom: 14px
      card:
        - height: 140px
        - padding: 20px
        - border-radius: 25px
        - '--mdc-ripple-color': yellow
        - '--mdc-ripple-press-opacity': 0.5