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

Delta Between Two Patch Sets: chrome/skin/firstRun.css

Issue 11039060: first run page redesign (Closed)
Left Patch Set: chinese version added Created Sept. 23, 2013, 1:43 p.m.
Right Patch Set: improve after wladimirs code review Created Oct. 4, 2013, 4:50 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
LEFTRIGHT
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
(...skipping 15 matching lines...) Expand all
26 26
27 @font-face { 27 @font-face {
28 font-family: 'CreteRound'; 28 font-family: 'CreteRound';
29 font-style: italic; 29 font-style: italic;
30 src: url(fonts/CreteRound-Italic.otf); 30 src: url(fonts/CreteRound-Italic.otf);
31 src: local ('Ø'), 31 src: local ('Ø'),
32 /*local ('Ø') forces using no local font called CreteRound*/ 32 /*local ('Ø') forces using no local font called CreteRound*/
33 url(fonts/CreteRound-Italic.otf) format('otf'); 33 url(fonts/CreteRound-Italic.otf) format('otf');
34 } 34 }
35 35
36 *
37 {
38 margin: 0;
39 padding: 0;
40 }
41
42 body 36 body
43 { 37 {
44 font-family: Helvetica, Arial, sans-serif; 38 font-family: Helvetica, Arial, sans-serif;
45 font-size: 15px; 39 font-size: 15px;
46 line-height: 140%; 40 line-height: 140%;
47 color: #7f776b; 41 color: #7f776b;
48 background-color: #f8f6f2; 42 background-color: #f8f6f2;
49 background-image: url(background-main.png); 43 background-image: url(background-main.png);
44 margin: 0;
45 padding: 0;
50 } 46 }
51 47
52 a, a:link, a:visited 48 a, a:link, a:visited
53 { 49 {
54 color: #5a84b3; 50 color: #5a84b3;
55 text-decoration: underline; 51 text-decoration: underline;
56 } 52 }
57 53
58 a:hover 54 a:hover
59 { 55 {
60 text-decoration: none; 56 text-decoration: none;
61 } 57 }
62 58
63 button 59 button
64 { 60 {
65 cursor: pointer; 61 cursor: pointer;
66 } 62 }
67 63
64 ul
65 {
66 margin: 0;
67 padding: 0;
68 }
69
68 li 70 li
69 { 71 {
72 margin: 0;
73 padding: 0;
70 list-style-type: none; 74 list-style-type: none;
71 } 75 }
72 76
73 header 77 header
74 { 78 {
75 height: 200px;
76 background-image: url(background.png); 79 background-image: url(background.png);
77 background-repeat: repeat-x; 80 background-repeat: repeat-x;
78 width: 100%; 81 width: 100%;
79 padding: 40px 0 0 0; 82 padding: 40px 0 0 0;
80 } 83 }
81 84
82 header h1 85 header h1
83 { 86 {
84 font-size: 24px; 87 font-size: 24px;
85 font-weight: normal; 88 font-weight: normal;
86 margin: 0 auto;
87 color: #57ab5b; 89 color: #57ab5b;
88 text-align: center; 90 text-align: center;
89 margin: 21px auto; 91 margin: 21px auto;
90 padding: 16px 0 14px 0; 92 padding: 16px 0 14px 0;
91 border: 1px #57ab5b; 93 border: 1px #57ab5b;
92 border-style: dashed none; 94 border-style: dashed none;
93 /* border parallel fix - 957px is the value 95 /* border parallel fix - 957px is the value
94 * closest to 960px(page width) which makes 96 * closest to 960px(page width) which makes
95 * the dashed border parallel 97 * the dashed border parallel
96 */ 98 */
97 max-width: 957px; 99 max-width: 957px;
98 } 100 }
99 101
100 strong
101 {
102 font-weight: 600;
103 }
104
105 h1,h2,h3 102 h1,h2,h3
106 { 103 {
107 font-family: CreteRound, Helvetica, Arial, sans-serif; 104 font-family: CreteRound, Helvetica, Arial, sans-serif;
108 } 105 }
109 106
110 h2 107 h2
111 { 108 {
112 font-size: 26px; 109 font-size: 26px;
113 font-weight: lighter; 110 font-weight: lighter;
114 color: #968d81; 111 color: #968d81;
115 line-height: 28px; 112 line-height: 28px;
116 text-align: center; 113 text-align: center;
117 114 margin: 0;
115 padding: 0;
118 } 116 }
119 117
120 h3 118 h3
121 { 119 {
122 font-size: 22px; 120 font-size: 22px;
123 color: #7F776B; 121 color: #7F776B;
124 font-weight: normal; 122 font-weight: normal;
125 margin: 0 0 10px 0; 123 margin: 0 0 10px 0;
124 padding: 0;
126 line-height: 24px; 125 line-height: 24px;
127 } 126 }
128 127
129 h4 128 h4
130 { 129 {
131 font-size: 15px; 130 font-size: 15px;
132 color: #7f776b; 131 color: #7f776b;
133 font-weight: normal; 132 font-weight: normal;
134 text-align: center; 133 text-align: center;
134 margin: 0;
135 padding: 0;
135 } 136 }
136 137
137 section 138 section
138 { 139 {
139 margin: 0 auto; 140 margin: 0 auto;
140 margin-bottom: 30px; 141 margin-bottom: 30px;
141 max-width: 760px; 142 max-width: 760px;
142 background-image: url(background.png); 143 background-image: url(background.png);
143 padding: 40px 100px; 144 padding: 40px 100px;
144 } 145 }
(...skipping 30 matching lines...) Expand all
175 opacity: 0; 176 opacity: 0;
176 } 177 }
177 178
178 .hide 179 .hide
179 { 180 {
180 display: none; 181 display: none;
181 } 182 }
182 183
183 #can-do-more-overview 184 #can-do-more-overview
184 { 185 {
186 opacity: 1;
187 max-height: 10000px;
185 max-width: 760px; 188 max-width: 760px;
186 min-height: 140px;
187 margin: 30px 100px 0 100px; 189 margin: 30px 100px 0 100px;
188 font-size: 0px; 190 font-size: 0px;
189 /* hides appearing spacings because of 191 /* hides appearing spacings because of
190 * using display: inline-block*/ 192 * using display: inline-block*/
191 cursor: pointer; 193 cursor: pointer;
192 transition: opacity 0.5s ease-in-out; 194 transition: opacity 0.3s step-end;
Wladimir Palant 2013/10/05 09:15:59 Shouldn't it be ease-in-out rather than step-end h
193 -moz-transition: opacity 0.5s ease-in-out; 195 -moz-transition: opacity 0.3s ease-in-out;
194 -webkit-transition: 0.5s linear; 196 -webkit-transition: opacity 0.3s ease-in-out;
Thomas Greiner 2013/09/27 10:17:20 Property name is missing and behavior is inconsist
197 }
198
199 #can-do-more.expanded > #can-do-more-overview, #can-do-more.expanded > #can-do-m ore-overview li, #can-do-more.expanded > #can-do-more-overview div, #can-do-more .expanded > #can-do-more-overview h4
200 {
201 opacity: 0;
202 max-height: 0px;
203 width: 0;
204 margin: 0;
205 padding: 0;
206 transition: none;
207 -moz-transition: none;
208 -webkit-transition: none;
209 -o-transition: none;
Wladimir Palant 2013/10/05 09:15:59 We don't set -o-transition above, we shouldn't nee
195 } 210 }
196 211
197 #can-do-more-overview > li:hover 212 #can-do-more-overview > li:hover
198 { 213 {
199 background-image: url("background-main.png"); 214 background-image: url("background-main.png");
200 text-decoration: none; 215 text-decoration: none;
201 } 216 }
202 217
203 #can-do-more-overview > li 218 #can-do-more-overview > li
204 { 219 {
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
246 } 261 }
247 262
248 .feature-tracking-image 263 .feature-tracking-image
249 { 264 {
250 background-image: url(features/tracking.png); 265 background-image: url(features/tracking.png);
251 background-repeat: no-repeat; 266 background-repeat: no-repeat;
252 } 267 }
253 268
254 #can-do-more-expanded 269 #can-do-more-expanded
255 { 270 {
271 opacity: 0;
272 max-height: 0;
273 }
274
275 #can-do-more.expanded > #can-do-more-expanded
276 {
277 opacity: 1;
278 max-height: 10000px;
256 margin: 30px 100px 0 100px; 279 margin: 30px 100px 0 100px;
257 transition: opacity 0.5s ease-in-out; 280 transition: opacity 0.5s ease-in-out;
258 -moz-transition: opacity 0.5s ease-in-out; 281 -moz-transition: opacity 0.5s ease-in-out;
259 -webkit-transition: 0.5s linear; 282 -webkit-transition: opacity 0.5s ease-in-out;
Thomas Greiner 2013/09/27 10:17:20 Property name is missing and behavior is inconsist
260 } 283 transition-delay: 0.2s;
261 284 -webkit-transition-delay: 0.2s;
Wladimir Palant 2013/10/05 09:15:59 -moz-transition-delay seems to be missing here. Th
262 #features 285 }
263 { 286
264 display: block; 287 #features, .feature:not([hidden]), .feature-image, .feature-description, .featur e-description, .feature-description-textblock, .feature-description-textblock > span, .feature-image
288 {
289 width: 0;
290 height: 0;
291 margin: 0;
292 padding: 0;
293 transition: none;
294 -moz-transition: none;
295 -webkit-transition: none;
296 -o-transition: none;
297 }
298
299
300 #can-do-more.expanded #features,#can-do-more.expanded .feature:not([hidden]),#ca n-do-more.expanded .feature-image,#can-do-more.expanded .feature-description,#ca n-do-more.expanded .feature-description,#can-do-more.expanded .feature-descripti on-textblock,#can-do-more.expanded .feature-description-textblock > span,#can-do -more.expanded .feature-image
301 {
302 width: auto;
303 height: auto;
304 margin: auto;
305 padding: auto;
306 transition-property: all;
307 -moz-transition-property: all;
308 -webkit-transition-property: all;
309 -o-transition-property: all;
Wladimir Palant 2013/10/05 09:15:59 As above, -o-transition-property and -moz-transiti
310 transition-duration: 0.5s;
311 -webkit-transition-duration: 0.5s;
312 transition-timing-function: ease-in-out;
313 -webkit-transition-timing-function: ease-in-out;
314 }
315
316 #can-do-more.expanded #features
317 {
265 border-spacing: 10px; 318 border-spacing: 10px;
266 margin: 0px; 319 margin: 0px;
267 padding: 0px; 320 padding: 0px;
268 } 321 }
269 322
270 .feature:not([hidden]) 323 #can-do-more.expanded .feature:not([hidden])
271 { 324 {
272 display: block; 325 display: block;
273 list-style-type: none; 326 list-style-type: none;
274 padding: 30px 0; 327 padding: 30px 0;
275 padding-bottom: 20px; 328 padding-bottom: 20px;
276 border-top: 1px dashed #c0bebb; 329 border-top: 1px dashed #c0bebb;
277 } 330 }
278 331
279 .feature-image, .feature-description 332 #can-do-more.expanded .feature-image, #can-do-more.expanded .feature-description
280 { 333 {
281 display: inline-block; 334 display: inline-block;
282 *display: inline; /* IE6 inline-block fix */ 335 *display: inline; /* IE6 inline-block fix */
283 *zoom: 1; 336 *zoom: 1;
284 vertical-align: top; 337 vertical-align: top;
285 } 338 }
286 339
287 .feature-description 340 #can-do-more.expanded .feature-description
288 { 341 {
289 margin: 0px 0px 0 20px; 342 margin: 0px 0px 0 20px;
290 width: 625px; 343 width: 625px;
291 max-width: 85%; 344 max-width: 85%;
292 } 345 }
293 346
294 .feature-description-textblock 347 #can-do-more.expanded .feature-description-textblock
295 { 348 {
296 width: 480px; 349 width: 480px;
297 max-width: 100%; 350 max-width: 100%;
298 margin: 0 40px 0 0; 351 margin: 0 40px 0 0;
299 display: inline-block; 352 display: inline-block;
300 } 353 }
301 354
302 .feature-description-textblock > span 355 #can-do-more.expanded .feature-description-textblock > span
303 { 356 {
304 margin: 15px 0 0 0; 357 margin: 15px 0 0 0;
305 } 358 }
306 359
307 .feature-image 360 #can-do-more.expanded .feature-image
308 { 361 {
309 width: 59px; 362 width: 59px;
310 height: 59px; 363 height: 59px;
311 margin: 8px 0 10px 20px; 364 margin: 8px 0 10px 20px;
312 } 365 }
313 366
314 #activate-features 367 #activate-features
315 { 368 {
316 width: 100%; 369 width: 100%;
317 background-image: url("background-candomore.png"); 370 background-image: url("background-candomore.png");
(...skipping 30 matching lines...) Expand all
348 #label-show-expanded 401 #label-show-expanded
349 { 402 {
350 display: none; 403 display: none;
351 } 404 }
352 405
353 #label-show-overview 406 #label-show-overview
354 { 407 {
355 display: block; 408 display: block;
356 } 409 }
357 410
358 #activate-features-label:hover 411 #activate-features-label:hover
Thomas Greiner 2013/10/05 15:51:19 This is a weird behavior. It's neither restricted
359 { 412 {
360 color: #1f6822; 413 color: #1f6822;
361 } 414 }
362 415
363 #can-do-more.expanded .arrow 416 #can-do-more.expanded .arrow
364 { 417 {
365 background-image: url("arrow-up.png"); 418 background-image: url("arrow-up.png");
366 } 419 }
367 420
368 .arrow 421 .arrow
(...skipping 285 matching lines...) Expand 10 before | Expand all | Expand 10 after
654 } 707 }
655 708
656 .toggle-on, .toggle-off 709 .toggle-on, .toggle-off
657 { 710 {
658 min-width: 42px; 711 min-width: 42px;
659 height: 100%; 712 height: 100%;
660 font-size: 11px; 713 font-size: 11px;
661 font-weight: 500; 714 font-weight: 500;
662 text-align: center; 715 text-align: center;
663 line-height: 23px; 716 line-height: 23px;
717 border-radius: 9999px;
718 -moz-border-radius: 9999px;
664 -webkit-border-radius: 9999px; 719 -webkit-border-radius: 9999px;
Thomas Greiner 2013/09/27 10:17:20 Please don't only do it for WebKit browsers.
665 } 720 }
666 721
667 .toggle-on 722 .toggle-on
668 { 723 {
669 padding: 0px 30px 0px 10px; 724 padding: 0px 30px 0px 10px;
670 color: rgba(255,255,255, 0.8); 725 color: rgba(255,255,255, 0.8);
671 text-shadow: 1px 1px rgba(0,0,0,0.2); 726 text-shadow: 1px 1px rgba(0,0,0,0.2);
672 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2); 727 box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2);
673 background: rgb(69,163,31); 728 background: rgb(69,163,31);
674 } 729 }
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
728 background-image: url(donate.png); 783 background-image: url(donate.png);
729 background-repeat: repeat-x; 784 background-repeat: repeat-x;
730 } 785 }
731 786
732 footer 787 footer
733 { 788 {
734 margin: 0 auto 30px; 789 margin: 0 auto 30px;
735 max-width: 960px; 790 max-width: 960px;
736 text-align: center; 791 text-align: center;
737 } 792 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld