Add a very basic PIN UI implementation that is shared between lock and settings.

ui/login/screen_container.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 #outer-container {
   -webkit-box-align: center;
   -webkit-box-pack: center;
   -webkit-perspective: 1px; /* Workaround, see http://crbug.com/360567 */
   bottom: 57px;  /* Leave space for the header bar */
   display: -webkit-box;
   left: 0;
   min-height: 717px; /* This enables scrolling. Min resolution: 1024x768 */
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
 }
 
 .oobe-display #outer-container {
   -webkit-perspective: 600px;
 }
 
+#pin-container {
+  opacity: 0; /* Opacity is set to 1 after the pin element is loaded. */
+  transition: opacity 200ms ease-in-out;
+}
+
 #scroll-container {
   bottom: 0;        /* Allows content overlap with control bar. */
   left: 0;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
   right: 0;
   top: 0;
 }
 
@@ skipping 173 matching lines @@
   line-height: 31px;
   text-transform: lowercase;
   width: 23em;
 }
 
 .header-section::before {
   /* Divider in header between product name and title,
    * like "[Product name] > [step header]". */
   content: '\00A0\203A\00A0\00A0';
 }