blob: 3617517c126053404c02f8b9b5a649a337a10b9d [file] [log] [blame]
/* 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 {
-webkit-align-items: center;
-webkit-flex-direction: column;
background-color: #f4f4f4;
box-sizing: border-box;
display: -webkit-flex;
font-family: Droid Sans;
height: 100%;
margin: 0 auto;
max-width: 600px;
padding: 20px;
width: 100%;
}
a {
color: rgb(51, 181, 229);
}
.spacing {
-webkit-flex: 1;
}
#logo {
-webkit-flex-shrink: 1;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
min-height: 60px;
width: 100%;
}
#take-a-tour {
-webkit-flex: none;
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: 20px auto 0;
max-width: 400px;
padding: 11px 0;
text-align: center;
text-decoration: none;
width: 100%;
}
#take-a-tour:active {
border: 1px solid #a1a1a1;
box-shadow: inset 0 5px 15px rgba(100, 100, 100, 0.20);
}
.footer {
-webkit-flex: none;
color: #646464;
font-size: 1.3em;
margin-top: 20px;
text-align: center;
}
/* Logos */
@media only screen and (-webkit-min-device-pixel-ratio: 1.0) {
#logo {
-webkit-flex-basis: 152px;
background-image: url(images/holo_logo_200.png);
max-width: 536px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3) {
#logo {
-webkit-flex-basis: 114px;
background-image: url(images/holo_logo_200.png);
max-width: 402px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
-webkit-flex-basis: 76px;
background-image: url(images/holo_logo_150.png);
max-width: 268px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
#logo {
-webkit-flex-basis: 76px;
background-image: url(images/holo_logo_200.png);
max-width: 268px;
}
}
/* Increase spacing on larger screens. */
@media only screen and (min-height: 601px) {
body {
padding: 100px 20px;
}
#take-a-tour,
#footer {
margin-top: 60px;
}
}