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