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

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

Issue 11039060: first run page redesign (Closed)
Patch Set: Created July 15, 2013, 2:19 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 .clearfix
18 {
19 clear: both;
20 }
21
22 *
23 {
24 margin: 0;
25 padding: 0;
26 }
17 27
18 body 28 body
19 { 29 {
20 font-family: Arial, Helvetica, sans-serif; 30 font-family: Segoe UI, Arial, Helvetica, sans-serif;
21 font-size: 14px; 31 font-size: 14px;
22 line-height: 140%; 32 line-height: 140%;
23 color: #000000; 33 color: #7f776b;
24 background-color: #f8f6f2; 34 background-color: #f8f6f2;
35 background-image: url(background-main.png);
36 }
37
38 a, a:link, a:visited
39 {
40 color: #5a84b3;
41 text-decoration: underline;
42 font-style: italic;
43 }
44
45 button, .arrow
46 {
47 cursor: pointer;
48 }
49
50 li
51 {
52 list-style-type: none;
53
54 }
55
56 header
57 {
58 height: 200px;
25 background-image: url(background.png); 59 background-image: url(background.png);
60 background-repeat: repeat-x;
61 width: 100%;
62 padding: 40px 0 0 0;
63 }
64
65 header h1
66 {
67 font-size: 24px;
68 font-weight: normal;
26 margin: 0 auto; 69 margin: 0 auto;
27 padding: 0; 70 display: block;
28 max-width: 900px; 71 color: #464746;
29 } 72 text-align: center;
30 73 margin: 30px 0 0 0;
31 a:link, a:visited 74
32 { 75 }
33 color: #7d7d7d; 76
34 } 77 strong
35 78 {
36 button, .arrow 79 font-weight: 600;
37 { 80 }
38 cursor: pointer; 81
39 } 82 h2 {
40 83 font-size: 30px;
41 header, p 84 font-weight: lighter;
42 { 85 color: #968d81;
43 margin: 15px 0 5px; 86 line-height: 30px;
44 } 87
45 88 }
46 #content 89
47 { 90 h3 {
48 padding: 0 90px; 91 font-size: 24px;
49 } 92 color: #4d4d4d;
50
51 header
52 {
53 padding-left: 148px;
54 background-image: url(abp-icon-big.png);
55 background-position: 0% 50%;
56 background-repeat: no-repeat;
57 min-height: 128px;
58 vertical-align: middle;
59 line-height: 1;
60
61 display: -webkit-box;
62 -webkit-box-orient: vertical;
63 -webkit-box-pack: center;
64
65 display: -moz-box;
66 -moz-box-orient: vertical;
67 -moz-box-pack: center;
68
69 display: -o-box;
70 -o-box-orient: vertical;
71 -o-box-pack: center;
72
73 display: -ms-box;
74 -ms-box-orient: vertical;
75 -ms-box-pack: center;
76
77 display: box;
78 box-orient: vertical;
79 box-pack: center;
80 }
81
82 header h1
83 {
84 font-size: 40px;
85 font-weight: normal; 93 font-weight: normal;
86 margin: 0; 94 margin: 0 0 10px 0;
87 } 95 }
88 96
89 #dataCorruptionWarning 97 h4 {
90 { 98 font-size: 16px;
91 font-size: 200%; 99 color: #7f776b;
92 line-height: 140%; 100 font-weight: normal;
93 margin: 20px; 101 text-align: center;
94 padding: 20px; 102 }
95 border: 3px solid red; 103
96 border-radius: 10px; 104 section
105 {
106 margin: 0 auto;
107 margin-bottom: 30px;
108 max-width: 760px;
109 background-image: url(background.png);
110 padding: 40px 100px;
111 }
112
113 section > p
114 {
115 margin: 15px 0 0 0;
116 }
117
118
119 #logo
120 {
121 margin: 0 auto;
122 height: 100px;
123 width: 99px;
124 display: block;
125 }
126
127 #can-do-more
128 {
129 max-width: 960px !important;
130 padding: 40px 0px 0px 0px !important;
131 }
132
133 #can-do-more > h2
134 {
135 margin: 0 100px;
136 }
137
138
139 #can-do-more > ul
140 {
141 max-width: 760px;
142 height: 140px;
143 margin: 40px 100px 0 100px;
144 }
145
146 #can-do-more > ul > li
147 {
148 width: 250px;
149 height: 115px;
150 float: left;
151 border-right: 1px dashed #c7c6c2;
152 padding: 20px 0 0 0;
153 }
154
155 #can-do-more > ul > h3
156 {
157 margin: 20px 0 0 0;
158 }
159
160 #can-do-more > ul > li > img
161 {
162 width: 59px;
163 height: 59px;
164 display: block;
165 margin: 0 auto;
166 }
167
168 #can-do-more > ul > li > h4
169 {
170 margin: 10px 0 0 0;
171 }
172
173 #can-do-more #feature-first
174 {
175 border-left: 1px dashed #c7c6c2;
176 }
177
178 #can-do-more-expanded
179 {
180 margin: 40px 100px 0 100px;
181 display: none;
97 } 182 }
98 183
99 #features 184 #features
100 { 185 {
101 display: block; 186 display: block;
102 border-spacing: 10px; 187 border-spacing: 10px;
103 margin: 0px; 188 margin: 0px;
104 padding: 0px; 189 padding: 0px;
105 padding-bottom: 120px;
106 white-space: nowrap;
107 }
108
109 #features-title
110 {
111 font-size: 22px;
112 color: #cc0000;
113 margin: 30px 0px 20px;
114 }
115
116 #features-title::after
117 {
118 content: ":";
119 } 190 }
120 191
121 .feature:not([hidden]) 192 .feature:not([hidden])
122 { 193 {
123 display: block; 194 display: block;
124 position: relative;
125 list-style-type: none; 195 list-style-type: none;
196 padding: 30px 0;
126 padding-bottom: 20px; 197 padding-bottom: 20px;
198 border-top: 1px dashed #c0bebb;
127 } 199 }
128 200
129 .feature-image, .feature-description 201 .feature-image, .feature-description
130 { 202 {
131 display: inline-block; 203 display: inline-block;
132 *display: inline; /* IE6 inline-block fix */ 204 *display: inline; /* IE6 inline-block fix */
133 *zoom: 1; 205 *zoom: 1;
134 vertical-align: top; 206 vertical-align: top;
135 } 207 }
136 208
137 .feature-description 209 .feature-description
138 { 210 {
139 width: 550px; 211 max-width: 500px;
140 margin: 0px 10px; 212 margin: 0px 0px 0 20px;
141 } 213 }
142 214
143 .feature-title 215 .feature-description > span
144 { 216 {
145 color: black; 217 margin: 15px 0 0 0;
146 font-weight: bold;
147 font-size: 120%;
148 }
149
150 .feature-title::after
151 {
152 content: ":";
153 }
154
155 .feature-text
156 {
157 margin: 7px 0px;
158 white-space: normal;
159 } 218 }
160 219
161 .feature-image 220 .feature-image
162 { 221 {
163 width: 57px; 222 width: 59px;
164 height: 57px; 223 height: 59px;
165 } 224 margin: 0 0 10px 20px;
166
167 #feature-malware .feature-image
168 {
169 background-image: url(features/malware.png);
170 }
171
172 #feature-social .feature-image
173 {
174 background-image: url(features/social.png);
175 }
176
177 #feature-tracking .feature-image
178 {
179 background-image: url(features/tracking.png);
180 } 225 }
181 226
182 .feature button 227 .feature button
183 { 228 {
184 cursor: pointer; 229 cursor: pointer;
185 position: relative; 230 position: relative;
186 top: 0px; 231 top: 0px;
187 padding: 5px 10px; 232 padding: 5px 10px;
188 *padding: 2px 3px; 233 *padding: 2px 3px;
189 font-weight: none; 234 font-weight: none;
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
259 background: -ms-linear-gradient(bottom, #c5622b, #9d4f22); 304 background: -ms-linear-gradient(bottom, #c5622b, #9d4f22);
260 background: linear-gradient(bottom, #c5622b, #9d4f22); 305 background: linear-gradient(bottom, #c5622b, #9d4f22);
261 -webkit-transition: none; 306 -webkit-transition: none;
262 -moz-transition: none; 307 -moz-transition: none;
263 -o-transition: none; 308 -o-transition: none;
264 -ms-transition: none; 309 -ms-transition: none;
265 transition: none; 310 transition: none;
266 *zoom: 1; 311 *zoom: 1;
267 } 312 }
268 313
269 #shade 314 #activate-features
270 { 315 {
271 -webkit-transition: opacity 0.2s ease; 316 width: 100%;
272 -moz-transition: opacity 0.2s ease; 317 height: 36px;
273 -o-transition: opacity 0.2s ease; 318 background-image: url("background-candomore.png");
274 -ms-transition: opacity 0.2s ease; 319 margin: 30px 0 0 0;
275 transition: opacity 0.2s ease; 320 padding: 14px 0 0 0;
276 opacity: 0.0; 321 cursor: pointer;
277 position: fixed; 322 color: #fff;
278 margin-left: 10px; 323 font-size: 24px;
279 bottom: 70px; 324 font-style: italic;
280 z-index: 100; 325 text-decoration: underline;
281 }
282
283 .arrow
284 {
285 width: 0;
286 height: 0;
287 border: 30px solid transparent;
288 border-top-color: #000;
289 }
290
291 footer
292 {
293 position: fixed;
294 bottom: 0;
295 left: 0;
296 right: 0;
297 padding: 70px 0 0;
298 text-align: center; 326 text-align: center;
299 background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 2 55, 1) 50px); 327 }
300 background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px); 328
301 background: -o-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1 ) 50px); 329 #share
302 background: -ms-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px); 330 {
303 background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 5 0px); 331 background-image: url(background-share.png);
304 } 332 padding: 50px 140px 40px 140px !important;
305 333 width: 680px;
306 footer h1 334 }
307 { 335
308 margin: 0; 336 #share > #text
309 font-size: 18px; 337 {
310 color: #666; 338 margin: 10px 0 0 0;
311 position: fixed; 339 float: left;
312 bottom: 70px; 340 max-width: 570px;
313 left: 0; 341 }
314 right: 0; 342
315 -webkit-transition: opacity .3s ease; 343 #share h2
316 -moz-transition: opacity .3s ease; 344 {
317 -o-transition: opacity .3s ease; 345 color: #fff;
318 -ms-transition: opacity .3s ease; 346 margin: 0px 8px 10px 0;
319 transition: opacity .3s ease; 347 text-align: left;
320 opacity: 1; 348 display: block;
321 } 349 float: left;
350 vertical-align: middle;
351 }
352
353 #share-buttons > a > img
354 {
355 width: 56px;
356 height: 56px;
357 }
358
359 #share-buttons > a
360 {
361 margin: 0 0 0 4px;
362 text-decoration: none;
363 }
364
365 #share-buttons
366 {
367 width: auto;
368 margin: 0px auto 0 auto;
369 height: 59px;
370 float: left;
371 cursor: pointer;
372 }
373
374 #dataCorruptionWarning
375 {
376 font-size: 200%;
377 line-height: 140%;
378 margin: 20px;
379 padding: 20px;
380 border: 3px solid red;
381 border-radius: 10px;
382 }
383
384 /*social */
322 385
323 #social ul 386 #social ul
324 { 387 {
325 list-style: none; 388 list-style: none;
326 display: inline-block; 389 display: inline-block;
327 padding: 0; 390 padding: 0;
328 margin: 0; 391 margin: 0;
329 } 392 }
330 393
331 #social:hover h1 394 #social:hover h1
(...skipping 24 matching lines...) Expand all
356 bottom: 0px; 419 bottom: 0px;
357 } 420 }
358 421
359 .share-button 422 .share-button
360 { 423 {
361 display: inline-block; 424 display: inline-block;
362 width: 82px; 425 width: 82px;
363 height: 82px; 426 height: 82px;
364 } 427 }
365 428
366 #share-facebook
367 {
368 background-image: url(social/facebook.png);
369 }
370
371 #share-twitter
372 {
373 background-image: url(social/twitter.png);
374 }
375
376 #share-gplus
377 {
378 background-image: url(social/gplus.png);
379 }
380
381 #glass-pane, #share-popup 429 #glass-pane, #share-popup
382 { 430 {
383 visibility: hidden; 431 visibility: hidden;
384 opacity: 0; 432 opacity: 0;
385 -webkit-transition-property: opacity, visibility; 433 -webkit-transition-property: opacity, visibility;
386 -moz-transition-property: opacity, visibility; 434 -moz-transition-property: opacity, visibility;
387 -o-transition-property: opacity, visibility; 435 -o-transition-property: opacity, visibility;
388 -ms-transition-property: opacity, visibility; 436 -ms-transition-property: opacity, visibility;
389 transition-property: opacity, visibility; 437 transition-property: opacity, visibility;
390 } 438 }
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
427 475
428 #share-popup.visible 476 #share-popup.visible
429 { 477 {
430 -webkit-transition-duration: 0.15s; 478 -webkit-transition-duration: 0.15s;
431 -moz-transition-duration: 0.15s; 479 -moz-transition-duration: 0.15s;
432 -o-transition-duration: 0.15s; 480 -o-transition-duration: 0.15s;
433 -ms-transition-duration: 0.15s; 481 -ms-transition-duration: 0.15s;
434 transition-duration: 0.15s; 482 transition-duration: 0.15s;
435 } 483 }
436 484
485
437 .toggle 486 .toggle
438 { 487 {
439 cursor: pointer; 488 cursor: pointer;
440 position: absolute; 489 position: relative;
441 display: inline-block; 490 display: inline-block;
442 top: 50%; 491 top: 50%;
443 height: 22px; 492 height: 22px;
444 margin: -21px 0px 7px 0px; 493 margin: 28px 0px 7px 20px;
445 border-radius: 9999px; 494 border-radius: 9999px;
446 box-shadow: 0 0 0 1px #999; 495 box-shadow: 0 0 0 1px #999;
447 overflow: hidden; 496 overflow: hidden;
448 -moz-user-select: none; 497 -moz-user-select: none;
449 -webkit-user-select: none; 498 -webkit-user-select: none;
450 user-select: none; 499 user-select: none;
451 } 500 }
452 501
453 .toggle:active 502 .toggle:active
454 { 503 {
455 cursor: wait; 504 cursor: wait;
456 } 505 }
457 506
458 .toggle-on, .toggle-off 507 .toggle-on, .toggle-off
459 { 508 {
460 min-width: 42px; 509 min-width: 42px;
461 height: 100%; 510 height: 100%;
462 font-size: 11px; 511 font-size: 11px;
463 font-weight: 500; 512 font-weight: 500;
464 text-align: center; 513 text-align: center;
465 line-height: 25px; 514 line-height: 23px;
466 } 515 }
467 516
468 .toggle-on 517 .toggle-on
469 { 518 {
470 padding: 0px 30px 0px 10px; 519 padding: 0px 30px 0px 10px;
471 color: rgba(255,255,255, 0.8); 520 color: rgba(255,255,255, 0.8);
472 text-shadow: 1px 1px rgba(0,0,0,0.2); 521 text-shadow: 1px 1px rgba(0,0,0,0.2);
473 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2); 522 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2);
474 background: rgb(69,163,31); 523 background: rgb(69,163,31);
475 } 524 }
476 525
477 .toggle-off 526 .toggle-off
478 { 527 {
479 padding: 0px 10px 0px 30px; 528 padding: 0px 10px 0px 30px;
480 color: rgba(0,0,0,0.6); 529 color: rgba(0,0,0,0.6);
481 text-shadow: 1px 1px rgba(255,255,255,0.2); 530 text-shadow: 1px 1px rgba(255,255,255,0.2);
482 background: #cfcfcf; 531 background: #cfcfcf;
483 background: -moz-linear-gradient(top, #cfcfcf 0%, #f5f5f5 100%); 532 background: -moz-linear-gradient(top, #cfcfcf 0%, #f5f5f5 100%);
484 background: -webkit-linear-gradient(top, #cfcfcf 0%,#f5f5f5 100%); 533 background: -webkit-linear-gradient(top, #cfcfcf 0%,#f5f5f5 100%);
485 background: linear-gradient(to bottom, #cfcfcf 0%,#f5f5f5 100%); 534 background: linear-gradient(to bottom, #cfcfcf 0%,#f5f5f5 100%);
486 } 535 }
487 536
537
488 .toggle-blob 538 .toggle-blob
489 { 539 {
490 position: absolute; 540 position: absolute;
491 top: 0px; 541 top: 0px;
492 right: 0px; 542 right: 0px;
493 height: 100%; 543 height: 100%;
494 width: 22px; 544 width: 22px;
495 border-radius: 50px; 545 border-radius: 50px;
496 box-shadow: 1px 1px 2px #888; 546 box-shadow: 1px 1px 2px #888;
497 background: #cfcfcf; 547 background: #cfcfcf;
498 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%); 548 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%);
499 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%); 549 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%);
500 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%); 550 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%);
501 } 551 }
502 552
503 .off .toggle-on 553 .off .toggle-on
504 { 554 {
505 margin-top: -22px; 555 margin-top: -22px;
506 } 556 }
507 557
508 .off .toggle-blob 558 .off .toggle-blob
509 { 559 {
510 left: 0px; 560 left: 0px;
511 right: auto; 561 right: auto;
512 } 562 }
513 563
564 #donate
565 {
566 height: 24px;
567 display: block;
568 float: left;
569 margin: 3px 12px 10px 4px;
570 font-size: 16px;
571 line-height: 24px;
572 color: #003366 !important;
573 cursor: pointer;
574 font-weight: bold;
575 padding: 3px 16px;
576 text-decoration: none;
577 border-radius: 20px;
578 border: 1px solid #FF9933;
579 overflow: hidden;
580 font-family: arial, sans-serif;
581 background-image: url(donate.png);
582 background-repeat: repeat-x;
583 }
584
585
514 /* Adjust font size on smaller screens */ 586 /* Adjust font size on smaller screens */
515 @media (max-height: 800px) 587 @media (max-height: 800px)
516 { 588 {
517 body 589 body
518 { 590 {
519 font-size: 19px; 591 /*font-size: 19px;*/
520 } 592 }
521 } 593 }
522 594
523 @media (max-height: 750px) 595 @media (max-height: 750px)
524 { 596 {
525 body 597 body
526 { 598 {
527 font-size: 17px; 599 /*font-size: 17px;*/
528 } 600 }
529 } 601 }
530 602
531 @media (max-height: 700px) 603 @media (max-height: 700px)
532 { 604 {
533 body 605 body
534 { 606 {
535 font-size: 16px; 607 /*font-size: 16px;*/
536 } 608 }
537 } 609 }
OLDNEW

Powered by Google App Engine
This is Rietveld