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

This CL only moves account picker related resources that are used on Chrome OS (login UI) and Chrome Win/Mac/Linux (user_manager UI).

The rest of Chrome OS out-of-box/login WebUI resources will be moved later as well.

BUG=387608,370175
R=dzhioev@chromium.org, sky@chromium.org

Review URL: https://codereview.chromium.org/402403005

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@285523 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 245 insertions, 0 deletions

diff --git a/ui/login/oobe.css b/ui/login/oobe.css
new file mode 100644
index 0000000..8dae75e
--- /dev/null
+++ b/ui/login/oobe.css
@@ -0,0 +1,245 @@
+/* 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 the Out of the box experience (OOBE) flow,
+ * sign in and lock screens.
+ */
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-color: transparent;
+  cursor: default;
+  font-size: 14px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: fixed;
+  top: 0;
+}
+
+body.solid {
+  background-color: white;
+}
+
+button {
+  font-family: inherit;
+  outline: none;
+}
+
+/* Follow same focus coloring as in widgets.css */
+/* Do not apply this style to restricted button state. */
+button.custom-appearance:not(.button-restricted):not(.button-fancy) {
+  -webkit-transition: border-color 200ms;
+  border: 1px solid transparent;
+  /* Don't grey out disabled buttons. */
+  color: buttontext !important;
+}
+
+/* ':focus' used twice to increase specificity. */
+button.custom-appearance:focus:focus {
+  border-color: rgb(77, 144, 254);
+}
+
+button:not(.custom-appearance) {
+  min-width: 72px !important;
+}
+
+button.button-fancy {
+  min-width: 72px !important;
+}
+
+button.button-blue {
+  background-image: linear-gradient(rgb(93, 154, 255),
+                                    rgb(93, 154, 255) 38%,
+                                    rgb(88, 145, 240));
+  border: 1px solid rgba(45, 102, 195, 1);
+  border-radius: 2px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px
+              rgba(255, 255, 255, 0.4);
+  color: #fff;
+  font-size: 14px;
+  margin: 0 1px 0 0;
+  min-height: 2em;
+  min-width: 4em;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+}
+
+
+button.button-blue:hover {
+  background-image: linear-gradient(rgb(101, 158, 253),
+                                    rgb(101, 158, 253) 38%,
+                                    rgb(96, 151, 241));
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px
+              rgba(255, 255, 255, 0.4);
+}
+
+button.button-blue:active {
+  background-image: linear-gradient(rgb(96, 149, 237),
+                                    rgb(96, 149, 237) 38%,
+                                    rgb(96, 149, 237));
+  border: 1px solid rgba(38, 84, 160, 1);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+button.button-red {
+  background-image: linear-gradient(rgb(221, 75, 57),
+                                    rgb(221, 75, 57) 38%,
+                                    rgb(197, 66, 49));
+  border: 1px solid rgba(167, 57, 44, 1);
+  border-radius: 2px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px
+      rgba(255, 255, 255, 0.4);
+  color: #fff;
+  margin: 0 1px 0 0;
+  min-height: 2em;
+  min-width: 4em;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
+}
+
+button.button-red:hover {
+  background-image: linear-gradient(rgb(231, 78, 59),
+                                    rgb(231, 78, 59) 38%,
+                                    rgb(209, 70, 52));
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px
+      rgba(255, 255, 255, 0.4);
+}
+
+button.button-red:active {
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.label,
+.flexible-label {
+  display: block;
+  margin: 5px 5px 5px 0;
+  padding: 5px 5px 5px 0;
+}
+
+.label {
+  width: 170px;
+}
+
+.flexible-label {
+  max-width: 250px;
+}
+
+#installation-settings-popup {
+  background: white;
+  border: 1px solid rgb(188, 193, 208);
+  border-radius: 2px;
+  box-shadow: 0 5px 80px #505050;
+  min-height: 250px;
+  position: relative;
+  width: 460px;
+  z-index: 10;
+}
+
+#installation-settings-popup h1 {
+  -webkit-padding-end: 24px;
+  -webkit-user-select: none;
+  background: linear-gradient(white, #F8F8F8);
+  color: rgb(83, 99, 125);
+  font-size: 105%;
+  font-weight: bold;
+  margin: 0;
+  padding: 10px 15px 8px 15px;
+  text-shadow: white 0 1px 2px;
+}
+
+.popup-content-area {
+  padding: 0 20px 60px 20px;
+}
+
+#installation-settings-popup button {
+  bottom: 20px;
+  position: absolute;
+  right: 20px;
+}
+
+#tpm-busy {
+  text-align: center;
+}
+
+#tpm-password {
+  font-weight: bold;
+  text-align: center;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+#popup-overlay {
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
+  -webkit-transition: 250ms opacity;
+  background: rgba(255, 255, 255, .75);
+  bottom: 0;
+  display: -webkit-box;
+  left: 0;
+  padding: 20px;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 5;
+}
+
+#bubble {
+  -webkit-transition: 250ms opacity;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+#version-labels {
+  -webkit-transition: all 500ms linear;
+  color: #fff;
+  font-size: 11px;
+  margin: 10px;
+  text-align: end;
+  text-shadow:
+      0 0 4px rgba(0,0,0,.6),
+      0 1px 2px rgba(0,0,0,.8),
+      0 -1px 2px rgba(0,0,0,1);
+}
+
+#background {
+  -webkit-transition: 700ms opacity;
+  background-size: 100% 100%;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.background-initial {
+  opacity: 0;
+}
+
+.throbber {
+  -webkit-animation: throbber-animation 1s steps(36) infinite;
+  -webkit-margin-before: 2px;
+  -webkit-margin-end: 4px;
+  background-image: url(chrome://theme/IDR_CROS_DEFAULT_THROBBER);
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+}
+
+@-webkit-keyframes throbber-animation {
+  from {
+    background-position: 0;
+  }
+  to {
+    background-position: -576px;
+  }
+}
+