Right now I’m facing another difficulty, perhaps simpler than the previous one, but I’m having trouble solving it…
I want to have two font sizes and have them centered in the middle of the card.
type: custom:button-card
icon: mdi:home-thermometer
entity: sensor.temperatura_media_casa
show_entity_picture: true
show_name: false
show_state: true
tap_action:
action: more-info
styles:
icon:
- width: 22px
- color: |-
[[[
var state = states['sensor.temperatura_media_casa'].state;
if (state <= 18) {
return 'rgb(100,149,237)'; //blue
} else if (state <= 24) {
return 'rgb(244,208,63)'; //yellow
} else {
return 'rgb(231,76,60)'; //red
}
]]]
img_cell:
- background: |-
[[[
var state = states['sensor.temperatura_media_casa'].state;
if (state <= 18) {
return 'rgba(100,149,237,0.2)'; //blue_t
} else if (state <= 24) {
return 'rgba(244,208,63,0.2)'; //yellow_t
} else {
return 'rgba(231,76,60,0.2)'; //red_t
}
]]]
- border-radius: 100%
- width: 30px
- height: 30px
state:
- font-size: 14px
- font-weight: 500
card:
- border-radius: 100px
- width: 100%
- height: 39px
- background: rgb(39,39,39)
- box-shadow: none
- padding: 0px 10px 0px 5px
grid:
- grid-template-columns: min-content 1fr
- grid-template-areas: |
"i s"
- gap: 0px 10px;