Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: chrome/skin/firstRun.css

Issue 10585038: First-run page (revisited) (Closed)
Patch Set: Applied proposed changes (except Chrome-specific utils.js due to uncertainty) Created May 27, 2013, 12:58 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <http://adblockplus.org/>, 2 * This file is part of Adblock Plus <http://adblockplus.org/>,
3 * Copyright (C) 2006-2013 Eyeo GmbH 3 * Copyright (C) 2006-2013 Eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details. 12 * GNU General Public License for more details.
13 * 13 *
14 * You should have received a copy of the GNU General Public License 14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */ 16 */
17 17
18 @namespace url("http://www.w3.org/1999/xhtml");
19
20 @media not handheld
21 {
22 body
23 {
24 font-size: 130%;
25 }
26 }
27
28 /** This should be unnecessary in Gecko 2.0 and above. */ 18 /** This should be unnecessary in Gecko 2.0 and above. */
29 *[hidden] 19 *[hidden]
30 { 20 {
31 display: none; 21 display: none;
32 } 22 }
33 23
34 body 24 body
35 { 25 {
36 background-image: url(abp-icon-big.png); 26 font-family: Arial, Helvetica, sans-serif;
27 font-size: 14px;
28 line-height: 140%;
29 color: #000000;
30 background-color: #f8f6f2;
31 background-image: url(/skin/background.png);
32 margin: 0 auto;
33 padding: 0;
34 max-width: 900px;
35 }
36
37 a:link, a:visited
38 {
39 color: #7d7d7d;
40 }
41
42 button, .arrow
43 {
44 cursor: pointer;
45 }
46
47 header, p
48 {
49 margin: 15px 0 5px;
50 }
51
52 #content
53 {
54 padding: 0 90px;
55 }
56
57 header
58 {
59 padding-left: 148px;
60 background-image: url(/skin/abp-icon-big.png);
61 background-position: 0% 50%;
37 background-repeat: no-repeat; 62 background-repeat: no-repeat;
38 background-position: 95% 5%; 63 min-height: 128px;
39 font-family: Arial,sans-serif; 64 vertical-align: middle;
40 } 65 line-height: 1;
41 66
42 .sectionTitle 67 display: -webkit-box;
43 { 68 -webkit-box-orient: vertical;
69 -webkit-box-pack: center;
70
71 display: -moz-box;
72 -moz-box-orient: vertical;
73 -moz-box-pack: center;
74
75 display: -o-box;
76 -o-box-orient: vertical;
77 -o-box-pack: center;
78
79 display: -ms-box;
80 -ms-box-orient: vertical;
81 -ms-box-pack: center;
82
83 display: box;
84 box-orient: vertical;
85 box-pack: center;
86 }
87
88 header h1
89 {
90 font-size: 40px;
91 font-weight: normal;
92 margin: 0;
93 }
94
95 #dataCorruptionWarning
96 {
97 font-size: 200%;
98 line-height: 140%;
99 margin: 20px;
100 padding: 20px;
101 border: 3px solid red;
102 border-radius: 10px;
103 }
104
105 #features
106 {
107 display: block;
108 border-spacing: 10px;
109 margin: 0px;
110 padding: 0px;
111 padding-bottom: 120px;
112 white-space: nowrap;
113 }
114
115 #features-title
116 {
117 font-size: 22px;
118 color: #cc0000;
119 margin: 30px 0px 20px;
120 }
121
122 #features-title::after
123 {
124 content: ":";
125 }
126
127 .feature
128 {
129 display: block;
130 list-style-type: none;
131 padding-bottom: 20px;
132 }
133
134 .feature-image, .feature-description
135 {
136 display: inline-block;
137 *display: inline; /* IE6 inline-block fix */
138 *zoom: 1;
139 vertical-align: top;
140 }
141
142 .feature-description
143 {
144 width: 550px;
145 margin: 0px 10px;
146 }
147
148 .feature-title
149 {
150 color: black;
44 font-weight: bold; 151 font-weight: bold;
45 } 152 font-size: 120%;
46 153 }
47 #listNameContainer, 154
48 #listNone 155 .feature-title::after
49 { 156 {
50 margin: 1em 2em; 157 content: ":";
51 } 158 }
52 159
53 #listNone 160 .feature-text
54 { 161 {
55 font-style: italic; 162 margin: 7px 0px;
56 } 163 white-space: normal;
57 164 }
58 #acceptableAds 165
59 { 166 .feature-image
60 font-size: 80%; 167 {
61 font-weight: bold; 168 width: 57px;
62 } 169 height: 57px;
63 #acceptableAds > * 170 }
64 { 171
65 font-weight: normal; 172 #feature-typo .feature-image
66 } 173 {
67 174 background-image: url(/skin/features/typo.png);
68 .sectionContainer 175 }
69 { 176
70 margin: 1em 2em; 177 #feature-malware .feature-image
71 } 178 {
179 background-image: url(/skin/features/malware.png);
180 }
181
182 #feature-social .feature-image
183 {
184 background-image: url(/skin/features/social.png);
185 }
186
187 #feature-tracking .feature-image
188 {
189 background-image: url(/skin/features/tracking.png);
190 }
191
192 .feature button
193 {
194 cursor: pointer;
195 position: relative;
196 top: 0px;
197 padding: 5px 10px;
198 *padding: 2px 3px;
199 font-weight: none;
200 font-size: inherit;
201 color: white;
202 text-shadow: 2px 2px 2px #327d14;
203 border: none;
204 border-radius: 3px;
205 box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
206 background-color: #62c52b;
207 background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
208 background: -moz-linear-gradient(top, #62c52b, #4f9d22);
209 background: -o-linear-gradient(top, #62c52b, #4f9d22);
210 background: -ms-linear-gradient(top, #62c52b, #4f9d22);
211 background: linear-gradient(top, #62c52b, #4f9d22);
212 -webkit-transition: box-shadow 0.3s ease;
213 -moz-transition: box-shadow 0.3s ease;
214 -o-transition: box-shadow 0.3s ease;
215 -ms-transition: box-shadow 0.3s ease;
216 transition: box-shadow 0.3s ease;
217 }
218
219 .feature button:hover
220 {
221 box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
222 }
223
224 .feature button:active
225 {
226 top: 3px;
227 top: 0px\9;
228 box-shadow: 0px 0px 7px #486c15;
229 background-color: #4f9d22;
230 background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
231 background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
232 background: -o-linear-gradient(bottom, #62c52b, #4f9d22);
233 background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
234 background: linear-gradient(bottom, #62c52b, #4f9d22);
235 -webkit-transition: none;
236 -moz-transition: none;
237 -o-transition: none;
238 -ms-transition: none;
239 transition: none;
240 *zoom: 1;
241 }
242
243 .feature button.disable
244 {
245 text-shadow: 2px 2px 2px #9d4f22;
246 box-shadow: 0 1px 0 0 #9d4f22, 0 2px 0 0 #999;
247 background-color: #c5622b;
248 background: -webkit-linear-gradient(top, #c5622b, #9d4f22);
249 background: -moz-linear-gradient(top, #c5622b, #9d4f22);
250 background: -o-linear-gradient(top, #c5622b, #9d4f22);
251 background: -ms-linear-gradient(top, #c5622b, #9d4f22);
252 background: linear-gradient(top, #c5622b, #9d4f22);
253 }
254
255 .feature button.disable:hover
256 {
257 box-shadow: 0px 2px 7px #9d4f22, 0 1px 0 0 #9d4f22;
258 }
259
260 .feature button.disable:active
261 {
262 top: 3px;
263 top: 0px\9;
264 box-shadow: 0px 0px 7px #9d4f22;
265 background-color: #9d4f22;
266 background: -webkit-linear-gradient(bottom, #c5622b, #9d4f22);
267 background: -moz-linear-gradient(bottom, #c5622b, #9d4f22);
268 background: -o-linear-gradient(bottom, #c5622b, #9d4f22);
269 background: -ms-linear-gradient(bottom, #c5622b, #9d4f22);
270 background: linear-gradient(bottom, #c5622b, #9d4f22);
271 -webkit-transition: none;
272 -moz-transition: none;
273 -o-transition: none;
274 -ms-transition: none;
275 transition: none;
276 *zoom: 1;
277 }
278
279 #shade
280 {
281 -webkit-transition: opacity 0.2s ease;
282 -moz-transition: opacity 0.2s ease;
283 -o-transition: opacity 0.2s ease;
284 -ms-transition: opacity 0.2s ease;
285 transition: opacity 0.2s ease;
286 opacity: 0.0;
287 position: fixed;
288 margin-left: 10px;
289 bottom: 70px;
290 z-index: 100;
291 }
292
293 .arrow
294 {
295 width: 0;
296 height: 0;
297 border: 30px solid transparent;
298 border-top-color: #000;
299 }
300
301 footer
302 {
303 position: fixed;
304 bottom: 0;
305 left: 0;
306 right: 0;
307 padding: 70px 0 0;
308 text-align: center;
309 background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 2 55, 1) 50px);
310 background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
311 background: -o-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1 ) 50px);
312 background: -ms-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
313 background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 5 0px);
314 }
315
316 footer h1
317 {
318 margin: 0;
319 font-size: 18px;
320 color: #666;
321 position: fixed;
322 bottom: 70px;
323 left: 0;
324 right: 0;
325 -webkit-transition: opacity .3s ease;
326 -moz-transition: opacity .3s ease;
327 -o-transition: opacity .3s ease;
328 -ms-transition: opacity .3s ease;
329 transition: opacity .3s ease;
330 opacity: 1;
331 }
332
333 #social ul
334 {
335 list-style: none;
336 display: inline-block;
337 padding: 0;
338 margin: 0;
339 }
340
341 #social:hover h1
342 {
343 opacity: 0;
344 }
345
346 #social ul:hover li {
347 opacity: 0.3;
348 }
349
350 #social ul li
351 {
352 display: inline-block;
353 margin: 0px 5px;
354 -webkit-transition: opacity .5s ease, bottom .3s ease;
355 -moz-transition: opacity .5s ease, bottom .3s ease;
356 -o-transition: opacity .5s ease, bottom .3s ease;
357 -ms-transition: opacity .5s ease, bottom .3s ease;
358 transition: opacity .5s ease, bottom .3s ease;
359 position: relative;
360 bottom: -30px;
361 }
362
363 #social ul li:hover
364 {
365 opacity: 1.0;
366 bottom: 0px;
367 }
368
369 .share-button
370 {
371 display: inline-block;
372 width: 82px;
373 height: 82px;
374 }
375
376 #share-facebook
377 {
378 background-image: url(/skin/social/facebook.png);
379 }
380
381 #share-twitter
382 {
383 background-image: url(/skin/social/twitter.png);
384 }
385
386 #share-gplus
387 {
388 background-image: url(/skin/social/gplus.png);
389 }
390
391 #glass-pane, #share-popup
392 {
393 visibility: hidden;
394 opacity: 0;
395 -webkit-transition-property: opacity, visibility;
396 -moz-transition-property: opacity, visibility;
397 -o-transition-property: opacity, visibility;
398 -ms-transition-property: opacity, visibility;
399 transition-property: opacity, visibility;
400 }
401
402 #glass-pane
403 {
404 position: fixed;
405 top: 0;
406 right: 0;
407 bottom: 0;
408 left: 0;
409 background: rgba(0, 0, 0, 0.5) url(/skin/ajax-loader.gif) no-repeat 50% 50%;
410 z-index: 101;
411
412 -webkit-transition-duration: 0.2s;
413 -moz-transition-duration: 0.2s;
414 -o-transition-duration: 0.2s;
415 -ms-transition-duration: 0.2s;
416 transition-duration: 0.2s;
417 }
418
419 #share-popup
420 {
421 position: absolute;
422 top: 50%;
423 left: 50%;
424 border: none;
425 -webkit-transition-delay: 0.1s;
426 -moz-transition-delay: 0.1s;
427 -o-transition-delay: 0.1s;
428 -ms-transition-delay: 0.1s;
429 transition-delay: 0.1s;
430 }
431
432 #glass-pane.visible, #share-popup.visible
433 {
434 visibility: visible;
435 opacity: 1;
436 }
437
438 #share-popup.visible
439 {
440 -webkit-transition-duration: 0.15s;
441 -moz-transition-duration: 0.15s;
442 -o-transition-duration: 0.15s;
443 -ms-transition-duration: 0.15s;
444 transition-duration: 0.15s;
445 }
446
447 /* Firefox-specific code */
448 #feature-typo
449 {
450 display: none;
451 }
452
453 html.firefox #feature-typo
454 {
455 display: block;
456 }
457
458 /* Adjust font size on smaller screens */
459 @media (max-height: 800px)
460 {
461 body
462 {
463 font-size: 19px;
464 }
465 }
466
467 @media (max-height: 750px)
468 {
469 body
470 {
471 font-size: 17px;
472 }
473 }
474
475 @media (max-height: 700px)
476 {
477 body
478 {
479 font-size: 16px;
480 }
481 }
OLDNEW

Powered by Google App Engine
This is Rietveld