MD User Manager: latest design change, css refactoring, accessiblity, and bug fixes

chrome/browser/resources/md_user_manager/user_manager_styles.html

 <link rel="import" href="chrome://md-user-manager/shared_styles.html">
 
 <dom-module id="user-manager-styles">
   <template>
     <style include="shared-styles">
       body {
         background-color: var(--paper-grey-200);
       }
 
       user-manager-pages,
@@ skipping 12 matching lines @@
         box-shadow: 0 -1px 3px rgba(0, 0, 0, .2);
       }
 
       /* Overrides src/ui/login/screen_container.css for the desktop user
        * manager. */
 
       #outer-container {
         min-height: 0;
         overflow-x: hidden;
         overflow-y: auto;
-        padding-bottom: 40px;
-        padding-top: 40px;
+        padding: 40px 0 30px;
         z-index: initial;
       }
 
       .bubble.faded {
         opacity: 0;
       }
 
       .pod {
         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .24),
                     0 0 2px 0 rgba(0, 0, 0, .12);
         color: var(--paper-grey-800);
         cursor: default;
         height: auto;
         transform: none;
         width: auto;
       }
 
       .pod.faded {
         opacity: 1;
       }
 
       .pod.focused,
       .pod.hovered {
         box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .26),
                     0 14px 28px 0 rgba(0, 0, 0, .25);
       }
 
-      .pod.focused.locked {
-        box-shadow: 0 12px 21px rgba(0, 0, 0, .2);
-        height: auto;
-      }
-
       .pod .user-image-pane {
         border-top-left-radius: 2px;
         border-top-right-radius: 2px;
         position: static;
       }
 
       .pod .user-image {
         height: 160px;
         width: 160px;
       }
 
       .pod .main-pane {
         line-height: 20px;
         padding: 10px;
         position: static;
       }
 
       .pod .main-pane .name-container {
         display: block;
         position: static;
         width: auto;
       }
 
-      .pod .main-pane .name-container .name {
+      .pod .main-pane .name-container .name,
+      .reauth-hint-container .reauth-name-hint {
         color: inherit;
         font-size: inherit;
         margin: 0;
         padding: 0;
         text-align: initial;
-        width: 118px;
+        width: 120px;
       }
 
       .pod .indicator-container {
         background-color: rgba(255, 255, 255, .85);
         border-radius: 0;
         bottom: 10px;
         height: 20px;
         left: auto;
         position: absolute;
         right: 10px;
@@ skipping 79 matching lines @@
         padding: 10px;
         top: 0;
         width: 140px;
       }
 
       .pod .auth-container input[type='password']:focus {
         outline: 0;
       }
 
       .pod[auth-type='onlineSignIn'] .reauth-hint-container {
+        flex-direction: row-reverse;
         margin: 0;
-        padding: 10px 0;
+        padding: 10px;
       }
 
       .reauth-hint-container .reauth-warning {
         height: 20px;
         width: 20px;
       }
 
-      .reauth-hint-container .reauth-name-hint {
-        color: inherit;
-        font-size: inherit;
-      }
-
       .action-box-area.active .action-box-button {
         display: none;
       }
 
       .action-box-area.active ~ .action-box-menu:not(.menu-moved-up) {
         top: 8px;
       }
 
       .action-box-area.active ~ .action-box-menu {
         border: none;
@@ skipping 46 matching lines @@
       }
 
       .action-box-remove-user-warning .remove-warning-button {
         background: var(--google-red-700);
         min-width: 72px;
         width: auto;
       }
     </style>
   </template>
 </dom-module>