Circlepad size

[Hackashaq666]

Thanks for the great custom card, it has really made homeassistant a great multimedia controller. I like the new circlepad feature, is there an easy way to decrease the size of the entire circlepad? I would like it to be 50% or 75% of the current size overall. Would I need to use the custom css for each of the up, down, left, right and center?

[Nerwyn]

Glad you like the project!

Example 13 does this. Set the circlepad host width to a smaller number. Everything else in the circlepad is sized relative to that.

:host {
  width: 174px;
}

[Hackashaq666]

Thank you for responding with the css code, I appreciate it. However, when I adjust the width pixels, it no longer is a circle, not symmetric. I tried adding height as a second parameter, but nothing I tried (px or %) would scale the circlepad proportionally.

[Nerwyn]

Can you share a screenshot? I thought I accounted for that with the aspect ratio in CSS.

[Nerwyn]

Nevermind I can easily recreate the issue. I plan to work on a patch to improve circlepad styles later this week. I'll have to include fixing the center button sizing in that as well.

[Nerwyn]

This should be fixed in the 4.5.2 beta. The above styles should work without distorting the center button. Even better, you can reduce the size of the circlepad using the remote general styles instead of creating a custom element for the circlepad.

#circlepad {
  width: 174px;
}