MiniHass Light Card GUI

views:
  - title: test
    path: test
    badges: []
    cards:
      - type: "custom:button-card"
        entity: input_boolean.dummy_scene1
        template:
          - custom_card_light
        variables:
          light_name: Decor
          light_label: Inside
          show_toggle: false
button_card_templates:
  custom_card_light:
    variables:
      light_name: null
      light_label: null
    entity: '[[[ return entity.entity_id ]]]'
    name: '[[[ return variables.light_name ]]]'
    label: '[[[ return variables.light_label ]]]'
    show_name: true
    show_icon: false
    show_label: true
    show_state: false
    styles:
      grid:
        - grid-template-areas: |
            [[[
              if (entity.state == "on"){
                return '". icon_on" "n n" "l i"';
              } else {
                return '". icon_off" "n n" "l i"';
              }
            ]]]
        - grid-template-rows: 1fr 1fr 1fr
        - grid-template-columns: 1fr 1fr
        - row-gap: 8px
      card:
        - height: 100%
        - border-radius: var(--border-radius)
        - box-shadow: var(--box-shadow)
        - padding: 1rem
      img_cell:
        - justify-content: end
        - overflow: hidden
        - padding: 0 0 0 0
      icon:
        - justify-self: end
        - align-self: center
        - color: var(--color-white)
        - width: var(--button-small)
        - padding: 0 0 0 0
        - overflow: hidden
      name:
        - text-align: left
        - font-size: var(--fs-500)
        - font-family: Montserrat
        - font-weight: 600
        - justify-self: start
        - align-self: end
        - color: var(--contrast-100)
        - overflow: visible
      label:
        - text-align: left
        - font-size: var(--fs-400)
        - font-family: Montserrat
        - font-weight: 500
        - justify-self: start
        - align-self: center
        - color: var(--contrast-100)
        - overflow: visible
      custom_fields:
        icon_on:
          - display: |
              [[[
                if (entity.state == "on"){
                  return 'block';
                } else {
                  return 'none';
                }
              ]]]
          - width: 12px
          - justify-self: end
          - margin-right: 8px
          - color: var(--contrast-33)
        icon_off:
          - display: |
              [[[
                if (entity.state == "off"){
                  return 'block';
                } else {
                  return 'none';
                }
              ]]]
          - width: 12px
          - justify-self: end
          - margin-right: 8px
          - color: var(--contrast-33)
    state:
      - value: 'off'
        icon: mdi:toggle-switch-off-outline
        styles:
          icon:
            - color: var(--contrast-33)
      - value: 'on'
        icon: mdi:toggle-switch-outline
        styles:
          card:
            - background: var(--color-yellow)
          name:
            - color: var(--contrast-0)
          label:
            - color: var(--contrast-0)
          icon:
            - color: var(--contrast-0)
          custom_fields:
            icon_on:
              - color: var(--contrast-0)
            icon_off:
              - color: var(--contrast-0)
    custom_fields:
      icon_on: |
        [[[
          if (entity.state == "on"){
            return '<ha-icon icon="fas:lightbulb"></ha-icon>';
          } else {
            return '<ha-icon icon="far:lightbulb"></ha-icon>';
          }
        ]]]
      icon_off: |
        [[[
          if (entity.state == "on"){
            return '<ha-icon icon="fas:lightbulb"></ha-icon>';
          } else {
            return '<ha-icon icon="far:lightbulb"></ha-icon>';
          }
        ]]]
    extra_styles: |
      :hover #icon_on.ellipsis{
        transform: scale(1.35) !important;
        transition: transform .3s ease-in-out;
      }

      :not(:hover) #icon_on.ellipsis{
        transform: scale(1) !important;
        transition: transform .6s ease-in-out;
      }

      :hover #icon_off.ellipsis{
        transform: scale(1.35) !important;
        color: var(--color-yellow) !important;
        transition: transform .3s ease-in-out, color .3s ease-in-out;
      }

      :not(:hover) #icon_off.ellipsis{
        transform: scale(1) !important;
        transition: transform .6s ease-in-out, color .3s ease-in-out;
      }