car card

type: picture-elements
image: /local/images/car.jpg
elements:
  - type: custom:bar-card
    entity: "sensor.car_fuel"
    title_position: 'off'
    icon_position: 'off'
    indicator: 'off'
    show_value: 'false'
    height: 99%
    padding: 0px
    direction: right
    severity:
      - value: 20
        color: 'hsl(0, 75%, 50%)'
      - value: 50
        color: 'hsl(40, 75%, 50%)'
      - value: 100
        color: 'hsl(120, 75%, 50%)'
    style:
      bottom: 5px
      right: 5px
      left: 5px
      transform: "translate(0%, 0%)"
      "--card-background-color": "rgba(39, 40, 43, 0.7)"
  - type: state-label
    entity: sensor.car_odometer
    style:
      top: 10px
      right: 10px
      color: black
      transform: translate(0%, 0%)
      pointer-events: none
      font-size: 200%
      font-weight: bold
      font-family: 'DigitalDisplay'
  - type: state-label
    entity: sensor.car_fuel
    attribute: distanceToEmpty
    prefix: "→"
    suffix: " km"
    style:
      top: 40px
      right: 15px
      color: black
      transform: translate(0%, 0%)
      pointer-events: none
  - type: state-icon
    entity: sensor.state_car
    style:
      pointer-events: none
      top: 18px
      left: 18px
      "--paper-item-icon-color": black
      transform: scale(2) translate(-33%, -33%)
      transform-origin: left top
  - type: state-label
    entity: sensor.car_lastrefresh_localized
    style:
      bottom: 10px
      right: 10px
      color: black
      transform: translate(0%, 0%)
      pointer-events: none
  - type: conditional
    conditions:
      - entity: lock.car_doorlock
        state: locked
    elements:
      - type: icon
        icon: mdi:lock
        style:
          top: 10px
          left: 55px
          color: black
          transform: scale(0.75)
          transform-origin: top left
  - type: conditional
    conditions:
      - entity: lock.car_doorlock
        state: open
    elements:
      - type: icon
        icon: mdi:lock-open
        style:
          top: 10px
          left: 55px
          color: black
          transform: scale(0.75)
          transform-origin: top left