home_automation/ha-dashboards
2
0
Fork 0
Code Issues 2 Pull Requests Projects Activity

Use javascript styles instead of card-mod for floor cards

Browse Source
This commit is contained in:
Tony Stork
2025-05-07 13:51:16 -04:00
parent a860a8404d
commit c6568610f8
1 changed files with 18 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
mobile_dashboard.yaml
View File

@ -108,39 +108,30 @@ streamline_templates:
tap_action: tap_action:
action: navigate action: navigate
navigation_path: '[[navigation_path]]' navigation_path: '[[navigation_path]]'
card_mod: styles_javascript: |
style: |- const occupancy = states['[[occupancy_entity]]'].state;
const hot = states['[[hot_entity]]'].state;
const cold = states['[[cold_entity]]'].state;
return `
.is-unavailable { .is-unavailable {
opacity: 0.5 !important; opacity: 0.5 !important;
} }
.bubble-button-background { .bubble-button-background {
opacity: 1 !important; opacity: 1 !important;
background-color: background-color: ${
{% if is_state(config.entity,'on') %} occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
var(--accent-color) } !important;
{% else %}
var(--bubble-main-background-color)
{% endif %}
!important;
transition: background-color 1s !important; transition: background-color 1s !important;
} }
.bubble-icon-container { .bubble-icon-container {
background: background: ${
{% if is_state(config.entity,'on') %} occupancy === 'on' ? 'var(--accent-color)' : 'var(--card-background-color)'
var(--accent-color) } !important;
{% else %}
var(--card-background-color)
{% endif %}
!important;
} }
.bubble-icon-container::after { .bubble-icon-container::after {
opacity: opacity: ${
{% if is_state(config.entity,'on') %} occupancy === 'on' ? 0.3 : 0
0.3 } !important;
{% else %}
0
{% endif %}
!important;
transition: all 1s !important; transition: all 1s !important;
} }
.bubble-icon { .bubble-icon {
@ -154,18 +145,11 @@ streamline_templates:
background: transparent background: transparent
} }
.bubble-sub-button-1 { .bubble-sub-button-1 {
background-color: background-color: ${
{% if is_state('[[hot_entity]]','on') %} hot === 'on' ? 'var(--error-color)' : cold === 'on' ? 'var(--purple-color)' : occupancy === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'
var(--error-color) } !important;
{% elif is_state('[[cold_entity]]','on') %}
var(--purple-color)
{% elif is_state(config.entity,'on') %}
var(--accent-color)
{% else %}
var(--bubble-main-background-color)
{% endif %}
!important;
} }
`;
sub_button: sub_button:
- entity: '[[temp_entity]]' - entity: '[[temp_entity]]'
name: Temp name: Temp