Sync: Update look of sign in box

chrome/browser/resources/sync_setup_overlay.css

Index: chrome/browser/resources/sync_setup_overlay.css
diff --git a/chrome/browser/resources/sync_setup_overlay.css b/chrome/browser/resources/sync_setup_overlay.css
index 42c1da87d97e164ecbb0da0b40801eab82715b80..4a178d29682b529a0fe22eb23a9a377810ea15d7 100644
--- a/chrome/browser/resources/sync_setup_overlay.css
+++ b/chrome/browser/resources/sync_setup_overlay.css
@@ -88,27 +88,16 @@
   min-width: 87px;
 }
 
-.end-aligned {
-  text-align: end;
-}
-
 #sync-setup-overlay * .throbber {
   margin: 4px 10px;
-  vertical-align: middle;
   visibility: hidden;
 }
 
-#gaia-account-text {
-  font-weight: bold;
-}
-
 #email-readonly {
-  font-weight: bold;
-}
-
-#sync-setup-overlay * div.errormsg {
-  color: red;
-  font-size: smaller;
+  font-size: 15px;
+  height: 29px;
+  line-height: 29px;
+  margin: 0;
 }
 
 #passphrase-encryption-message {
@@ -156,19 +145,23 @@
   margin-bottom: 5px;
 }
 
-div.error-msg-spacer {
-  min-height: 1em;
-}
-
 #gaia-login-form {
   margin-bottom: 0;
 }
 
+#captcha-div {
+  overflow: hidden;
+  border: 1px solid #e5e5e5;
+  background: #fff;
+  margin: 0 0 1.5em;
+  padding: 1em 1em 0;
+}
+
 #captcha-wrapper {
   background: no-repeat;
-  background-color: #e8eefa;
   background-position: center;
   background-size: 200px 70px;
+  margin: 0 0 1em;
 }
 
 #captcha-image {
@@ -184,57 +177,24 @@ div.error-msg-spacer {
   margin: 0 10px;
 }
 
-.bottom-padded-cell {
-  padding-bottom: 3px;
-}
-
-.no-vertical-padding {
-  padding-bottom: 0;
-  padding-top: 0;
-}
-
 #cancel-space-no-captcha {
   height: 22px;
 }
 
-#top-blurb {
-  line-height: 1.5em;
-}
-
 #top-blurb-error {
-  background-color: #eeb939;
-  border-radius: 4px;
+  background:#F9EDBE;

[James Hawkins, 2011/10/14 21:52:11]

Lower-case for rgb. Space after prop colon.

[sail, 2011/10/14 22:11:36]

Done.

+  border:1px solid #F0C36D;
+  -webkit-border-radius:2px;

[James Hawkins, 2011/10/14 21:52:11]

-webkit props at the top.

[sail, 2011/10/14 22:11:36]

Done.

   display: block;
   font-weight: bold;
-  margin-bottom: 10px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 4px 10px;
+  line-height: 1.5em;
+  margin: 10px auto 10px auto;
+  padding:0 16px;
   text-align: center;
   visibility: hidden;
   width: 70%;
 }
 
-#content-table {
-  background-color: #fff;
-  border: #c3d9ff 1px solid;
-  padding: 2px;
-}
-
-.access-code-row > td {
-  padding-bottom: 1px;
-  text-align: center;
-}
-
-#access-code-label-row > td {
-  padding-top: 6px;
-}
-
-#captcha-instructions {
-  margin-bottom: 5px;
-  white-space: normal;
-}
-
 #password-row {
   margin-top: 2px;
 }
@@ -243,10 +203,6 @@ div.error-msg-spacer {
   margin-top: 2px;
 }
 
-#errormsg-0-access-code {
-  text-align: center;
-}
-
 #sync-setup-configure {
   line-height: 1.33em;
   background: #FFFFFF;
@@ -323,3 +279,210 @@ html[dir='rtl'] #learn-more-link {
 #customize-link, #use-default-link {
   -webkit-transition: opacity .25s;
 }
+
+
+/* Sign in box. */
+
+.sign-in {
+  margin-left: auto;
+  margin-right: auto;
+  width: 335px;
+}
+
+.signin-box {
+  background: #f5f5f5;
+  border: 1px solid #e5e5e5;
+  padding: 20px 25px 15px;
+}
+
+.signin-box h2 {
+  color: #222;
+  font-size: 16px;
+  font-weight: normal;
+  height: 16px;
+  line-height: 16px;
+  margin: 0 0 1.2em;
+  position: relative;
+}
+
+.signin-box h2 strong {
+  background: transparent
+      url('chrome://resources/images/google-transparent.png') no-repeat;
+  display: inline-block;
+  height: 19px;
+  position: absolute;
+  right: 0;
+  top: 1px;
+  width: 52px;
+}
+
+/* Sign in buttons. */
+
+.signin-box input[type=submit] {
+  background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);

