Signin screen polish in response to UI review

ui/login/account_picker/md_user_pod_row.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.
  *
  * This is the stylesheet used by user pods row of account picker UI.
  */
 
 podrow {
   overflow: visible;
 }
 
 /* Hide the pod row while images are loading. */
 podrow.images-loading {
   visibility: hidden;
 }
 
 pin-keyboard {
   display: block;
 }
 
 .pod {
   -webkit-tap-highlight-color: transparent;
   border-radius: 2px;
   cursor: pointer;
-  opacity: 0.64;
+  opacity: 0.54;
   outline: none;
   position: absolute;
   z-index: 0;
 }
 
 .account-picker.flying-pods .pod {
   transition: all 180ms;
 }
 
 .pod .pin-container {
@@ skipping 43 matching lines @@
 
 .user-image-container {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: center;
   width: 100%;
 }
 
 .pod .user-image {
-  border-color: rgba(255, 255, 255, .54);
   border-radius: 50%;
-  border-style: solid;
-  border-width: 0.25px;
   flex: none;
   height: 100%;
   width: 100%;
 }
 
 .pod .user-image.switch-image-animation {
   animation: switch-image 180ms;
 }
 
 .pod .badge-container {
@@ skipping 43 matching lines @@
   display: flex;
   position: absolute;
   top: 182px;
 }
 
 .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
   display: flex;
   height: 40px;
   left: 51px;
   position: absolute;
-  top: 244px;
+  top: 236px;
 /* On chromeos we extend the width to cover the padding on the user pods. This
  is so the submit button on chromeos can extend onto the padding as shown on
  mocks. */
 <if expr="not chromeos">
   width: 160px;
 </if>
 <if expr="chromeos">
   width: 204px;
 </if>
 }
 
 html[dir=rtl] .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
   left: auto;
   right: 51px;
 }
 
 .auth-container .submit-button[disabled] {
   opacity: 0.34;
 }
 
 .auth-container .submit-button {
   color: #FFFFFF;
-  height: 40px;
+  height: 24px;
+  margin: 12px 0 4px 0;
   opacity: 1;
-  padding: 12px 0 4px 0;
+  padding: 0;
   width: 24px;
 }
 
 .name-container {
   transition: transform 180ms;
 }
 
 .pod.focused .name-container {
   display: flex;
 }
 
 .pod.focused.multiprofiles-policy-applied .name-container {
   display: flex;
 }
 
 .name {
   color: #FFFFFF;
   flex: auto;
-  font: 24px Roboto, sans-serif;
+  font: 24px Roboto;
+  font-weight: 300; /* roboto-light */
   outline: none;
   overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .auth-container,
 .password-entry-container,
 .reauth-hint-container {
@@ skipping 21 matching lines @@
 
 .pod[auth-type='offlinePassword'].focused .password-entry-container,
 .pod[auth-type='forceOfflinePassword'].focused .password-entry-container,
 .pod[auth-type='offlinePassword'].focused .input-line,
 .pod[auth-type='forceOfflinePassword'].focused .input-line {
   display: flex;
   flex: auto;
 }
 
 .password-container {
-  height: 40px;
+  height: 34px;
+  margin-top: 6px;
   width: 180px;
 }
 
 .capslock-on .password-container {
   width: 160px;
 }
 
 .custom-icon-shown.password-container {
   padding-left: 8px;
   width: 145px;
@@ skipping 215 matching lines @@
   justify-content: center;
   margin-top: 8px;
   width: 100%;
 }
 
 .reauth-hint-container .reauth-warning {
   -webkit-mask-image: url(../../../ui/webui/resources/images/warning.svg);
   -webkit-mask-position: center;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: 20px;
-  background-color: #f4b400;
-  height: 24px;
+  background-color: #E67C73;
   width: 24px;
 }
 
 .reauth-hint-container .reauth-name-hint {
   align-self: center;
-  color: #565656;
-  font-size: 16px;
+  color: #E67C73;
+  font-size: 12px;
   outline: none;
   overflow: hidden;
   padding: 0 6px;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .user-type-icon-area {
   background-color: white;
@@ skipping 109 matching lines @@
 }
 
 .action-box-menu {
   display: none;
   position: absolute;
   z-index: 6;
 }
 
 .action-box-area.active ~ .action-box-menu {
   -webkit-margin-start: 12px;
+  animation: fade-in 180ms;
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: 2px;
   display: flex;
   flex-direction: column;
   font-size: 13px;
   margin-top: 3px;
   width: 220px;
 }
 
 .action-box-area.active ~ .action-box-menu.left-edge-offset {
@@ skipping 37 matching lines @@
 
 .action-box-menu-title-name {
   padding-bottom: 7px;
 }
 
 .action-box-menu-title-email {
   opacity: 0.54;
 }
 
 .action-box-menu-remove {
-  border-top: 0.25px solid grey;
+  border-top: 0.17px solid rgba(255, 255, 255, .34);
   color: #7BAAF7;
   outline: none;
   padding: 18px 14px;
 }
 
-.action-box-menu-remove:hover,
 .action-box-menu-remove:focus {
   font-weight: bold;
 }
 
 .action-box-remove-user-warning {
-  border-top: 0.25px solid grey;
+  border-top: 0.17px solid rgba(255, 255, 255, .34);
   color: white;
   font-size: 13px;
   line-height: 18px;
   padding: 13px 14px 18px;
 }
 
 .action-box-remove-user-warning > div,
 .action-box-remove-user-warning > table {
   padding-bottom: 19px;
 }
@@ skipping 64 matching lines @@
 
 /**** Public account user pod rules *******************************************/
 
 .public-account-expanded > div,
 .public-account-expanded .pod:not(.expanded) {
   opacity: 0; /* Cannot be replaced with display: none, otherwise the tab
                  indexes of other elements in the pod row will be ignored. */
 }
 
 .pod.public-account.expanded {
+  animation: fade-in 180ms;
   background-color: rgba(0, 0, 0, 0.56);
   border-radius: 2px;
   height: 324px;
+  transition: none;
   width: 622px;
 }
 
 .expanded-pane {
   display: none;
 }
 
 .pod.public-account.expanded .expanded-pane {
-  border-left: 0.5px solid rgba(255, 255, 255, .34);
-  color: #FFF;
+  border-left: 0.17px solid rgba(255, 255, 255, .34);
+  color: rgba(255, 255, 255, .87);
   display: block;
   font-family: "Roboto";
   font-size: 13px;
   height: 324px;
   left: 322px;
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 300px;
   z-index: 1;
@@ skipping 47 matching lines @@
 
 .language-select,
 .keyboard-select {
   width: 100%;
 }
 
 .enter-button {
   flex: none;
 }
 
+.pod.public-account .full-name {
+  display: none;
+  left: 50%;
+  position: absolute;
+  top: 100%;
+  z-index: 3;
+}
+
+html[dir=rtl] .pod.public-account .full-name {
+  left: auto;
+  right: 50%;
+}
+
+.pod.public-account .name-container:hover .full-name {
+  animation: fade-in 180ms;
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 2px;
+  color: rgba(255, 255, 255, .87);
+  display: flex;
+  font-size: 13px;
+  padding: 8px;
+}
+
 .pod .public-account-info-container {
   display: none;
 }
 
 .pod.public-account .public-account-info-container {
   display: block;
   position: absolute;
   top: 230px;
 }
 
@@ skipping 48 matching lines @@
   opacity: 1;
   padding: 10px 7px 8px 11px;
 }
 
 .monitoring-container {
   margin-top: 106px;
 }
 
 .advanced .monitoring-container {
   margin-top: 35px;
+  transition: margin-top 180ms;
 }
 
 .monitoring-learn-more {
-  color: rgb(49, 106, 197);
+  color: #7BAAF7;
   text-decoration: none;
 }
 
 .monitoring-learn-more:focus,
 .language-and-input:focus {
   font-weight: bold;
   outline: none;
 }
 
 .monitoring-dialog-container .cr-dialog-shield {
@@ skipping 41 matching lines @@
   display: list-item;
   margin-bottom: -6px;
 }
 
 .language-and-input-container {
   margin-top: 20px;
   flex: none;
 }
 
 .language-and-input {
-  color: rgb(49, 106, 197);
+  color: #7BAAF7;
   text-decoration: none;
 }
 
 .enter-button-container {
   background-color: #4285F4;
   border-radius: 50%;
   bottom: 28px;
   height: 40px;
   position: absolute;
   right: 28px;
@@ skipping 88 matching lines @@
 }
 
 .small-pod.extra-small .small-user-image-container {
   height: 60px;
   width: 60px;
 }
 
 .small-pod-name {
   color: #FFFFFF;
   flex: auto;
-  font: 20px Roboto, sans-serif;
+  font: 20px Roboto;
+  font-weight: 300; /* roboto-light */
   height: 28px;
   left: 90px;
   opacity: 1;
   outline: none;
   overflow: hidden;
   padding: 23px 0;
   position: absolute;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 214px;
@@ skipping 12 matching lines @@
 
 html[dir=rtl] .small-pod.extra-small .small-pod-name {
   left: auto;
   right: 76px;
 }
 
 @keyframes switch-image {
   from { transform: rotate3d(0, 1, 0, 90deg); }
   to { transform: none; }
 }
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}