blob: 00667482215f5ac9f9d080d7daa21cf126f677c3 [file] [log] [blame]
/* 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;
}