ui/login/account_picker/user_pod_template.html

<dom-module id="user-pod-template-shared-styles">
  <template>
    <link rel="stylesheet" href="user_pod_template.css">
  </template>
</dom-module>

<style is="custom-style" include="user-pod-template-shared-styles"></style>

<iron-iconset-svg name="user-pod" size="24">
  <svg>
    <defs>
      <!--
      Inlined from Polymer's iron-icons to avoid importing everything.
      See http://goo.gl/Y1OdAq for instructions on adding additional icons.
      -->
      <g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></g>
      <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></g>
    </defs>
  </svg>
</iron-iconset-svg>

<div id="user-pod-template" class="pod disabled" hidden>
  <div class="user-image-pane">
    <div class="user-image-container">
      <img class="user-image" alt>
      <img class="user-image animated-image" alt>
    </div>
    <div class="signed-in-indicator">$i18n{signedIn}</div>
    <div class="indicator-container">
      <div class="indicator legacy-supervised-indicator"></div>
      <div class="indicator child-indicator"></div>
      <div class="indicator locked-indicator"></div>
    </div>
  </div>
<if expr="chromeos">
  <div class="pin-container pin-disabled pin-tag">
    <pin-keyboard enable-password hide-input enable-placeholder></pin-keyboard>
  </div>
</if>
  <div class="main-pane">
    <div class="name-container">
      <div class="learn-more-container">
        <div class="learn-more"></div>
      </div>
      <div class="name"></div>
    </div>
    <div class="auth-container">
      <!-- Password Authentication -->
      <div class="custom-icon-container" hidden></div>
<if expr="chromeos">
      <div class="fingerprint-icon-container" hidden
          aria-label="$i18n{fingerprintIconMessage}">
        <div class="custom-icon fingerprint-icon-image"></div>
      </div>
</if>
      <div class="password-entry-container">
        <div class="password-container">
          <input type="password" class="password"
              placeholder="$i18n{passwordHint}">
        </div>
<if expr="chromeos">
        <div class="capslock-hint-container">
          <img class="capslock-hint"
               src="chrome://theme/IDR_LOGIN_PASSWORD_CAPS_LOCK" alt>
        </div>
        <paper-icon-button class="submit-button" disabled
            aria-label="$i18n{submitButtonAccessibleName}"
            icon="user-pod:arrow-forward" tabindex="-1">
        </paper-icon-button>
