From b8f886cddd9b2128c81dd64602a6ca1af9e0bac2 Mon Sep 17 00:00:00 2001 From: "nkostylev@chromium.org" Date: Fri, 25 Jul 2014 07:42:48 +0000 Subject: Move common account picker/user pod js/css/html out of src/chrome. This CL only moves account picker related resources that are used on Chrome OS (login UI) and Chrome Win/Mac/Linux (user_manager UI). The rest of Chrome OS out-of-box/login WebUI resources will be moved later as well. BUG=387608,370175 R=dzhioev@chromium.org, sky@chromium.org Review URL: https://codereview.chromium.org/402403005 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@285523 0039d316-1c4b-4281-b951-d872f2087c98 --- ui/login/oobe.css | 245 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 245 insertions(+) create mode 100644 ui/login/oobe.css (limited to 'ui/login/oobe.css') diff --git a/ui/login/oobe.css b/ui/login/oobe.css new file mode 100644 index 0000000..8dae75e --- /dev/null +++ b/ui/login/oobe.css @@ -0,0 +1,245 @@ +/* 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) { + -webkit-transition: border-color 200ms; + border: 1px solid transparent; + /* Don't grey out disabled buttons. */ + color: buttontext !important; +} + +/* ':focus' used twice to increase specificity. */ +button.custom-appearance:focus:focus { + border-color: rgb(77, 144, 254); +} + +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; +} + +#installation-settings-popup { + background: white; + border: 1px solid rgb(188, 193, 208); + border-radius: 2px; + box-shadow: 0 5px 80px #505050; + min-height: 250px; + position: relative; + width: 460px; + z-index: 10; +} + +#installation-settings-popup h1 { + -webkit-padding-end: 24px; + -webkit-user-select: none; + background: linear-gradient(white, #F8F8F8); + color: rgb(83, 99, 125); + font-size: 105%; + font-weight: bold; + margin: 0; + padding: 10px 15px 8px 15px; + text-shadow: white 0 1px 2px; +} + +.popup-content-area { + padding: 0 20px 60px 20px; +} + +#installation-settings-popup button { + bottom: 20px; + position: absolute; + right: 20px; +} + +#tpm-busy { + text-align: center; +} + +#tpm-password { + font-weight: bold; + text-align: center; +} + +[hidden] { + display: none !important; +} + +#popup-overlay { + -webkit-box-align: center; + -webkit-box-pack: center; + -webkit-transition: 250ms opacity; + background: rgba(255, 255, 255, .75); + bottom: 0; + display: -webkit-box; + left: 0; + padding: 20px; + position: fixed; + right: 0; + top: 0; + z-index: 5; +} + +#bubble { + -webkit-transition: 250ms opacity; +} + +span.bold { + font-weight: bold; +} + +#version-labels { + -webkit-transition: all 500ms linear; + color: #fff; + font-size: 11px; + margin: 10px; + 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); +} + +#background { + -webkit-transition: 700ms opacity; + background-size: 100% 100%; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} + +.background-initial { + opacity: 0; +} + +.throbber { + -webkit-animation: throbber-animation 1s steps(36) infinite; + -webkit-margin-before: 2px; + -webkit-margin-end: 4px; + background-image: url(chrome://theme/IDR_CROS_DEFAULT_THROBBER); + display: inline-block; + height: 16px; + width: 16px; +} + +@-webkit-keyframes throbber-animation { + from { + background-position: 0; + } + to { + background-position: -576px; + } +} + -- cgit v1.1