I wonder if anyone can help me troubleshoot a difference between Firefox on Windows and iOS Companion app displaying the same card differently? On Firefox the card displays correctly but on iOS the circle that should surround the kitchen icon is squased. The same problem happens on iOS Safari…
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:door
icon_color: >-
{% if is_state('binary_sensor.back_door_sensor_magnet_on_off','on') %}
red
{% elif is_state('binary_sensor.back_door_sensor_magnet_on_off','off')
%}
green
{% else %}
disabled
{% endif %}
- type: template
icon: |-
{% if is_state('binary_sensor.kitchen_motion_group','on') %}
mdi:motion-sensor
{% else %}
mdi:walk
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.kitchen_motion_group','on') %}
red
{% elif is_state('binary_sensor.kitchen_motion_group','off') %}
green
{% else %}
disabled
{% endif%}
- type: template
icon: mdi:thermometer
icon_color: orange
use_entity_picture: false
content: '{{ states("sensor.kitchen_sensor_temperature") |round(1) }}C'
entity: sensor.kitchen_sensor_temperature
- type: template
icon: mdi:water-percent
icon_color: light-blue
use_entity_picture: false
content: '{{ states("sensor.kitchen_sensor_humidity") |round() }}%'
entity: sensor.kitchen_sensor_humidity
alignment: center
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: open 6s ease-in-out infinite;' if is_state('binary_sensor.back_door_sensor_magnet_on_off', 'on') }}
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
.shape {
perspective: 45px;
}
mushroom-template-chip:nth-child(2)$: |
ha-icon {
{{ 'animation: clip 2s infinite;' if is_state('binary_sensor.kitchen_motion_group', 'on') }}
}
{% if is_state('binary_sensor.kitchen_motion_group', 'on') %}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
.shape {
animation: motion 2s linear infinite;
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-red), 0.3); }
50% { --shape-color: rgba(var(--rgb-red), 0.2); }
}
{% endif %}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding-top: 5px;
}
- type: custom:mushroom-template-card
primary: Kitchen
icon: mdi:countertop-outline
tap_action:
action: navigate
navigation_path: /lovelace/kitchen
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 20px !important;
position: absolute;
top: 0px;
left: 75px;
overflow: visible !important;
white-space: normal !important;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -30px;
top: -0px;
height: 20px;
{% if is_state('light.kitchen_light_group', 'on') %}
--shape-color: rgba(var(--rgb-orange), 0.25);
--icon-color: rgba(var(--rgb-white), 1);
{% endif %}
}
.: |
:host {
--mush-icon-size: 120px;
--primary-text-color: #a0a0a0
}
ha-card {
height: 75px !important;
}
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-template-card
name: Coffee Machine
entity: cover.kitchen_blind
icon: |-
{% if is_state ('cover.kitchen_blind', 'open') %}
mdi:blinds-open
{% else %}
mdi:blinds
{% endif %}
icon_color: |-
{% if is_state ('cover.kitchen_blind', 'open') %}
grey
{% else %}
purple
{% endif %}
primary_info: none
secondary_info: none
layout: vertical
tap_action:
action: toggle
- type: custom:mushroom-template-card
name: Dishwasher
entity: input_select.dishwasher_state_machine
icon: mdi:dishwasher
icon_color: '{{ ''light-blue'' if is_state(entity, ''job_ongoing'') else '''' }}'
primary_info: none
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if states('sensor.dishwasher_powee') | int > 5 }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
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); }
}
.: |
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transform: scale(0.975);
transition: 0s;
}
- type: custom:mushroom-template-card
name: Quooker Tap
icon: mdi:speaker
entity: media_player.kitchen_sonos
icon_color: '{{ ''green'' if is_state(entity, ''playing'') else ''disabled'' }}'
primary_info: none
secondary_info: none
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
- type: grid
square: false
columns: 1
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Kitchen
icon: mdi:toggle-switch-outline
entity: light.kitchen_light_group
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.kitchen_lights
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else
'mdi:chevron-down' }}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.kitchen_lights
state: 'on'
card:
type: custom:stack-in-card
columns: 4
mode: horizontal
keep:
background: true
border_radius: true
margin: true
cards:
- type: custom:mushroom-light-card
name: Lights
entity: light.kitchen_spotlights
icon: mdi:lightbulb-spot
primary_info: none
secondary_info: none
layout: vertical
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-light-card
name: LEDs
entity: light.kitchen_leds
icon: |-
{% if is_state('light.kitchen_leds','on') %}
mdi:led-strip-variant
{% else %}
mdi:led-strip-variant-off
{% endif %}
show_brightness_control: false
show_color_control: false
collapsible_controls: false
use_light_color: true
primary_info: none
secondary_info: none
layout: vertical
card_mod:
style: |
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transform: scale(0.975);
transition: 0s;
}
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--card-mod-icon: mdi:led-strip-variant;
{% else %}
--card-mod-icon: mdi:led-strip-variant-off;
{% endif %}
}
- type: custom:mushroom-light-card
name: Wall LEDs
entity: light.kitchen_wall_leds
show_brightness_control: true
collapsible_controls: true
primary_info: none
secondary_info: none
layout: vertical
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--card-mod-icon:
{% set light_level = ((state_attr(config.entity, "brightness") / 255) * 10) | round(0) * 10 %}
{% if light_level == 100 %}
mdi:lightbulb-on
{% elif light_level > 0 %}
mdi:lightbulb-on-{{ light_level }}
{% else %}
mdi:lightbulb-on-outline
{% endif %};
{% else %}
--card-mod-icon: mdi:lightbulb-outline;
{% endif %}
}
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-light-card
name: Ceiling LEDs
entity: light.kitchen_ceiling_leds
show_brightness_control: true
collapsible_controls: true
primary_info: none
secondary_info: none
layout: vertical
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--card-mod-icon:
{% set light_level = ((state_attr(config.entity, "brightness") / 255) * 10) | round(0) * 10 %}
{% if light_level == 100 %}
mdi:lightbulb-on
{% elif light_level > 0 %}
mdi:lightbulb-on-{{ light_level }}
{% else %}
mdi:lightbulb-on-outline
{% endif %};
{% else %}
--card-mod-icon: mdi:lightbulb-outline;
{% endif %}
}
ha-card {
box-shadow: 0px 0px;
}
state_color: true
show_header_toggle: false
Credit for the card goes to @danwooller
