Single user pod implementation for new login screen

chrome/browser/resources/chromeos/login/md_header_bar.css

+/* Copyright (c) 2012 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. */
+
+#login-header-bar {
+  -webkit-padding-start: 15px;
+  bottom: 0;
+  left: 0;
+  min-height: 34px;  /* Should be consistent with .header-bar-item's height. */
+  padding-bottom: 6px;
+  position: absolute;
+  right: 0;
+}
+
+#login-header-bar {
+  padding-top: 7px;
+}
+
+html[screen=lock] .login-header-bar-hidden,
+html[screen=oobe] .login-header-bar-hidden {
+  opacity: 0;
+}
+
+html[screen=lock] .login-header-bar-animate-fast,
+html[screen=oobe] .login-header-bar-animate-fast {
+  transition: opacity 200ms ease-out;
+}
+
+html[screen=lock] .login-header-bar-animate-slow,
+html[screen=oobe] .login-header-bar-animate-slow {
+  transition: opacity 2s ease-out;
+}
+
+#login-header-bar button,
+#login-header-bar button:active,
+#login-header-bar button:focus,
+#login-header-bar button:hover {
+  background: transparent none;
+  box-shadow: none;
+  cursor: pointer;
+  height: 34px;
+  margin: 0;
+  min-width: 0;
+  opacity: 0.6;
+  padding: 5px 8px;
+  vertical-align: middle;
+}
+
+#login-header-bar button:not(.button-restricted),
+#login-header-bar button:active:not(.button-restricted),
+#login-header-bar button:focus:not(.button-restricted),
+#login-header-bar button:hover:not(.button-restricted) {
+  color: white !important;
+  opacity: 1 !important;
+}
+
+.header-bar-item {
+  height: 34px;
+}
+
+.add-supervised-user-menu {
+  display: none;
+}
+
+#more-settings-header-bar-item.active button.add-supervised-user-menu {
+  background-color: white;
+  border: 1px solid lightgray;
+  border-radius: 2px;
+  bottom: 0;
+  color: black !important;
+  display: block;
+  font-size: 13px;
+  height: auto;
+  min-height: 34px;
+  padding: 0 16px;
+  position: absolute;
+  text-align: center;
+  white-space: nowrap;
+}
+
+#more-settings-header-bar-item.active button.add-supervised-user-menu:focus {
+  border: 2px solid var(--google-blue-500);
+  border-radius: 2px;
+  padding: 0 15px;
+}
+
+html[dir=rtl] .header-bar-item {
+  background-position: right center;
+}
+
+#login-header-bar #shutdown-button-text,
+#login-header-bar #restart-button-text,
+#login-header-bar #add-user-button-text,
+#login-header-bar #guest-user-button-text,
+#login-header-bar #more-settings-button-text,
+#login-header-bar #cancel-multiple-sign-in-button-text,
+#login-header-bar #sign-out-user-button-text {
+  -webkit-padding-start: 28px;
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: 20px;
+}
+
+html[dir=rtl] #login-header-bar #shutdown-button-text,
+html[dir=rtl] #login-header-bar #restart-button-text,
+html[dir=rtl] #login-header-bar #add-user-button-text,
+html[dir=rtl] #login-header-bar #more-settings-button-text,
+html[dir=rtl] #login-header-bar #guest-user-button-text,
+html[dir=rtl] #login-header-bar #cancel-multiple-sign-in-button-text,
+html[dir=rtl] #login-header-bar #sign-out-user-button-text {
+  background-position: right center;
+}
+
+#login-header-bar #shutdown-button,
+#login-header-bar #restart-button,
+#login-header-bar #add-user-button,
+#login-header-bar #guest-user-button,
+#login-header-bar #more-settings-button,
+#login-header-bar #cancel-multiple-sign-in-button {
+  padding: 0 14px;
+}
+
+#login-header-bar #more-settings-header-bar-item {
+  position: relative;
+}
+
+#login-header-bar #shutdown-button-text,
+#login-header-bar #restart-button-text {
+  background-image: -webkit-image-set(
+      url(images/1x/shutdown.svg) 1x,
+      url(images/2x/shutdown.svg) 2x );
+}
+
+#login-header-bar #add-user-button-text {
+  background-image: -webkit-image-set(
+      url(images/1x/add-person.svg) 1x,
+      url(images/2x/add-person.svg) 2x );
+}
+
+#login-header-bar #more-settings-button-text {
+  background-image: -webkit-image-set(
+      url(images/1x/more-settings.svg) 1x,
+      url(images/2x/more-settings.svg) 2x );
+}
+
+#login-header-bar #guest-user-button-text {
+  background-image: -webkit-image-set(
+      url(images/1x/browse-as-guest.svg) 1x,
+      url(images/2x/browse-as-guest.svg) 2x );
+}
+
+#login-header-bar #cancel-multiple-sign-in-button-text {
+    background-image: -webkit-image-set(
+      url(images/1x/cancel.svg) 1x,
+      url(images/2x/cancel.svg) 2x );
+}
+
+#login-header-bar #sign-out-user-button-text {
+  background-image: -webkit-image-set(
+      url(images/1x/signout.svg) 1x,
+      url(images/2x/signout.svg) 2x );
+}
+
+.button-restricted {
+  border: 1px solid transparent;
+  color: white !important;
+  opacity: 0.4 !important;
+}