This has been discussed before, but I have seen some conflicting answers (or I have misinterpreted them). I have a card_mod that defines some variables. It uses variables to simplify the code of the card_mod, there is really no need to have them be variables. I can’t get this to work as a decluttering template, although the card works great as a standalone. The card_mod variable syntax is different than the decluttering card, so my hope was that there would be no confusion with the decluttering card.
mushroom_bar_card_template:
card:
type: custom:bar-card
entities:
- entity: sensor.climate_govee_sensor_temperature
icon: mdi:bed-empty
positions:
icon: outside
indicator: 'off'
minmax: 'off'
name: 'off'
value: 'off'
min: 50
max: 80
target: 71
height: 15
severity:
- color: '#4b5d80'
from: 40
to: 69
- color: '#4b8078'
from: 69
to: 75
- color: '#9e5c4b'
from: 75
to: 95
card_mod:
style: >
{% set entity = {
"state": states('sensor.climate_govee_sensor_temperature') | int(9999999999),
"name": "Guest Room Temperature",
"unit": "F"
}
%} {% set severity = {
"blue": 0,
"green": 69,
"orange": 75
}
%} {% set colors = {
"blue": "75,93,128",
"green": "75,128,120",
"orange": "158,92,75"
}
%}
ha-card .card-content {
padding: 12px!important;
cursor: pointer;
}
ha-card {
transition-duration: 0.05s;
}
ha-card:hover {
{% if entity.state == 9999999999 %}
background-color: rgba(200,200,200, 0.02);
{% elif entity.state < severity.orange %}
background-color: rgba({{colors.green}}, 0.02);
{% elif entity.state < severity.green %}
background-color: rgba({{colors.blue}}, 0.02);
{%- else -%}
background-color: rgba({{colors.orange}}, 0.02);
{%- endif %}
}
bar-card-background {
margin-left: 13px !important;
}
bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar,
bar-card-targetbar {
border-radius: 8px;
}
bar-card-currentbar, bar-card-backgroundbar, bar-card-contentbar,
bar-card-targetbar, bar-card-animationbar {
{% if entity.state == 9999999999 %}
left: 1.5em !important;
width: calc(100% - 1.5em);
{% else %}
{% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
left: {{state_width}}em !important;
width: calc(100% - {{state_width}}em);
{%- endif %}
}
bar-card-markerbar {
display: none;
}
bar-card-background::before {
content: "{{ entity.name }}";
display: flex;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
height: 20px;
letter-spacing: 0.1px;
line-height: 20px;
margin-bottom: 6px;
}
bar-card-background::after {
{% if entity.state == 9999999999 %}
content: "N/A"
{%- else %}
content: "{{ entity.state }}{{ entity.unit}}";
{%- endif %}
font-family: Roboto, Noto, sans-serif;
font-size: 12px;
font-weight: 400;
height: 16px;
letter-spacing: 0.4px;
line-height: 16px;
display: inline-block;
position: absolute;
margin-top: -4px;
width: fit-content;
}
bar-card-iconbar {
{% if entity.state == 9999999999 %}
color: rgba(200,200,200, 1);
background-color: rgba(200,200,200, 0.2);
{% elif entity.state < severity.green %}
color: rgba({{colors.blue}}, 1);
background-color: rgba({{colors.blue}}, 0.2);
{% elif entity.state < severity.orange %}
color: rgba({{colors.green}}, 1);
background-color: rgba({{colors.green}}, 0.2);
{%- else -%}
color: rgba({{colors.orange}}, 1);
background-color: rgba({{colors.orange}}, 0.2);
{%- endif %}
border-radius: 50%;
}
