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 and (-webkit-min-device-pixel-ratio: 1.0) {
  75   #logo {
  76     -webkit-flex-basis: 152px;
  77     background-image: url(images/holo_logo_200.png);
  78     max-width: 536px;
  79   }
  80 }
  81 @media only screen and (-webkit-min-device-pixel-ratio: 1.3) {
  82   #logo {
  83     -webkit-flex-basis: 114px;
  84     background-image: url(images/holo_logo_200.png);
  85     max-width: 402px;
  86   }
  87 }
  88 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  89   #logo {
  90     -webkit-flex-basis: 76px;
  91     background-image: url(images/holo_logo_150.png);
  92     max-width: 268px;
  93   }
  94 }
  95 @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
  96   #logo {
  97     -webkit-flex-basis: 76px;
  98     background-image: url(images/holo_logo_200.png);
  99     max-width: 268px;
 100   }
 101 }
 102
 103 /* Increase spacing on larger screens. */
 104 @media only screen and (min-height: 601px) {
 105   body {
 106     padding: 100px 20px;
 107   }
 108
 109   #take-a-tour,
 110   #footer {
 111     margin-top: 60px;
 112   }
 113 }