Unfortunately, I’m struggling to find how to fix it when nested.
So we are singing from the same hymn sheet, I’ve modified your template code a little to be, what I think is, easier to understand by tweaking the variable names.
I’ve also added a new variable for --high-slider-opacity, which appears to need to be changed dependent on whether the light or dark theme is selected (as per my previous post on this). Unfortunately, it doesn’t appear to be possible detect which theme is in use and select this automatically.
The opacity values previously using 0.75 are now correct, as far as I can tell. There should have been no opacity (i.e. 1) applied to these as there is not in the standard card settings.
For my own customisation, I have changed passive-mode-text to be always shown, hence the variable rename to extra-info-text, not just when in Passive Mode, as I think it’s nice to display the HVAC mode and demand regardless. The dynamicity of the text to be displayed is handled by a template in the variable itself.
Lastly, I want the radial heating glow to show when there is demand and not just when heating, so I have modified that too, although the glow is currently not working when nested in other cards (hence my screenshots are from non-nested cards, where this works correctly).
Here’s my current YAML and some screenshots:
card_mod:
style:
ha-state-control-climate-temperature:
.: |
:host {
{# Colours #}
--climate-auto-color: var(--green-color);
--climate-heat-color: var(--deep-orange-color);
--passive-auto-color: var(--light-green-color);
--passive-heat-color: var(--amber-color);
--radial-heating-glow-color: var(--deep-orange-color);
--label-text-highlight-color: var(--state-climate-heat-color, inherit);
--high-slider-opacity: var(--light-disabled-opacity);
{# Buttons and extra info text #}
--button-visibility: hidden;
--extra-info-text: "{%- if state_attr(config.entity, 'is_passive') -%}Passive{%- elif is_state(config.entity, 'heat') -%}Manual{%- else -%}{{ states(config.entity) | title }}{%- endif -%}{%- if not is_state(config.entity, 'off') %} ⸱ {{ state_attr(config.entity, 'percentage_demand') }}%{%- endif -%}";
--extra-info-text-color: var(--action-color);
{# DO NOT MODIFY BELOW HERE #}
--state-climate-auto-color: var(--climate-auto-color, --green-color);
--state-climate-heat-color: var(--climate-heat-color, --deep-orange-color);
}
$:
.: |
{# Set the radial heating glow colour and show it when there is demand even if it's not actively heating #}
{%- if (state_attr(config.entity, 'percentage_demand') | float(0) > 0) -%}
div.container.lg {
--action-color: var(--radial-heating-glow-color) !important;
}
{% endif %}
{# Highlight the label text when there is demand even if it's not actively heating #}
{%- if (state_attr(config.entity, 'percentage_demand') | float(0) > 0) -%}
.label { color: var(--label-text-highlight-color) !important; }
{%- endif -%}
{# Set the buttons visibility and display the extra info text #}
.buttons { visibility: var(--button-visibility); }
.info > p:last-of-type::after { content: "\a" var(--extra-info-text); white-space: pre; color: var(--extra-info-text-color) }
ha-control-circular-slider:
$: |
{# Set the slider colours for Passive Mode #}
{%- if state_attr(config.entity, 'is_passive') -%}
.high {
stroke: var(--disabled-color) !important;
opacity: var(--high-slider-opacity) !important;
}
{%- if is_state(config.entity, 'auto') -%}
.background {
stroke: var(--passive-auto-color) !important;
opacity: 1 !important;
}
.low {
stroke: var(--passive-auto-color) !important;
opacity: 0.5 !important;
}
{%- elif is_state(config.entity, 'heat') -%}
.background {
stroke: var(--passive-heat-color) !important;
opacity: 1 !important;
}
.low {
stroke: var(--passive-heat-color) !important;
opacity: 0.5 !important;
}
{%- endif -%}
{%- endif -%}
hui-card-features $ hui-climate-hvac-modes-card-feature $ ha-control-select:
$: |
{# Set the HVAC mode colours for Passive Mode #}
{%- if state_attr(config.entity, 'is_passive') -%}
#option-auto::before {
background-color: var(--passive-auto-color)
}
#option-heat::before {
background-color: var(--passive-heat-color)
}
{%- endif -%}
)
This may not be the best way to do this, but it seems to work.
