Hi there,
I’ve created a card using Stack-in-card. It is bassicly 2 cards on top off each other. I’m trying to get rid of the border around it but I’m unsuccesfull…
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
layout: horizontal
primary: |2-
{% if states("input_boolean.washing") == "on" %}
Klaar
{% elif states("input_boolean.washing") == "off" %}
Bezig
{% endif %}
secondary: ''
icon: mdi:washing-machine
icon_color: |-
{% if states("input_boolean.washing") == "on" %}
green
{% elif states("input_boolean.washing") == "off" %}
orange
{% else %}
none
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
clip-path: polygon(0% 0%, 0% 100%, 24% 100%, 24% 33%, 75% 33%, 75% 84%, 1% 84%, 10% 100%, 100% 100%, 100% 0%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
--icon-symbol-size: 55px
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: |-
{% if states("input_boolean.washing") == "on" %}
green
{% elif states("input_boolean.washing") == "off" %}
orange
{% else %}
none
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state('input_boolean.washing','off') }}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
top: -70px;
--icon-symbol-size: 65x
}
card_mod:
style: |
ha-card {
width: 150px;
lenght: 500px;
height: 65px;
border-radius: 20px;
margin-bottom: 1px;
}
I’ve tried adding the following under ha_card for both cards but the border remains
background: none;
box-shadow: none;