[James Hawkins, 2011/10/14 21:52:11]

Spaces between params.

[sail, 2011/10/14 22:11:36]

Done.

+  border: 1px solid #3079ed;
+  border-radius: 2px;
+  color: #FFF;

[James Hawkins, 2011/10/14 21:52:11]

Lower-case rgb.

[sail, 2011/10/14 22:11:36]

Done.

+  display: inline-block;
+  font-size: 13px;
+  font-weight: bold;
+  height: 32px;
+  line-height: 27px;
+  margin: 0 0.4em 1.2em 0;
+  min-width: 54px !important;
+  padding: 0 8px;
+  -webkit-transition: all 0.218s;

[James Hawkins, 2011/10/14 21:52:11]

-webkit props at the top.

[sail, 2011/10/14 22:11:36]

Done.

+  -webkit-user-select:none;
+}
+
+.signin-box input[type=submit]:hover {
+  background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
+  border: 1px solid #2f5bb7;
+  color: #FFF;
+  -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+  -webkit-transition: all 0.0s;
+}
+
+.signin-box input[type=submit]:focus {
+  border: 1px solid #4d90fe;
+  outline: none;
+  z-index:4 !important;
+  -webkit-box-shadow:inset 0 0 0 1px #fff;
+}
+
+.signin-box input[type=submit]:active,
+.signin-box input[type=submit]:focus:active {
+  -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
+}
+
+.signin-box input[type=submit]:focus:hover {
+  -webkit-box-shadow: inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1);
+}
+
+.signin-box input[type=submit][disabled],
+.signin-box input[type=submit][disabled]:hover,
+.signin-box input[type=submit][disabled]:active {
+  border: 1px solid #3079ed;
+  background-color: #4d90fe;
+  color: #FFF;
+  opacity: 0.5;
+  -webkit-box-shadow: none;
+}
+
+/* Sign in text fields. */
+
+.signin-box input[type=text],
+.signin-box input[type=password] {
+  background-color: #FFF;
+  border: 1px solid #d9d9d9;
+  border-top: 1px solid #c0c0c0;
+  color: #333;
+  display: inline-block;
+  font-size: 15px;
+  height: 32px;
+  line-height: 27px;
+  margin-top: 0.5em;
+  padding-left: 8px;
+  vertical-align: top;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -webkit-border-radius: 1px;
+}
+
+.signin-box input[type=text]:hover,
+.signin-box input[type=password]:hover {
+  border: 1px solid #b9b9b9;
+  border-top: 1px solid #a0a0a0;
+  -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+}
+
+.signin-box input[type=text]:focus,
+.signin-box input[type=password]:focus {
+  border: 1px solid #4d90fe;
+  outline: none;
+  -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
+}
+
+.signin-box input[type=text][disabled],
+.signin-box input[type=password][disabled] {
+  border: 1px solid #e5e5e5;
+  background: #f5f5f5;
+  -webkit-box-shadow: none;
+}
+
+.signin-box input[type=text][disabled]:hover,
+.signin-box input[type=password][disabled]:hover {
+  -webkit-box-shadow: none;
+}
+
+
+/* Sign in links. */
+
+.signin-box .account-link {
+  color: #15c !important;
+  text-decoration: none;
+}
+
+.signin-box .account-link:visited {
+  color: #61c !important;
+  text-decoration: none;
+}
+
+.signin-box .account-link:hover {
+  text-decoration: underline;
+}
+
+.signin-box .account-link:active {
+  color: #d14836 !important;
+  text-decoration: underline;
+}
+
+/* Sign in text. */
+
+.signin-box strong {
+  color: #222;
+  display: block;
+}
+
+.signin-box label {
+  display: block;
+  margin: 0 0 1.5em;
+}
+
+/* Sign in miscellaneous. */
+
+.signin-box .throbber {
+  float: right;
+}
+
+#create-account-div {
+  display: inline-block;
+}
+
+.signin-box .errormsg {
+  color: #dd4b39 !important;
+  font-size: 13px !important;
+  line-height: 17px;
+  margin: 0.5em 0 1.5em;
+}
+
+.signin-box .help-link {
+  background: #dd4b39;
+  color: #fff !important;
+  display: inline-block;
+  font-weight: bold;
+  padding: 0 5px;
+  position: relative;
+  text-decoration: none;
+  top: 0px;
+  -webkit-border-radius: 1em;
+}
+
+.signin-box .help-link:visited {
+  color: #fff !important;
+}
+
+.signin-box .help-link:hover {
+  color: #fff !important;
+  opacity: .7;
+}