Fix misplacement of PIN keyboard and sign-in banner for new login screen

ui/login/account_picker/md_screen_account_picker.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.
  */
 
 .account-picker.flying-pods #account-picker {
   transition: width 180ms ease, height 180ms ease;
 }
 
 #bubble {
@@ skipping 18 matching lines @@
   right: auto;
 }
 
 #signin-banner {
   background-color: rgba(0, 0, 0, 0.75);
   border-radius: 4px;
   color: #FFF;
   display: none;
   font-family: "Roboto";
   font-size: 13px;
+  padding: 20px 24px;
   position: relative;
   text-align: center;
 }
 
 html[dir=rtl] #signin-banner {
   left: auto;
   right: -50%;
 }
 
 html[screen=user-adding] #signin-banner {
   display: inline-block;
-}
-
-html[screen=login] #signin-banner {
-  padding: 20px 24px;
+  opacity: 0.8;

[xiyuan, 2017/06/05 16:20:31]

Why do we need to change this? This essentially disables the opacity animation
for user adding screen.

[Wenzhao (Colin) Zang, 2017/06/05 17:33:20]

I think there's no opacity animation for user adding screen, because only the
login and lock screens have an opacity transition after '.message-set' is added
(according to line 54 - 66). But I also checked with UX and they just wanted to
update the background opacity to 0.34, so I removed the opacity change.

 }
 
 html[screen=login] #signin-banner,
 html[screen=lock] #signin-banner {
   display: inline-block;
   opacity: 0;
   visibility: hidden;
 }
 
 html[screen=login] #signin-banner.message-set,
@@ skipping 29 matching lines @@
   background: linear-gradient(#4FC3F7, transparent);
   height: 112px;
   position: absolute;
   width: 100%;
   z-index: 2;
 }
 
 .small-pod-container-mask.rotate {
   transform: rotate(180deg);
 }