Untitled

type: custom:button-card
styles:
  card:
    - padding: 1rem
    - background: |
        [[[
          const progress = parseFloat(states['sensor.geschirrspuler_program_progress'].state);
          
          // Calculate the degrees for the conic-gradient
          const degrees = Math.min((progress / 100) * 360);
          
          // Determine the color based on the progress
          let color;
          if (progress <= 33) { 
            color = 'lime';
          } else if (progress <= 80) {
            color = 'orange';
          } else {
            color = 'red';
          }
          
          // Return the conic-gradient CSS value
          return `conic-gradient(${color} ${degrees}deg, black 0deg)`;
        ]]]
    - aspect-ratio: 2
    - border-radius: var(--border-radius)
  custom_fields:
    progress:
      - width: calc(100% - 0.4rem)
      - height: calc(100% - 0.4rem)
      - left: 0.22rem
      - background: var(--contrast-0)
      - position: absolute
      - border-radius: 1rem
custom_fields:
  progress:
    card:
      type: custom:button-card
      entity: sensor.oppvaskmaskin_program_progress
      show_state: true
      show_label: true
      show_icon: false
      
      styles:
        grid:
          - grid-template-areas: '"s s" "n n"'
          - grid-template-rows: 1fr 1fr
          - grid-template-columns: 1fr 1fr
        card:
          - background: none
        state:
          - 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