[cros] OOBE transitions polishing.

chrome/browser/resources/chromeos/login/oobe.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.
  *
  * This is the stylesheet used by the Out of the box experience (OOBE) flow,
  * sign in and lock screens.
  */
 
 html,
 body {
@@ skipping 84 matching lines @@
   position: relative;
 }
 
 html[oobe=old] #inner-container {
   height: 294px;
   padding: 20px;
   width: 640px;
 }
 
 html[oobe=new] #inner-container {
-  background: -webkit-linear-gradient(rgba(255,255,255,0.99),
-                                      rgba(255,255,255,0.95));
   border-radius: 2px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
-              0 4px 23px 5px rgba(0, 0, 0, 0.2),
-              0 2px 6px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   padding: 0;
 }
 
-/* Account picker has no border and background. */
-html[oobe=new] .account-picker #inner-container {
-  background: none;
-  box-shadow: none;
+/* Screens that have a border and background. */
+html[oobe=new] #oobe.connect #inner-container,
+html[oobe=new] #oobe.eula #inner-container,
+html[oobe=new] #oobe.update #inner-container,
+html[oobe=new] #oobe.gaia-signin #inner-container,
+html[oobe=new] #oobe.enrollment #inner-container,
+html[oobe=new] #oobe.oauth-enrollment #inner-container,
+html[oobe=new] #oobe.user-image #inner-container {
+  background: -webkit-linear-gradient(rgba(255,255,255,0.99),
+                                      rgba(255,255,255,0.95));
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
+              0 4px 23px 5px rgba(0, 0, 0, 0.2),
+              0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
 /* Only play this animation when 'down' class is removed. */
 html[oobe=new] #inner-container:not(.down) {
-  -webkit-transition: -webkit-transform 400ms ease;
+  -webkit-transition: -webkit-transform 200ms ease-in-out;
 }
 
 html[oobe=new] #inner-container.down {
   -webkit-transform: translateY(50px) rotateX(-2.5deg);
 }
 
 #security-info a,
 #security-tpm a,
 #eula a {
   color: rgb(0, 102, 104);
@@ skipping 146 matching lines @@
   min-height: 294px;
   opacity: 1;
   width: 640px;
 }
 
 html[oobe=new] .step {
   box-sizing: border-box;
 }
 
 html[oobe=new] .step.animated {
-  -webkit-transition: -webkit-transform 400ms ease,
-                      opacity 400ms ease,
-                      visibility 400ms ease;
+  -webkit-transition: -webkit-transform 200ms ease-in-out,
+                      opacity 200ms ease-in-out,
+                      visibility 200ms ease-in-out;
 }
 
 html[oobe=old][dir=ltr] .step {
   -webkit-transition: left 200ms, opacity 200ms, visibility 200ms ease-in-out;
   left: 0;
 }
 
 html[oobe=old][dir=rtl] .step {
   -webkit-transition: right 200ms, opacity 200ms, visibility 200ms ease-in-out;
   right: 0;
@@ skipping 59 matching lines @@
 html[oobe=old] #progress-dots {
   display: none;
 }
 
 html[oobe=new] #progress-dots {
   -webkit-box-pack: center;
   -webkit-margin-before: 15px;
   display: -webkit-box;
 }
 
+/* Hidden for the duration of initial transition. */
+html[oobe=new] #progress-dots.down {
+  visibility: hidden;
+}
+
 .progdot {
   -webkit-margin-end: 12px;
   opacity: 0.4;
 }
 
 html[oobe=old] .progdot {
   background: black;
   border-radius: 2px;
   height: 8px;
   width: 8px;
@@ skipping 465 matching lines @@
   color: #9c9c9c;
   display: -webkit-box;
 }
 
 
 html[oobe=old] #update #update-screen-curtain {
   margin: 9em auto;
 }
 
 html[oobe=new] #update #update-screen-curtain {
-  margin: 87px 45px;
+  margin: 45px 45px;
 }
 
 html[oobe=new] #update-screen-main {
-  margin: 85px 45px;
+  margin: 45px 45px;
   min-height: 114px;
   text-align: center;
 }
 
 #update #update-checking-ellipsis {
   width: 16px;
 }
 
 html[dir=ltr] #update #update-checking-ellipsis {
   text-align: left;
 }
 
 html[dir=rtl] #update #update-checking-ellipsis {
   text-align: right;
 }
 
 html[oobe=old] #update #update-cancel-hint {
   color: rgb(170, 0, 0);
   left: 50%;
   margin: 1em -16em;
   position: absolute;
 }
 
 html[oobe=new] #update #update-cancel-hint {
+  -webkit-margin-before: 15px;
+  -webkit-margin-start: 45px;
   color: rgb(170, 0, 0);
   position: absolute;
-  top: 80px;
-}
-
-html[oobe=new][dir=ltr] #update #update-cancel-hint {
-  left: 137px;
-}
-
-html[oobe=new][dir=rtl] #update #update-cancel-hint {
-  right: 137px;
 }
 
 #update #update-upper-label {
   -webkit-margin-after: 4px;
 }
 
 #update #checking-updates-label {
   -webkit-margin-after: 34px;
 }
 
@@ skipping 412 matching lines @@
   width: 100%;
 }
 
 .background-initial {
   opacity: 0;
 }
 
 .background-final {
   opacity: 1;
 }