ui/login/oobe.css

   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):not(
  38     [is="gaia-icon-button"]) {
  39   -webkit-transition: border-color 200ms;
  40   border: 1px solid transparent;
  41   /* Don't grey out disabled buttons. */
  42   color: buttontext !important;
  43 }
  44
  45 /* ':focus' used three times to increase specificity. */
  46 button.custom-appearance:focus:focus:focus {
  47   border-color: rgb(77, 144, 254);
  48 }
  49
  50 button:not(.custom-appearance) {
  51   min-width: 72px !important;
  52 }
  53
  54 button.button-fancy {
  55   min-width: 72px !important;
  56 }
  57
  58 button.button-blue {
  59   background-image: linear-gradient(rgb(93, 154, 255),
  60                                     rgb(93, 154, 255) 38%,
  61                                     rgb(88, 145, 240));
  62   border: 1px solid rgba(45, 102, 195, 1);
  63   border-radius: 2px;
  64   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px
  65               rgba(255, 255, 255, 0.4);
  66   color: #fff;
  67   font-size: 14px;
  68   margin: 0 1px 0 0;
  69   min-height: 2em;
  70   min-width: 4em;
  71   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  72 }
  73
  74
  75 button.button-blue:hover {
  76   background-image: linear-gradient(rgb(101, 158, 253),
  77                                     rgb(101, 158, 253) 38%,
  78                                     rgb(96, 151, 241));
  79   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px
  80               rgba(255, 255, 255, 0.4);
  81 }
  82
  83 button.button-blue:active {
  84   background-image: linear-gradient(rgb(96, 149, 237),
  85                                     rgb(96, 149, 237) 38%,
  86                                     rgb(96, 149, 237));
  87   border: 1px solid rgba(38, 84, 160, 1);
  88   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  89 }
  90
  91 button.button-red {
  92   background-image: linear-gradient(rgb(221, 75, 57),
  93                                     rgb(221, 75, 57) 38%,
  94                                     rgb(197, 66, 49));
  95   border: 1px solid rgba(167, 57, 44, 1);
  96   border-radius: 2px;
  97   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px
  98       rgba(255, 255, 255, 0.4);
  99   color: #fff;
 100   margin: 0 1px 0 0;
 101   min-height: 2em;
 102   min-width: 4em;
 103   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
 104 }
 105
 106 button.button-red:hover {
 107   background-image: linear-gradient(rgb(231, 78, 59),
 108                                     rgb(231, 78, 59) 38%,
 109                                     rgb(209, 70, 52));
 110   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px
 111       rgba(255, 255, 255, 0.4);
 112 }
 113
 114 button.button-red:active {
 115   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 116 }
 117
 118 .label,
 119 .flexible-label {
 120   display: block;
 121   margin: 5px 5px 5px 0;
 122   padding: 5px 5px 5px 0;
 123 }
 124
 125 .label {
 126   width: 170px;
 127 }
 128
 129 .flexible-label {
 130   max-width: 250px;
 131 }
 132
 133 [hidden] {
 134   display: none !important;
 135 }
 136
 137 #bubble {
 138   -webkit-transition: 250ms opacity;
 139 }
 140
 141 span.bold {
 142   font-weight: bold;
 143 }
 144
 145 #version-labels {
 146   -webkit-transition: all 500ms linear;
 147   color: #fff;
 148   font-size: 11px;
 149   margin: 10px;
 150   text-align: end;
 151   text-shadow:
 152       0 0 4px rgba(0,0,0,.6),
 153       0 1px 2px rgba(0,0,0,.8),
 154       0 -1px 2px rgba(0,0,0,1);
 155 }
 156
 157 #background {
 158   -webkit-transition: 700ms opacity;
 159   background-size: 100% 100%;
 160   height: 100%;
 161   left: 0;
 162   position: absolute;
 163   top: 0;
 164   width: 100%;
 165 }
 166
 167 .background-initial {
 168   opacity: 0;
 169 }
 170
 171 .throbber {
 172   -webkit-margin-end: 0.5em;
 173   margin-top: 1px;
 174 }