LINK TO THE FINAL CARD WITH UPDATED CODE
4 State Mini Graph Card: Using the below card-mod I got the above style (Comments in yaml.)
type: custom:mini-graph-card
name: House Temperatures
group: true /*takes space away from top of card*/
card_mod:
style: |
.states {
justify-content: normal !important;
font-size: 11px !important; /*Adjusts state font size*/
}
.state {
flex-grow: 1;
}
.states--secondary {
flex-flow: row !important;
flex-grow: 2; /*Adjusts spacing of 4 readings*/
margin-left: 0px !important;
}
.states--secondary .state.state--small {
font-size: unset;
margin-bottom: unset;
flex-grow: unset;
}
.states--secondary .state.state--small:nth-of-type(2) {
margin-left: auto !important; /*Adjusts the 3rd state*/
}
.states--secondary .state.state--small:nth-of-type(3) {
margin-left: auto !important; /*Adjusts the 4th state*/
}
.ellipsis {
font-size: 12px ; /*Adjusts legend font size*/
}
3 State Mini Graph Card: Using the below card-mod I got the above style (Comments in yaml.)
type: custom:mini-graph-card
name: Downstairs Temperatures
group: true /*takes space away from top of card*/
card_mod:
style: |
.states {
justify-content: normal !important;
font-size: 11px !important; /*Adjusts state font size*/
}
.state {
flex-grow: 1;
}
.states--secondary {
flex-flow: row !important;
flex-grow: 1.2; /*Adjusts spacing of 3 readings*/
margin-left: 0px !important;
}
.states--secondary .state.state--small {
font-size: unset;
margin-bottom: unset;
flex-grow: unset;
}
.states--secondary .state.state--small:nth-of-type(2) {
margin-left: auto !important; /*Adjusts the 3rd state*/
}
.states--secondary .state.state--small:nth-of-type(3) {
margin-left: auto !important;
}
.ellipsis {
font-size: 12px ; /*Adjusts legend font size*/
}
Below example of group: false
- Enables paddings and box-shadow.
Overall result on dashboard, no more cluttered look within cards