chrome/browser/resources/contextual_search/promo.css

   1 /* Copyright 2014 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 /* TODO: Need to clean up @font-face after we remove font-family from body. */
   6 @font-face {
   7   font-family: 'Roboto2';
   8   font-weight: 400;
   9   src: local('Roboto'), local('Roboto2-Regular'),
  10       url(chrome://resources/roboto/roboto.woff2) format('woff2'),
  11       url(chrome://resources/roboto/roboto.woff) format('woff');
  12 }
  13
  14 /* TODO(pedrosimonetti): Find a better way to fix the problem when the
  15  * text scaling preference is set to a high value.
  16  *
  17  * This CSS rule prevents the promo text from scaling as explained here:
  18  * https://code.google.com/p/chromium/issues/detail?id=252828#c10
  19  *
  20  * For for background about the problem, see:
  21  * https://code.google.com/p/chromium/issues/detail?id=466773
  22  */
  23 #heading,
  24 #description {
  25   max-height: 999999px;
  26 }
  27
  28 body {
  29   font-family: 'Roboto2', sans-serif;
  30   margin: 0;
  31 }
  32
  33 a {
  34   text-decoration: none;
  35 }
  36
  37 a.colored-link {
  38   color: rgb(66, 133, 244);
  39 }
  40
  41 #container {
  42   /* NOTE(pedrosimonetti): There's an implicit extra top margin that is
  43    * rendered natively (currently using 24dp). So, the total padding will
  44    * be 38dp (24dp + 14dp). For more info, see SEARCH_BAR_HEIGHT_STATE_PROMO
  45    * in ContextualSearchPanelBase.java.
  46    *
  47    * We're also setting the side and bottom paddings to ensure to make sure
  48    * that when computing the height of the container all margins/paddings will
  49    * be considered.
  50    */
  51   padding: 14px 16px 12px;
  52 }
  53
  54 #button-container {
  55   margin-top: 24px;
  56   text-align: end;
  57   width: 100%;
  58 }
  59
  60 #container.hide {
  61   -webkit-transform: scale(0.95);
  62   -webkit-transition-duration: 130ms;
  63   -webkit-transition-property: opacity, -webkit-transform;
  64   opacity: 0;
  65 }
  66
  67 #description {
  68   color: #7E7E7E;
  69   font-size: 16px;
  70   line-height: 1.38em;
  71   margin: 12px 0 24px;
  72 }
  73
  74 /* Some properties below can be overridden in landscape orientation. */
  75 #heading {
  76   font-size: 23px;
  77   margin: 20px 0 12px;
  78   text-align: center;
  79 }
  80 .header-image {
  81   background-image: url(header.svg);
  82   background-repeat: no-repeat;
  83   height: 98px;
  84   margin: 0 auto 38px auto;
  85   width: 156px;
  86 }
  87 .portrait {
  88   display: block;
  89 }
  90 .landscape {
  91   display: none;
  92 }
  93
  94 /* Landscape */
  95 @media screen and (orientation:landscape) {
  96   #heading {
  97     margin-top: 0;
  98     /* The heading text and description text should be aligned, therefore
  99      * the left margin here will be equal to the header image width (156px)
 100      * plus its right margin (24px). Therefore the total left should be
 101      * 156px + 24px = 180px.
 102      */
 103     margin-left: 180px;
 104     padding-top: 8px;
 105     text-align: left;
 106   }
 107   .header-image {
 108     /* The header image is supposed to be vertically centered when the promo
 109      * is in landscape mode. For now, we're forcefully moving the image 4
 110      * pixels up to make it centered. A better approach would be using CSS
 111      * flexbox to properly center it, but this will require changing the
 112      * markup and styling of the whole promo, and it could be tricky coming
 113      * up with a single markup that works in both portrait and lanscape modes.
 114      */
 115     margin: 0 24px 0 0;
 116     position: relative;
 117     top: -4px;
 118   }
 119   .portrait {
 120     display: none;
 121   }
 122   .landscape {
 123     display: block;
 124     float: left;
 125   }
 126   html[dir='rtl'] .landscape {
 127     float: right;
 128   }
 129 }
 130
 131 button {
 132   background: none;
 133   border: none;
 134   display: inline-block;
 135   font-family: 'Roboto2', sans-serif;
 136   font-size: 14px;
 137   margin: 6px 0;
 138   /* We use a slightly different top-bottom padding because Roboto has a
 139    * rendering bug which makes an extra padding to be rendered at the bottom of
 140    * text.
 141    */
 142   padding: 12px 16px 8px;
 143   white-space: nowrap;
 144 }
 145
 146 button .caption {
 147   text-transform: uppercase;
 148 }
 149
 150 #optin-button {
 151   background: rgb(66, 133, 244);
 152   background-clip: padding-box;
 153   border-radius: 3px;
 154 }
 155
 156 #optin-button .caption {
 157   color: white;
 158 }
 159
 160 #optout-button .caption {
 161   color: rgb(66, 133, 244);
 162 }