| /* 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. */ |
| |
| @font-face { |
| font-family: 'Roboto2'; |
| font-weight: 400; |
| src: local('Roboto'), local('Roboto2-Regular'); |
| } |
| |
| html { |
| height: 100%; |
| width: 100%; |
| } |
| |
| body { |
| -webkit-align-items: center; |
| -webkit-flex-direction: column; |
| background-color: #fafafa; |
| box-sizing: border-box; |
| display: -webkit-flex; |
| font-family: 'Roboto2', sans-serif; |
| 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-color: rgb(66, 133, 244); |
| border-radius: 2px; |
| color: white; |
| display: block; |
| font-size: 18px; |
| font-weight: medium; |
| margin: 20px auto 0; |
| max-width: 320px; |
| padding: 15px 0; |
| text-align: center; |
| text-decoration: none; |
| text-transform: uppercase; |
| width: 100%; |
| } |
| |
| .footer { |
| -webkit-flex: none; |
| color: #646464; |
| font-size: 1.3em; |
| margin-top: 20px; |
| text-align: center; |
| } |
| |
| /* Logos */ |
| @media only screen { |
| #logo { |
| background-image: url(images/holo_logo_200.png); |
| } |
| } |
| |
| @media only screen and (-webkit-min-device-pixel-ratio: 1.0) { |
| #logo { |
| -webkit-flex-basis: 152px; |
| max-width: 536px; |
| } |
| } |
| @media only screen and (-webkit-min-device-pixel-ratio: 1.3) { |
| #logo { |
| -webkit-flex-basis: 114px; |
| 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; |
| 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; |
| } |
| } |