cros: Update SAML flow.

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

 /* Copyright 2013 The Chromium Authors. All rights reserved.

[bartfab (slow), 2014/02/04 20:10:47]

Nit: A lot of this file looks like it was copy & pasted from some other GAIA CSS
file. Would it be possible to share a CSS file for the common styles?

[xiyuan, 2014/02/04 21:23:10]

The password field and the blue button could be put into a css file that can be
shared. Split them into a gaia.css.

The other place uses the Gaia CSS is the offline page of gaia_auth extension
which does not have access chrome://resources etc and cannot directly do
<include>. It is a bit hard to share the style with it. I'll just leave it like
this and we can revisit when there are more places needs gaia style.

  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 #confirm-password {
-  height: 200px;
-  padding: 70px 17px;
-  width: 400px;
+  height: 609px;  /* Should be the same as #gaia-signin. */
+  padding: 70px;
+  width: 722px;  /* Should be the same as #gaia-signin. */
+}
+
+#confirm-password .step-contents {
+  -webkit-box-pack: center;
+  display: -webkit-box;
+  height: 100%;
+}
+
+#confirm-password-main {
+  height: 100%;
+  width: 310px;
 }
 
 #confirm-password-title {
   font-weight: bold;
-  margin: 0;
+}
+
+#confirm-password-input-container {
+  margin-bottom: 1em;
 }
 
 #confirm-password-input {
-  margin-top: 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 1px;
+  border-top: 1px solid #c0c0c0;
+  font-size: 15px;
+  height: 32px;
+  margin: 0;
+  padding: 0 8px;
   width: 100%;
 }
+
+#confirm-password-input:focus {
+  border: 1px solid rgb(77, 144, 254);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
+  outline: none;
+}
+
+#confirm-password-error {
+  color: rgb(221, 75, 57);
+  margin-top: .5em;
+}
+
+#confirm-password:not(.error) #confirm-password-error {
+  display: none;
+}
+
+#confirm-password-divider {
+  margin-left: 44px;
+  margin-right: 30px;
+}
+
+#confirm-password-right {
+  -webkit-box-flex: 1;
+  margin-top: 1em;
+}
+
+.blue-button {
+  background-color: rgb(77, 144, 254);
+  background-image: -webkit-linear-gradient(top,
+                                            rgb(77, 144, 254),
+                                            rgb(71, 135, 237));
+  border: 1px solid rgb(48, 121, 237);
+  border-radius: 2px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: bold;
+  height: 32px;
+  margin: 0 1.5em 1.2em 0;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.blue-button:hover {
+  background-color: rgb(53, 122, 232);
+  background-image: -webkit-linear-gradient(top,
+                                            rgb(77, 144, 254),
+                                            rgb(53, 122, 232));
+  border: 1px solid rgb(47, 91, 183);
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+}
+
+.blue-button:focus {
+  -webkit-box-shadow: inset 0 0 0 1px #fff;
+}
+
+.blue-button:focus:hover {
+  -webkit-box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.1);
+}