HA | Redesign - Living Room - Overview - Button

type: custom:button-card
name: Lights
entity: light.livings
icon: mdi:monitor-speaker
show_icon: true
aspect_ratio: 1/1
styles:
  card:
    - background-color: '#35425c'
    - border-radius: 20px
    - padding: 8px
    - box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
  name:
    - font-weight: bold
    - font-size: 28px
    - align-self: middle
    - justify-self: start
    - padding-left: 9px
    - padding-bottom: 13px
    - letter-spacing: '-1.0px'
  icon:
    - padding: 22px
    - width: 70px
    - height: 70px
    - color: white
    - border-radius: 55px
    - background-color: '#4B5975'
    - opacity: 0
  img_cell:
    - justify-content: start
    - align-self: middle
    - margin: none
  grid:
    - grid-template-areas: '"n i1" "i i2" "i i3"'
    - grid-template-columns: 72% 28%
    - grid-template-rows: 1fr 1fr 1fr
  custom_fields:
    sub:
      - position: absolute
      - left: 9%
      - top: 23%
    logo:
      - position: absolute
      - left: '-12%'
      - top: 33%
custom_fields:
  sub:
    card:
      type: custom:button-card
      name: <b style="font-weight:bold;font-size:13px">4 </b>Lights
      styles:
        card:
          - background-color: transparent
          - border-style: none
        name:
          - justify-self: left
          - font-size: 12px
          - font-weight: 400
          - font-color: '#b4c3cd'
  logo:
    card:
      type: custom:button-card
      color: transparent
      show_name: false
      name: false
      entity_picture: /local/allhouselights.png
      show_entity_picture: true
      styles:
        card:
          - background-color: transparent
          - border-style: none
        icon:
          - width: 110px
          - height: 110px
          - color: white
          - padding: 28px
          - align-self: start
          - text-align: start
          - background-color: '#4B5975'
          - border-radius: 95px
  i1:
    card:
      type: custom:button-card
      color: transparent
      show_name: false
      name: Power
      icon: mdi:power
      styles:
        card:
          - background-color: '#4B5975'
          - border-radius: 55px
          - border-style: none
          - box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2)
        icon:
          - width: 30px
          - height: 30px
          - color: white
          - align-self: start
          - text-align: start
          - padding: 12px
        img_cell:
          - justify-content: middle
          - align-self: middle
          - margin: none
  i2:
    card:
      type: custom:button-card
      color: transparent
      show_name: false
      name: Power
      icon: phu:floor-lamp
      styles:
        card:
          - background-color: '#4B5975'
          - border-radius: 55px
          - border-style: none
          - box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2)
        icon:
          - width: 28px
          - height: 28px
          - color: white
          - align-self: start
          - text-align: start
          - padding: 13px
        img_cell:
          - justify-content: middle
          - align-self: middle
          - margin: none
  i3:
    card:
      type: custom:button-card
      color: transparent
      show_name: false
      name: Power
      icon: phu:spot-bulb-top
      styles:
        card:
          - background-color: '#4B5975'
          - border-radius: 55px
          - border-style: none
          - box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2)
        icon:
          - width: 28px
          - height: 28px
          - color: white
          - align-self: start
          - text-align: start
          - padding: 13px
        img_cell:
          - justify-content: middle
          - align-self: middle
          - margin: none