Hello everyone,
I’ve hit a good stride making my own version of the Vertical Pill Card and I’ve been working on something fancy for my Halloween outdoor light scenes, but as you can see from the image below, there is a tiny bit of bright color at the bottom of the pill (or top on the second scene). Can any of you me understand why this is happening? I’ve attempted to rotate the color, but then the color ends up on the opposite side. Also, in looking closer, the color run over is happening at the top and the bottom, but it’s harder to see on the side opposite of the purple.
As an aside, I’d like to remove the icon background circle from both of the “activated” Halloween scenes as well if anyone knows how. I’ve attempted a few things, but it hasn’t worked yet.
Here is the full code of the card. Please advise! Thank you!
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Lights
secondary: null
icon: mdi:lightbulb-group-off
layout: vertical
icon_color: yellow
tap_action:
action: perform-action
perform_action: script.turn_off_all_downstairs_lights
target: {}
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--card-primary-font-size: .9rem;
width: 60px;
border-radius: 30px;
height: 62px !important;
padding: 29px 0 0 1px;
box-shadow: 0px 2px 4px 0px #333333;
}
:host {
--mush-icon-size: 50px;
}
{% if states('light.cabinet_lights') == 'on' %}
ha-card {
height: 100px !important;
padding: 0 0 9px 0;
}
ha-state-icon {
--card-mod-icon: mdi:lightbulb-group
}
ha-tile-icon {
--tile-color: yellow;
}
{% else %}
{% endif %}
}
- type: custom:mushroom-template-card
primary: Bed
secondary: null
icon: mdi:bed
layout: vertical
icon_color: green
tap_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.goodnight
card_mod:
style: |
ha-card {
--card-primary-font-size: 1rem;
width: 60px;
border-radius: 30px;
height: 62px !important;
padding: 29px 0 0 0;
box-shadow: 0px 2px 4px 0px #333333;
}
:host {
--mush-icon-size: 50px;
}
{% if states('input_boolean.goodnight') == 'on' %}
ha-card {
height: 100px !important;
padding: 0 0 9px 0;
}
{% else %}
{% endif %}
}
- type: custom:mushroom-template-card
primary: Oct
secondary: null
icon: mdi:halloween
layout: vertical
icon_color: orange
tap_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.halloween
card_mod:
style: |
ha-card {
--card-primary-font-size: 1rem;
width: 60px;
border-radius: 30px;
height: 62px !important;
padding: 29px 0 0 0;
box-shadow: 0px 2px 4px 0px #333333;
}
:host {
--mush-icon-size: 50px;
}
{% if states('input_boolean.halloween') == 'on' %}
ha-card {
height: 100px !important;
padding: 0 0 9px 0;
background: linear-gradient(0deg, rgba(75,0,130,1) 0%, rgba(255,152,0,1) 60%);
--primary-text-color: black;
--card-primary-color: black;
}
ha-state-icon {
color: black;
}
{% else %}
{% endif %}
}
- type: custom:mushroom-template-card
primary: Oct
secondary: null
icon: mdi:candy
layout: vertical
icon_color: purple
tap_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.halloween_2
card_mod:
style: |
ha-card {
--card-primary-font-size: 1rem;
width: 60px;
border-radius: 30px;
height: 62px !important;
padding: 29px 0 0 0;
box-shadow: 0px 2px 4px 0px #333333;
}
:host {
--mush-icon-size: 50px;
}
{% if states('input_boolean.halloween_2') == 'on' %}
ha-card {
height: 100px !important;
padding: 0 0 9px 0;
background: linear-gradient(0deg, rgba(239,255,0,1) 10%, rgba(29,255,0,1) 27%, rgba(75,0,130,1) 45%);
--primary-text-color: black;
--card-primary-color: black;
}
ha-state-icon {
color: black;
}
{% else %}
{% endif %}
}
- type: custom:mushroom-template-card
primary: TBD
secondary: null
icon: mdi:ab-testing
layout: vertical
icon_color: blue
card_mod:
style: |
ha-card {
--card-primary-font-size: 1rem;
width: 60px;
border-radius: 30px;
height: 62px !important;
padding: 29px 0 0 0;
box-shadow: 0px 2px 4px 0px #333333;
}
:host {
--mush-icon-size: 50px;
}