slate sorrel
Hello,
I'm trying to customize a glance card that in reality is an element in picture-elements (using a the hui-element mod).
I need the card to take the least amount of space possible and for that I already managed to remove all margins and padding. It only remains a "line-width" set to 40px on state-badge that I cannot figure out how to set to 0px using card_mod.
Here is my yaml code:
`type: custom:hui-element
alias: VMC status
card_type: glance
show_name: false
show_state: false
state_color: true
style:
left: 25%
top: 30%
"--mdc-icon-size": 90%
entities:
- fan.sw_vmc_switch
- sensor.inside_humidity_status
card_mod:
style: |
ha-card .entities.no-header {
padding: 0px !important;
.entity.action.undefined {
margin: 0px;
padding: 0px;
$ state-badge :host {
line-height: 0px !important;
}
}
}`
I've posted a pic showing the dom inspection of the glance card, where we can see two div.entity.action.undefined corresponding to each of the two badges in the glance card.
Another picture I've posted shows the dom inspection of the first badge, where we can see a :host with the "line-height" set to 40px which I wanted to reset to 0.
Do you know what's wrong with my yaml code? Everything in the yaml styling works except this part:
$ state-badge :host { line-height: 0px !important; }
I really don't understand what I'm missing?
