Howdy!
I’ve been trying to tweak paper-buttons-row to emulate rgb-light-card. The reason for this being that I wanted to add mdi icons to the buttons, but (for now) the developer has decided not to add that feature. I’ve had pretty good results. The top card uses rgb-light-card and the bottom uses paper-buttons-row:
Looks pretty decent, right? The problem I’m running into is that I’m also using fold-entity-row to show/hide the lights below the big buttons. The top card will show/hide the entities only when you click the caret on the right-hand side. The bottom card, however, will toggle if you click any of the buttons or empty space around them (anywhere in whole div, essentially). Anytime you want to click one of the buttons, you end up showing/hiding the entities below unintentionally, which is annoying. Here’s the code for both cards:
rgb-light-card
entities:
- entities:
- entity: light.master_bedroom
icon: 'mdi:bed-king'
- entity: light.hue_color_1
- entity: light.hue_color_2
head:
colors:
- entity_id: light.master_bedroom
icon_color: white
- icon_color: 'rgba(255, 206, 120,1)'
service: scene.turn_on
service_data:
entity_id: scene.master_bedroom_default
type: call-service
- icon_color: 'rgba(170, 136, 80,1)'
service: scene.turn_on
service_data:
entity_id: scene.master_bedroom_default_10
type: call-service
justify: center
type: 'custom:rgb-light-card'
type: 'custom:fold-entity-row'
padding: null
state_color: true
style: |
div.card-header {justify-content: center}
title: Master Bedroom
type: entities
paper-buttons-row
entities:
- entities:
- entity: light.master_bedroom
icon: 'mdi:bed-king'
- entity: light.hue_color_1
- entity: light.hue_color_2
head:
type: 'custom:paper-buttons-row'
style: >
div.flex-box { justify-content: center; flex-wrap: wrap; cursor: auto;
}
ha-icon { color: white; }
paper-button:hover { box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px
10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); }
paper-button {
border-radius: 50%;
border-width: 3px;
border-color: black;
border-style: solid;
margin: 4px 8px;
width: 20px;
height: 20px;
transition: box-shadow .15s;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
--mdc-icon-size: 100%
}
base_config:
name: false
icon: false
buttons:
- entity: light.master_bedroom
icon: 'mdi:power'
state_styles:
'on':
icon:
color: black
button:
background: white
'off':
icon:
color: white
button:
background: black
- entity: scene.master_bedroom_default
style:
button:
background: 'rgba(255, 206, 120,1)'
- entity: scene.master_bedroom_default_10
style:
button:
background: 'rgba(170, 136, 80,1)'
type: 'custom:fold-entity-row'
padding: null
style: |
div.card-header {justify-content: center}
title: Master Bedroom
type: entities
I can’t figure out for the life of me how to fix this. Anyone have any ideas? I also have card-mod installed if the configuration can’t be done inside paper-buttons-row. Thanks in advance for the help!