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 |