Hi,
I have this custom button card:
type: custom:button-card
template: containerXS
name: Blinds
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- entity: input_boolean.uphlp
styles:
card:
- height: 100px
- width: 100px
name: Up
template: standard
icon: mdi:arrow-up-bold
type: custom:button-card
state:
- value: 'on'
color: red
- value: 'off'
color: grey
- entity: input_boolean.stophlp
styles:
card:
- height: 100px
- width: 100px
name: Stop
template: standard
icon: mdi:stop
type: custom:button-card
state:
- value: 'on'
color: green
- value: 'off'
color: grey
- entity: input_boolean.95_hlp
styles:
card:
- height: 100px
- width: 100px
name: 95%
template: standard
icon: mdi:home-floor-l
type: custom:button-card
state:
- value: 'on'
color: purple
- value: 'off'
color: grey
- entity: input_boolean.downhlp
styles:
card:
- height: 100px
- width: 100px
name: Down
template: standard
icon: mdi:arrow-down-bold
type: custom:button-card
state:
- value: 'on'
color: red
- value: 'off'
color: grey
with this button card template
button_card_templates:
standard:
size: 50%
hold_action:
action: more-info
styles:
card:
- padding: 0.2em
- '--mdc-ripple-color': black
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 0.75em
- white-space: normal
state:
- font-size: 0.65em
- white-space: normal
label:
- font-size: 0.4em
- white-space: normal
containerxs:
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: min-content
- grid-template-rows: min-content
custom_fields:
buttons:
- background-color: rgba(0,0,0,0.3)
- margin: 0
- padding: 0.3em
The container is displayed like this.
I cant figure out how to make the card smaller like the width of the buttons.
thanks for the input,
Chris