2nd Half of Code
- type: conditional
conditions:
- entity: input_boolean.spare_bedroom_battery_dropdown
state: 'on'
card:
type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
padding-bottom: 5px;
margin: -14px 0px 0px 0px;
background: transparent;
box-shadow: none;
border: none;
}
card_param: cards
filter:
template: >-
{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}
{{
{
'type': 'custom:bar-card',
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
'card_mod':
{
'style': 'bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 41px !important;
margin-top: -8px !important;
width: 103%;
left: -1.5%;
}
ha-icon {
position: relative;
padding: 11px;
border-radius: 100px;
--mdc-icon-size: 21px;
margin-top: -15px;
right: 4px;
}
{% if states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff0026 !important;
/* Icon */
--card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 20 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff4d00 !important;
/* Icon */
--card-mod-icon: mdi:battery-20 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #cccccc !important;
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 30 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ff9900 !important;
/* Icon */
--card-mod-icon: mdi:battery-30 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 40 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #ffcc00 !important;
/* Icon */
--card-mod-icon: mdi:battery-40 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 50 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #e3eb00 !important;
/* Icon */
--card-mod-icon: mdi:battery-50 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 60 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #aaff00 !important;
/* Icon */
--card-mod-icon: mdi:battery-60 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 70 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #77ff00 !important;
/* Icon */
--card-mod-icon: mdi:battery-70 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 80 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #00ff1a !important;
/* Icon */
--card-mod-icon: mdi:battery-80 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 90 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #22c402 !important;
/* Icon */
--card-mod-icon: mdi:battery-90 !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% elif states(config.entity) | int <= 100 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #22c402 !important;
/* Icon */
--card-mod-icon: mdi:battery !important;
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% else %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
/* Bar color */
--bar-color: #0033ff !important
/* Icon */
--card-mod-icon: mdi:bug
}
@media (prefers-color-scheme: dark) {
/* Dark theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
filter: invert(1)
}
bar-card-value {
color: #cccccc !important;
filter: invert(1)
}
}
@media (prefers-color-scheme: light) {
/* Light theme text colors */
bar-card-name {
color: var(--primary-text-color) !important;
}
bar-card-value {
color: #3b3b3b !important;
}
}
{% 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);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-name {
margin-top: -27px !important;
font-weight: bold;
left: 0px;
}
bar-card-value {
margin-top: 8px !important;
font-weight: bold;
font-size: 11px;
right: 97%;
width: 0px;
}
ha-card {
margin: -4px 0px !important;
height: 60px;
}'
}
}
}},
{%- endfor %}
sort:
method: state
numeric: true
first: 1
count: 100
EDIT: Updated to work with card mod version 3.4.0 and up. Since just using style: |
without card_mod:
before is entirely dead now.