OLD | NEW |
---|---|
(Empty) | |
1 /* Copyright 2017 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.md { | |
6 background-color: #303030; | |
7 } | |
8 | |
9 body { | |
10 -webkit-font-smoothing: antialiased; | |
11 font-size: 100%; | |
12 margin: 0; | |
13 } | |
14 | |
15 /** Typography -------------------------------------------------------------- */ | |
16 | |
17 .content { | |
18 background-color: #303030; | |
19 color: rgb(179, 179, 179); | |
20 font-size: calc(100% - 2px); | |
21 line-height: calc(100% + 6px); | |
22 min-width: 240px; | |
23 } | |
24 | |
25 h1 { | |
26 color: rgb(204, 204, 204); | |
27 font-size: calc(100% + 8px); | |
28 font-weight: 400; | |
29 line-height: calc(100% + 8px); | |
30 } | |
31 | |
32 em { | |
33 color: white; | |
34 font-style: normal; | |
35 } | |
36 | |
37 .learn-more-button { | |
38 color: rgb(123, 170, 247); | |
39 text-decoration: none; | |
40 } | |
41 | |
42 /* Small font on small screens. */ | |
43 @media (max-width: 240px), | |
44 (max-height: 320px) { | |
45 .content { | |
46 font-size: calc(100% - 4px); | |
47 line-height: calc(100% + 6px); | |
48 } | |
49 | |
50 h1 { | |
51 font-size: calc(100% + 4px); | |
52 line-height: calc(100% + 4px); | |
53 } | |
54 } | |
55 | |
56 /** Icon -------------------------------------------------------------------- */ | |
57 | |
58 .icon { | |
59 content: url(../../../../ui/webui/resources/images/incognito_splash.svg); | |
60 height: 120px; | |
61 width: 120px; | |
62 } | |
63 | |
64 /* Medium-sized icon on medium-sized screens. */ | |
65 @media (max-height: 480px), | |
66 (max-width: 720px) { | |
67 .icon { | |
68 height: 72px; | |
69 width: 72px; | |
70 } | |
71 } | |
72 | |
73 /* Very small icon on very small screens. */ | |
74 @media (max-width: 720px) { | |
75 @media (max-width: 240px), | |
76 (max-height: 480px) { | |
77 .icon { | |
78 height: 48px; | |
79 width: 48px; | |
80 } | |
81 } | |
82 } | |
83 | |
84 /** The "Learn more" link --------------------------------------------------- */ | |
85 | |
86 /* By default, we only show the inline "Learn more" link. */ | |
87 .content > .learn-more-button { | |
88 display: none; | |
89 } | |
90 | |
91 /* On narrow screens, we show the standalone "Learn more" link. */ | |
92 @media (max-width: 720px) { | |
93 #subtitle > .learn-more-button { | |
94 display: none; | |
95 } | |
96 | |
97 .content > .learn-more-button { | |
98 display: block; | |
99 } | |
100 } | |
101 | |
102 /** Layout ------------------------------------------------------------------ */ | |
103 | |
104 /* Align the content, icon, and title to to the center. */ | |
105 .content { | |
106 margin-left: auto; | |
107 margin-right: auto; | |
108 max-width: 600px; | |
109 } | |
110 | |
111 .icon { | |
112 margin-left: auto; | |
113 margin-right: auto; | |
114 } | |
115 | |
116 h1 { | |
117 text-align: center; | |
118 } | |
119 | |
120 /* Align the two columns of bulletpoints next to each other. */ | |
121 .bulletpoints { | |
122 float: left; | |
123 } | |
124 | |
125 html[dir=rtl] .bulletpoints { | |
126 float: right; | |
127 } | |
128 | |
129 .bulletpoints + .bulletpoints { | |
130 clear: right; | |
131 } | |
132 | |
133 html[dir=rtl] .bulletpoints + .bulletpoints { | |
msramek
2017/04/21 12:20:36
This was a typo - it was supposed to be the mirror
| |
134 clear: left; | |
135 } | |
136 | |
137 .clearer { | |
138 clear: both; | |
139 } | |
140 | |
141 /* On narrow screens, align everything to the left. */ | |
142 @media (max-width: 720px) { | |
143 .content { | |
144 -webkit-margin-start: 0; | |
145 max-width: 600px !important; /* must override the rule set by JS which | |
146 * is only valid for width > 720px cases. */ | |
147 text-align: start; | |
148 } | |
149 | |
150 .icon { | |
151 -webkit-margin-start: 0; | |
152 } | |
153 | |
154 h1 { | |
155 text-align: start; | |
156 } | |
157 | |
158 .bulletpoints + .bulletpoints, | |
159 html[dir=rtl] .bulletpoints + .bulletpoints { | |
160 clear: both; | |
161 } | |
162 } | |
163 | |
164 /** Paddings and margins ---------------------------------------------------- */ | |
165 | |
166 .bulletpoints ul { | |
167 -webkit-padding-start: 16px; | |
168 margin: 4px 0 0; | |
169 } | |
170 | |
171 /* Margins of floating elements don't collapse. The margin for bulletpoints | |
172 * will usually be provided by a neighboring element. */ | |
173 .bulletpoints { | |
174 margin: 0; | |
175 } | |
176 | |
177 .bulletpoints + .bulletpoints { | |
178 -webkit-margin-start: 40px; | |
179 } | |
180 | |
181 .bulletpoints + .bulletpoints.tooWide { | |
182 -webkit-margin-start: 0; | |
183 margin-top: 24px; | |
184 } | |
185 | |
186 /* Wide screens. */ | |
187 @media (min-width: 720px) { | |
188 .icon, | |
189 h1, | |
190 #subtitle, | |
191 .learn-more-button { | |
192 margin-bottom: 24px; | |
193 margin-top: 24px; | |
194 } | |
195 | |
196 .content { | |
197 margin-top: 40px; | |
198 min-width: 240px; | |
199 padding: 8px 48px 24px; | |
200 } | |
201 | |
202 /* Snap the content box to the whole height on short screens. */ | |
203 @media (max-height: 480px) { | |
204 html, | |
205 body, | |
206 .content { | |
207 height: 100%; | |
208 } | |
209 | |
210 .content { | |
211 margin-bottom: 0; | |
212 margin-top: 0; | |
213 padding-bottom: 0; | |
214 padding-top: 0; | |
215 } | |
216 | |
217 .icon { | |
218 margin-top: 0; | |
219 padding-top: 32px; /* Define the top offset through the icon's padding, | |
220 * otherwise the screen height would be 100% + 32px */ | |
221 } | |
222 } | |
223 | |
224 /* Smaller vertical margins on very short screens. */ | |
225 @media (max-height: 320px) { | |
226 h1, | |
227 #subtitle, | |
228 .learn-more-button { | |
229 margin-bottom: 16px; | |
230 margin-top: 16px; | |
231 } | |
232 | |
233 .icon { | |
234 margin-bottom: 16px; | |
235 } | |
236 } | |
237 } | |
238 | |
239 /* Narrow screens */ | |
240 @media (max-width: 720px) { | |
241 .content { | |
242 padding: 72px 32px; | |
243 min-width: 176px; | |
244 } | |
245 | |
246 .icon, | |
247 h1, | |
248 #subtitle, | |
249 .learn-more-button { | |
250 margin-bottom: 24px; | |
251 margin-top: 24px; | |
252 } | |
253 | |
254 /* The two columns of bulletpoints are moved under each other. */ | |
255 .bulletpoints + .bulletpoints { | |
256 -webkit-margin-start: 0; | |
257 margin-top: 24px; | |
258 } | |
259 | |
260 /* Smaller offsets on smaller screens. */ | |
261 @media (max-height: 600px) { | |
262 .content { | |
263 padding-top: 48px; | |
264 } | |
265 | |
266 .icon, | |
267 h1, | |
268 #subtitle, | |
269 .learn-more-button { | |
270 margin-bottom: 16px; | |
271 margin-top: 16px; | |
272 } | |
273 | |
274 .bulletpoints + .bulletpoints { | |
275 margin-top: 16px; | |
276 } | |
277 } | |
278 | |
279 /* Small top offset on very small screens. */ | |
280 @media (max-height: 480px) { | |
281 .content { | |
282 padding-top: 32px; | |
283 } | |
284 } | |
285 | |
286 /* Undo the first and last elements margins. */ | |
287 .icon { | |
288 margin-top: 0; | |
289 } | |
290 | |
291 .learn-more-button { | |
292 margin-bottom: 0; | |
293 } | |
294 } | |
295 | |
296 /* Very narrow screens. */ | |
297 @media (max-width: 240px) { | |
298 .content { | |
299 min-width: 192px; | |
300 padding-left: 24px; | |
301 padding-right: 24px; | |
302 } | |
303 } | |
OLD | NEW |