Refresh the lock screen PIN keyboard

chrome/browser/resources/chromeos/quick_unlock/md_pin_keyboard.html

 <!-- TODO(crbug.com/603217): Use i18n instead of string literals. Figure out
                              what i18n to use for keypad, ie, does 1 ABC make
                              sense in every scenario? -->
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
@@ skipping 40 matching lines @@
 
       .row {
         display: flex;
       }
 
       .digit-button {
         align-items: center;
         background: none;
         border-radius: 0;
         box-sizing: border-box;
-        color: #000;
         display: flex;
         flex-direction: column;
-        font-size: 18px;
         height: 48px;
         justify-content: center;
-        margin: 0;
+        margin: 15px;
         min-height: 48px;
         min-width: 48px;
-        opacity: 0.87;
-        padding: 15px 21px;
-        width: 60px;
+        opacity: 1;
+        width: 48px;
       }
 
       [hidden=true] {
         display: none;
       }
 
       .first-row {
-        height: 43px;
+        display: none;
       }
 
       .bottom-row {
         margin-bottom: 6px;
       }
 
       .top-row {
         margin-top: 6px;
       }
 
       .backspace-button-container {
         position: relative;
       }
 
       .backspace-button-container paper-ripple {
         position: absolute;
         top: 0;
       }
 
       paper-ripple {
         border-radius: 100px;
         color: #000;
         height: 48px;
-        left: 6px;
         width: 48px;
       }
 
       .digit-button.backspace-button {
+        color: #FFF;
         left: 0;
-        opacity: var(--dark-primary-opacity);
         padding: 14px;
         position: absolute;
         top: 0;
       }
 
       .digit-button.backspace-button:not([has-content]) {
         color: #000;
         opacity: 0.26;
       }
 
       .digit-button inner-text {
-        color: var(--paper-blue-grey-700);
         display: flex;
         flex-direction: column;
+        font-family: 'Roboto';
+      }
+
+      .number {
+        color: #FFF;
+        font-size: 20px;
         height: 52px;
       }
 
+      .letter {
+        color: rgba(255, 255, 255, .34);
+        font-size: 9px;
+        margin-top: 4px;
+      }
+
       #pinInput {
         background-color: white;
         border: 0;
         box-sizing: border-box;
         font-face: Roboto-Regular;
         font-size: 13px;
         height: 43px;
         left: 10px;
         opacity: var(--dark-secondary-opacity);
         outline: 0;
@@ skipping 37 matching lines @@
         <div class="row first-row">
           <paper-input id="pinInput" type="password" no-label-float
               value="[[value]]"
               is-input-rtl$="[[isInputRtl_(value)]]"
               has-content$="[[hasInput_(value)]]"
               label="[[getInputPlaceholder_(enablePassword)]]"
               on-keydown="onInputKeyDown_"
               hidden="[[!showPinInput_]]">
           </paper-input>
         </div>
-        <div class="separator" hidden="[[showPinInput_]]"></div>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="1"
               noink>
-            <inner-text>$i18n{pinKeyboard1}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard1}</inner-text>
             <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="2"
               noink>
-            <inner-text>$i18n{pinKeyboard2}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard2}</inner-text>
+            <inner-text class="letter">ABC</inner-text>
             <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="3"
               noink>
-            <inner-text>$i18n{pinKeyboard3}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard3}</inner-text>
+            <inner-text class="letter">DEF</inner-text>
             <paper-ripple>
           </paper-button>
         </div>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="4"
               noink>
-            <inner-text>$i18n{pinKeyboard4}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard4}</inner-text>
+            <inner-text class="letter">GHI</inner-text>
             <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="5"
               noink>
-            <inner-text>$i18n{pinKeyboard5}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard5}</inner-text>
+            <inner-text class="letter">JKL</inner-text>
             <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="6"
               noink>
-            <inner-text>$i18n{pinKeyboard6}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard6}</inner-text>
+            <inner-text class="letter">MNO</inner-text>
             <paper-ripple>
           </paper-button>
         </div>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="7"
               noink>
-            <inner-text>$i18n{pinKeyboard7}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard7}</inner-text>
+            <inner-text class="letter">PQRS</inner-text>
             <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="8"
               noink>
-            <inner-text>$i18n{pinKeyboard8}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard8}</inner-text>
+            <inner-text class="letter">TUV</inner-text>
             <paper-ripple>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="9"
               noink>
-            <inner-text>$i18n{pinKeyboard9}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard9}</inner-text>
+            <inner-text class="letter">WXYZ</inner-text>
             <paper-ripple>
           </paper-button>
         </div>
         <div class="row keyboard bottom-row">
           <div class="digit-button"></div>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="0"
               noink>
-            <inner-text>$i18n{pinKeyboard0}</inner-text>
+            <inner-text class="number">$i18n{pinKeyboard0}</inner-text>
+            <inner-text class="letter">+</inner-text>
             <paper-ripple>
           </paper-button>
           <div class="backspace-button-container">
             <paper-icon-button class="digit-button backspace-button"
                 has-content$="[[hasInput_(value)]]"
                 icon="pin-keyboard:backspace"
                 on-pointerdown="onBackspacePointerDown_"
                 on-pointerout="onBackspacePointerOut_"
                 on-pointerup="onBackspacePointerUp_"
                 aria-label="$i18n{pinKeyboardDeleteAccessibleName}"
                 noink>
             </paper-icon-button>
             <paper-ripple>
           </div>
         </div>
       </div>
     </div>
   </template>
   <script src="pin_keyboard.js"></script>
 </dom-module>