Untitled

type: custom:button-card
styles:
  card:
    - padding: 1rem
    - background: |
        [[[
          const watts = parseFloat(states['sensor.power_tibber'].state);
          const degrees = Math.min((watts / 5000) * 360, 360);
          let color;
          if (watts <= 3000) {
            color = 'lime';
          } else if (watts <= 5500) {
            color = 'orange';
          } else {
            color = 'red';
          }
          return `conic-gradient(${color} ${degrees}deg, black 0deg)`;
        ]]]
    - aspect-ratio: 2
    - border-radius: var(--border-radius)
    - animation: rotate 5s ease-in
  extra_styles: |
    @keyframes rotate {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(360deg);
      }
    }
  custom_fields:
    content:
      - width: calc(100% - 0.4rem)
      - height: calc(100% - 0.4rem)
      - left: 0.22rem
      - background: var(--contrast-0)
      - position: absolute
      - border-radius: 1rem
custom_fields:
  content:
    card:
      type: custom:button-card
      entity: sensor.power_tibber
      show_state: false
      show_label: true
      show_icon: false
      label: >
        [[[ return states['sensor.power_tibber'].state + '<span
        style="font-size:0.5em "> W</span>' ]]]
      styles:
        grid:
          - grid-template-areas: '"l l" "n n"'
          - grid-template-rows: 1fr 1fr
          - grid-template-columns: 1fr 1fr
        card:
          - background: none
        label:
          - padding-top: 10%
          - text-align: center
          - font-size: var(--fs-600)
          - font-family: Montserrat
          - font-weight: 600
          - color: var(--contrast-100)
          - overflow: visible
        name:
          - text-align: center
          - font-size: var(--fs-400)
          - font-family: Montserrat
          - font-weight: 500
          - justify-self: top
          - align-self: start
          - color: var(--contrast-100)
          - overflow: visible