Move common account picker/user pod js/css/html out of src/chrome

chrome/browser/resources/login/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. */
-  height: 100%;
-  overflow: visible;
-  position: absolute;
-  width: 100%;
-}
-
-/* Hide the pod row while images are loading. */
-podrow.images-loading {
-  visibility: hidden;
-}
-
-.pod {
-  -webkit-tap-highlight-color: transparent;
-  background-color: white;
-  border-radius: 2px;
-  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);
-  cursor: pointer;
-  height: 213px;
-  outline: none;
-  position: absolute;
-  transform: scale3d(0.9, 0.9, 0.9);
-  width: 180px;
-  z-index: 0;
-}
-
-.account-picker.flying-pods .pod {
-  transition: all 180ms;
-}
-
-.pod.faded {
-  opacity: .75;
-}
-
-podrow[ncolumns='6'] .pod {
-  transform: scale3d(0.8, 0.8, 0.8);
-}
-
-.pod.focused {
-  /* Focused pod has the same size no matter how many pods. */
-  cursor: default;
-  transform: scale3d(1, 1, 1) !important;
-  z-index: 1;
-}
-
-.pod.focused[auth-type='userClick'] {
-  cursor: pointer;
-}
-
-.user-image-pane {
-  background-color: white;
-  height: 160px;
-  left: 10px;
-  position: absolute;
-  top: 10px;
-  width: 160px;
-  z-index: 3;
-}
-
-html[dir=rtl] .user-image-pane {
-  left: auto;
-  right: 10px;
-}
-
-.user-image-container {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  width: 100%;
-}
-
-.pod .user-image {
-  flex: none;
-  max-height: 160px;
-  max-width: 160px;
-  opacity: 0.7;
-}
-
-.pod.focused .user-image {
-  opacity: 1;
-}
-
-.pod.multiprofiles-policy-applied .user-image {
-  -webkit-filter: grayscale(100%);
-}
-
-.signed-in-indicator {
-  display: none;
-}
-
-.pod.signed-in .signed-in-indicator {
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  display: block;
-  font-size: small;
-  padding: 3px 0;
-  position: absolute;
-  text-align: center;
-  top: 0;
-  width: 100%;
-}
-
-.main-pane {
-  left: 10px;
-  position: absolute;
-  top: 10px;
-  z-index: 2;
-}
-
-html[dir=rtl] .main-pane {
-  left: auto;
-  right: 10px;
-}
-
-.name-container,
-.pod.focused:not(.multiprofiles-policy-applied) .auth-container {
-  background-color: white;
-  display: flex;
-  position: absolute;
-  top: 160px;
-  width: 160px;
-}
-
-.name-container {
-  transition: transform 180ms;
-}
-
-.pod.focused .name-container {
-  display: none;
-}
-
-.pod.focused.multiprofiles-policy-applied .name-container {
-  display: flex;
-}
-
-.name {
-  color: #565656;
-  /* This should be 15.6px - the equivalent of 14px at 90% scale. */
-  flex: auto;
-  font-size: 16px;
-  margin-top: 12px;
-  outline: none;
-  overflow: hidden;
-  padding: 0 6px;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.learn-more-container,
-.auth-container,
-.password-entry-container,
-.signin-button-container {
-  display: none;
-}
-
-.pod[auth-type='offlinePassword'].focused .password-entry-container {
-  display: flex;
-  flex: auto;
-}
-
-.password-container {
-  flex: auto;
-}
-
-.pod input[type='password'] {
-  border: none;
-  padding: 4px 6px;
-  position: relative;
-  top: 6px;
-  width: 100%;
-}
-
-.capslock-hint-container {
-  display: none;
-}
-
-.capslock-on .capslock-hint-container {
-  display: block;
-  flex: none;
-}
-
-.capslock-hint {
-  -webkit-margin-end: 6px;
-  -webkit-margin-start: -2px;
-  position: relative;
-  top: 11px;
-}
-
-.password-label {
-  display: none;
-}
-
-.pod[auth-type='userClick'] .password-label {
-  display: block;
-  flex: auto;
-  margin-top: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.custom-icon {
-  background-position: center;
-  background-repeat: no-repeat;
-  flex: none;
-  height: 40px;
-  width: 40px;
-}
-
-.pod[auth-type='onlineSignIn'] .signin-button-container,
-.launch-app-button-container {
-  display: block;
-  flex: auto;
-  text-align: center;
-}
-
-.signin-button,
-.launch-app-button {
-  display: inline;
-  margin-top: 6px !important;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.action-box-area,
-.user-type-icon-area {
-  background-color: white;
-  border-radius: 2px;
-  position: absolute;
-  top: 0;
-}
-
-.action-box-area {
-  opacity: 0;
-  outline: none;
-  right: 0;
-  transition: opacity 100ms;
-  z-index: 4;
-}
-
-html[dir=rtl] .action-box-area {
-  left: 0;
-  right: auto;
-}
-
-.action-box-area:focus,
-.action-box-area.hovered,
-.action-box-area.active {
-  opacity: 1;
-}
-
-.action-box-button {
-  background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_NORMAL');
-  height: 13px;
-  margin: 5px;
-  width: 13px;
-}
-
-.action-box-button:hover {
-  background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_HOVER');
-}
-
-.action-box-area.active .action-box-button {
-  background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_PRESSED');
-}
-
-.user-type-icon-area {
-  left: 0;
-  z-index: 5;
-}
-
-html[dir=rtl] .user-type-icon-area {
-  left: auto;
-  right: 0;
-}
-
-.user-type-icon-image {
-  height: 16px;
-  margin: 5px;
-  width: 16px;
-}
-
-.user-type-icon-area.supervised .user-type-icon-image {
-  background-image: url('chrome://theme/IDR_SUPERVISED_USER_ICON');
-}
-
-.user-type-icon-area.policy .user-type-icon-image {
-  background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
-}
-
-.user-type-icon-area.app .user-type-icon-image {
-  background-image: url('chrome://theme/IDR_KIOSK_APP_USER_POD_ICON');
-}
-
-.action-box-menu {
-  display: none;
-  z-index: 6;
-}
-
-.action-box-area.active ~ .action-box-menu {
-  background-color: white;
-  border: 1px solid lightgray;
-  border-radius: 2px;
-  display: flex;
-  flex-direction: column;
-  font-size: 13px;
-  position: absolute;
-  right: 5px;
-  top: 18px;
-  width: 220px;
-}
-
-html[dir=rtl] .action-box-area.active ~ .action-box-menu {
-  left: 5px;
-  right: auto;
-}
-
-.action-box-menu-title {
-  color: #b4b4b4;
-  display: flex;
-  flex-direction: column;
-  padding: 7px 20px;
-}
-
-.action-box-menu-title-name,
-.action-box-menu-title-email {
-  flex: none;
-  height: 23px;
-  line-height: 19px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.action-box-menu-remove {
-  border-top: 1px solid lightgray;
-  line-height: 19px;
-  min-height: 24px;
-  outline: none;
-  padding: 12px 20px 7px;
-}
-
-.action-box-menu-remove:hover,
-.action-box-menu-remove:focus {
-  background-color: #f3f3f3;
-}
-
-.action-box-remove-user-warning {
-  border-top: 1px solid lightgray;
-  font-size: 12px;
-  line-height: 18px;
-  padding: 20px;
-}
-
-.action-box-remove-user-warning-text {
-  padding-bottom: 20px;
-}
-
-.action-box-remove-user-warning .remove-warning-button {
-  width: 100%;
-}
-
-.user-type-bubble {
-  background-color: white;
-  border: 1px solid lightgray;
-  border-radius: 2px;
-  left: 5px;
-  opacity: 0;
-  padding: 17px;
-  position: absolute;
-  top: 20px;
-  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;
-}
-
-.easy-unlock-button-content {
-  width: 145px;
-}
-
-/**** Public account user pod rules *******************************************/
-
-.pod.public-account.expanded {
-  width: 500px;
-}
-
-.pod.public-account.focused .name-container {
-  display: flex;
-}
-
-.pod.public-account.expanded .name-container {
-  transform: translateY(-34px);
-}
-
-.pod.public-account .learn-more-container {
-  display: block;
-  flex: none;
-}
-
-.pod.public-account .learn-more {
-  background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
-  height: 16px;
-  position: relative;
-  top: 16px;
-  width: 16px;
-}
-
-.expanded-pane {
-  display: none;
-}
-
-.pod.public-account.animating .expanded-pane,
-.pod.public-account.expanded .expanded-pane {
-  display: block;
-  margin: 10px;
-  overflow: hidden;
-  z-index: 1;
-}
-
-.expanded-pane-contents {
-  display: flex;
-  flex-direction: column;
-  float: right;
-  height: 193px;
-  width: 490px;
-}
-
-html[dir=rtl] .expanded-pane-contents {
-  float: left;
-}
-
-.expanded-pane-name {
-  -webkit-margin-start: 200px;
-  flex: none;
-  font-size: 19px;
-  margin-bottom: 11px;
-  margin-top: -2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.reminder {
-  -webkit-margin-start: 200px;
-  flex: auto;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.bottom-container {
-  -webkit-margin-start: 10px;
-  display: flex;
-  flex: none;
-}
-
-.expanded-pane-learn-more-container,
-.enter-button {
-  flex: none;
-}
-
-.expanded-pane-learn-more {
-  background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
-  height: 16px;
-  position: relative;
-  top: 6px;
-  width: 16px;
-}
-
-.info {
-  flex: auto;
-  font-size: 13px;
-  margin: 5px 10px 0 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}