Home | History | Annotate | Download | only in about_welcome_android 
      1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
      2  * Use of this source code is governed by a BSD-style license that can be
      3  * found in the LICENSE file. */
      4 
      5 html {
      6   height: 100%;
      7   width: 100%;
      8 }
      9 
     10 body {
     11   -webkit-align-items: center;
     12   -webkit-flex-direction: column;
     13   background-color: #f4f4f4;
     14   box-sizing: border-box;
     15   display: -webkit-flex;
     16   font-family: Droid Sans;
     17   height: 100%;
     18   margin: 0 auto;
     19   max-width: 600px;
     20   padding: 20px;
     21   width: 100%;
     22 }
     23 
     24 a {
     25   color: rgb(51, 181, 229);
     26 }
     27 
     28 .spacing {
     29   -webkit-flex: 1;
     30 }
     31 
     32 #logo {
     33   -webkit-flex-shrink: 1;
     34   background-position: center;
     35   background-repeat: no-repeat;
     36   background-size: contain;
     37   min-height: 60px;
     38   width: 100%;
     39 }
     40 
     41 #take-a-tour {
     42   -webkit-flex: none;
     43   background: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
     44   border: 1px solid #ccc;
     45   border-radius: 2px;
     46   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
     47       inset 0 0 2px rgba(255, 255, 255, 0.6);
     48   color: rgb(73, 73, 74);
     49   display: block;
     50   font-size: 20px;
     51   font-weight: bold;
     52   margin: 20px auto 0;
     53   max-width: 400px;
     54   padding: 11px 0;
     55   text-align: center;
     56   text-decoration: none;
     57   width: 100%;
     58 }
     59 
     60 #take-a-tour:active {
     61   border: 1px solid #a1a1a1;
     62   box-shadow: inset 0 5px 15px rgba(100, 100, 100, 0.20);
     63 }
     64 
     65 .footer {
     66   -webkit-flex: none;
     67   color: #646464;
     68   font-size: 1.3em;
     69   margin-top: 20px;
     70   text-align: center;
     71 }
     72 
     73 /* Logos */
     74 @media only screen {
     75   #logo {
     76     background-image: url(images/holo_logo_200.png);
     77   }
     78 }
     79 
     80 @media only screen and (-webkit-min-device-pixel-ratio: 1.0) {
     81   #logo {
     82     -webkit-flex-basis: 152px;
     83     max-width: 536px;
     84   }
     85 }
     86 @media only screen and (-webkit-min-device-pixel-ratio: 1.3) {
     87   #logo {
     88     -webkit-flex-basis: 114px;
     89     max-width: 402px;
     90   }
     91 }
     92 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     93   #logo {
     94     -webkit-flex-basis: 76px;
     95     background-image: url(images/holo_logo_150.png);
     96     max-width: 268px;
     97   }
     98 }
     99 @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    100   #logo {
    101     -webkit-flex-basis: 76px;
    102     max-width: 268px;
    103   }
    104 }
    105 
    106 /* Increase spacing on larger screens. */
    107 @media only screen and (min-height: 601px) {
    108   body {
    109     padding: 100px 20px;
    110   }
    111 
    112   #take-a-tour,
    113   #footer {
    114     margin-top: 60px;
    115   }
    116 }
    117