More compact look when embedded

[OToussaint]

This is not a problem.
I wanted to share with you what I did to make it more compact looking when it is embedded.
I know you already did something but I came with a look that is pleasing me using card-mod.
Unfortunately, it is not that easy for me to propose that change myself in the code and would prefer you, if you like it, to include it in a release.

Suggested feature / solution

How it is made using card-mod:

            card_mod:
              style:
                .: |
                  ha-card {
                    margin: -20px -4px -38px 0px;
                  }
                .time-picker-row:
                  .time-picker-content:
                    time-unit:
                      $: |
                        .time-unit {
                          padding: 5px !important;
                        }
                        .time-input {
                          border: 1px solid var(--switch-checked-button-color) !important;
                          height: 5px;
                          background-color: rgba(0,0,0,0) !important;
                          color: var(--primary-text-color) !important;
                          border-radius: 7px;
                          margin: -12px;
                        }     
                        .time-picker-icon {
                          color: var(--switch-checked-button-color) !important;
                        }

[PulsarFX]

My take on it, based on the example above, to match it to mushroom cards:

type: custom:time-picker-card
entity: input_datetime.wecker_zeit
hour_mode: 24
hour_step: 1
minute_step: 5
name: Wecker
hide:
  name: true
  seconds: true
  icon: true
layout:
  embedded: false
  hour_mode: single
  align_controls: center
  name: inside
  thin: true
link_values: false
card_mod:
  style:
    .time-picker-row:
      $: |
        { padding: 3px !important; }
      .time-picker-content:
        time-unit:
          $: |
            .time-input 
            {
               height: 5px;
               margin: -10px;
            }
            .time-input-icon 
            {
               padding: 5px !important;
            }
            .time-picker-icon:first-of-type 
            {
               margin: 0px;
               padding: 0 !important;
               padding-bottom: 7px !important;
            }
            .time-picker-icon:nth-of-type(2) {
               margin: 0px;
               padding: 0 !important;
               padding-top: 7px !important;
            }