Fix misplacement of signin overlay and critical update message banner

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 {
   /* Temporarily disabled because animation interferes with updating screen's
    size. */
@@ skipping 70 matching lines @@
 }
 
 .user-image-container {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: center;
   width: 100%;
 }
 
-.user-image {
+.pod .user-image {
+  border-color: rgba(255, 255, 255, .54);
   border-radius: 50%;
-  box-shadow: 0 0 2px rgba(255, 255, 255, .34);
+  border-style: solid;
+  border-width: 0.25px;
+  flex: none;
   height: 100%;
   width: 100%;
 }
 
-.user-image.switch-image-animation {
+.pod .user-image.switch-image-animation {
   animation: switch-image 180ms;
 }
 
-.pod .user-image {
-  flex: none;
-}
-
 .pod .badge-container {
   background: #FFF;
   border-radius: 50%;
   bottom: 0;
   display: none;
   height: 27px;
   position: absolute;
   right: 0;
   width: 27px;
 }
 
 .pod .badge-container iron-icon {
   --iron-icon-height: 25px;
   --iron-icon-width: 25px;
   display: none;
   padding: 0;
 }
 
-/* Signed-in badge should be hidden when there's another badge. */
-.pod.legacy-supervised.signed-in .signed-in-badge {
-  display: none;
-}
-
 .pod.legacy-supervised .badge-container,
-.pod.signed-in .badge-container,
-.pod.legacy-supervised .legacy-supervised-badge,
-.pod.signed-in .signed-in-badge {
+.pod.legacy-supervised .legacy-supervised-badge {
   display: block;
 }
 
 /* TODO(noms): Refactor this out into a CrOS-specific file and simplify the
  style rule once it is included on CrOS only. crbug.com/397638 */
 html:not([screen=login-add-user]) .pod .user-image {
   max-height: 160px;
   max-width: 160px;
   position: absolute;
 }
@@ skipping 58 matching lines @@
 .pod.focused .name-container {
   display: flex;
 }
 
 .pod.focused.multiprofiles-policy-applied .name-container {
   display: flex;
 }
 
 .name {
   color: #FFFFFF;
-  /* This should be 15.6px - the equivalent of 14px at 90% scale. */
   flex: auto;
-  font-family: "Roboto";
-  font-size: 24px;
+  font: 24px Roboto, sans-serif;
   outline: none;
   overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .auth-container,
 .password-entry-container,
 .reauth-hint-container {
@@ skipping 27 matching lines @@
 
 .password-container {
   height: 40px;
   width: 180px;
 }
 
 .capslock-on .password-container {
   width: 160px;
 }
 
+.custom-icon-shown.password-container {
+  padding-left: 8px;
+  width: 145px;
+}
+
+.capslock-on .custom-icon-shown.password-container {
+  width: 125px;
+}
+
 .pod input[type='password'] {
   background-color: transparent;
   border: none;
   color: rgba(255, 255, 255, .67);
   font-family: "Roboto";
-  font-size: 13px;
+  font-size: 16px;
   height: 100%;
-  letter-spacing: 8px;
+  letter-spacing: 6px;
   padding: 0;
   width: 100%;
 }
 
 .pod input[type='password']::-webkit-input-placeholder {
+  color: rgba(255, 255, 255, .67);
+  font-size: 13px;
   letter-spacing: 0;
 }
 
 .capslock-hint-container {
   display: none;
 }
 
 <if expr="chromeos">
 .capslock-on .capslock-hint-container {
   display: block;
@@ skipping 319 matching lines @@
 }
 
 .fingerprint-icon-container.signin .fingerprint-icon-image {
   background-image: url(../../webui/resources/images/fingerprint_signin.svg);
 }
 
 .fingerprint-icon-container.failed .fingerprint-icon-image {
   background-image: url(../../webui/resources/images/fingerprint_failed.svg);
 }
 
-.pod input[type='password'].hidden::-webkit-input-placeholder {
-  color: grey;
-}
-
-.pod input[type='password'].default::-webkit-input-placeholder {
-  color: grey;
-}
-
-.pod input[type='password'].signin::-webkit-input-placeholder {
-  color: var(--google-blue-500);
-}
-
-.pod input[type='password'].failed::-webkit-input-placeholder {
-  color: var(--google-red-500);
-}
-
 .action-box-menu {
   display: none;
   position: absolute;
   z-index: 6;
 }
 
 .action-box-area.active ~ .action-box-menu {
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: 2px;
   display: flex;
@@ skipping 104 matching lines @@
 .pod.legacy-supervised .action-box-remove-user-warning-text,
 .pod.legacy-supervised .action-box-remove-non-owner-user-warning-text,
 .pod:not(.legacy-supervised)
     .action-box-remove-legacy-supervised-user-warning-text,
 .pod.synced .non-sync,
 .pod.has-no-stats .has-stats {
   display: none;
 }
 
 .user-type-bubble {
-  background-color: white;
-  border: 1px solid lightgray;
-  border-radius: 2px;
-  left: 5px;
+  background-color: rgba(0, 0, 0, 0.9);
+  border-radius: 4px;
+  color: #FFF;
+  font-family: "Roboto";
+  font-size: 13px;
+  left: 36px;
   opacity: 0;
   padding: 17px;
   position: absolute;
-  top: 20px;
+  top: 35px;
   transition: all 100ms;
   visibility: hidden;
   width: 200px;
   z-index: 7;
 }
 
 html[dir=rtl] .user-type-bubble {
   left: auto;
   right: 5px;
 }
 
 .bubble-shown,
 .user-type-icon-area.policy:hover ~ .user-type-bubble {
   opacity: 1;
   visibility: visible;
 }
 
 .user-type-bubble-header {
   font-weight: bold;
   margin-bottom: 14px;
+  text-align: center;
 }
 
 /**** Public account user pod rules *******************************************/
 
-.public-account-expanded > * {
-  display: none;
-}
-
-.public-account-expanded .pod {
-  display: none;
-}
-
-.public-account-expanded podrow,
-.public-account-expanded .pod.public-account.expanded {
-  display: block;
+.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 {
   background-color: rgba(0, 0, 0, 0.56);
   border-radius: 2px;
   height: 324px;
   width: 622px;
 }
 
 .expanded-pane {
@@ skipping 295 matching lines @@
 }
 
 .small-pod.extra-small .small-user-image-container {
   height: 60px;
   width: 60px;
 }
 
 .small-pod-name {
   color: #FFFFFF;
   flex: auto;
-  font-family: "Roboto";
-  font-size: 20px;
+  font: 20px Roboto, sans-serif;
   height: 28px;
   left: 90px;
   opacity: 1;
   outline: none;
   overflow: hidden;
   padding: 23px 0;
   position: absolute;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 214px;
 }
 
 .small-pod.extra-small .small-pod-name {
   left: 76px;
   padding: 16px 0;
   width: 190px;
 }
 
 @keyframes switch-image {
   from { transform: rotate3d(0, 1, 0, 90deg); }
   to { transform: none; }
 }