Bubble-Card
Bubble-Card copied to clipboard
Ignore change color only when state it's 'on'
Ciao,
I try to modify the color conditionally with state, when the state it's off works fine... when the state it's on... the color change to orange but after 1 second rewrite with default ( light-blue ) color, in below the configuration and video.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#plug-cantina'
name: Cantina
icon: m3s:shelves-rounded-filled
- type: custom:bubble-card
card_type: separator
name: Prese
icon: mdi:power-socket-it
styles: |
.separator-container div:last-child {
opacity: 1 !important;
}
- type: grid
columns: 1
square: false
cards:
- type: custom:bubble-card
card_button: switch
card_type: button
icon: mdi:fridge
entity: switch.raffreddino
layout: horizontal
name: Pozzetto
show_state: true
sub_button:
- entity: switch.raffreddino
icon: mdi:chart-bar
tap_action:
action: navigate
navigation_path: '#consumi-cantina'
styles: >-
.bubble-button-card-container {
background: ${state === 'on' ? 'rgb(100, 80, 40)' : 'rgb(31, 43, 67)'} !important;
height: 54px !important;
width: 100% !important;
}
.bubble-icon-container {
--mdc-icon-size: 24px !important;
left: 3px !important;
min-height: 35px !important;
min-width: 35px !important;
background: rgba(63, 70, 84) !important;
}
.bubble-sub-button {
height: 40px !important;
width: 40px !important;
background: rgba(63, 70, 84) !important;
}
https://github.com/user-attachments/assets/b943b3f6-3473-484f-9122-968c9f4e6a55