TommyWelle
July 9, 2024, 9:25am
965
Hello
I have some issues after updating HA and Mushroom Themes.
Here is my code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Benjamin
secondary: |-
{{ states('sensor.verisure_rv_benjamin_temp') }}°C |
{{ states('sensor.verisure_rv_benjamin_fukt') }} %
icon: mdi:face-man
entity: light.lysg_benja_tak
icon_color: |-
{% if is_state('light.lysg_benja_tak', 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/benja
multiline_secondary: false
card_mod:
style: |
ha-state-icon::after {
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
}
{% if states('binary_sensor.aqara_motion_benja_1') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-disabled), 0.5);
color: rgba(var(--rgb-red), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
layout: horizontal
fill_container: false
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.mill_benja
icon: |-
{% if is_state('climate.mill_benja', 'heat') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
icon_color: |-
{% if is_state('climate.mill_benja', 'heat') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.lysg_benja_tak
icon: |-
{% if is_state('light.lysg_benja_tak', 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state('light.lysg_benja_tak', 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: light
entity: light.lys_benja_led_tak_1
use_light_color: true
icon: mdi:led-strip-variant
content_info: none
tap_action:
action: toggle
card_mod:
style:
mushroom-light-chip:nth-child(1)$: |
ha-state-icon {
{% if states('light.lys_benja_led_tak_1') == 'off' %}
color: grey;
{% endif %}
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.8em
}
- type: template
entity: input_boolean.benjamin_nattlys_10
icon: |-
{% if is_state('input_boolean.benjamin_nattlys_10', 'on') %}
mdi:weather-night
{% else %}
mdi:weather-night
{% endif %}
icon_color: >-
{% if is_state('input_boolean.benjamin_nattlys_10', 'on') %} purple {%
else %} grey {% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.boolean_benja_tv_auto
icon: |-
{% if is_state('input_boolean.boolean_benja_tv_auto', 'on') %}
mdi:television
{% else %}
mdi:television-off
{% endif %}
icon_color: |-
{% if is_state('input_boolean.boolean_benja_tv_auto', 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
icon_color: blue
icon: mdi:remote-tv
hold_action:
action: false
tap_action:
action: call-service
service: script.1708632757993
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.benjamin_auto
icon: |-
{% if is_state('input_boolean.benjamin_auto', 'on') %}
mdi:lightbulb-auto
{% else %}
mdi:lightbulb-auto-outline
{% endif %}
icon_color: |-
{% if is_state('input_boolean.benjamin_auto', 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: switch.aqara_kontakt_benja_1
icon: |-
{% if is_state('switch.aqara_kontakt_benja_1', 'on') %}
mdi:power-plug
{% else %}
mdi:power-plug-off
{% endif %}
icon_color: |-
{% if is_state('switch.aqara_kontakt_benja_1', 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
alignment: end
card_mod:
style: |
ha-card {
background: none !important;
height: 40px;
flex-wrap: nowrap;
width: max-content;
align-items: center;
display: flex;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
padding-bottom: 0px;
}
:host {
overflow-x: scroll;
overflow-y: hidden;
direction: ltr;
margin: 0px !important;
padding-left: 12px;
padding-bottom: 0px;
margin-top: 10px;
}
tischer.s
July 9, 2024, 7:23pm
966
Thats amazing, thanks a lot
Can you help me a bit with:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Haus
secondary: >-
{{ states('sensor.haus_temperatur_mischung') | replace (".",",")}} °C • {{
states('sensor.haus_feuchtigkeit_mischung') }} %
icon: mdi:home
entity: light.zentral_haus_licht_helper
tap_action:
action: navigate
navigation_path: haus
hold_action:
action: more-info
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_bewegung_prasenz_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_bewegung_prasenz
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_fenster_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_fenster
icon: mdi:window-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_turen_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_turen
icon: mdi:door-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_tore_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_tore
icon: mdi:gate-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: input_boolean.briefkasten
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: input_boolean.briefkasten
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:mailbox-open
- type: template
icon_color: '{{ ''#f1c232'' if is_state(entity, ''on'') else ''off'' ''#5353ec''}}'
icon: mdi:sleep-off
tap_action:
action: more-info
entity: switch.wach_schlafen
alignment: end
card_mod:
style: |
ha-card {
height: 40px;
}
1 Like
Frosty
July 9, 2024, 9:50pm
967
you can add some right margin to the icon shape
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin-right: 10px;
}
--chip-box-shadow: none;
Faecon
July 10, 2024, 4:00am
968
I have an orange line around the template card. Can this be disabled ?
type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
tischer.s
July 10, 2024, 6:30am
969
You are great thanks a lot for the code snippet
Unfortunately, for me it is not working - can you quickly help me please where to place it?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Haus
secondary: >-
{{ states('sensor.haus_temperatur_mischung') | replace (".",",")}} °C • {{
states('sensor.haus_feuchtigkeit_mischung') }} %
icon: mdi:home
entity: light.zentral_haus_licht_helper
tap_action:
action: navigate
navigation_path: haus
hold_action:
action: more-info
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
--chip-box-shadow: none;
}
mushroom-shape-icon$: |
.shape {
margin-right: 50px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_bewegung_prasenz_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_bewegung_prasenz
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_fenster_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_fenster
icon: mdi:window-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_turen_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_turen
icon: mdi:door-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_tore_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_tore
icon: mdi:gate-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: input_boolean.briefkasten
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: input_boolean.briefkasten
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:mailbox-open
- type: template
icon_color: '{{ ''#f1c232'' if is_state(entity, ''on'') else ''off'' ''#5353ec''}}'
icon: mdi:sleep-off
tap_action:
action: more-info
entity: switch.wach_schlafen
alignment: end
card_mod:
style: |
ha-card {
height: 40px;
}
i found a post a while ago that helped me with the card-mod code blocks.
style:
mushroom-shape-icon$: |
.shape {
margin-right: 50px;
}
.: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
--chip-box-shadow: none;
}
tischer.s
July 10, 2024, 7:28am
971
Amazing, that does the trick, thanks a lot
Mar1us
July 10, 2024, 8:59am
972
Hello,
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kinderzimmer
secondary: >-
🌡️ {{ states('sensor.kinderzimmer_raumthermostat_temperature') | round(1)
}} °C
icon: mdi:teddy-bear
entity: light.kinderzimmer
tap_action:
action: navigate
navigation_path: kinderzimmer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
margin-bottom: -10px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.kinderzimmer_bewegungsmelder_occupancy
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
entity: binary_sensor.kinderzimmer_bewegungsmelder_occupancy
tap_action:
action: more-info
- type: conditional
conditions:
- entity: binary_sensor.heizung_kinderzimmer
state_not: 'off'
chip:
type: template
entity: climate.kinderzimmer_thermostat
icon: |-
{% if is_state(entity, 'heat') %}
mdi:fire
{% endif %}
icon_color: red
- type: conditional
conditions:
- entity: binary_sensor.kinderzimmer_balkontur
state: 'on'
chip:
type: template
icon_color: amber
icon: mdi:door-open
entity: binary_sensor.kinderzimmer_balkontur
tap_action:
action: more-info
- type: light
entity: light.kinderzimmer
content_info: none
use_light_color: true
icon: mdi:lightbulb
tap_action:
action: toggle
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.kinderzimmer', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Can anyone help here?
still no idea what changed, but it seems the negative values aren’t accepted with margin-xxxx values.margin-xxxx - like i posted here
thecem
July 10, 2024, 1:20pm
974
I try to get the amount of battery emptier than 30% into a mushroom chip card.
May some one know a solution.
THX!
type: template
content: |-
{% set ignore_entities = [] %}
{{ states.sensor
| selectattr('attributes.device_class', 'eq', 'battery')
| rejectattr('entity_id', 'in', ignore_entities)
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1) | select('le', 30)
| select('ge', 0)
| list | count
}}
icon_color: orange
icon: |-
{% set ignore_entities = [] %}
{% if states.sensor
| selectattr('attributes.device_class', 'eq', 'battery')
| rejectattr('entity_id', 'in', ignore_entities)
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1) | select('le', 30)
| select('ge', 0)
| list | count = 0
%}
mdi:battery-check
{% else %}
mdi:battery-alert
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/battery
hold_action:
action: none
double_tap_action:
action: none
mvanlijden
July 10, 2024, 1:48pm
975
Check my posts just a few posts above. The old way of resizing / moving items does not work anymore. I found a new that does work.
1 Like
Can’t seem to get this fix to work on mine. It looks fine in the editor but losing its styling when I save it. Can you see anything that would fix it?
card_mod:
style: |
ha-card {
--chip-font-size: 0.3em;
--chip-icon-size: 0.6em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: normal;
}
I did try this but it didn’t help:
card_mod:
style:
.: |
ha-card {
--chip-font-size: 0.3em;
--chip-icon-size: 0.6em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: normal;
}
tofrie
July 10, 2024, 8:31pm
977
Same here… doesn‘t work for me. I like to add some space between icon and text.
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2) !important;
}
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025) !important;
height: 55px;
width: 500px;
position: relative;
left: -18px;
top: -18px;
--spacing: 12px 10px 0 12px;
--icon-size: 76px;
--ha-card-border-width: 0;
What card are you applying this to?
Faecon
July 11, 2024, 6:10pm
979
How can I make the OK button the size of the ja, nee. and how can I make it centered ?
this is what I have now in the card_mod
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
text-align: center !important;
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
i was thinking adding width but that does not work
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
width: 50px;
}
edit : solution
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}}) !important;
width: 100px;
margin-left: 65px;
}
Hi all. Some amazing work in here, but I’ve had a bit of search and wasn’t able to find help for this exact scenario.
I have a Mushroom chip with animation based on an entity’s state that’s working fine as is, but I’d love to change it to add additional functionality. I would love if it could be tied into two entities instead of one. I.e. Currently when the dog needs feeding and input boolean is turned on and the icon colours and is animated.
I’d like to change the colour and animation if a second input boolean’s state is on. I’m not exactly sure how it would function if they were both on at the same time, but for these purposes it probably doesn’t matter which is showing. Is that possible?
Here’s my code for the existing working chip, followed by the additional animation frames I intend to include for the second input boolean:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon: mdi:dog
icon_color: |-
{% set state=states('input_boolean.edie_needs_feeding') %}
{% if state=='off' %}
grey
{% else %}
brown
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
entity: input_boolean.edie_needs_feeding
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('input_boolean.edie_needs_feeding','on') %}
animation: huh 4s ease infinite; transform-origin: 50% 60%;
{% else %}
{% endif %}
}
@keyframes huh {
0%, 10%, 75%, 100% { transform: rotate(0deg); }
15% { transform: rotate(-25deg); }
30%, 35% { transform: rotate(-40deg); }
50% { transform: rotate(12deg); }
65% { transform: rotate(-8deg); }
}
‘Surprise’ animation
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 3s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-6px) rotate(-14deg); }
5% { transform: translateY(-6px) rotate(11deg); }
7.5% { transform: translateY(-6px) rotate(-8deg); }
10% { transform: translateY(-6px) rotate(5deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-3px) }
}
Jonae
July 13, 2024, 7:32pm
981
Hi, i am trying to animate an icon but it seems that i am missing something, the mdi:fan is working perfectly, but i am not able to pulse the mdi:pi-hole icon, cand anyone halp me please. Thanks
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:cog-outline
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/net
entity: sensor.cpu_temperature
show_state: true
name: ' '
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:pi-hole
entity: input_boolean.pi_hole_timer
card_mod:
style: |
ha-card {
--chip-background: transparent;
padding: 5px !important;
border-radius: 100px !important;
color: yellow !important;
border: none !important;
{% if is_state('input_boolean.pi_hole_timer', 'on') %}
opacity: 1 !important;
animation: pulse 2s infinite !important;
{% else %}
opacity: 0.4 !important;
animation: none !important;
{% endif %}
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
- type: template
tap_action:
action: toggle
icon: mdi:fan
entity: sensor.argon_one_addon_fan_speed
card_mod:
style: |
ha-card {
--chip-background: transparent;
padding: 5px!important;
border-radius: 100px!important;
color: yellow!important;
border: none!important;
{% set fan_speed = states('sensor.argon_one_addon_fan_speed') %}
{% if fan_speed != 'unknown' and fan_speed | int > 0 %}
opacity: 1 !important;
animation: spin 1s linear infinite !important;
{% else %}
opacity: 0.4 !important;
animation: none !important;
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
card_mod:
style: |
ha-card {
background: linear-gradient(135deg, rgba(220, 20, 60, 1) 0%, rgba(0, 0, 0, 1) 100%);
border: transparent!important;
color: white;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
padding: 20px;
}
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 10px 2px 91px 10px
img_cell:
- justify-content: start
- position: absolute
- width: 150px
- height: 150px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: transparent;
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: 1
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: white
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: 0.7
columns: 3
You need to rename the animation something other than pulse. Pulse is a standard Mushroom animation and appears to conflict with your keyframes css.
code with renamed animation to test
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:cog-outline
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/net
entity: sensor.cpu_temperature
show_state: true
name: ' '
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:pi-hole
entity: input_boolean.pi_hole_timer
card_mod:
style: |
ha-card {
--chip-background: transparent;
padding: 5px !important;
border-radius: 100px !important;
color: yellow !important;
border: none !important;
{% if is_state('input_boolean.pi_hole_timer', 'on') %}
opacity: 1 !important;
animation: test 2s infinite !important;
{% else %}
opacity: 0.4 !important;
animation: none !important;
{% endif %}
}
@keyframes test {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
- type: template
tap_action:
action: toggle
icon: mdi:fan
entity: sensor.argon_one_addon_fan_speed
card_mod:
style: |
ha-card {
--chip-background: transparent;
padding: 5px!important;
border-radius: 100px!important;
color: yellow!important;
border: none!important;
{% set fan_speed = states('sensor.argon_one_addon_fan_speed') %}
{% if fan_speed != 'unknown' and fan_speed | int > 0 %}
opacity: 1 !important;
animation: spin 1s linear infinite !important;
{% else %}
opacity: 0.4 !important;
animation: none !important;
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
card_mod:
style: |
ha-card {
background: linear-gradient(135deg, rgba(220, 20, 60, 1) 0%, rgba(0, 0, 0, 1) 100%);
border: transparent!important;
color: white;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
padding: 20px;
}
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 10px 2px 91px 10px
img_cell:
- justify-content: start
- position: absolute
- width: 150px
- height: 150px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: transparent;
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: 1
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: white
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: 0.7
columns: 3
2 Likes
Faecon
July 15, 2024, 9:20am
983
I have a mushroom template card , where I want the background a litlle darker. I have this cardmod
card_mod:
style:
.: |
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
}
:host {
background: rgba(rgb({{ states("input_text.kleur_iconen")}}), 0.2);
}
Frosty
July 15, 2024, 1:16pm
984
I am sure you could have worked it out on your own.
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
background: rgba(rgb({{ states("input_text.kleur_iconen")}}), 0.2);
}
