Need some help with my timer. As you can see, the colon in the middle is not spaced correctly and I cannot figure out how to space out the hours and minutes to make more room for the colon. Here is my code:
type: custom:flipdown-timer-card
entity: sensor.kitchen_dot_next_timer
styles:
rotor:
width: 150px
height: 160px
fontsize: 13.75rem
card_mod:
style: |
ha-card{ --primary-color: lime;
--dark-primary-color: white;
background: none;}
#d0::after, #d1::after{
border-top: 3px solid rgba(0, 173, 168, 0.7); }
#Minutes div span{
background-color: lime;
width: 30px;
height: 30px;
left: calc(30%);
top: calc(var(--rotor-height) / 2 - 50px); }
#Minutes div span +span{
left: calc(30%);
top: calc(var(--rotor-height) / 2 + 20px); }
.flipdown .delimeter {
height: var(--rotor-height, 80px);
position: relative;}
Thoughts?