cros: Account picker UI for public account.

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

Index: chrome/browser/resources/chromeos/login/screen_public_account_signin.css
diff --git a/chrome/browser/resources/chromeos/login/screen_public_account_signin.css b/chrome/browser/resources/chromeos/login/screen_public_account_signin.css
new file mode 100644
index 0000000000000000000000000000000000000000..a380d5db9c2d17d105f25c63b6a6243948319339
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/screen_public_account_signin.css
@@ -0,0 +1,78 @@
+/* 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.
+ */
+
+#public-account-signin {
+  -webkit-box-align: center;
+  display: -webkit-box;
+}
+
+#public-account-avartar {

[bartfab (slow), 2012/11/28 15:11:38]

The avatar size increases here from 160 x 160 in a regular pod to 220 x 220 in
the expanded pod. This is not what the mocks show. The avatar should stay the
same size. Also, it would be good to use style rules from user_pod_row.css where
possible and only have a minimal set of overrides in this file, ensuring a more
uniform visual appearance.

[xiyuan, 2012/12/01 00:24:19]

CL refactored to expanding pod in-place and will use the same avatar image for
both states.

+  display: block;
+  height: 220px;
+  margin: 5px;
+  width: 220px;
+}
+
+#public-account-avartar-info-divider {
+  border-left: 1px solid lightgray;

[Ivan Korotkov, 2012/11/28 21:50:39]

Will this work with RTL correctly?

[xiyuan, 2012/12/01 00:24:19]

Yes because the divider div's width is 1px.

+  height: 220px;
+  position: absolute;
+  width: 1px;
+}
+
+#public-account-info-pane {
+  height: 220px;
+  margin: 5px;
+  position: relative;
+  width: 250px;
+}
+
+#public-account-info-pane .managed-badge {
+  position: absolute;
+  top: 0;
+}
+html[dir=ltr] #public-account-info-pane .managed-badge {
+  right: 0;
+}
+html[dir=rtl] #public-account-info-pane .managed-badge {
+  left: 0;
+}
+
+#public-account-name {
+  color: black;

[Nikita (slow), 2012/11/28 18:57:34]

Is this really supposed to be black?
As far a I remember we tend not to use black text on sign in screen.

user pod name is color: #565656;

[xiyuan, 2012/12/01 00:24:19]

I'll let the UX decide. The mock uses black.

+  font-size: 20px;
+}
+
+#public-account-text-contents {
+  height: 150px;
+  position: absolute;
+  top: 30px;
+  width: 100%;
+}
+
+#public-account-info,
+#public-account-hint {
+  height: 40%;
+}
+
+#public-account-info {
+  margin-top: 20px;
+}
+
+#public-account-hint {
+  font-weight: bold;
+}
+
+#public-account-enter-button {
+  bottom: 0;
+  display: block;
+  position: absolute;

[Ivan Korotkov, 2012/11/28 21:50:39]

I guess you can simplify a bit if you add 'right: 0' here and then 'right: auto;
left: 0' in [dir=rtl] selector

[xiyuan, 2012/12/01 00:24:19]

Done in its new incarnation, i.e. as ".side-pane-container .enter-button".

+}
+html[dir=ltr] #public-account-enter-button {

[Nikita (slow), 2012/11/28 18:57:34]

nit: add extra lines between styles

[xiyuan, 2012/12/01 00:24:19]

Removed now.

+  right: 0;
+}
+html[dir=rtl] #public-account-enter-button {

[Nikita (slow), 2012/11/28 18:57:34]

nit: same here

[xiyuan, 2012/12/01 00:24:19]

Done in its new incarnation, i.e. as rtl rule for ".side-pane-container
.enter-button".

+  left: 0;
+}