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.
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;
}