Home | History | Annotate | Download | only in login 
      1 /* Copyright 2013 The Chromium Authors. All rights reserved.
      2  * Use of this source code is governed by a BSD-style license that can be
      3  * found in the LICENSE file.
      4  */
      5 
      6 #outer-container {
      7   -webkit-box-align: center;
      8   -webkit-box-pack: center;
      9   -webkit-perspective: 600px;
     10   bottom: 48px;  /* Leave space for the header bar */
     11   display: -webkit-box;
     12   left: 0;
     13   position: absolute;
     14   right: 0;
     15   top: 0;
     16 }
     17 
     18 #inner-container {
     19   border-radius: 2px;
     20   padding: 0;
     21   position: relative;
     22 }
     23 
     24 #inner-container.animation {
     25   overflow: hidden;
     26 }
     27 
     28 /* Screens that have a border and background. */
     29 #oobe.autolaunch #inner-container,
     30 #oobe.connect #inner-container,
     31 #oobe.enrollment #inner-container,
     32 #oobe.eula #inner-container,
     33 #oobe.gaia-signin #inner-container,
     34 #oobe.kiosk-enable #inner-container,
     35 #oobe.oauth-enrollment #inner-container,
     36 #oobe.reset #inner-container,
     37 #oobe.update #inner-container,
     38 #oobe.user-image #inner-container,
     39 #oobe.managed-user-creation-dialog #inner-container,
     40 #oobe.managed-user-creation #inner-container,
     41 #oobe.password-changed #inner-container,
     42 #oobe.terms-of-service #inner-container,
     43 #oobe.wrong-hwid #inner-container {
     44   background: -webkit-linear-gradient(rgba(255,255,255,0.99),
     45                                       rgba(255,255,255,0.95));
     46   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
     47               0 4px 23px 5px rgba(0, 0, 0, 0.2),
     48               0 2px 6px rgba(0, 0, 0, 0.15);
     49 }
     50 
     51 #oobe.error-message #inner-container,
     52 #oobe.tpm-error-message #inner-container {
     53   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
     54               0 4px 23px 5px rgba(0, 0, 0, 0.2),
     55               0 2px 6px rgba(0, 0, 0, 0.15);
     56 
     57 }
     58 
     59 /* Only play this animation when 'down' class is removed. */
     60 .oobe-display #inner-container:not(.down) {
     61   -webkit-transition: -webkit-transform 200ms ease-in-out;
     62 }
     63 
     64 .oobe-display #inner-container.down {
     65   -webkit-transform: translateY(50px) rotateX(-2.5deg);
     66 }
     67 
     68 #step-logo {
     69   -webkit-margin-start: 17px;
     70   display: -webkit-box;
     71   position: absolute;
     72   top: 15px;
     73 }
     74 
     75 #progress-dots {
     76   -webkit-box-pack: center;
     77   -webkit-margin-before: 15px;
     78   display: -webkit-box;
     79 }
     80 
     81 /* Hidden for the duration of initial transition. */
     82 .oobe-display #progress-dots.down {
     83   visibility: hidden;
     84 }
     85 
     86 .progdot {
     87   -webkit-margin-end: 12px;
     88   background: white;
     89   height: 10px;
     90   opacity: 0.4;
     91   width: 10px;
     92 }
     93 
     94 .progdot-active {
     95   opacity: 0.5;
     96 }
     97 
     98 #account-picker-dot,
     99 #autolaunch-dot,
    100 #enrollment-dot,
    101 #kiosk-enable-dot,
    102 #oauth-enrollment-dot,
    103 #reset-dot,
    104 #error-message-dot,
    105 #tpm-error-message-dot,
    106 #password-changed-dot,
    107 #managed-user-creation-dot,
    108 #managed-user-creation-dialog-dot,
    109 #terms-of-service-dot,
    110 #wrong-hwid-dot {
    111   display: none;
    112 }
    113 
    114 #oobe.connect #connect-dot,
    115 #oobe.enrollment #gaia-signin-dot,
    116 #oobe.enrollment #signin-dot,
    117 #oobe.eula #eula-dot,
    118 #oobe.gaia-signin #gaia-signin-dot,
    119 #oobe.oauth-enrollment #gaia-signin-dot,
    120 #oobe.oauth-enrollment #signin-dot,
    121 #oobe.signin #signin-dot,
    122 #oobe.update #update-dot,
    123 #oobe.user-image #user-image-dot {
    124   opacity: 1;
    125 }
    126 
    127 body.login-display #inner-container {
    128   height: 262px;
    129   padding: 0;
    130   width: 1100px;
    131 }
    132 
    133 body.login-display #progress-dots {
    134   display: none;
    135 }
    136 
    137 html[build=chrome] #header-sections {
    138   -webkit-margin-start: -48px;
    139 }
    140 
    141 html[build=chromium] #header-sections {
    142   -webkit-margin-start: 5px;
    143 }
    144 
    145 .header-section {
    146   color: rgb(119, 120, 123);  /* Should matching text color of the logo. */
    147   display: none;
    148   font-size: 23px;
    149   line-height: 31px;
    150   text-transform: lowercase;
    151   width: 20em;
    152 }
    153 
    154 .header-section::before {
    155   /* Divider in header between product name and title,
    156    * like "[Product name] > [step header]". */
    157   content: '\00A0\203A\00A0\00A0';
    158 }
    159 
    160