lovelace.yaml

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: custom:config-template-card
      variables:
        - states['sensor.washer_dryer_max_time'].state
        - states['sensor.washer_dryer_delay_time'].state
        - states['sensor.washer_dryer_wash_time'].state
        - states['sensor.washer_dryer_dry_time'].state
      entities:
        - sensor.washer_dryer_max_time
        - sensor.washer_dryer_total_time
        - sensor.washer_dryer_delay_time
        - sensor.washer_dryer_wash_time
        - sensor.washer_dryer_dry_time
      card:
        type: custom:bar-card
        entities:
          - entity: sensor.washer_dryer_total_time
            name: |-
              "${vars[1] > 0 ? 'Washer/Dryer - Delayed'
               : vars[3] != 'Dry Off' ? 'Washer/Dryer - Drying' 
               : vars[2] > 0 ? 'Washer/Dryer - Washing' 
               : 'Washer/Dryer - Finished'}"
            unit_of_measurement: mins
            min: '0'
            max: ${+vars[0]}
            icon: mdi:washing-machine
            positions:
              indicator: 'off'
            severity:
              - color: |-
                  "${vars[1] > 0 ? '#7634c7'
                   : vars[3] != 'Dry Off' ? '#c77634'
                   : vars[2] > 0 ? '#2F5A9E'
                   : '#a32e2e'}"
                from: 0
                to: 2000
        card_mod:
          style: |
            ha-card {
              border-radius: 30px;
              --paper-item-icon-color: {{
                '#7634c7' if (states('sensor.washer_dryer_delay_time') | int > 0) else
                '#c77634' if (states('sensor.washer_dryer_dry_time') != 'Dry Off') else
                '#2F5A9E' if (states('sensor.washer_dryer_wash_time') | int > 0) else
                '#a32e2e' }};
            }
            .card-content {
              padding: 5px !important;
            }
            bar-card-background {
              margin: 0px 6px 0px 6px !important;
              border-radius: 30px;
            }
            bar-card-backgroundbar {
              --bar-color: '#000000' !important;
            }
            bar-card-currentbar {
              border-radius: 30px
            }
    entities:
      - entity: sensor.washer_dryer_status
        name: Status
      - entity: sensor.washer_dryer_program
        name: Program
      - entity: sensor.washer_dryer_phase
        name: Phase
      - entity: sensor.washer_dryer_wash_temp
        name: Wash Temp
      - entity: sensor.washer_dryer_spin_speed
        name: Spin Speed
      - entity: sensor.washer_dryer_dry_time
        name: Dry Setting
      - entity: sensor.washer_dryer_wash_time
        name: Cycle Time
      - entity: sensor.washer_dryer_delay_time
        name: Delay Time
      - entity: sensor.washer_dryer_error
        name: Error
    card_mod:    
      style: |
        #items {
          padding: 0px 20px 0px 10px !important;
        }
        ha-icon {
          margin: 4px !important;
        }
card_mod:
  style: |
    .card-content {
      padding: 5px !important;
    }
    ha-card {
      border-radius: 30px;
    }
    #states > div {
      margin: 0px 0px !important;
    }