| OLD | NEW |
| (Empty) |
| 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 } | |
| OLD | NEW |