type: custom:auto-entities
card:
type: entities
filter:
include:
- entity_id: '*battery_level*'
options:
type: custom:bar-card
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 10px;
height: 43px !important;
margin-top: -8px;
}
bar-card-row {
margin-bottom: 14px !important;
}
bar-card-name {
color: black;
margin-top: -10px;
}
bar-card-value {
color: black;
margin-top: -10px;
}
ha-icon{
padding: 11px;
border-radius: 100px;
margin-top: -12px;
}
bar-card-row bar-card-currentbar,
ha-icon, bar-card-backgroundbar {
--bar-color:
{% if states(config.entity) | int <= 10 %}
#ff0026 !important;
--card-mod-icon: mdi:battery-10 !important;
{% elif states(config.entity) | int <= 20 %}
#ff4d00 !important;
--card-mod-icon: mdi:battery-20 !important;
{% elif states(config.entity) | int <= 30 %}
#ff9900 !important;
--card-mod-icon: mdi:battery-30 !important;
{% elif states(config.entity) | int <= 40 %}
#ffcc00 !important;
--card-mod-icon: mdi:battery-40 !important;
{% elif states(config.entity) | int <= 50 %}
#e7fc03 !important;
--card-mod-icon: mdi:battery-50 !important;
{% elif states(config.entity) | int <= 60 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-60 !important;
{% elif states(config.entity) | int <= 70 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-70 !important;
{% elif states(config.entity) | int <= 80 %}
#22c402 !important;
--card-mod-icon: mdi:battery-80 !important;
{% elif states(config.entity) | int <= 90 %}
#22c402 !important;
--card-mod-icon: mdi:battery-90 !important;
{% elif states(config.entity) | int <= 100 %}
#22c402 !important;
--card-mod-icon: mdi:battery !important;
{% else %}
blue
mdi:bug
{% endif %}
}
bar-card-row ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent);
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
ha-card {
padding: 0px !important;
margin: -3px !important;
height: 60px;
}
exclude: []
