Hi there.
I am trying real hard to design a homekit-like button with the custom button-card, but a last small thin annoys me.
I want the icon to be aligned left, not centered. And I donßt get it right. Could anybody have look at my code?
type: custom:button-card
entity: switch.best_aktor_outdoor_steckdose_terasse
name: Terasse
icon: mdi:power-socket-de
show_state: true
show_label: true
label: |
[[[
return states['sensor.best_aktor_outdoor_steckdose_terasse_electric_consumption_w'].state + ' W';
]]]
styles:
card:
- width: 110px
- height: 110px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
icon:
- width: 30px
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 0.9em
state:
- justify-self: start
- padding-left: 10px
- font-size: 0.8em
label:
- justify-self: start
- padding-left: 10px
- font-size: 0.8em
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- value: 'on'
styles:
card:
- background-color: '#003d23'
