groot29
July 9, 2024, 11:31am
1
Hi everyone, I have this card:
type: custom:button-card
entity: light.gruppo_luci_living
icon: hue:bulb-group-classic-4-alt
name: Living
color-type: icon
color: auto
show_state: false
show_label: true
show_last_changed: false
styles:
card:
- margin-top: 30px
- margin-right: 14px
- margin-left: 10px
- width: 140px
- height: 120px
- border: none
- border-radius: 15px
- '--mdc-ripple-color': lightyellow
- '--mdc-ripple-press-opacity': 0.5
icon:
- padding: 0px 60px 0px 0px
name:
- font-size: 16px
- font-weight: 700
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /dashboard-tablet/living
state:
- value: 'on'
styles:
card:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
- box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
- transition: 2s ease
icon:
- filter: drop-shadow(0 0 0.75rem var(--button-card-light-color))
- transition: 2s ease
- position: relative
name:
- color: var(--button-card-light-color)
- value: 'off'
style:
- opacity: 0.4
styles:
icon:
- color: white
name:
- color: white
- value: unavailable
style:
- opacity: 0.2
styles:
icon:
- color: gray
name:
- color: red
if I insert an RGB LED strip in the luci_living group, when I turn on the group, it colors the card red. I would like to avoid this and leave the default color.
card with strip led rgb (shelly rgbw2):
card without strip led on group.luci_living:
Thank you!
frnak
July 9, 2024, 3:24pm
2
You are using the variable button-card-light-color to color the icon and border in the CSS, which the card gets from the entities. I don’t know how it behaves with groups with mismatching color values, but my guess is that’s the cause.
Is the led strip a faint red color? If you put the light strip in the group, and turn up only the brightness of the actual strip, does the color of the icon get brighter?
groot29
July 9, 2024, 4:13pm
3
if the brightness of the LED strip changes, it also changes on the card.
If I change the color, it also changes on the card
groot29
July 9, 2024, 4:26pm
4
the color works now. Only the problem of brightness remains. If the brightness is low on the LED strip, the button is less bright
frnak
July 9, 2024, 4:29pm
5
If you want to just keep the yellow color, and only make it change based on the brightness you can do something like this:
It makes the border yellow (255,255,0), and changes the opacity based on the actual brightness of the light entity.
state:
- value: 'on'
styles:
card:
- '-webkit-box-shadow': >
[[[
var brightness = states['light.gruppo_luci_living'].attributes.brightness / 255;
return `0 0 0.95rem 0.2rem rgba(255, 255, 0, ${brightness})`;
]]]
- box-shadow: >
[[[
var brightness = states['light.gruppo_luci_living'].attributes.brightness / 255;
return `0 0 0.95rem 0.2rem rgba(255, 255, 0, ${brightness})`;
]]]
- transition: 2s ease
icon:
- filter: >
[[[
var brightness = states['light.gruppo_luci_living'].attributes.brightness / 255;
return `drop-shadow(0 0 0.75rem rgba(255, 255, 0, ${brightness}))`;
]]]
- transition: 2s ease
- position: relative
name:
- color: yellow
…but if you want it to be colored according to the lights, with different kinds of lights in the group, then I have no idea
groot29
July 9, 2024, 4:33pm
6
I want static color and static brightness on the card. If I change the brightness it must not change on the cardeither
Only the problem of brightness remains. If the brightness is low on the LED strip, the button is less bright
frnak
July 9, 2024, 4:40pm
7
Ahh, so you want it to be same color at all times? that’s much simpler, just change it to this:
Here are three different ways to set the color, rgba (rgb with opacity control), rgb, or just the color name, just choose one and make it the same in all four places.
state:
- value: 'on'
styles:
card:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgba(255,255,0, 1)
- box-shadow: 0 0 0.95rem 0.2rem rgb(255,255,0)
- transition: 2s ease
icon:
- filter: drop-shadow(0 0 0.75rem light-yellow)
- transition: 2s ease
- position: relative
name:
- color: yellow
1 Like
