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  * This is the stylesheet used by the Out of the box experience (OOBE) flow,
      6  * sign in and lock screens.
      7  */
      8 
      9 html,
     10 body {
     11   height: 100%;
     12   width: 100%;
     13 }
     14 
     15 body {
     16   background-color: transparent;
     17   cursor: default;
     18   font-size: 14px;
     19   margin: 0;
     20   overflow: hidden;
     21   padding: 0;
     22   position: fixed;
     23   top: 0;
     24 }
     25 
     26 body.solid {
     27   background-color: white;
     28 }
     29 
     30 button {
     31   font-family: inherit;
     32   outline: none;
     33 }
     34 
     35 /* Follow same focus coloring as in widgets.css */
     36 /* Do not apply this style to restricted button state. */
     37 button.custom-appearance:not(.button-restricted):not(.button-fancy) {
     38   -webkit-transition: border-color 200ms;
     39   border: 1px solid transparent;
     40   /* Don't grey out disabled buttons. */
     41   color: buttontext !important;
     42 }
     43 
     44 /* ':focus' used twice to increase specificity. */
     45 button.custom-appearance:focus:focus {
     46   border-color: rgb(77, 144, 254);
     47 }
     48 
     49 button:not(.custom-appearance) {
     50   min-width: 72px !important;
     51 }
     52 
     53 button.button-fancy {
     54   min-width: 72px !important;
     55 }
     56 
     57 button.button-blue {
     58   background-image: linear-gradient(rgb(93, 154, 255),
     59                                     rgb(93, 154, 255) 38%,
     60                                     rgb(88, 145, 240));
     61   border: 1px solid rgba(45, 102, 195, 1);
     62   border-radius: 2px;
     63   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px
     64               rgba(255, 255, 255, 0.4);
     65   color: #fff;
     66   font-size: 14px;
     67   margin: 0 1px 0 0;
     68   min-height: 2em;
     69   min-width: 4em;
     70   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
     71 }
     72 
     73 
     74 button.button-blue:hover {
     75   background-image: linear-gradient(rgb(101, 158, 253),
     76                                     rgb(101, 158, 253) 38%,
     77                                     rgb(96, 151, 241));
     78   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px
     79               rgba(255, 255, 255, 0.4);
     80 }
     81 
     82 button.button-blue:active {
     83   background-image: linear-gradient(rgb(96, 149, 237),
     84                                     rgb(96, 149, 237) 38%,
     85                                     rgb(96, 149, 237));
     86   border: 1px solid rgba(38, 84, 160, 1);
     87   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
     88 }
     89 
     90 button.button-red {
     91   background-image: linear-gradient(rgb(221, 75, 57),
     92                                     rgb(221, 75, 57) 38%,
     93                                     rgb(197, 66, 49));
     94   border: 1px solid rgba(167, 57, 44, 1);
     95   border-radius: 2px;
     96   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px
     97       rgba(255, 255, 255, 0.4);
     98   color: #fff;
     99   margin: 0 1px 0 0;
    100   min-height: 2em;
    101   min-width: 4em;
    102   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    103 }
    104 
    105 button.button-red:hover {
    106   background-image: linear-gradient(rgb(231, 78, 59),
    107                                     rgb(231, 78, 59) 38%,
    108                                     rgb(209, 70, 52));
    109   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px
    110       rgba(255, 255, 255, 0.4);
    111 }
    112 
    113 button.button-red:active {
    114   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    115 }
    116 
    117 .label,
    118 .flexible-label {
    119   display: block;
    120   margin: 5px 5px 5px 0;
    121   padding: 5px 5px 5px 0;
    122 }
    123 
    124 .label {
    125   width: 170px;
    126 }
    127 
    128 .flexible-label {
    129   max-width: 250px;
    130 }
    131 
    132 #installation-settings-popup {
    133   background: white;
    134   border: 1px solid rgb(188, 193, 208);
    135   border-radius: 2px;
    136   box-shadow: 0 5px 80px #505050;
    137   min-height: 250px;
    138   position: relative;
    139   width: 460px;
    140   z-index: 10;
    141 }
    142 
    143 #installation-settings-popup h1 {
    144   -webkit-padding-end: 24px;
    145   -webkit-user-select: none;
    146   background: linear-gradient(white, #F8F8F8);
    147   color: rgb(83, 99, 125);
    148   font-size: 105%;
    149   font-weight: bold;
    150   margin: 0;
    151   padding: 10px 15px 8px 15px;
    152   text-shadow: white 0 1px 2px;
    153 }
    154 
    155 .popup-content-area {
    156   padding: 0 20px 60px 20px;
    157 }
    158 
    159 #installation-settings-popup button {
    160   bottom: 20px;
    161   position: absolute;
    162   right: 20px;
    163 }
    164 
    165 #tpm-busy {
    166   text-align: center;
    167 }
    168 
    169 #tpm-password {
    170   font-weight: bold;
    171   text-align: center;
    172 }
    173 
    174 [hidden] {
    175   display: none !important;
    176 }
    177 
    178 #popup-overlay {
    179   -webkit-box-align: center;
    180   -webkit-box-pack: center;
    181   -webkit-transition: 250ms opacity;
    182   background: rgba(255, 255, 255, .75);
    183   bottom: 0;
    184   display: -webkit-box;
    185   left: 0;
    186   padding: 20px;
    187   position: fixed;
    188   right: 0;
    189   top: 0;
    190   z-index: 5;
    191 }
    192 
    193 #bubble {
    194   -webkit-transition: 250ms opacity;
    195 }
    196 
    197 span.bold {
    198   font-weight: bold;
    199 }
    200 
    201 #version-labels {
    202   -webkit-transition: all 500ms linear;
    203   color: #fff;
    204   font-size: 11px;
    205   margin: 10px;
    206   text-align: end;
    207   text-shadow:
    208       0 0 4px rgba(0,0,0,.6),
    209       0 1px 2px rgba(0,0,0,.8),
    210       0 -1px 2px rgba(0,0,0,1);
    211 }
    212 
    213 #background {
    214   -webkit-transition: 700ms opacity;
    215   background-size: 100% 100%;
    216   height: 100%;
    217   left: 0;
    218   position: absolute;
    219   top: 0;
    220   width: 100%;
    221 }
    222 
    223 .background-initial {
    224   opacity: 0;
    225 }
    226 
    227 .throbber {
    228   -webkit-animation: throbber-animation 1s steps(36) infinite;
    229   -webkit-margin-before: 2px;
    230   -webkit-margin-end: 4px;
    231   background-image: url(chrome://theme/IDR_CROS_DEFAULT_THROBBER);
    232   display: inline-block;
    233   height: 16px;
    234   width: 16px;
    235 }
    236 
    237 @-webkit-keyframes throbber-animation {
    238   from {
    239     background-position: 0;
    240   }
    241   to {
    242     background-position: -576px;
    243   }
    244 }
    245 
    246