</if>
      </div>
      <!-- User Click Authentication -->
      <div class="password-label"></div>
      <div class="signin-transition-container">
        <span class="signing-in-label">$i18n{signingIn}</span>
        <span class="animated-ellipsis-component0">.</span>
        <span class="animated-ellipsis-component1">.</span>
        <span class="animated-ellipsis-component2">.</span>
      </div>
      <div class="reauth-hint-container">
        <span class="reauth-warning"></span>
        <span class="reauth-name-hint"></span>
      </div>
      <div class="launch-app-button-container" hidden>
        <button class="launch-app-button">$i18n{launchAppButton}</button>
      </div>
    </div>
  </div>
  <div class="action-box-area">
    <div class="custom-appearance action-box-button"></div>
    <!-- iron-icon is imported inside user_manager.html -->
    <iron-icon icon="cr:more-vert" class="action-box-icon"></iron-icon>
  </div>
  <div class="user-image-gradient-area">
  </div>
  <div class="user-type-icon-area" hidden>
    <div class="custom-appearance user-type-icon-image"></div>
  </div>
  <div class="action-box-menu">
    <div class="action-box-menu-title">
      <span class="action-box-menu-title-name"></span>
      <span class="action-box-menu-title-email"></span>
    </div>
    <div class="action-box-menu-remove">
      <span class="action-box-menu-remove-command"/>
    </div>
    <div class="action-box-remove-user-warning" hidden>
      <div class="action-box-remove-user-warning-text"></div>
      <table class="action-box-remove-user-warning-table-nonsync
                    non-sync has-stats">
        <tbody>
          <tr>
            <td>$i18n{removeUserWarningTextHistory}</td>
            <td class="action-box-remove-user-warning-history
                       action-box-remove-user-warning-table-numbers">
              $i18n{removeUserWarningTextCalculating}
            </td>
          </tr>
          <tr>
            <td>$i18n{removeUserWarningTextPasswords}</td>
            <td class="action-box-remove-user-warning-passwords
                       action-box-remove-user-warning-table-numbers">
              $i18n{removeUserWarningTextCalculating}
            </td>
          </tr>
          <tr>
            <td>$i18n{removeUserWarningTextBookmarks}</td>
            <td class="action-box-remove-user-warning-bookmarks
                       action-box-remove-user-warning-table-numbers">
              $i18n{removeUserWarningTextCalculating}
            </td>
          </tr>
          <tr>
            <td>$i18n{removeUserWarningTextAutofill}</td>
            <td class="action-box-remove-user-warning-autofill
                       action-box-remove-user-warning-table-numbers">
              $i18n{removeUserWarningTextCalculating}
            </td>
          </tr>
        </tbody>
      </table>
      <div class="action-box-remove-legacy-supervised-user-warning-text">
        $i18n{removeLegacySupervisedUserWarningText}
      </div>
      <div class="action-box-remove-non-owner-user-warning-text">
        $i18n{removeNonOwnerUserWarningText}
      </div>
      <!-- paper-button is imported inside user_manager.html -->
      <paper-button class="remove-warning-button action-button">
        $i18n{removeUserWarningButtonTitle}
      </paper-button>
    </div>
  </div>
  <div class="user-type-bubble">
    <div class="user-type-bubble-header">
      <span class="mp-policy-title">
        $i18n{multiProfilesRestrictedPolicyTitle}
      </span>
    </div>
    <div class="user-type-bubble-body">
      <span class="mp-policy-not-allowed-msg" hidden>
        $i18n{multiProfilesNotAllowedPolicyMsg}
      </span>
      <span class="mp-policy-primary-only-msg" hidden>
        $i18n{multiProfilesPrimaryOnlyPolicyMsg}
      </span>
      <span class="mp-owner-primary-only-msg" hidden>
        $i18n{multiProfilesOwnerPrimaryOnlyMsg}
      </span>
    </div>
  </div>
</div>

<!-- Extra elements that are appended to above "user-pod-template" for public
     account user pod. Note that only the children of the template div are
     appended. -->
<div id="public-account-user-pod-extras-template" hidden>
  <div class="expanded-pane">
    <div class="expanded-pane-contents">
      <div class="side-container">
        <div class="expanded-pane-name"></div>
        <div class="expanded-pane-container">
          <div class="expanded-pane-learn-more-container">
            <div class="expanded-pane-learn-more"></div>
          </div>
          <div class="info"></div>
          <div class="monitoring-container">
            <span class="monitoring-warning">
              $i18n{publicAccountMonitoringWarning}
            </span>
            <a class="monitoring-learn-more" href="#" role="button">
              $i18n{publicAccountLearnMore}
            </a>
          </div>
          <div class="reminder">$i18n{publicAccountReminder}</div>
          <div class="language-and-input-section">
            <div class="select-with-label">
              <label class="language-select-label">
                $i18n{publicSessionSelectLanguage}
              </label>
              <div class="select-container">
                <select class="language-select"></select>
              </div>
            </div>
            <div class="select-with-label">
              <label class="keyboard-select-label">
                $i18n{publicSessionSelectKeyboard}
              </label>
              <div class="select-container">
                <select class="keyboard-select"></select>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="horizontal-line"></div>
      <div class="bottom-container">
        <paper-button raised class="enter-button"
            aria-label="$i18n{publicAccountEnterAccessibleName}">
          $i18n{publicAccountEnter}
        </paper-button>
        <div class="language-and-input-container">
          <a class="language-and-input" href="#" role="button">
            $i18n{publicSessionLanguageAndInput}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>