GeorgeSG / lovelace-time-picker-card

🕰️ Time Picker Card for Home Assistant's Lovelace UI
MIT License
209 stars 14 forks source link

Size adjustable #12

Closed PythonNube closed 3 years ago

PythonNube commented 3 years ago

Problem

I am trying to use this as an alarm set on a small tablet near my bed but it is too small to really use. I am looking for ways to increase the box size. I have found ways to adjust the font by putting this in a custom button card but then the numbers run outside the boxes.

Suggested feature / solution

Can there be a setting to adjust the proportions of the elements.

ukmgranger commented 3 years ago

This is a great idea! I have had to modify the .css code in the time-picker-card.js file to get mine looking good. I tried to change the css with the card-mod integration, but it just wouldn't change anything.

GeorgeSG commented 3 years ago

I added a theme variable time-picker-control-padding that will enable you to control the padding of the elements - making their hitboxes larger. Released in 1.2.0

You can try something like: --time-picker-control-padding: 12px or --time-picker-control-padding: 12px 16px.

I'm not entirely sure this is the best solution, but it's a start. Let me know if it works for you or if you were looking for something different.