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 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: -webkit-gradient(
  44       linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
  45   border: 1px solid #ccc;
  46   border-radius: 2px;
  47   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
  48       inset 0 0 2px rgba(255, 255, 255, 0.6);
  49   color: rgb(73, 73, 74);
  50   display: block;
  51   font-size: 20px;
  52   font-weight: bold;
  53   margin: 20px auto 0;
  54   max-width: 400px;
  55   padding: 11px 0;
  56   text-align: center;
  57   text-decoration: none;
  58   width: 100%;
  59 }
  60
  61 #take-a-tour:active {
  62   border: 1px solid #a1a1a1;
  63   box-shadow: inset 0 5px 15px rgba(100, 100, 100, 0.20);
  64 }
  65
  66 .footer {
  67   -webkit-flex: none;
  68   color: #646464;
  69   font-size: 1.3em;
  70   margin-top: 20px;
  71   text-align: center;
  72 }
  73
  74 /* Logos */
  75 @media only screen and (-webkit-min-device-pixel-ratio: 1.0) {
  76   #logo {
  77     -webkit-flex-basis: 152px;
  78     background-image: url(images/holo_logo_200.png);
  79     max-width: 536px;
  80   }
  81 }
  82 @media only screen and (-webkit-min-device-pixel-ratio: 1.3) {
  83   #logo {
  84     -webkit-flex-basis: 114px;
  85     background-image: url(images/holo_logo_200.png);
  86     max-width: 402px;
  87   }
  88 }
  89 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  90   #logo {
  91     -webkit-flex-basis: 76px;
  92     background-image: url(images/holo_logo_150.png);
  93     max-width: 268px;
  94   }
  95 }
  96 @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
  97   #logo {
  98     -webkit-flex-basis: 76px;
  99     background-image: url(images/holo_logo_200.png);
 100     max-width: 268px;
 101   }
 102 }
 103
 104 /* Increase spacing on larger screens. */
 105 @media only screen and (min-height: 601px) {
 106   body {
 107     padding: 100px 20px;
 108   }
 109
 110   #take-a-tour,
 111   #footer {
 112     margin-top: 60px;
 113   }
 114 }