Flip-Down Timer Card Size/Position?

Configuration
1

Timer

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?

2

Play with the sizes… :wink:

3

Tried everything, Nothing changes the space between hours and minutes :pensive:

4

This is, what I’m using, looks just fine:

type: custom:flipdown-timer-card
show_hour: true
show_title: true
theme: dark
duration: '00:01:00'
styles:
  rotor:
    width: 60px
    height: 80px
  button:
    width: 80px
    location: bottom
entity: timer.kookwekker1

afbeelding