When it comes to customizing the light card with card-mod there seem to be lots more questions than answers. So I decided to take a stab at it with focus on fitting in a grid. The gird cards being narrower, it was ending up overlapping the more-info button with the slider, which obviously does not work very well.
Initially I was going to hide the triple dot, which I can, but then you loose the functionality. So I decide to the move the triple dot under the name area so even though you can’t see it, you still retain the more-info functionality by clicking on the name.
Here is how it looks like on my grid card. I generally prefer mostly monochromatic cards but it could be customized further with any colors. The light icon set to the light color of the bulb is native functionality for the light card.
Here’s the YAML. This is the output of hours of trial and error. I am not a CSS expert, so if you know how to do this better please share.
- type: light
entity: light.any_ight
name: Light
show_name: true
show_icon: true
tap_action:
action: toggle
styles:
card:
- background-color: transparent
card_mod:
style: >
ha-card { ## if you change the height here height will change but card will be funky on clicking more-info
overflow: visible !important; ## visual check for overflow
}
ha-card.type-light { ## need to specify again; one time doesnt cut it
height: 100px !important;
}
ha-card #name { ## set light name text size
size: 0.5em
}
ha-card #info { ## move name up
padding-top: 0px !important;
}
ha-card #controls { ## move slider up
padding-top: 10px !important;
}
ha-card > div { ## at 100% slider and icon is centered
height: 100% !important;
width: 100% !important;
}
ha-card > ha-icon-button { ## sets icon size ???
height: 100% !important;
width: 100% !important;
}
ha-card > ha-icon-button.more-info { ## rotate and move triple dot to name area and hide
padding-top: 90% !important;
margin-top: 90% !important;
color: transparent !important;
transform: rotate(90deg) !important;
}
#slider > ha-icon-button { ## sets the icon size
--mdc-icon-button-size: 80% !important;
--mdc-icon-size: 80% !important;
padding: none !important;
}
:host #slider > round-slider { ## without this the slider and text will overflow
height: 90% !important;
width: 90% !important;
padding-bottom: 0px !important;
}
:host #slider > ha-icon-button > ha-state-icon { ## without this the icon will be off center
width: 100% !important;
justify-content: center !important;
justify-self: center !important;
}
#slider > ha-icon-button > ha-state-icon {
width: 100% !important;
justify-content: center !important;
justify-self: center !important;
}
Even if one of you finds this useful, the pain will be worth it. 