chrome/browser/resources/about_welcome_android/about_welcome_android.css

   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 }