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

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

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

Powered by Google App Engine
This is Rietveld