Upstream about:welcome page for Android.

chrome/browser/resources/about_welcome_android/about_welcome_android.css

+/* 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. */
+
+html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-color: #f4f4f4;
+  background-repeat: no-repeat;
+  font-family: Droid Sans;
+  height: 100%;
+  margin: 0;
+  width: 100%;
+}
+
+a {
+  color: rgb(51, 181, 229);
+}
+
+#logo {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#center-wrapper {
+  height: 100%;
+  width: 100%;
+}
+
+#footer-container {
+  display: none;
+  position: fixed;
+  text-align: center;
+  width: 100%;
+}
+
+#footer {
+  color: #646464;
+}
+
+#take-a-tour {
+  background: -webkit-gradient(
+      linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
+      inset 0 0 2px rgba(255, 255, 255, 0.6);
+  color: rgb(73, 73, 74);
+  display: block;
+  font-size: 20px;
+  font-weight: bold;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 400px;
+  padding: 11px 0;
+  text-align: center;
+  text-decoration: none;
+}
+@media only screen and (max-width: 400px) {
+  #take-a-tour {
+    /* By default the button is 400px wide and center.  In this selector, the
+       screen isn't wide enough for that. */
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+}
+
+#take-a-tour:active {
+  border: 1px solid #a1a1a1;
+  box-shadow: inset 0 5px 15px rgba(100, 100, 100, 0.20);
+}
+
+/* Logos */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.0) {
+  #logo {
+    background-image: url(images/holo_logo_200.png);
+    height: 152px;
+    width: 536px;
+  }
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 1.3) {
+  #logo {
+    background-image: url(images/holo_logo_200.png);
+    height: 114px;
+    width: 402px;
+  }
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  #logo {
+    background-image: url(images/holo_logo_150.png);
+    height: 76px;
+    width: 268px;
+  }
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
+  #logo {
+    background-image: url(images/holo_logo_200.png);
+    height: 76px;
+    width: 268px;
+  }
+}
+
+/* Logo/tour button spacing */
+@media only screen and (min-height: 401px) {
+  #take-a-tour {
+    /* Add space between the logo and the tour button */
+    margin-top: 60px;
+  }
+}
+@media only screen and (max-height: 400px) {
+  #take-a-tour {
+    /* Add a little space between the logo and tour button, and push the
+       logo and button up some. */
+    margin-bottom: 40px;
+    margin-top: 20px;
+  }
+}
+
+/* Footer vertical positioning */
+@media only screen and (min-height: 601px) {
+  #footer-container {
+    /* the top of the footer is 140px from the bottom of the screen */
+    bottom: 0;
+    height: 140px;
+  }
+}
+@media only screen and (max-height: 600px) {
+  #footer-container {
+    /* the bottom of footer is 20px from the bottom of the screen */
+    bottom: 20px;
+  }
+}
+
+/* Footer horizontal width */
+#footer {
+  max-width: 600px;
+}
+@media only screen and (min-width: 606px) {
+  #footer {
+    /* the footer doesn't fill the page horizontally, so center it */
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+@media only screen and (max-width: 605px) {
+  #footer {
+    /* the footer horizontally fills the page, so add some margin */
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+}