Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(4903)

Unified Diff: chrome/browser/resources/chromeos/oobe.css

Issue 7058048: [cros] Layout for OOBE WebUI. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: iterate Created 9 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: chrome/browser/resources/chromeos/oobe.css
diff --git a/chrome/browser/resources/chromeos/oobe.css b/chrome/browser/resources/chromeos/oobe.css
index 9b44394c8ffa88bd9c53881bb391a47cd93381ac..07a081af60b5c544b8bb86fd7cba2f5eeb0a3357 100644
--- a/chrome/browser/resources/chromeos/oobe.css
+++ b/chrome/browser/resources/chromeos/oobe.css
@@ -1,5 +1,252 @@
+/* Copyright (c) 2011 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.
+ */
+
body {
- cursor: default;
+ background: -webkit-gradient(radial, center center, 0, center center, 400,
+ from(#fefefe), to(#efefef));
+ font-size: 14px;
+ padding: 10px;
+}
+
+#oobe {
+ left: 50%;
+ margin-left: -320px;
+ margin-top: -270px;
+ position: absolute;
+ top: 50%;
+ width: 640px;
+}
+
+#inner-container {
+ -webkit-transition: height .2s ease-in-out;
+ height: 294px;
+ padding: 20px;
+ position: relative;
+ width: 640px;
+}
+
+table {
Evan Stade 2011/06/08 19:56:07 still needed?
Nikita (slow) 2011/06/08 22:28:27 No, removed.
+ font-size: 14px;
+}
+
+a {
+ color: #006668;
+ text-decoration: none;
+}
+
+hr.topshadow {
+ -webkit-mask: -webkit-gradient(linear, left top, right top,
Evan Stade 2011/06/08 19:56:07 -webkit-linear-gradient is simpler
Nikita (slow) 2011/06/08 22:28:27 Converted 4 -webkit-gradient in this file.
+ from(rgba(0,0,0,0)), color-stop(0.5, black), to(rgba(0,0,0,0)));
+ -webkit-mask-clip: padding-box;
+ background: -webkit-gradient(linear, left top, left bottom,
+ from(rgba(0,0,0,0.3)), to(rgba(0,0,0,0.0)));
+ border: none;
+ border-top: 1px solid rgba(0,0,0,0.5);
+ height: 4px;
+ opacity: 0.3;
+}
+
+hr.bottomshadow {
+ -webkit-mask: -webkit-gradient(linear, left top, right top,
+ from(rgba(0,0,0,0)), color-stop(0.5, black), to(rgba(0,0,0,0)));
+ -webkit-mask-clip: padding-box;
+ background: -webkit-gradient(linear, left bottom, left top,
+ from(rgba(0,0,0,0.2)), to(rgba(0,0,0,0.0)));
+ border: none;
+ border-bottom: 1px solid rgba(0,0,0,0.5);
+ height: 2px;
+ opacity: 0.3;
+}
+
+#header {
+ background: url('chrome://theme/IDR_PRODUCT_LOGO_64') left center no-repeat;
+ background-size: 48px;
+ color: #737373;
+ display: -webkit-box;
+ font-size: 20px;
+ height: 48px;
+ line-height: 48px;
+ padding-left: 54px;
+}
+
+#header-sections {
+ display: inline-block;
+ position: relative;
+}
+
+.header-section:before {
+ /* Divider in header between product name and title,
+ like "[Product name] > [step header]" */
+ content: "\00A0\203A\00A0\00A0";
+}
+
+.header-section {
+ -webkit-transition: all .2s ease-in-out;
+ position: absolute;
+ width: 20em;
+}
+
+.header-section.right {
+ left: 50px;
+ opacity: 0;
+}
+
+.header-section.left {
+ left: -20px;
+ opacity: 0;
+}
+
+.step {
+ -webkit-transition: all .2s ease-in-out;
+ left: 0;
+ min-height: 294px;
+ opacity: 1;
+ position: absolute;
+ width: 640px;
+}
+
+.step.right {
+ left: 100px;
+ opacity: 0;
+}
+
+.step.left {
+ left: -50px;
+ opacity: 0;
+}
+
+.step.hidden {
+ visibility: hidden;
+}
+
+#progress {
+ float: left;
+ padding: 10px;
+}
+
+.progdot {
+ background: black;
+ border-radius: 2px;
+ float: left;
+ height: 8px;
+ margin-right: 12px;
+ opacity: 0.1;
+ width: 8px;
+}
+
+.progdot-active {
+ opacity: 0.5;
+}
+
+.control-with-label {
+ margin: 10px 0 10px 0;
+ display: -webkit-box;
+}
+
+.label {
+ margin: 5px 5px 5px 0;
+ padding: 5px 5px 5px 0;
+ width: 170px;
+}
+
+.menu-area {
+ margin: 5px 5px 5px 5px;
+}
+
+.menu-control {
+ width: 150px;
+}
+
+#connect {
+ padding: 60px 0 0 145px;
+}
+
+#logging {
+ clear: both;
+ margin-top: 20px;
+}
+
+#footer button {
+ display: none;
+}
+
+#oobe.connect #continue-button,
+#oobe.eula #back-button,
+#oobe.eula #accept-button {
+ display: inline-block;
+}
+
+#oobe.connect #connect-dot,
+#oobe.eula #eula-dot,
+#oobe.signin #signin-dot,
+#oobe.photo #photo-dot {
+ opacity: 0.4;
+}
+
+#connect table {
+ margin: 7em auto;
+}
+
+#security-info {
+ bottom: 10px;
+ position: absolute;
+ text-align: center;
+ visibility: hidden;
+ width: 98%;
+}
+
+#security-info a {
+ color: #8c8c8c;
font-size: 13px;
- background: #f1f1f1;
+}
+
+#oobe.eula + #tpm {
Evan Stade 2011/06/08 22:46:56 I don't really think the + is necessary, isn't it
Nikita (slow) 2011/06/09 15:52:14 Updated ID. security-info div is only visible on E
+ visibility: visible;
+}
+
+#update div {
+ margin: 6em auto;
+ width: 32em;
+}
+
+#update progress {
+ margin: 13px 0;
+ width: 380px;
+}
+
+button {
+ min-width: 80px;
+}
+
+.eula-columns {
+ display: -webkit-box;
+ width: 630px;
+}
+
+.eula-frame {
+ border: none;
+ height: 200px;
+ margin-right: 20px;
+ padding: 0 0 0 10px;
+ width: 270px;
+}
+
+#eulas.one-column #cros-eula {
+ width: 100%;
+}
+
+#eulas.one-column #cros-eula-frame {
+ width: 100%;
+}
+
+#eulas.one-column #oem-eula {
+ display: none;
+}
+
+.button-strip {
+ float: right;
}

Powered by Google App Engine
This is Rietveld 408576698