cros: Account picker UI for public account.

chrome/browser/resources/chromeos/login/user_pod_row.css

 /* Copyright (c) 2012 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.
  *
  * This is the stylesheet used by user pods row of account picker UI.
  */
 
 podrow {
   -webkit-box-align: center;
   -webkit-box-pack: center;
@@ skipping 11 matching lines @@
 }
 
 .pod {
   border-radius: 2px;
   cursor: pointer;
   /* TODO(nkostylev): Figure out why explicit display: block is needed.
      See http://crbug.com/161297 */
   display: block;
   outline: none;
   padding: 10px;
+}
+
+.pod .main-pane {
   position: relative;
   text-align: center;
 }
 
 html[oobe=old] .pod {
   -webkit-transition: all 230ms ease;
   margin: 0 10px;
+}
+
+html[oobe=old] .pod,
+html[oobe=old] .pod .main-pane {
   width: 170px;
 }
 
 html[oobe=new] .pod {
   -webkit-transition: all 180ms ease;
   background-color: white;
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),
               0 2px 6px rgba(0, 0, 0, 0.15),
               0 3px 0 rgba(0, 0, 0, 0.08);
   margin: 0 20px;
   padding-bottom: 3px;
+}
+
+html[oobe=new] .pod,
+html[oobe=new] .pod .main-pane {
   width: 160px;
 }
 
 html[oobe=old] .pod .user-image {
   -webkit-transition: all 140ms ease;
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 2px;
   box-shadow: 0 3px 12px #ccc;
   margin-bottom: 10px;
@@ skipping 69 matching lines @@
   -webkit-transition: opacity 800ms ease;
   margin-top: 4px;
 }
 
 html[oobe=new] .name {
   -webkit-transition: all 170ms ease;
   /* Matching font-size 14px but since name is visible
      when pod is not focused increase that a bit. */
   font-size: 16px;
   height: 26px;
+  line-height: 26px;  /* This vertically centers text */
   overflow: hidden;
   white-space: nowrap;
 }
 
 .name.init {
   opacity: 0;
 }
 
-.pod.focused .name {
+.pod.need-password.focused .name {
   display: none;
 }
 
 .pod input[type='password'] {
   box-sizing: border-box;
+  display: none;
   padding: 4px 6px;
   width: 100%;
 }
 
 html[oobe=old] .pod input[type='password'] {
   -webkit-border-radius: 2px;
   -webkit-transition: box-shadow 100ms, background 100ms, border 500ms;
   border: 1px solid #aaa;
   box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1),
               0 1px 0 white,
               0 0 1px transparent,
               0 0 1px transparent,
               0 0 1px transparent;
   height: 26px;
 }
 
 html[oobe=new] .pod input[type='password'] {
   -webkit-transition: opacity linear 150ms;
   background: white;
   border: none;
   height: 40px;
   outline: none;
 }
 
-.pod:not(.focused) input[type='password'] {
-  display: none;
+.pod.need-password.focused input[type='password'] {
+  display: inline-block;
 }
 
 html[oobe=old] .pod input[type='password']:focus {
   -webkit-transition: box-shadow 200ms, background 200ms, border 200ms;
   background: #f8f8f8;
   border-color: rgb(64, 128, 250);
   box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15),
               0 1px 0 transparent,
               0 0 1px #c0c0c0,
               0 0 1px #c0c0c0,
@@ skipping 117 matching lines @@
 }
 
 html[oobe=old] .signed-in-indicator {
   margin: 5px;
 }
 
 html[oobe=old] .pod.focused .signed-in-indicator {
   /* Track shifting of .user-image on pod focus. */
   -webkit-transform: translateY(-1px);
   -webkit-transition: -webkit-transform 140ms ease;
-}
+}
+
+/**** Public account user pod rules *******************************************/
+
+.pod.public-account .name,
+.side-pane-name {
+  -webkit-padding-end: 16px;
+  background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
+  background-position: right;
+  background-repeat: no-repeat;
+  outline: none;
+}
+
+html[dir=rtl] .pod.public-account .name,
+html[dir=rtl] .side-pane-name {
+  background-position: left;
+}
+
+.side-pane-divider,
+.side-pane-container {
+  bottom: 5px;
+  top: 5px;
+  visibility: hidden;
+}
+
+.side-pane-divider {
+  border-left: 1px solid lightgray;
+  left: 180px;
+  position: absolute;
+  right: auto;
+  width: 1px;
+}
+
+html[dir=rtl] .side-pane-divider {
+  left: auto;
+  right: 180px;
+}
+
+.side-pane-container {
+  left: 185px;
+  overflow: hidden;
+  padding: 5px;
+  position: absolute;
+  right: auto;
+}
+
+html[dir=rtl] .side-pane-container {
+  left: auto;
+  right: 185px;
+}
+
+.side-pane-contents {
+  -webkit-transform: translateX(-240px);
+  -webkit-transition: -webkit-transform 180ms ease;
+  height: 100%;
+  width: 225px;
+}
+
+html[dir=rtl] .side-pane-contents {
+  -webkit-transform: translateX(240px);
+}
+
+.pod.public-account.expanded .side-pane-contents {
+  -webkit-transform: translateX(0);
+}
+
+.side-pane-container .info,
+.side-pane-container .reminder {
+  font-size: 12px;
+}
+
+.side-pane-container .info {
+  -webkit-margin-before: 25px;
+}
+
+.side-pane-container .reminder {
+  font-weight: bold;
+}
+
+.side-pane-container .enter-button {
+  bottom: 5px;
+  display: block;
+  left: auto;
+  position: absolute;
+  right: 5px;
+}
+
+html[dir=rtl] .side-pane-container .enter-button {
+  left: 5px;
+  right: auto;
+}
+
+.pod.public-account.expanded {
+  padding: 10px;
+  width: 400px;
+}
+
+.pod.public-account.expanded .name {
+  display: none;
+}
+
+.pod.public-account.expanded .side-pane-divider,
+.pod.public-account.expanded .side-pane-container,
+.pod.public-account.animating .side-pane-container {
+  visibility: visible;
+}