type: custom:mushroom-chips-card
chips:
- …
card_mod:
style: |
ha-card {
--chip-border-radius: var(--mush-control-border-radius);
}
or
type: custom:mushroom-chips-card
chips:
- …
card_mod:
style: |
ha-card {
--chip-border-radius: 14px;
}
Thank you. It doesn’t work here. Also, I use almost 100 chips… isn’t there a way to change it globally? It must be somewhere in the code for the mushroom chips… doesn’t it?
Ok, I figured it out. It is indeed in the mushroom.js file. However it only works if the theme is mushroom too. If the theme, as in my case, is iOSTheme, the settings for the border-radius in the mushroom.js are ignored.
There is already a documented theme variable for this. Just add mush-chip-border-radius to whatever theme you are using.
Like this:
mush-chip-border-radius: 18px
Want to remove the shadows around each icon at the bottom and fix some margin.
Can’t figure out where to put the code
@rhysb Could you help me out?
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.0x0017880104b753e9_temperature
icon: mdi:home-floor-b
icon_color: blue
name: Basement
tap_action:
action: navigate
navigation_path: basement
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: switch.basement
icon: mdi:ceiling-light
icon_color: |
{% if is_state('switch.basement', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: input_select.washer_status
icon: mdi:washing-machine
icon_color: |
{% if is_state('input_select.washer_status', 'On') %}
blue
{% else %}
disabled
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Washer
content:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: sensor.washer_runtime
secondary_info: last-updated
show_header_toggle: false
state_color: false
- type: custom:mini-graph-card
entities:
- sensor.washer_power
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('input_select.washer_status', 'On') }}
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
- type: custom:mushroom-template-card
entity: sensor.dryer_operation_state
icon: mdi:tumble-dryer
icon_color: |
{% if is_state('sensor.dryer_operation_state', 'Run') %}
blue
{% else %}
disabled
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Washer
content:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: sensor.dryer_duration
secondary_info: last-updated
show_header_toggle: false
state_color: false
- type: custom:mini-graph-card
entities:
- sensor.dryer_power
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if is_state('sensor.dryer_operation_state', 'Run') }}
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
@rhysb
think i manged it to work.
.shape {
--shape-color: none;
}
.: |
ha-card {
margin-top: -20px;
margin-bottom: -10px;
box-shadow: none;
background: rgba(0, 0, 0, 0);
}
I was just looking at it and thinking the same. It’d be much nicer having no cover at all if not playing than a big static image on the dashboard.
is it possible to use restriction-card in chips?
Hi.
Is it possible to make a chip card with different icon colors depends on the binary sensor state?
I need something like this:
- if state is off - the icon is green without animation
- if state is on - the icon color is red with blinkig animation
- if state is unavailable - the color is gray without anivation
Icon is alarm-light
Hi, can you share your code for this ?
thank you.
Hello,
One sample:
type: custom:mushroom-template-card
primary: Front Door Lock
secondary: |-
{% set state=states(entity) %}
{% if state=='locked' %}
Locked
{% elif state=='unlocked' %}
Unlocked
{% else %}
Error
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-alert
{% else %}
mdi:alert
{% endif %}
layout: vertical
entity: lock.front_door_lock
tap_action:
action: toggle
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
green
{% elif state=='unlocked' %}
red
{% else %}
grey
{% endif %}
Thanks.
What about animation? Is it possible to do it at some state of the binary sensor?
Hi, is there any way to customize font size in mushroom-title-card? i’d like to increase both title and subtitle font size. Thanks!
Yes, you can set a unique icon and animation in each state. You just have to substitute the right icon and animation in the right place. Scroll up in the topic and you will see plenty of examples.
Have a look here:
I’m adapting @rhysb 's great media card and am struggling to align a grid layout-card with the Mushroom media card, all within a stack-in-card.
I could avoid the issue if I were able to reduce the space around the volume slider and buttons in a Mushroom media card. I’ve tried everything my limited CSS skills allow to do that. But, I’m also open to any other suggestions.
Basically, I’ve split things into two separate media cards, because I need volume controls on the same row as a chip card that calls a volume-related script.
What I’m trying to achieve:
Relevant part of the card config:
...more before; cards are inside a stack-in-card...
- type: custom:mushroom-media-player-card
entity: media_player.sonos_all_inside
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
card_mod:
style: |
ha-card {
margin: 0px 0px 0px;
border-width: 0;
}
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-media-player-card
entity: media_player.sonos_all_inside
volume_controls:
- volume_mute
- volume_set
- volume_buttons
media_controls: []
show_volume_level: true
use_media_info: false
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
--mush-rgb-disabled: 189,189,189;
--mush-rgb-indigo: 63, 81, 181;
border-color: rgb(0,0,0,0);
background-color: rgb(0,0,0,0);
box-shadow: none
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:volume-equal
alignment: end
name: SYNC
tap_action:
action: call-service
service: script.sonos_whole_house_volume
data: {}
target: {}
card_mod:
style: |
ha-card {
margin-top: 13px; #To align button with volume slider
margin-right: 0px;
margin-left: 0px;
--chip-background: rgba(var(--rgb-disabled), 0.1);
--chip-box-shadow: none;
--chip-border-radius: 12px;
--chip-border-color: rgba(0, 0, 0, 0);
--chip-height: 40px;
--chip-padding: 10px;
}
box-shadow: none
layout:
grid-template-columns: 85% 15%
...more after...
Hope this is clear. Thanks very much in advance!
Thanks for the excellent media card, @rhysb . Here’s an addition that you might find useful. I modified the logic for the animated icon so that it only animates if media is currenlty playing.
...
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
{% if not is_state('media_player.sonos_all_inside', 'paused') %}
animation: flicker 1s linear infinite alternate;
{% endif %}
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
{% if not is_state('media_player.sonos_all_inside', 'paused') %}
animation: spin 2s linear infinite reverse;
{% endif %}
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
{% if not is_state('media_player.sonos_all_inside', 'paused') %}
animation: beat 1.3s ease-out infinite both;
{% endif %}
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
{% if not is_state('media_player.sonos_all_inside', 'paused') %}
animation: beat 1.3s ease-out infinite both;
{% endif %}
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
...