Home | History | Annotate | Download | only in login 
      1 /* Copyright 2014 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: 1px; /* Workaround, see http://crbug.com/360567 */
     10   bottom: 51px;  /* Leave space for the header bar */
     11   display: -webkit-box;
     12   left: 0;
     13   min-height: 717px; /* This enables scrolling. Min resolution: 1024x768 */
     14   position: absolute;
     15   right: 0;
     16   top: 0;
     17 }
     18 
     19 .oobe-display #outer-container.down {
     20   -webkit-perspective: 600px;
     21 }
     22 
     23 #scroll-container {
     24   bottom: 0;        /* Allows content overlap with control bar. */
     25   left: 0;
     26   overflow-x: hidden;
     27   overflow-y: auto;
     28   position: absolute;
     29   right: 0;
     30   top: 0;
     31 }
     32 
     33 #scroll-container::-webkit-scrollbar {
     34   display: none;
     35 }
     36 
     37 #inner-container {
     38   border-radius: 2px;
     39   padding: 0;
     40   position: relative;
     41 }
     42 
     43 #inner-container.animation {
     44   overflow: hidden;
     45 }
     46 
     47 #inner-container.disabled {
     48   opacity: 0.4;
     49   pointer-events: none;
     50 }
     51 
     52 /* Screens that have a border and background. */
     53 #oobe.autolaunch #inner-container,
     54 #oobe.connect #inner-container,
     55 #oobe.enrollment #inner-container,
     56 #oobe.eula #inner-container,
     57 #oobe.gaia-signin #inner-container,
     58 #oobe.kiosk-enable #inner-container,
     59 #oobe.oauth-enrollment #inner-container,
     60 #oobe.reset #inner-container,
     61 #oobe.hid-detection #inner-container,
     62 #oobe.update #inner-container,
     63 #oobe.user-image #inner-container,
     64 #oobe.managed-user-creation-dialog #inner-container,
     65 #oobe.managed-user-creation #inner-container,
     66 #oobe.password-changed #inner-container,
     67 #oobe.terms-of-service #inner-container,
     68 #oobe.auto-enrollment-check #inner-container,
     69 #oobe.wrong-hwid #inner-container,
     70 #oobe.confirm-password #inner-container,
     71 #oobe.fatal-error #inner-container {
     72   background: white;
     73   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
     74               0 4px 23px 5px rgba(0, 0, 0, 0.2),
     75               0 2px 6px rgba(0, 0, 0, 0.15);
     76 }
     77 
     78 #oobe.error-message #inner-container,
     79 #oobe.tpm-error-message #inner-container {
     80   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
     81               0 4px 23px 5px rgba(0, 0, 0, 0.2),
     82               0 2px 6px rgba(0, 0, 0, 0.15);
     83 
     84 }
     85 
     86 #oobe.account-picker.flying-pods #inner-container {
     87   -webkit-transition: width 180ms ease,
     88                       height 180ms ease;
     89 }
     90 
     91 /* Only play this animation when 'down' class is removed. */
     92 .oobe-display #inner-container:not(.down) {
     93   -webkit-transition: -webkit-transform 200ms ease-in-out;
     94 }
     95 
     96 .oobe-display #inner-container.down {
     97   -webkit-transform: translateY(50px) rotateX(-2.5deg);
     98 }
     99 
    100 #step-logo {
    101   -webkit-margin-start: 17px;
    102   display: -webkit-box;
    103   position: absolute;
    104   top: 15px;
    105 }
    106 
    107 #progress-dots {
    108   -webkit-box-pack: center;
    109   -webkit-margin-before: 15px;
    110   -webkit-transition: opacity 200ms ease-in-out,
    111                       visibility 200ms ease-in-out;
    112   display: -webkit-box;
    113 }
    114 
    115 /* Hidden for the duration of initial transition. */
    116 .oobe-display #progress-dots.down {
    117   visibility: hidden;
    118 }
    119 
    120 .progdot {
    121   -webkit-margin-end: 12px;
    122   background: white;
    123   height: 10px;
    124   opacity: 0.4;
    125   width: 10px;
    126 }
    127 
    128 .progdot-active {
    129   opacity: 0.5;
    130 }
    131 
    132 #account-picker-dot,
    133 #app-launch-splash-dot,
    134 #autolaunch-dot,
    135 #enrollment-dot,
    136 #kiosk-enable-dot,
    137 #oauth-enrollment-dot,
    138 #reset-dot,
    139 #error-message-dot,
    140 #tpm-error-message-dot,
    141 #password-changed-dot,
    142 #managed-user-creation-dot,
    143 #managed-user-creation-dialog-dot,
    144 #terms-of-service-dot,
    145 #wrong-hwid-dot,
    146 #confirm-password-dot,
    147 #fatal-error-dot,
    148 #hid-detection-dot {
    149   display: none;
    150 }
    151 
    152 #oobe.connect #connect-dot,
    153 #oobe.enrollment #gaia-signin-dot,
    154 #oobe.enrollment #signin-dot,
    155 #oobe.eula #eula-dot,
    156 #oobe.gaia-signin #gaia-signin-dot,
    157 #oobe.oauth-enrollment #gaia-signin-dot,
    158 #oobe.oauth-enrollment #signin-dot,
    159 #oobe.signin #signin-dot,
    160 #oobe.update #update-dot,
    161 #oobe.user-image #user-image-dot {
    162   opacity: 1;
    163 }
    164 
    165 #oobe.reset #progress-dots {
    166   visibility: hidden;
    167 }
    168 
    169 body:not(.oobe-display) #inner-container {
    170   height: 262px;
    171   padding: 0;
    172   width: 1100px;
    173 }
    174 
    175 body:not(.oobe-display) #progress-dots {
    176   display: none;
    177 }
    178 
    179 #outer-container.fullscreen,
    180 #outer-container.fullscreen #oobe,
    181 #outer-container.fullscreen #oobe #inner-container {
    182   height: 100%;
    183   width: 100%;
    184 }
    185 
    186 html[build=chrome] #header-sections {
    187   -webkit-margin-start: -48px;
    188   margin-top: -1px;
    189 }
    190 
    191 html[build=chromium] #header-sections {
    192   -webkit-margin-start: 5px;
    193   margin-top: -1px;
    194 }
    195 
    196 .header-section {
    197   color: rgb(119, 120, 123);  /* Should matching text color of the logo. */
    198   display: none;
    199   font-size: 23px;
    200   line-height: 31px;
    201   text-transform: lowercase;
    202   width: 23em;
    203 }
    204 
    205 .header-section::before {
    206   /* Divider in header between product name and title,
    207    * like "[Product name] > [step header]". */
    208   content: '\00A0\203A\00A0\00A0';
    209 }
    210