mathewmeconry/MMM-HomeAssistant-Touch

Text not centering and formating?

Opened this issue · 1 comments

Love this module and its working great with home assistant.
Im trying to get the boxes and text to look nicer. The text isnt currently centered and seems to justify to the right.
Ive tried changing height/width/font size in a custom.css but this isnt having any affect
Could you point me in the right direction to make it look nicer?. Im only using switches by the way.

Hey @scoobyd00
Happy that you love the extension.
The CSS rules that apply to switches can be found here:

#MMM-HomeAssistant-Touch .ha-entity {
border: 0.1rem solid grey;
border-radius: 0.5rem;
padding: 0.5rem;
margin: 0.5rem;
height: 7rem;
width: 7rem;
font-size: 18px;
}
#MMM-HomeAssistant-Touch .ha-entity .title,
#MMM-HomeAssistant-Touch .ha-entity .status {
display: block;
}
#MMM-HomeAssistant-Touch .ha-entity.ha-switch.on,
#MMM-HomeAssistant-Touch .ha-entity.ha-light.on {
background-color: #2af20261;
}

To overwrite values you probably have to use the !important flag in certain places. But I don't know how MM2 allows to override stuff with custom CSS.
Anyhow if you find a better way to center the text and make it look nicer I am happy to merge a pull request