[CrOS Settings] Fix number alignment on PIN keyboard.

Each button on the keypad includes space for a number as well as the
letters which represent the numbers (e.g., "ABC" for 2, "DEF" for 3).
However, since 1 does not have any associated letters, its alignment was
incorrect and noticeably different from the rest of the buttons.

This CL fixes this alignment issue by aligning the number to the top of
the button and the letters to the bottom of the button.

Fixed: 1004974
TBR: stevenjb@chromium.org
Change-Id: I9be7be402b853cbf6ba76985151f77a0696ac13b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1854638Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Auto-Submit: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704900}

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -133,9 +133,17 @@
 
       .digit-button inner-text {
         font-family: 'Roboto';
+        position: absolute;
       }
 
-      inner-text.letter {
+      .number {
+        color: var(--pin-keyboard-number-color, var(--paper-blue-grey-700));
+        font-size: 18px;
+        top: 0;
+      }
+
+      .letter {
+        bottom: 0;
         color: var(--pin-keyboard-letter-color, var(--google-grey-700));
         font-size: 12px;
         margin-top: 8px;
@@ -143,12 +151,6 @@
         @apply --pin-keyboard-digit-button-letter;
       }
 
-      .number {
-        color: var(--pin-keyboard-number-color, var(--paper-blue-grey-700));
-        font-size: 18px;
-        height: 16px;
-      }
-
       #pinInput {
         --cr-input-error-display: none;
         --cr-input-input: {