src/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 @font-face {
   6   font-family: 'Roboto2';
   7   font-weight: 400;
   8   src: local('Roboto'), local('Roboto2-Regular');
   9 }
  10
  11 html {
  12   height: 100%;
  13   width: 100%;
  14 }
  15
  16 body {
  17   -webkit-align-items: center;
  18   -webkit-flex-direction: column;
  19   background-color: #fafafa;
  20   box-sizing: border-box;
  21   display: -webkit-flex;
  22   font-family: 'Roboto2', sans-serif;
  23   height: 100%;
  24   margin: 0 auto;
  25   max-width: 600px;
  26   padding: 20px;
  27   width: 100%;
  28 }
  29
  30 a {
  31   color: rgb(51, 181, 229);
  32 }
  33
  34 .spacing {
  35   -webkit-flex: 1;
  36 }
  37
  38 #logo {
  39   -webkit-flex-shrink: 1;
  40   background-position: center;
  41   background-repeat: no-repeat;
  42   background-size: contain;
  43   min-height: 60px;
  44   width: 100%;
  45 }
  46
  47 #take-a-tour {
  48   -webkit-flex: none;
  49   background-color: rgb(66, 133, 244);
  50   border-radius: 2px;
  51   color: white;
  52   display: block;
  53   font-size: 18px;
  54   font-weight: medium;
  55   margin: 20px auto 0;
  56   max-width: 320px;
  57   padding: 15px 0;
  58   text-align: center;
  59   text-decoration: none;
  60   text-transform: uppercase;
  61   width: 100%;
  62 }
  63
  64 .footer {
  65   -webkit-flex: none;
  66   color: #646464;
  67   font-size: 1.3em;
  68   margin-top: 20px;
  69   text-align: center;
  70 }
  71
  72 /* Logos */
  73 @media only screen {
  74   #logo {
  75     background-image: url(images/holo_logo_200.png);
  76   }
  77 }
  78
  79 @media only screen and (-webkit-min-device-pixel-ratio: 1.0) {
  80   #logo {
  81     -webkit-flex-basis: 152px;
  82     max-width: 536px;
  83   }
  84 }
  85 @media only screen and (-webkit-min-device-pixel-ratio: 1.3) {
  86   #logo {
  87     -webkit-flex-basis: 114px;
  88     max-width: 402px;
  89   }
  90 }
  91 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  92   #logo {
  93     -webkit-flex-basis: 76px;
  94     background-image: url(images/holo_logo_150.png);
  95     max-width: 268px;
  96   }
  97 }
  98 @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
  99   #logo {
 100     -webkit-flex-basis: 76px;
 101     max-width: 268px;
 102   }
 103 }
 104
 105 /* Increase spacing on larger screens. */
 106 @media only screen and (min-height: 601px) {
 107   body {
 108     padding: 100px 20px;
 109   }
 110
 111   #take-a-tour,
 112   #footer {
 113     margin-top: 60px;
 114   }
 115 }