Prototype version of the first-run dialog for Windows 8

chrome/browser/resources/set_as_metro_default.css

Index: chrome/browser/resources/set_as_metro_default.css
diff --git a/chrome/browser/resources/set_as_metro_default.css b/chrome/browser/resources/set_as_metro_default.css
new file mode 100644
index 0000000000000000000000000000000000000000..c3ad30c59e30bc5c1bbe3c5bf89fa3bf7d097340
--- /dev/null
+++ b/chrome/browser/resources/set_as_metro_default.css
@@ -0,0 +1,157 @@
+/* Copyright (c) 2012 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. */
+
+/* The main (outer) container. */
+#metro-setup-outer-container {
+  -webkit-box-align: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  -webkit-transition: 200ms opacity;
+  background-color: rgba(255, 255, 255, 0.75);
+  bottom: 0;
+  display: -webkit-box;
+  left: 0;
+  overflow: auto;
+  padding: 20px;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+/* The page block within the outer container. */
+#metro-setup-outer-container .page {
+  -webkit-border-radius: 3px;
+  -webkit-box-orient: vertical;
+  -webkit-user-select: none;
+  background: white;
+  background-color: white;
+  color: #333;
+  display: -webkit-box;
+  margin-bottom: 6px;
+  margin-top: 6px;
+  min-width: 400px;
+  padding: 0;
+  position: relative;
+  width: 400px;
+}
+
+#metro-setup-outer-container .page .content-area {
+  -webkit-box-flex: 1;
+  overflow: auto;
+  padding: 6px 17px 26px;
+}
+
+#metro-setup-overlay {
+  background-color: transparent;
+  margin: 0;
+  width: 100%;
+}
+
+/* Page Title. */
+#metro-title-container {
+  display: block;
+  margin: 37px 44px 35px;
+  text-align: center;
+}
+
+#metro-setup-outer-container .page h1 {
+  border-bottom: 0;
+  color: rgb(34, 34, 34);
+  font-size: 340%;
+  font-weight: normal;
+  margin: 0;
+  padding-bottom: 0;
+  padding-top: 13px;
+  text-align: center;
+}
+
+#metro-setup-outer-container .page h2 {
+  border-bottom: 0;
+  color: rgb(102, 102, 102);
+  font-size: 160%;
+  font-weight: normal;
+  text-align: center;
+}
+
+#metro-setup-overlay * .content-area {

[arv (Not doing code reviews), 2012/06/21 20:11:35]

Skip the * ?

[motek., 2012/06/21 21:34:41]

Done.

+  padding: 10px 15px;
+  text-align: right;

[arv (Not doing code reviews), 2012/06/21 20:11:35]

RTL

text-align: end;

[motek., 2012/06/21 21:34:41]

Done.

+}
+
+/* Action buttons. */
+#metro-action-box button {
+  -webkit-margin-end: 0.4em;
+  -webkit-margin-start: 0;
+  -webkit-transition: all 218ms;
+  -webkit-user-select: none;
+
+  border-radius: 2px;
+  display: inline-block;
+  font-size: 13px;
+  height: 32px;
+  line-height: 27px;
+  margin-top: 0;
+  min-width: 80px;
+}
+
+#metro-action-box button:hover {
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  -webkit-transition: all 0;
+}
+
+#metro-action-box button:focus {
+  -webkit-box-shadow: inset 0 0 0 1px white;
+  outline: none;
+  z-index: 4 !important;
+}
+
+#metro-action-box button:active,
+#metro-action-box button:focus:active {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+#metro-action-box button:focus:hover {
+  -webkit-box-shadow: inset 0 0 0 1px white, 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+#metro-action-box button[disabled],
+#metro-action-box button[disabled]:hover,
+#metro-action-box button[disabled]:active {
+  -webkit-box-shadow: none;

[arv (Not doing code reviews), 2012/06/21 20:11:35]

Are these the standard look and feel? If so can you just include the shared css?

[motek., 2012/06/21 21:34:41]

I am not sure. I am *really* new to CSS, I learned it to write this. Help!
Anyway, I lifted this design from
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/resources/sync...

The file itself was not general enough for me to include it and I am not sure
enough for myself to take up on generalizing it, especially not for a prototype.

If required, I'd rather do it in a separate CL to avoid touching unrelated stuff
here. 

+  background-color: rgb(77, 144, 254);
+  border: 1px solid rgb(48, 121, 237);
+  color: white;
+  opacity: 0.5;
+}
+
+/* Launch button has a special look-and-feel. */
+#metro-action-box #launch-button {
+  background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
+                                                 rgb(71, 135, 237));
+  border: 1px solid rgb(48, 121, 237);
+  color: white;
+  font-weight: bold;
+}
+
+#metro-action-box #launch-button:hover {
+  background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
+                                                 rgb(53, 122, 232));
+  border-color: rgb(47, 91, 183);
+  color: white;
+}
+
+#metro-action-box #launch-button:focus {
+  border-color: rgb(77, 144, 254);
+  outline: none;
+  z-index: 4 !important;
+}
+
+#metro-action-box #return-button {
+  margin-left: 30px;

[arv (Not doing code reviews), 2012/06/21 20:11:35]

Use -webkit-margin-start and end

[motek., 2012/06/21 21:34:41]

Done.

+  margin-right: auto;
+}
+
+.button-strip {
+  padding: 7px;
+}