| /* Copyright 2014 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| * |
| * This is the stylesheet used by the Out of the box experience (OOBE) flow, |
| * sign in and lock screens. |
| */ |
| |
| html, |
| body { |
| height: 100%; |
| width: 100%; |
| } |
| |
| body { |
| background-color: transparent; |
| cursor: default; |
| font-size: 14px; |
| margin: 0; |
| overflow: hidden; |
| padding: 0; |
| position: fixed; |
| top: 0; |
| } |
| |
| body.solid { |
| background-color: white; |
| } |
| |
| button { |
| font-family: inherit; |
| outline: none; |
| } |
| |
| /* Follow same focus coloring as in widgets.css */ |
| /* Do not apply this style to restricted button state. */ |
| button.custom-appearance:not(.button-restricted):not(.button-fancy):not( |
| [is="gaia-icon-button"]) { |
| border: 2px solid transparent; |
| /* Don't grey out disabled buttons. */ |
| color: buttontext !important; |
| transition: border-color 200ms; |
| } |
| |
| /* ':focus' used three times to increase specificity. */ |
| button.custom-appearance:focus:focus:focus { |
| border-color: rgba(66, 133, 244, 0.6); /* #4285f4 */ |
| } |
| |
| button:not(.custom-appearance) { |
| min-width: 72px !important; |
| } |
| |
| button.button-fancy { |
| min-width: 72px !important; |
| } |
| |
| button.button-blue { |
| background-image: linear-gradient(rgb(93, 154, 255), |
| rgb(93, 154, 255) 38%, |
| rgb(88, 145, 240)); |
| border: 1px solid rgba(45, 102, 195, 1); |
| border-radius: 2px; |
| box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px |
| rgba(255, 255, 255, 0.4); |
| color: #fff; |
| font-size: 14px; |
| margin: 0 1px 0 0; |
| min-height: 2em; |
| min-width: 4em; |
| text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); |
| } |
| |
| |
| button.button-blue:hover { |
| background-image: linear-gradient(rgb(101, 158, 253), |
| rgb(101, 158, 253) 38%, |
| rgb(96, 151, 241)); |
| box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px |
| rgba(255, 255, 255, 0.4); |
| } |
| |
| button.button-blue:active { |
| background-image: linear-gradient(rgb(96, 149, 237), |
| rgb(96, 149, 237) 38%, |
| rgb(96, 149, 237)); |
| border: 1px solid rgba(38, 84, 160, 1); |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); |
| } |
| |
| button.button-red { |
| background-image: linear-gradient(rgb(221, 75, 57), |
| rgb(221, 75, 57) 38%, |
| rgb(197, 66, 49)); |
| border: 1px solid rgba(167, 57, 44, 1); |
| border-radius: 2px; |
| box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px |
| rgba(255, 255, 255, 0.4); |
| color: #fff; |
| margin: 0 1px 0 0; |
| min-height: 2em; |
| min-width: 4em; |
| text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); |
| } |
| |
| button.button-red:hover { |
| background-image: linear-gradient(rgb(231, 78, 59), |
| rgb(231, 78, 59) 38%, |
| rgb(209, 70, 52)); |
| box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px |
| rgba(255, 255, 255, 0.4); |
| } |
| |
| button.button-red:active { |
| box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); |
| } |
| |
| .label, |
| .flexible-label { |
| display: block; |
| margin: 5px 5px 5px 0; |
| padding: 5px 5px 5px 0; |
| } |
| |
| .label { |
| width: 170px; |
| } |
| |
| .flexible-label { |
| max-width: 250px; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| #bubble { |
| transition: 250ms opacity; |
| } |
| |
| span.bold { |
| font-weight: bold; |
| } |
| |
| #version-labels { |
| color: #fff; |
| font-size: 11px; |
| margin: 10px; |
| position: relative; |
| text-align: end; |
| text-shadow: |
| 0 0 4px rgba(0,0,0,.6), |
| 0 1px 2px rgba(0,0,0,.8), |
| 0 -1px 2px rgba(0,0,0,1); |
| transition: all 500ms linear; |
| z-index: 1; |
| } |
| |
| #background { |
| background-size: 100% 100%; |
| height: 100%; |
| left: 0; |
| position: absolute; |
| top: 0; |
| transition: 700ms opacity; |
| width: 100%; |
| } |
| |
| .background-initial { |
| opacity: 0; |
| } |
| |
| .throbber { |
| -webkit-margin-end: 0.5em; |
| margin-top: 1px; |
| } |