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: Created July 15, 2013, 12:39 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
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 17
18 { 18 @font-face {
19 clear: both; 19 font-family: 'CreteRound';
20 } 20 font-style: normal;
21 21 src: url(fonts/CreteRound-Regular.otf);
22 * 22 src: local ('Ø'),
23 { 23 /*local ('Ø') forces using no local font called CreteRound*/
24 margin: 0; 24 url(fonts/CreteRound-Regular.otf) format('otf');
25 padding: 0; 25 }
26
27 @font-face {
28 font-family: 'CreteRound';
29 font-style: italic;
30 src: url(fonts/CreteRound-Italic.otf);
31 src: local ('Ø'),
32 /*local ('Ø') forces using no local font called CreteRound*/
33 url(fonts/CreteRound-Italic.otf) format('otf');
26 } 34 }
27 35
28 body 36 body
29 { 37 {
30 font-family: Segoe UI, Arial, Helvetica, sans-serif; 38 font-family: Helvetica, Arial, sans-serif;
31 font-size: 14px; 39 font-size: 15px;
32 line-height: 140%; 40 line-height: 140%;
33 color: #7f776b; 41 color: #7f776b;
34 background-color: #f8f6f2; 42 background-color: #f8f6f2;
35 background-image: url(background-main.png); 43 background-image: url(background-main.png);
44 margin: 0;
45 padding: 0;
36 } 46 }
37 47
38 a, a:link, a:visited 48 a, a:link, a:visited
39 { 49 {
40 color: #5a84b3; 50 color: #5a84b3;
41 text-decoration: underline; 51 text-decoration: underline;
42 font-style: italic; 52 }
43 } 53
44 54 a:hover
45 button, .arrow 55 {
56 text-decoration: none;
57 }
58
59 button
46 { 60 {
47 cursor: pointer; 61 cursor: pointer;
48 } 62 }
49 63
64 ul
65 {
66 margin: 0;
67 padding: 0;
68 }
69
50 li 70 li
51 { 71 {
72 margin: 0;
73 padding: 0;
52 list-style-type: none; 74 list-style-type: none;
53
54 } 75 }
55 76
56 header 77 header
57 { 78 {
58 height: 200px;
59 background-image: url(background.png); 79 background-image: url(background.png);
60 background-repeat: repeat-x; 80 background-repeat: repeat-x;
61 width: 100%; 81 width: 100%;
62 padding: 40px 0 0 0; 82 padding: 40px 0 0 0;
63 } 83 }
64 84
65 header h1 85 header h1
66 { 86 {
67 font-size: 24px; 87 font-size: 24px;
68 font-weight: normal; 88 font-weight: normal;
69 margin: 0 auto; 89 color: #57ab5b;
70 display: block; 90 text-align: center;
71 color: #464746; 91 margin: 21px auto;
72 text-align: center; 92 padding: 16px 0 14px 0;
73 margin: 30px 0 0 0; 93 border: 1px #57ab5b;
74 94 border-style: dashed none;
75 } 95 /* border parallel fix - 957px is the value
76 96 * closest to 960px(page width) which makes
77 strong 97 * the dashed border parallel
78 { 98 */
79 font-weight: 600; 99 max-width: 957px;
80 } 100 }
81 101
82 h2 { 102 h1,h2,h3
83 font-size: 30px; 103 {
104 font-family: CreteRound, Helvetica, Arial, sans-serif;
105 }
106
107 h2
108 {
109 font-size: 26px;
84 font-weight: lighter; 110 font-weight: lighter;
85 color: #968d81; 111 color: #968d81;
86 line-height: 30px; 112 line-height: 28px;
87 113 text-align: center;
88 } 114 margin: 0;
89 115 padding: 0;
90 h3 { 116 }
91 font-size: 24px; 117
92 color: #4d4d4d; 118 h3
119 {
120 font-size: 22px;
121 color: #7F776B;
93 font-weight: normal; 122 font-weight: normal;
94 margin: 0 0 10px 0; 123 margin: 0 0 10px 0;
95 } 124 padding: 0;
96 125 line-height: 24px;
97 h4 { 126 }
98 font-size: 16px; 127
128 h4
129 {
130 font-size: 15px;
99 color: #7f776b; 131 color: #7f776b;
100 font-weight: normal; 132 font-weight: normal;
101 text-align: center; 133 text-align: center;
134 margin: 0;
135 padding: 0;
102 } 136 }
103 137
104 section 138 section
105 { 139 {
106 margin: 0 auto; 140 margin: 0 auto;
107 margin-bottom: 30px; 141 margin-bottom: 30px;
108 max-width: 760px; 142 max-width: 760px;
109 background-image: url(background.png); 143 background-image: url(background.png);
110 padding: 40px 100px; 144 padding: 40px 100px;
111 } 145 }
112 146
113 section > p 147 section > p
114 { 148 {
115 margin: 15px 0 0 0; 149 margin: 15px 0 0 0;
116 } 150 }
117 151
118 152
119 #logo 153 #logo
120 { 154 {
121 margin: 0 auto; 155 margin: 0 auto;
122 height: 100px; 156 height: 100px;
123 width: 99px; 157 width: 99px;
124 display: block; 158 display: block;
159 background-image: url(abp-icon-big.png);
160 background-repeat: no-repeat;
125 } 161 }
126 162
127 #can-do-more 163 #can-do-more
128 { 164 {
129 max-width: 960px !important; 165 max-width: 960px;
130 padding: 40px 0px 0px 0px !important; 166 padding: 40px 0px 0px 0px;
131 } 167 }
132 168
133 #can-do-more > h2 169 #can-do-more > h2
134 { 170 {
135 margin: 0 100px; 171 margin: 0 100px;
136 } 172 }
137 173
138 174 .fade
139 #can-do-more > ul 175 {
140 { 176 opacity: 0;
177 }
178
179 .hide
180 {
181 display: none;
182 }
183
184 #can-do-more-overview
185 {
186 opacity: 1;
187 max-height: 10000px;
141 max-width: 760px; 188 max-width: 760px;
142 height: 140px; 189 margin: 30px 100px 0 100px;
143 margin: 40px 100px 0 100px; 190 font-size: 0px;
144 } 191 /* hides appearing spacings because of
145 192 * using display: inline-block*/
146 #can-do-more > ul > li 193 cursor: pointer;
147 { 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
148 width: 250px; 195 -moz-transition: opacity 0.3s ease-in-out;
196 -webkit-transition: opacity 0.3s ease-in-out;
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
210 }
211
212 #can-do-more-overview > li:hover
213 {
214 background-image: url("background-main.png");
215 text-decoration: none;
216 }
217
218 #can-do-more-overview > li
219 {
220 width: 230px;
149 height: 115px; 221 height: 115px;
150 float: left; 222 display: inline-block;
151 border-right: 1px dashed #c7c6c2; 223 border-right: 1px dashed #c7c6c2;
152 padding: 20px 0 0 0; 224 padding: 20px 10px 0 10px;
153 } 225 vertical-align: top;
154 226 text-decoration: underline;
155 #can-do-more > ul > h3 227 -webkit-backface-visibility: hidden;
156 { 228 /* hides the 1px movement chrome bug
157 margin: 20px 0 0 0; 229 * which appears while transition.
158 } 230 */
159 231 }
160 #can-do-more > ul > li > img 232
233 #can-do-more-overview > li > div
161 { 234 {
162 width: 59px; 235 width: 59px;
163 height: 59px; 236 height: 59px;
164 display: block; 237 display: block;
165 margin: 0 auto; 238 margin: 0 auto;
166 } 239 }
167 240
168 #can-do-more > ul > li > h4 241 #can-do-more-overview > li > h4
169 { 242 {
170 margin: 10px 0 0 0; 243 margin: 15px 0 0 0;
171 } 244 }
172 245
173 #can-do-more #feature-first 246 #can-do-more #feature-first
174 { 247 {
175 border-left: 1px dashed #c7c6c2; 248 border-left: 1px dashed #c7c6c2;
176 } 249 }
177 250
251 .feature-malware-image
252 {
253 background-image: url(features/malware.png);
254 background-repeat: no-repeat;
255 }
256
257 .feature-social-image
258 {
259 background-image: url(features/social.png);
260 background-repeat: no-repeat;
261 }
262
263 .feature-tracking-image
264 {
265 background-image: url(features/tracking.png);
266 background-repeat: no-repeat;
267 }
268
178 #can-do-more-expanded 269 #can-do-more-expanded
179 { 270 {
180 margin: 40px 100px 0 100px; 271 opacity: 0;
181 display: none; 272 max-height: 0;
182 } 273 }
183 274
184 #features 275 #can-do-more.expanded > #can-do-more-expanded
185 { 276 {
186 display: block; 277 opacity: 1;
278 max-height: 10000px;
279 margin: 30px 100px 0 100px;
280 transition: opacity 0.5s ease-in-out;
281 -moz-transition: opacity 0.5s ease-in-out;
282 -webkit-transition: opacity 0.5s ease-in-out;
283 transition-delay: 0.2s;
284 -webkit-transition-delay: 0.2s;
Wladimir Palant 2013/10/05 09:15:59 -moz-transition-delay seems to be missing here. Th
285 }
286
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 {
187 border-spacing: 10px; 318 border-spacing: 10px;
188 margin: 0px; 319 margin: 0px;
189 padding: 0px; 320 padding: 0px;
190 } 321 }
191 322
192 .feature:not([hidden]) 323 #can-do-more.expanded .feature:not([hidden])
193 { 324 {
194 display: block; 325 display: block;
195 list-style-type: none; 326 list-style-type: none;
196 padding: 30px 0; 327 padding: 30px 0;
197 padding-bottom: 20px; 328 padding-bottom: 20px;
198 border-top: 1px dashed #c0bebb; 329 border-top: 1px dashed #c0bebb;
199 } 330 }
200 331
201 .feature-image, .feature-description 332 #can-do-more.expanded .feature-image, #can-do-more.expanded .feature-description
202 { 333 {
203 display: inline-block; 334 display: inline-block;
204 *display: inline; /* IE6 inline-block fix */ 335 *display: inline; /* IE6 inline-block fix */
205 *zoom: 1; 336 *zoom: 1;
206 vertical-align: top; 337 vertical-align: top;
207 } 338 }
208 339
209 .feature-description 340 #can-do-more.expanded .feature-description
210 { 341 {
211 width: 500px; 342 margin: 0px 0px 0 20px;
212 margin: 0px 20px; 343 width: 625px;
213 } 344 max-width: 85%;
214 345 }
215 .feature-description > span 346
347 #can-do-more.expanded .feature-description-textblock
348 {
349 width: 480px;
350 max-width: 100%;
351 margin: 0 40px 0 0;
352 display: inline-block;
353 }
354
355 #can-do-more.expanded .feature-description-textblock > span
216 { 356 {
217 margin: 15px 0 0 0; 357 margin: 15px 0 0 0;
218 } 358 }
219 359
220 .feature-image 360 #can-do-more.expanded .feature-image
221 { 361 {
222 width: 59px; 362 width: 59px;
223 height: 59px; 363 height: 59px;
224 margin: 0 0 0 20px; 364 margin: 8px 0 10px 20px;
225 }
226
227 .feature button
228 {
229 cursor: pointer;
230 position: relative;
231 top: 0px;
232 padding: 5px 10px;
233 *padding: 2px 3px;
234 font-weight: none;
235 font-size: inherit;
236 color: white;
237 text-shadow: 2px 2px 2px #327d14;
238 border: none;
239 border-radius: 3px;
240 box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
241 background-color: #62c52b;
242 background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
243 background: -moz-linear-gradient(top, #62c52b, #4f9d22);
244 background: -o-linear-gradient(top, #62c52b, #4f9d22);
245 background: -ms-linear-gradient(top, #62c52b, #4f9d22);
246 background: linear-gradient(top, #62c52b, #4f9d22);
247 -webkit-transition: box-shadow 0.3s ease;
248 -moz-transition: box-shadow 0.3s ease;
249 -o-transition: box-shadow 0.3s ease;
250 -ms-transition: box-shadow 0.3s ease;
251 transition: box-shadow 0.3s ease;
252 }
253
254 .feature button:hover
255 {
256 box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
257 }
258
259 .feature button:active
260 {
261 top: 3px;
262 top: 0px\9;
263 box-shadow: 0px 0px 7px #486c15;
264 background-color: #4f9d22;
265 background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
266 background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
267 background: -o-linear-gradient(bottom, #62c52b, #4f9d22);
268 background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
269 background: linear-gradient(bottom, #62c52b, #4f9d22);
270 -webkit-transition: none;
271 -moz-transition: none;
272 -o-transition: none;
273 -ms-transition: none;
274 transition: none;
275 *zoom: 1;
276 }
277
278 .feature button.disable
279 {
280 text-shadow: 2px 2px 2px #9d4f22;
281 box-shadow: 0 1px 0 0 #9d4f22, 0 2px 0 0 #999;
282 background-color: #c5622b;
283 background: -webkit-linear-gradient(top, #c5622b, #9d4f22);
284 background: -moz-linear-gradient(top, #c5622b, #9d4f22);
285 background: -o-linear-gradient(top, #c5622b, #9d4f22);
286 background: -ms-linear-gradient(top, #c5622b, #9d4f22);
287 background: linear-gradient(top, #c5622b, #9d4f22);
288 }
289
290 .feature button.disable:hover
291 {
292 box-shadow: 0px 2px 7px #9d4f22, 0 1px 0 0 #9d4f22;
293 }
294
295 .feature button.disable:active
296 {
297 top: 3px;
298 top: 0px\9;
299 box-shadow: 0px 0px 7px #9d4f22;
300 background-color: #9d4f22;
301 background: -webkit-linear-gradient(bottom, #c5622b, #9d4f22);
302 background: -moz-linear-gradient(bottom, #c5622b, #9d4f22);
303 background: -o-linear-gradient(bottom, #c5622b, #9d4f22);
304 background: -ms-linear-gradient(bottom, #c5622b, #9d4f22);
305 background: linear-gradient(bottom, #c5622b, #9d4f22);
306 -webkit-transition: none;
307 -moz-transition: none;
308 -o-transition: none;
309 -ms-transition: none;
310 transition: none;
311 *zoom: 1;
312 } 365 }
313 366
314 #activate-features 367 #activate-features
315 { 368 {
316 width: 100%; 369 width: 100%;
317 height: 36px;
318 background-image: url("background-candomore.png"); 370 background-image: url("background-candomore.png");
319 margin: 30px 0 0 0; 371 margin: 30px 0 0 0;
320 padding: 14px 0 0 0; 372 padding: 14px 0 14px 0;
321 cursor: pointer; 373 cursor: pointer;
374 text-align: center;
375 white-space: nowrap;
376 }
377
378 #activate-features-label
379 {
380 display: inline-block;
381 width: 86%;
322 color: #fff; 382 color: #fff;
323 font-size: 24px; 383 font-size: 22px;
384 text-align: center;
324 font-style: italic; 385 font-style: italic;
325 text-decoration: underline; 386 font-family: CreteRound, Helvetica, Arial, sans-serif;
326 text-align: center; 387 -moz-transition: opacity 0.5s ease-in-out;
388 transition: opacity 0.5s ease-in-out;
389 }
390
391 #can-do-more.expanded #label-show-expanded
392 {
393 display: block;
394 }
395
396 #can-do-more.expanded #label-show-overview
397 {
398 display: none;
399 }
400
401 #label-show-expanded
402 {
403 display: none;
404 }
405
406 #label-show-overview
407 {
408 display: block;
409 }
410
411 #activate-features-label:hover
Thomas Greiner 2013/10/05 15:51:19 This is a weird behavior. It's neither restricted
412 {
413 color: #1f6822;
414 }
415
416 #can-do-more.expanded .arrow
417 {
418 background-image: url("arrow-up.png");
419 }
420
421 .arrow
422 {
423 width: 29px;
424 height: 22px;
425 vertical-align: bottom;
426 display: inline-block;
427 background-image: url("arrow-down.png");
327 } 428 }
328 429
329 #share 430 #share
330 { 431 {
331 background-image: url(background-share.png); 432 background-image: url(background-share.png);
332 padding: 50px 140px 40px 140px !important; 433 padding: 50px 100px 40px 100px;
333 width: 680px; 434 max-width: 760px;
334 } 435 text-align: center;
335 436 font-family: CreteRound, Helvetica, Arial, sans-serif;
336 #share > #text
337 {
338 margin: 10px 0 0 0;
339 float: left;
340 max-width: 570px;
341 } 437 }
342 438
343 #share h2 439 #share h2
344 { 440 {
345 color: #fff; 441 color: #fff;
346 margin: 0px 8px 10px 0; 442 margin: 0 0 30px 0;
347 text-align: left; 443 }
444
445 #share h2 > a
446 {
447 color: #fff;
448 }
449
450 #share h2 > a:hover
451 {
452 color: #2e5075;
453 }
454
455 #share span
456 {
457 color: #bed1e6;
458 text-align: center;
459 line-height: 34px;
460 font-size: 22px;
348 display: block; 461 display: block;
349 float: left; 462 }
350 vertical-align: middle; 463
351 } 464 #donate:hover, .share-buttons a:hover
352 465 {
353 #share-buttons > a > img 466 -moz-box-shadow: 0px 0px 0px 2px #8ca7c4;
354 { 467 -webkit-box-shadow: 0px 0px 0px 2px #8ca7c4;
355 width: 56px; 468 box-shadow: 0px 0px 0px 2px #8ca7c4;
356 height: 56px; 469 border-radius: 30px;
357 } 470 }
358 471
359 #share-buttons > a 472 #donate-block span, #share-block span
360 { 473 {
361 margin: 0 0 0 4px; 474 margin: 13px 20px 10px 20px;
475 }
476
477 #donate-block, #share-block
478 {
479 min-width: 250px;
480 display: inline-block;
481 vertical-align: top;
482 padding: 20px 0 0 0;
483 }
484
485 #donate-block
486 {
487 border: 1px dashed #37506d;
488 border-style: none dashed;
489 width: 50%;
490 }
491
492 #share-block
493 {
494 border-right: 1px dashed #37506d;
495 width: 49%;
496 }
497
498 .share-buttons
499 {
500 margin: 6px 0 0 0;
501 cursor: pointer;
502 vertical-align: top;
503 /* because inline block creates
504 * space if not captured with
505 * font-size and line-height 0px
506 */
507 font-size: 0px;
508 line-height: 0px;
509 }
510
511 .share-buttons > a
512 {
513 width: 50px;
514 height: 50px;
515 margin: 0 8px;
362 text-decoration: none; 516 text-decoration: none;
363 } 517 display: inline-block;
364 518 }
365 #share-buttons 519
366 { 520 html[lang^="zh_"] #share-chinese,
367 width: auto; 521 html:not([lang^="zh_"]) #share-general
368 margin: 0px auto 0 auto; 522 {
369 height: 59px; 523 display: block;
370 float: left; 524 }
371 cursor: pointer; 525
526 html[lang^="zh_"] #share-general,
527 html:not([lang^="zh_"]) #share-chinese
528 {
529 display: none;
530 }
531
532 #share-chinese > a
533 {
534 border-bottom: 2px solid transparent;
535 }
536
537 #share-chinese > a:hover
538 {
539 -moz-box-shadow: none;
540 -webkit-box-shadow: none;
541 box-shadow: none;
542 border-radius: 0;
543 border-bottom: 2px solid #8CA7C4;
544 }
545
546 #share-facebook
547 {
548 background-image: url(social/facebook.png);
549 background-repeat: no-repeat;
550 }
551
552 #share-twitter
553 {
554 background-image: url(social/twitter.png);
555 background-repeat: no-repeat;
556 }
557
558 #share-gplus
559 {
560 background-image: url(social/googleplus.png);
561 background-repeat: no-repeat;
562 }
563
564 #share-renren
565 {
566 background-image: url(social/renren.png);
567 background-repeat: no-repeat;
568 }
569
570 #share-weibo
571 {
572 background-image: url(social/weibo.png);
573 background-repeat: no-repeat;
372 } 574 }
373 575
374 #dataCorruptionWarning 576 #dataCorruptionWarning
375 { 577 {
376 font-size: 200%; 578 font-size: 160%;
377 line-height: 140%; 579 border: 3px dashed red;
378 margin: 20px; 580 text-align: center;
379 padding: 20px; 581 }
380 border: 3px solid red;
381 border-radius: 10px;
382 }
383
384 /*social */
385 582
386 #social ul 583 #social ul
387 { 584 {
388 list-style: none; 585 list-style: none;
389 display: inline-block; 586 display: inline-block;
390 padding: 0; 587 padding: 0;
391 margin: 0; 588 margin: 0;
392 } 589 }
393 590
394 #social:hover h1 591 #social:hover h1
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after
439 636
440 #glass-pane 637 #glass-pane
441 { 638 {
442 position: fixed; 639 position: fixed;
443 top: 0; 640 top: 0;
444 right: 0; 641 right: 0;
445 bottom: 0; 642 bottom: 0;
446 left: 0; 643 left: 0;
447 background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%; 644 background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%;
448 z-index: 101; 645 z-index: 101;
449
450 -webkit-transition-duration: 0.2s; 646 -webkit-transition-duration: 0.2s;
451 -moz-transition-duration: 0.2s; 647 -moz-transition-duration: 0.2s;
452 -o-transition-duration: 0.2s; 648 -o-transition-duration: 0.2s;
453 -ms-transition-duration: 0.2s; 649 -ms-transition-duration: 0.2s;
454 transition-duration: 0.2s; 650 transition-duration: 0.2s;
455 } 651 }
456 652
457 #share-popup 653 #share-popup
458 { 654 {
459 position: absolute; 655 position: absolute;
(...skipping 15 matching lines...) Expand all
475 671
476 #share-popup.visible 672 #share-popup.visible
477 { 673 {
478 -webkit-transition-duration: 0.15s; 674 -webkit-transition-duration: 0.15s;
479 -moz-transition-duration: 0.15s; 675 -moz-transition-duration: 0.15s;
480 -o-transition-duration: 0.15s; 676 -o-transition-duration: 0.15s;
481 -ms-transition-duration: 0.15s; 677 -ms-transition-duration: 0.15s;
482 transition-duration: 0.15s; 678 transition-duration: 0.15s;
483 } 679 }
484 680
485
486 .toggle 681 .toggle
487 { 682 {
488 cursor: pointer; 683 cursor: pointer;
489 position: relative; 684 position: relative;
490 display: inline-block; 685 display: inline-block;
491 top: 50%; 686 vertical-align: top;
492 height: 22px; 687 height: 22px;
493 margin: 28px 0px 7px 0px; 688 margin: 32px 0px 7px 0px;
494 border-radius: 9999px; 689 border-radius: 9999px;
495 box-shadow: 0 0 0 1px #999; 690 border: 1px solid #999;
496 overflow: hidden; 691 overflow: hidden;
497 -moz-user-select: none; 692 -moz-user-select: none;
498 -webkit-user-select: none; 693 -webkit-user-select: none;
499 user-select: none; 694 user-select: none;
500 } 695 }
501 696
697 .toggle:hover
698 {
699 -moz-box-shadow: 0px 0px 3px 0px #968d81;
700 -webkit-box-shadow: 0px 3px 0px 0px #968d81;
701 box-shadow: 0px 0px 3px 0px #968d81;
702 }
703
502 .toggle:active 704 .toggle:active
503 { 705 {
504 cursor: wait; 706 cursor: wait;
505 } 707 }
506 708
507 .toggle-on, .toggle-off 709 .toggle-on, .toggle-off
508 { 710 {
509 min-width: 42px; 711 min-width: 42px;
510 height: 100%; 712 height: 100%;
511 font-size: 11px; 713 font-size: 11px;
512 font-weight: 500; 714 font-weight: 500;
513 text-align: center; 715 text-align: center;
514 line-height: 23px; 716 line-height: 23px;
717 border-radius: 9999px;
718 -moz-border-radius: 9999px;
719 -webkit-border-radius: 9999px;
515 } 720 }
516 721
517 .toggle-on 722 .toggle-on
518 { 723 {
519 padding: 0px 30px 0px 10px; 724 padding: 0px 30px 0px 10px;
520 color: rgba(255,255,255, 0.8); 725 color: rgba(255,255,255, 0.8);
521 text-shadow: 1px 1px rgba(0,0,0,0.2); 726 text-shadow: 1px 1px rgba(0,0,0,0.2);
522 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);
523 background: rgb(69,163,31); 728 background: rgb(69,163,31);
524 } 729 }
525 730
526 .toggle-off 731 .toggle-off
527 { 732 {
528 padding: 0px 10px 0px 30px; 733 padding: 0px 10px 0px 30px;
529 color: rgba(0,0,0,0.6); 734 color: rgba(0,0,0,0.6);
530 text-shadow: 1px 1px rgba(255,255,255,0.2); 735 text-shadow: 1px 1px rgba(255,255,255,0.2);
531 background: #cfcfcf; 736 background: #cfcfcf;
532 background: -moz-linear-gradient(top, #cfcfcf 0%, #f5f5f5 100%); 737 background: -moz-linear-gradient(top, #cfcfcf 0%, #f5f5f5 100%);
533 background: -webkit-linear-gradient(top, #cfcfcf 0%,#f5f5f5 100%); 738 background: -webkit-linear-gradient(top, #cfcfcf 0%,#f5f5f5 100%);
534 background: linear-gradient(to bottom, #cfcfcf 0%,#f5f5f5 100%); 739 background: linear-gradient(to bottom, #cfcfcf 0%,#f5f5f5 100%);
535 } 740 }
536 741
537
538 .toggle-blob 742 .toggle-blob
539 { 743 {
540 position: absolute; 744 position: absolute;
541 top: 0px; 745 top: 0px;
542 right: 0px; 746 right: 0px;
543 height: 100%; 747 height: 100%;
544 width: 22px; 748 width: 22px;
545 border-radius: 50px; 749 border-radius: 50px;
546 box-shadow: 1px 1px 2px #888;
547 background: #cfcfcf; 750 background: #cfcfcf;
548 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%); 751 background: -moz-linear-gradient(bottom, #cfcfcf 0%, #f5f5f5 100%);
549 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%); 752 background: -webkit-linear-gradient(bottom, #cfcfcf 0%,#f5f5f5 100%);
550 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%); 753 background: linear-gradient(to top, #cfcfcf 0%,#f5f5f5 100%);
754 box-shadow: 1px 1px 2px #888;
551 } 755 }
552 756
553 .off .toggle-on 757 .off .toggle-on
554 { 758 {
555 margin-top: -22px; 759 margin-top: -22px;
556 } 760 }
557 761
558 .off .toggle-blob 762 .off .toggle-blob
559 { 763 {
560 left: 0px; 764 left: 0px;
561 right: auto; 765 right: auto;
562 } 766 }
563 767
564 #donate 768 #donate
565 { 769 {
566 height: 24px; 770 height: 21px;
567 display: block; 771 display: inline-block;
568 float: left; 772 margin: 15px 0px 2px 0px;
569 margin: 3px 12px 10px 4px;
570 font-size: 16px; 773 font-size: 16px;
571 line-height: 24px; 774 color: #003366;
572 color: #003366 !important;
573 cursor: pointer; 775 cursor: pointer;
574 font-weight: bold; 776 font-weight: bold;
575 padding: 3px 16px; 777 padding: 5px 18px;
576 text-decoration: none; 778 text-decoration: none;
577 border-radius: 20px; 779 border-radius: 20px;
578 border: 1px solid #FF9933; 780 border: 1px solid #FF9933;
579 overflow: hidden; 781 overflow: hidden;
580 font-family: arial, sans-serif; 782 font-family: arial, sans-serif;
581 background-image: url(donate.png); 783 background-image: url(donate.png);
582 background-repeat: repeat-x; 784 background-repeat: repeat-x;
583 } 785 }
584 786
585 787 footer
586 /* Adjust font size on smaller screens */ 788 {
587 @media (max-height: 800px) 789 margin: 0 auto 30px;
588 { 790 max-width: 960px;
589 body 791 text-align: center;
590 { 792 }
591 /*font-size: 19px;*/
592 }
593 }
594
595 @media (max-height: 750px)
596 {
597 body
598 {
599 /*font-size: 17px;*/
600 }
601 }
602
603 @media (max-height: 700px)
604 {
605 body
606 {
607 /*font-size: 16px;*/
608 }
609 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld