Hi,
I need help solving this problem, which I think is related to style changes introduced in recent versions.
I tried investigating with the browser's development tools, but I'm not skilled enough.
Basically, with version 1.2, my buttons appear with a black background.
With all 5.x versions, however, they appear with a gray background.
Investigating with the browser's dev tools, I found that the cause could be this, because if I disable it the appearance returns correct:
opacity: 0.5;
I searched both the dashboard source code and the theme I'm using, but I couldn't find anything related to this parameter.
This is card code:
type: conditional
conditions:
- entity: binary_sensor.hal_visibile
state: "on"
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout_options:
grid-template-columns: 100%
margin: "-4px"
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.potenza_hal
decimals: 0
name: " "
area: Sala
unit: W
tap_action:
action: more-info
- entity: switch.interruttore_hal
name: HAL
icon: hass:nas
- entity: group.hal
name: info
icon: hass:information-outline
tap_action:
action: more-info
animations:
entity.1:
- state: "on"
circles:
- animation_id: 11
styles:
- fill: var(--light-primary-color);
- animation: jello 1s ease-in-out both;
- transform-origin: center;
icons:
- animation_id: 0
styles:
- color: var(--secondary-background-color);
- state: "off"
circles:
- animation_id: 11
reuse: true
styles:
- transform-origin: center;
- animation: zoomOut 1s ease-out both;
icons:
- animation_id: 0
styles:
- color: var(--light-primary-color);
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 28
uom_font_size: 1.5
styles:
- font-size: 2.5em;
- opacity: 1.0;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 100
styles:
- font-size: 1.2em;
- opacity: 0.7;
- id: 1
entity_index: 1
xpos: 50
ypos: 95
styles:
- font-size: 1.6em;
- opacity: 0.8;
icons:
- id: 0
animation_id: 0
xpos: 50
ypos: 55
entity_index: 1
icon_size: 3.5
- id: 1
animation_id: 1
xpos: 92
ypos: 12
entity_index: 2
icon_size: 3
styles:
- color: var(--secondary-background-color);
circles:
- id: 0
animation_id: 0
xpos: 50
ypos: 50
radius: 35
styles:
- fill: var(--secondary-background-color);
- id: 1
animation_id: 11
xpos: 50
ypos: 50
radius: 30
entity_index: 1
horseshoe_scale:
min: 0
max: 90
color: var(--secondary-background-color)
color_stops:
"0": var(--primary-background-color)
"66": var(--light-primary-color)
horseshoe_state:
width: 12
Any suggestions?
By(t)e
Hi,
I need help solving this problem, which I think is related to style changes introduced in recent versions.
I tried investigating with the browser's development tools, but I'm not skilled enough.
Basically, with version 1.2, my buttons appear with a black background.
With all 5.x versions, however, they appear with a gray background.
Investigating with the browser's dev tools, I found that the cause could be this, because if I disable it the appearance returns correct:
opacity: 0.5;I searched both the dashboard source code and the theme I'm using, but I couldn't find anything related to this parameter.
This is card code:
Any suggestions?
By(t)e