I have a styling problem with flex-horseshoe-card. You can see it in the screenshots. It’s working in Chrome-Browser on Android and PC, but not in the HA Android app
HA Android app:
Chrome (PC / Android):
My configuration of the card:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.outdoor_temperature
decimals: 1
name: i3s | innen
tap_action:
action: more-info
- entity: input_boolean.virtual_i3s_climate
icon: mdi:snowflake
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.virtual_i3s_climate
- entity: climate.virtual_thermostat
animations:
entity.1:
- state: 'on'
icons:
- animation_id: 0
styles:
- color: var(--paper-item-icon-active-color);
- state: 'off'
icons:
- animation_id: 0
styles:
- color: var(--primary-text-color);
entity.2:
- state: cool
icons:
- animation_id: 0
styles:
- color: var(--text-primary-color);
circles:
- animation_id: 1
styles:
- fill: var(--cool-blue);
- opacity: 0.8;
- animation: jello 1s ease-in-out both;
- transform-origin: center;
- state: 'off'
circles:
- animation_id: 1
reuse: true
styles:
- transform-origin: center;
- animation: zoomOut 1s ease-out both;
show:
horseshoe_style: colorstopgradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 42
styles:
- font-size: 3.5em;
- text-transform: none;
- font-weight: 500;
hlines:
- id: 0
xpos: 50
ypos: 51
length: 50
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
styles:
- text-transform: lowercase;
- font-size: 1.2rem;
- font-weight: 300;
- stroke: var(--secondary-text-color);
- letter-spacing: 0.1em;
icons:
- id: 0
animation_id: 0
xpos: 50
ypos: 73
entity_index: 1
icon_size: 3.8
circles:
- id: 0
animation_id: 1
xpos: 50
ypos: 68
radius: 25
entity_index: 2
horseshoe_scale:
min: -20
max: 60
width: 10
horseshoe_state:
width: 14
color_stops:
'10': orange
'18': green
'25': orange
'35': red
'-20': red
I would appreciate any help.