Style not applied when used in decluttering card
BaQs opened this issue · 1 comments
BaQs commented
I experience a weird behaviour.
I'm using decluttering-card to onboard all the style code of each custom-button, but it seems the style is not applied, and no button appears.
I put few buttons in an horizontal-stack.
Thus, when I add one more button without using decluttering card, suddenly everything appears!
It looks like some weird cache or something like that.
Code to reproduce:
decluttering_templates:
button_soft:
card:
entity: '[[entity]]'
hold_action:
haptic: medium
show_icon: true
show_name: false
state:
- styles:
icon:
- color: 'var(--paper-item-icon-active-color) '
value: 'on'
style: |
ha-card {
margin: 5px;
margin-left: 6.5px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') and is_state('[[entity]]', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'above_horizon') and is_state('[[entity]]', 'off') %}
-5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') and is_state('[[entity]]', 'on') %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% elif is_state('sun.sun', 'below_horizon') and is_state('[[entity]]', 'off') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% elif is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
@media only screen and (max-width: 600px) {
ha-card {
margin: 3px;
margin-left: 4px;
}
}
@media only screen and (min-width: 1200px) {
ha-card {
margin: 8px;
margin-left: 11px;
}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
type: 'custom:button-card'
cards:
- template: button_soft
type: 'custom:decluttering-card'
variables:
- entity: group.living_lights
- template: button_soft
type: 'custom:decluttering-card'
variables:
- entity: light.fibaro_system_fgd212_dimmer_2_level_7
- template: button_soft
type: 'custom:decluttering-card'
variables:
- entity: light.fibaro_system_fgd212_dimmer_2_level_4
- template: button_soft
type: 'custom:decluttering-card'
variables:
- entity: light.fibaro_system_fgd212_dimmer_2_level_5
- template: button_soft
type: 'custom:decluttering-card'
variables:
- entity: switch.prise_bambi
- entity: light.fibaro_system_fgd212_dimmer_2_level_4
hold_action:
haptic: medium
show_icon: true
show_name: false
state:
- styles:
icon:
- color: 'var(--paper-item-icon-active-color) '
value: 'on'
style: |
ha-card {
margin: 5px;
margin-left: 6.5px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') and is_state('[[entity]]', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'above_horizon') and is_state('[[entity]]', 'off') %}
-5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') and is_state('[[entity]]', 'on') %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% elif is_state('sun.sun', 'below_horizon') and is_state('[[entity]]', 'off') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% elif is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
@media only screen and (max-width: 600px) {
ha-card {
margin: 3px;
margin-left: 4px;
}
}
@media only screen and (min-width: 1200px) {
ha-card {
margin: 8px;
margin-left: 11px;
}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
type: 'custom:button-card'
type: horizontal-stack
BaQs commented
Ok, upgrading card-mod seems to work!