Mushroom / Stack-in-card - start animation problem

Configuration Frontend
1

Hi all,

I created a Stack-in card with three elements. The second element is a very big mushroom entity card. A tap on the hole card lead to another page.

The following problem:
While loading/reloading the page: A unwanted „shadow“ appears shortly. These dark bars
→ How can I get rid of it?

First tile: shadow overall - nice. (Only the mushroom card in the stack-in-card.
Second and third: shadow only „inside“ the mushroom-card. Second just reduces the effect by lowering the mushroom card height to 0px.

IMG_1147
IMG_11471290×2037 152 KB 

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Strom
    alignment: end
    card_mod:
      style: |
        ha-card {
          --title-font-size: 40px;
          --title-font-weight: lighter;
          margin-top: -10px;
          margin-right: 0px;
        }
  - type: custom:mushroom-entity-card
    name: Strom
    entity: sensor.hausstromverbrauch_2
    primary_info: none
    secondary_info: none
    fill_container: true
    tap_action:
      action: navigate
      navigation_path: /lovelace/laden
    hold_action:
      action: navigate
      navigation_path: /lovelace/laden
    double_tap_action:
      action: navigate
      navigation_path: /lovelace/laden
    card_mod:
      style: |
        :host {
          --mush-icon-size: 280px;
          --mush-icon-symbol-size: 0.75em;
          margin-top: -40px !important;
          margin-left: -80px !important;
          height: 120px;
        }
        ha-card {
          --card-primary-font-size: 3rem;
          --card-primary-font-weight: lighter;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: back
      - type: action
        tap_action: null
        action: navigate
        navigation_path: /lovelace/tuer
        icon: mdi:door-closed
      - type: action
        tap_action: null
        action: navigate
        navigation_path: /lovelace/tuer
        icon: mdi:door-closed
      - type: action
        tap_action: null
        action: navigate
        navigation_path: /lovelace/tuer
        icon: mdi:door-closed
      - type: action
        tap_action: null
        action: navigate
        navigation_path: /lovelace/tuer
        icon: mdi:door-closed
    alignment: end
    card_mod:
      style: |
        :host {
          margin-bottom: 15px !important;
          margin-right: 15px !important;
        }
        ha-card {
          --chip-background: rgba(var(--rgb-disabled), 0.2);
          --chip-box-shadow: none;
        }
2 Likes
2

I think I solved the problem:

  1. mushroom card has to be as big as the hole card.
  2. absolute positioning.
  3. define the height of the stack.

Result: „not moving, but nice start animatics dimming for the hole card“


type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Strom
    subtitle: Strom, Energie & Laden
    alignment: end
    card_mod:
      style: |
        ha-card {
          --title-font-size: 40px;
          --title-font-weight: lighter;
          position: absolute; top:0; right:0;
        }
  - type: custom:mushroom-template-card
    primary: null
    secondary: null
    icon: mdi:flash
    icon_color: blue
    fill_container: true
    tap_action:
      action: navigate
      navigation_path: /lovelace/laden
    hold_action:
      action: navigate
      navigation_path: /lovelace/laden
    double_tap_action:
      action: navigate
      navigation_path: /lovelace/laden
    card_mod:
      style: |
        :host {
          --mush-icon-size: 220px;
          --mush-icon-symbol-size: 0.75em;
          margin-top: -30px !important;
          margin-left: -60px !important;
        }
        ha-card {
          --card-primary-font-size: 3rem;
          --card-primary-font-weight: lighter;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: back
      - type: action
        tap_action: null
        action: navigate
        navigation_path: /lovelace/tuer
        icon: mdi:door-closed
      - type: action
        tap_action: null
        action: navigate
        navigation_path: /lovelace/tuer
        icon: mdi:door-closed
      - type: action
        tap_action: null
        action: navigate
        navigation_path: /lovelace/tuer
        icon: mdi:door-closed
      - type: action
        tap_action: null
        action: navigate
        navigation_path: /lovelace/tuer
        icon: mdi:door-closed
    alignment: end
    card_mod:
      style: |
        :host {
          position: absolute; bottom:15px; right:15px;
        }
        ha-card {
          --chip-background: rgba(var(--rgb-disabled), 0.2);
          --chip-box-shadow: none;
        }
card_mod:
  style: |
    ha-card {
      height: 180px;
    }