qiz-li/lovelace-soft-ui

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!