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  * This contains common styling for all the OOBE screens.
      6  */
      7 
      8 .step {
      9   box-sizing: border-box;
     10   position: absolute;
     11 }
     12 
     13 .step.animated {
     14   -webkit-transition: -webkit-transform 200ms ease-in-out,
     15                       opacity 200ms ease-in-out,
     16                       visibility 200ms ease-in-out;
     17 }
     18 
     19 .step.hidden {
     20   visibility: hidden;
     21 }
     22 
     23 .faded,
     24 .left,
     25 .right {
     26   opacity: 0;
     27 }
     28 
     29 .step.right {
     30   -webkit-transform: translateX(50px);
     31 }
     32 
     33 .step.left {
     34   -webkit-transform: translateX(-50px)
     35 }
     36 
     37 .step.fullscreen {
     38   height: 100%;
     39   left: 0;
     40   right: 0;
     41   top: 0;
     42   width: 100%;
     43 }
     44 
     45 .step-controls {
     46   -webkit-box-pack: end;
     47   -webkit-padding-end: 34px;  /* Double the padding of .step */
     48   bottom: 21px;
     49   box-sizing: border-box;
     50   display: -webkit-box;
     51   height: 28px;
     52   position: absolute;
     53   width: 100%;
     54 }
     55 
     56 .animation .step-controls button {
     57   /* Don't grey out disabled buttons during animation. */
     58   color: buttontext !important;
     59 }
     60 
     61 .step.loading .step-contents,
     62 .step.loading .step-controls,
     63 .step.loading .step-extra-controls {
     64   visibility: hidden;
     65 }
     66 
     67 .step:not(.loading) #user-images-loading {
     68   visibility: hidden;
     69 }
     70 
     71 .step:not(.loading) #eula-busy {
     72   visibility: hidden;
     73 }
     74 
     75 /* Center spinner wrapper vertically and horizontally.
     76  * Vertical centering uses top: 50% and negative margin
     77  * instead of top: 0; bottom: 0 due to http://crbug.com/155320.
     78  */
     79 .step-loading {
     80   -webkit-align-items: center;
     81   -webkit-justify-content: center;
     82   display: -webkit-flex;
     83   left: 0;
     84   margin-top: -8px;
     85   position: absolute;
     86   right: 0;
     87   top: 50%;
     88 }
     89 
     90 /* Fixes perfomance problem caused by http://crbug.com/229405 . */
     91 .step.hidden .throbber,
     92 .step.hidden .spinner,
     93 .step.hidden .inline-spinner {
     94   display: none;
     95 }
     96 
     97 #security-info a,
     98 #eula a,
     99 .step-extra-controls a {
    100   color: #8c8c8c;
    101   font-size: 12px;
    102   text-decoration: none;
    103 }
    104 
    105 .step-extra-controls {
    106   bottom: 26px;
    107   left: 49px;
    108   position: absolute;
    109 }
    110 
    111 /* EULA screen extra controls have 2 elements
    112    so they require different alignment. */
    113 #eula-extra-controls {
    114   bottom: 17px;
    115 }
    116 
    117 #security-info a:focus,
    118 #eula a:focus,
    119 .step-extra-controls a:focus {
    120   -webkit-transition: outline-color 200ms;
    121   /* Note: May use 1px solid here. */
    122   outline-color: rgb(77, 144, 254);
    123 }
    124 
    125 .step-extra-controls > *:not(:first-child) {
    126   -webkit-margin-before: 7px;
    127 }
    128 
    129 html[dir=rtl] .step-extra-controls {
    130   left: auto;
    131   right: 49px;
    132 }
    133 
    134 #oobe.autolaunch #autolaunch-confirm-button,
    135 #oobe.autolaunch #autolaunch-cancel-button,
    136 #oobe.connect #continue-button,
    137 #oobe.eula #accept-button,
    138 #oobe.eula #back-button,
    139 #oobe.kiosk-enable #kiosk-cancel-button,
    140 #oobe.kiosk-enable #kiosk-enable-button,
    141 #oobe.oauth-enrollment #oauth-enroll-cancel-button,
    142 #oobe.oauth-enrollment #oauth-enroll-done-button,
    143 #oobe.oauth-enrollment #oauth-enroll-explain-button,
    144 #oobe.oauth-enrollment #oauth-enroll-try-again-button,
    145 #oobe.reset #reset-button,
    146 #oobe.reset #reset-cancel-button,
    147 #oobe.signin #signin-button,
    148 #oobe.user-image #ok-button {
    149   display: block;
    150 }
    151 
    152 #autolaunch-confirm-button,
    153 #back-button,
    154 #kiosk-enable-button,
    155 #reset-button,
    156 #password-changed-back-button,
    157 #tos-back-button {
    158   -webkit-margin-end: 8px;
    159 }
    160 
    161 .menu-area {
    162   margin: 5px;
    163 }
    164 
    165 .menu-control {
    166   color: #444;
    167   font-family: inherit;
    168   line-height: 20px;
    169   position: relative;
    170   width: 250px;
    171 }
    172 
    173 html[highlight=strong] #security-info a:focus,
    174 html[highlight=strong] #eula a:focus,
    175 html[highlight=strong] .step-extra-controls a:focus,
    176 html[highlight=strong] .menu-control:focus,
    177 html[highlight=strong] input[type='button']:focus,
    178 html[highlight=strong] button:focus {
    179   box-shadow: 0 0 23px rgb(77, 144, 254) !important;
    180 }
    181 
    182