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: 51px;  /* 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 #oobe.confirm-password #inner-container,
     45 #oobe.message-box #inner-container {
     46   background: -webkit-linear-gradient(rgba(255,255,255,0.99),
     47                                       rgba(255,255,255,0.95));
     48   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
     49               0 4px 23px 5px rgba(0, 0, 0, 0.2),
     50               0 2px 6px rgba(0, 0, 0, 0.15);
     51 }
     52 
     53 #oobe.error-message #inner-container,
     54 #oobe.tpm-error-message #inner-container {
     55   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
     56               0 4px 23px 5px rgba(0, 0, 0, 0.2),
     57               0 2px 6px rgba(0, 0, 0, 0.15);
     58 
     59 }
     60 
     61 #oobe.account-picker.flying-pods #inner-container {
     62   -webkit-transition: width 180ms ease,
     63                       height 180ms ease;
     64 }
     65 
     66 /* Only play this animation when 'down' class is removed. */
     67 .oobe-display #inner-container:not(.down) {
     68   -webkit-transition: -webkit-transform 200ms ease-in-out;
     69 }
     70 
     71 .oobe-display #inner-container.down {
     72   -webkit-transform: translateY(50px) rotateX(-2.5deg);
     73 }
     74 
     75 #step-logo {
     76   -webkit-margin-start: 17px;
     77   display: -webkit-box;
     78   position: absolute;
     79   top: 15px;
     80 }
     81 
     82 #progress-dots {
     83   -webkit-box-pack: center;
     84   -webkit-margin-before: 15px;
     85   display: -webkit-box;
     86 }
     87 
     88 /* Hidden for the duration of initial transition. */
     89 .oobe-display #progress-dots.down {
     90   visibility: hidden;
     91 }
     92 
     93 .progdot {
     94   -webkit-margin-end: 12px;
     95   background: white;
     96   height: 10px;
     97   opacity: 0.4;
     98   width: 10px;
     99 }
    100 
    101 .progdot-active {
    102   opacity: 0.5;
    103 }
    104 
    105 #account-picker-dot,
    106 #app-launch-splash-dot,
    107 #autolaunch-dot,
    108 #enrollment-dot,
    109 #kiosk-enable-dot,
    110 #oauth-enrollment-dot,
    111 #reset-dot,
    112 #error-message-dot,
    113 #tpm-error-message-dot,
    114 #password-changed-dot,
    115 #managed-user-creation-dot,
    116 #managed-user-creation-dialog-dot,
    117 #terms-of-service-dot,
    118 #wrong-hwid-dot,
    119 #confirm-password-dot,
    120 #message-box-dot {
    121   display: none;
    122 }
    123 
    124 #oobe.connect #connect-dot,
    125 #oobe.enrollment #gaia-signin-dot,
    126 #oobe.enrollment #signin-dot,
    127 #oobe.eula #eula-dot,
    128 #oobe.gaia-signin #gaia-signin-dot,
    129 #oobe.oauth-enrollment #gaia-signin-dot,
    130 #oobe.oauth-enrollment #signin-dot,
    131 #oobe.signin #signin-dot,
    132 #oobe.update #update-dot,
    133 #oobe.user-image #user-image-dot {
    134   opacity: 1;
    135 }
    136 
    137 body:not(.oobe-display) #inner-container {
    138   height: 262px;
    139   padding: 0;
    140   width: 1100px;
    141 }
    142 
    143 body:not(.oobe-display) #progress-dots {
    144   display: none;
    145 }
    146 
    147 #outer-container.fullscreen,
    148 #outer-container.fullscreen #oobe,
    149 #outer-container.fullscreen #oobe #inner-container {
    150   height: 100%;
    151   width: 100%;
    152 }
    153 
    154 html[build=chrome] #header-sections {
    155   -webkit-margin-start: -48px;
    156   margin-top: -1px;
    157 }
    158 
    159 html[build=chromium] #header-sections {
    160   -webkit-margin-start: 5px;
    161   margin-top: -1px;
    162 }
    163 
    164 .header-section {
    165   color: rgb(119, 120, 123);  /* Should matching text color of the logo. */
    166   display: none;
    167   font-size: 23px;
    168   line-height: 31px;
    169   text-transform: lowercase;
    170   width: 23em;
    171 }
    172 
    173 .header-section::before {
    174   /* Divider in header between product name and title,
    175    * like "[Product name] > [step header]". */
    176   content: '\00A0\203A\00A0\00A0';
    177 }
    178 
    179