See my updated picture above
in “themes” I only changed the Font but, how can I change the width of the “chip” to fit all the characters and make it semi-transparent?
Mushroom Shadow:
# Home Assistant override
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
# Chip
mush-chip-spacing: 8px
mush-chip-padding: 0 0.25em
mush-chip-height: 36px
mush-chip-border-radius: 18px
mush-chip-font-size: 0.3em
mush-chip-font-weight: nomal
mush-chip-icon-size: 0.5em
mush-chip-avatar-padding: 0.1em
mush-chip-avatar-border-radius: 50%
mush-chip-background: var(--ha-card-background)
mush-chip-box-shadow: var(--ha-card-box-shadow)
modes:
light: {}
dark: {}
May i ask an icon animation for mdi:printer-3d-nozzle
br
1 Like
thank you for your help but it’s too difficult for me. Can you send me code for animation christmas tree if entity is on? I use your code:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pine-tree
icon_color: green
primary: 'Albero'
secondary_info: state
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0
50% { transform: translateY(-10px) rotate(360deg) scale(0.6)
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infi
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -198px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
i want enable this animation when i turn on chrismast tree lights. Very thanks!
1 Like
Have a look at these examples. Perhaps you can find something you like:
1 Like
Yes, this is how I use it for my Christmas Tree.
Mushroom Animated Christmas Tree Light:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.christmas_tree
icon: mdi:pine-tree
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: true
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -120px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -186px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
entity: light.christmas_tree
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -252px;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
{{ 'height: 120px;' if is_state('light.christmas_tree', 'on') else 'height: 66px;' }}
{% set r = state_attr('light.christmas_tree', 'rgb_color')[0] %}
{% set g = state_attr('light.christmas_tree', 'rgb_color')[1] %}
{% set b = state_attr('light.christmas_tree', 'rgb_color')[2] %}
background-color: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
4 Likes
Why don’t you just create an input_boolean helper for the on/off state?
thank you. i had a look in this code.
1 Like
You are an absolute wizard
2 Likes
No one who can help me. Thank you very much
Lots of different ways, but a theme seems best, take a look at the thread and the post marked as the answer.
1 Like
Hi Rhys,
I tried to replicate your beautiful Christmas tree, it works great but it show the chips border of the other images you offset on the tree:
Do you have any tip to hide those?
Thanks!
1 Like
Nice job. Instead of currently playing entity wich doesn’t let me control music and speakers how can i make one card with multiple players?
1 Like
Thanks! It works
1 Like
Oops, forgot to check the default theme. Add --chip-border-width: 0; to the bottom like this:
.: |
mushroom-template-chip:not(:first-child) {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
}
2 Likes
Thanks that worked beautifully!
1 Like
@rhysb love these but have a question;
Most of your designs & code you create a version that works with a ‘dark’ and ‘light’ theme modes. However that option only seems to work if you use the default HASS theme. If you have a custom theme like mine (Noctis, which has many dark colors) and I implement this card for example it reverts to the ‘light’ version of your card and I still have not found a way to trick the theme to HASS thinks it’s dark. So with the example above (Mushroom Media Player Ultrablur Background with Idle Art) I get the left but want to right (dark version).
I guess there is something in your code that checks light/dark. Could you tell me how to ‘trick it’ so it forces dark even tough the theme is not aware?
1 Like
HI All
I am trying to have an icon change its animation based on the weather. So, for example, when its sunny, it uses the sunny animation, and when it’s raining, it used the raining animation.
I have got it working with the weather-sunny icon, but when I do the weather-rain, it produces a funny result
See below
type: custom:mushroom-template-card
primary: '{{states(''sensor.highett_short_text_0'' ) }}'
secondary: ''
icon: '{{states(''sensor.highett_mdi_icon_0'') }}'
icon_color: |-
{% if is_state('sensor.highett_mdi_icon_0', 'mdi:weather-sunny') %}
yellow
{% elif is_state('sensor.highett_mdi_icon_0', 'mdi:weather-rainy') %}
blue
{% endif %}
card_mod:
style: |
mushroom-shape-icon {
{% set weather = states('sensor.highett_mdi_icon_0') %}
{% if weather == 'mdi:weather-sunny' %}
--card-mod-icon: mdi:weather-sunny;
animation: sunny 8s ease-in-out infinite alternate;
{% elif weather == 'mdi:weather-rainy' %}
--card-mod-icon: mdi:weather-rainy;
animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
{% endif %}
display: flex;
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes rain {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
@keyframes moon {
0%, 100% { transform: rotate(12deg); }
30% { transform: rotate(-6deg); }
45% { transform: rotate(8deg); }
75% { transform: rotate(-10deg); }
}
@keyframes stars {
0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
}
Thanks
Amazing! thank you so much!
1 Like
I have modified it a little bit to make a tree green .
ON
OFF
@rhysb Thanks a lot again
Here is card-yaml:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.christmas_lights
icon: mdi:pine-tree
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-template-card
icon: mdi:pine-tree
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -120px;
}
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -186px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -252px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
entity: light.christmas_lights
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -318px;
}
card_mod:
style: |
ha-card {
{{ 'height: 120px;' if is_state('light.christmas_lights', 'on') else 'height: 66px;' }}
{% set r = state_attr('light.christmas_tree', 'rgb_color')[0] %}
{% set g = state_attr('light.christmas_tree', 'rgb_color')[1] %}
{% set b = state_attr('light.christmas_tree', 'rgb_color')[2] %}
background-color: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
4 Likes