Left: | ||
Right: |
OLD | NEW |
---|---|
1 /* | 1 /* |
2 * This file is part of Adblock Plus <https://adblockplus.org/>, | 2 * This file is part of Adblock Plus <https://adblockplus.org/>, |
3 * Copyright (C) 2006-present eyeo GmbH | 3 * Copyright (C) 2006-present 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 { | 18 @font-face |
19 font-family: "CreteRound"; | 19 { |
20 font-family: "Source Sans Pro"; | |
20 font-style: normal; | 21 font-style: normal; |
21 src: url(fonts/CreteRound-Regular.otf); | 22 font-weight: 400; |
23 font-stretch: normal; | |
22 src: local ("Ø"), | 24 src: local ("Ø"), |
23 /*local ("Ø") forces using no local font called CreteRound*/ | 25 url(fonts/SourceSansPro-Regular.woff) format("woff"); |
24 url(fonts/CreteRound-Regular.otf) format("otf"); | 26 } |
25 } | 27 |
26 | 28 @font-face |
juliandoucette
2017/10/30 15:02:28
NIT: new adblockplus.org is currently using semi-b
| |
27 @font-face { | 29 { |
28 font-family: "CreteRound"; | 30 font-family: "Source Sans Pro"; |
29 font-style: italic; | 31 font-style: bold; |
30 src: url(fonts/CreteRound-Italic.otf); | 32 font-weight: 700; |
33 font-stretch: normal; | |
31 src: local ("Ø"), | 34 src: local ("Ø"), |
32 /*local ("Ø") forces using no local font called CreteRound*/ | 35 url(fonts/SourceSansPro-bold.woff) format("woff"); |
33 url(fonts/CreteRound-Italic.otf) format("otf"); | 36 } |
37 | |
38 html | |
39 { | |
40 font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; | |
34 } | 41 } |
35 | 42 |
36 body | 43 body |
37 { | 44 { |
38 font-family: Helvetica, Arial, sans-serif; | |
39 font-size: 15px; | |
40 line-height: 140%; | |
41 color: #7f776b; | |
42 background-color: #f8f6f2; | |
43 background-image: url(background-main.png); | |
44 margin: 0; | 45 margin: 0; |
45 padding: 0; | 46 padding: 0; |
46 } | 47 } |
47 | 48 |
48 a, a:link, a:visited | 49 .container |
juliandoucette
2017/10/30 15:02:28
NIT: Both of these styles are covered by default.c
martin
2018/01/30 14:10:04
Done.
| |
49 { | 50 { |
50 color: #5a84b3; | 51 max-width: 100%; |
52 padding: 0px 1em; | |
53 } | |
54 | |
55 #main-content-container { | |
juliandoucette
2017/10/30 15:02:28
NIT: .container already applies margin 0 auto. It
martin
2018/01/30 14:10:04
Done.
| |
56 margin: 0 auto 8em; | |
57 } | |
58 | |
59 .ta-centre | |
60 { | |
61 text-align: center; | |
62 } | |
63 | |
64 @media (max-width: 992px) | |
65 { | |
66 #content > .one-third | |
67 { | |
68 padding: 3em 2em; | |
69 border-bottom: 1px solid #d3d3d3; | |
70 } | |
71 #content > .one-third:last-child { | |
72 border-bottom: none; | |
73 } | |
74 } | |
75 | |
76 /****************************************************************************** | |
77 * .content | |
78 *****************************************************************************/ | |
79 | |
80 .content h1, | |
81 .content h2, | |
82 .content h3, | |
83 .content h4, | |
84 .content h5 | |
85 { | |
86 font-weight: bold; | |
87 margin: 32px 0px; | |
88 margin: 2rem 0rem; | |
89 } | |
90 | |
91 .content h1 { font-size: 1.8em; } | |
92 .content h2 { font-size: 1.4em; } | |
93 .content h3 { font-size: 1.3em; } | |
94 .content h4 { font-size: 1.2em; } | |
95 .content h5 { font-size: 1.1em; } | |
96 | |
97 @media(min-width: 768px) | |
98 { | |
99 .content h1 { font-size: 2.4em; } | |
100 .content h2 { font-size: 1.6em; } | |
101 } | |
102 | |
103 .content a, | |
104 .content a:visited | |
105 { | |
106 color: #C70D2C; | |
107 } | |
108 | |
109 | |
110 /******************************************************************************* | |
111 * #navbar | |
112 ******************************************************************************/ | |
113 | |
114 #navbar | |
115 { | |
116 height: 4em; | |
117 background-color: #c70d2c; | |
118 } | |
119 | |
120 #navbar li | |
121 { | |
122 list-style-type: none; | |
123 } | |
124 | |
125 /* padding provided by navbar contents */ | |
126 .navbar-container | |
127 { | |
128 width: 80%; | |
129 margin: 0 auto; | |
130 } | |
131 | |
132 /* full-width under .container max-width */ | |
133 @media(max-width: 1199px) | |
134 { | |
135 .navbar-container | |
136 { | |
137 width: 100%; | |
138 } | |
139 } | |
140 | |
141 /* #navbar #navbar-logo | |
142 ****************************************************************************** / | |
143 | |
144 #navbar-logo | |
145 { | |
146 /* padding is visible in hover background-color change */ | |
147 padding: 0em 1em; | |
148 color: #fff; | |
149 } | |
150 | |
151 #navbar-logo:hover, | |
152 #navbar-logo:active, | |
153 #navbar-logo:focus | |
154 { | |
155 background-color: #AE0013; | |
156 text-decoration: none; | |
157 } | |
158 | |
159 #navbar-logo, | |
160 #navbar-logo > * | |
161 { | |
162 float: left; | |
163 } | |
164 | |
165 [dir="rtl"] #navbar-logo, | |
166 [dir="rtl"] #navbar-logo > * | |
167 { | |
168 float: right; | |
169 } | |
170 | |
171 #navbar-logo img | |
172 { | |
173 height: 4em; | |
174 padding: 0.5em 0em; | |
175 margin: 0em 1em 0em 0em; | |
176 } | |
177 | |
178 [dir="rtl"] #navbar-logo > img | |
179 { | |
180 margin: 0em 0em 0em 1em; | |
181 } | |
182 | |
183 #navbar-logo > span | |
184 { | |
185 /* full-height: 2.91 * 1.375 = ~4em */ | |
186 line-height: 2.91em; | |
187 font-size: 1.375em; | |
188 } | |
189 | |
190 /* #navbar #navbar-menu-toggle | |
191 ****************************************************************************** / | |
192 | |
193 #navbar-menu-toggle | |
194 { | |
195 float: right; | |
196 padding: 1em; | |
197 } | |
198 | |
199 [dir="rtl"] #navbar-menu-toggle | |
200 { | |
201 float: left; | |
202 } | |
203 | |
204 /* show on mobile */ | |
205 #navbar-menu-toggle, | |
206 #navbar-menu-toggle > img | |
207 { | |
208 display: block; | |
209 } | |
210 | |
211 /* hide on desktop */ | |
212 @media(min-width: 992px) | |
213 { | |
214 #navbar-menu-toggle | |
215 { | |
216 display: none; | |
217 } | |
218 } | |
219 | |
220 #navbar-menu-toggle > img | |
221 { | |
222 /* plus 2em padding = 4em */ | |
223 height: 2em; | |
224 } | |
225 | |
226 #navbar-menu-toggle:hover, | |
227 #navbar-menu-toggle:active, | |
228 #navbar-menu-toggle:focus | |
229 { | |
230 background-color: #AE0013; | |
231 } | |
232 | |
233 /* #navbar #navbar-menu | |
234 ****************************************************************************** / | |
235 | |
236 #navbar-menu a | |
237 { | |
238 display: block; | |
239 color: #fff; | |
240 text-decoration: none; | |
241 } | |
242 | |
243 /* #navbar #navbar-menu (desktop) | |
244 ****************************************************************************** / | |
245 | |
246 @media(min-width: 992px) | |
247 { | |
248 #navbar-menu | |
249 { | |
250 float: right; | |
251 } | |
252 | |
253 [dir="rtl"] #navbar-menu | |
254 { | |
255 float: left; | |
256 } | |
257 | |
258 #navbar-menu > li, | |
259 #navbar-menu > li > a | |
260 { | |
261 display: inline-block; | |
262 } | |
263 | |
264 #navbar-menu > li > a | |
265 { | |
266 padding: 0em 1em; | |
267 line-height: 4em; | |
268 } | |
269 | |
270 #navbar-menu > li > a:hover, | |
271 #navbar-menu > li > a:active, | |
272 #navbar-menu > li > a:focus | |
273 { | |
274 background-color: #AE0013; | |
275 } | |
276 | |
277 /* #navbar #navbar-menu #navbar-locale-menu | |
278 **************************************************************************** / | |
279 | |
280 #navbar-locale-menubar | |
281 { | |
282 position: relative; | |
283 } | |
284 | |
285 #navbar-locale-menu | |
286 { | |
287 position: absolute; | |
288 min-width: 16em; | |
289 max-height: 20em; | |
290 max-height: 50vh; | |
291 top: 100%; | |
292 right: 0px; | |
293 overflow: auto; | |
294 z-index: 9001; | |
295 background-color: #292929; | |
296 } | |
297 | |
298 [dir="rtl"] #navbar-locale-menu | |
299 { | |
300 right: auto; | |
301 left: 0px; | |
302 } | |
303 } | |
304 | |
305 /* #navbar #navbar-menu (mobile) | |
306 ****************************************************************************** / | |
307 | |
308 @media(max-width: 991px) | |
309 { | |
310 #navbar-menu | |
311 { | |
312 display: none; | |
313 float: left; | |
314 clear: both; | |
315 width: 100%; | |
316 background-color: #292929; | |
317 } | |
318 | |
319 #navbar-menu.visible | |
320 { | |
321 display: block; | |
322 } | |
323 | |
324 #navbar-menu li a | |
325 { | |
326 padding: 0.75em 1em; | |
327 } | |
328 | |
329 #navbar-menu li a:hover, | |
330 #navbar-menu li a:active, | |
331 #navbar-menu li a:focus | |
332 { | |
333 background-color: #434343; | |
334 } | |
335 } | |
336 | |
337 /****************************************************************************** | |
338 * Main Page Content | |
339 *****************************************************************************/ | |
340 | |
341 #installation-status-header | |
342 { | |
343 text-align: center; | |
344 background: #f9f9f9; | |
345 padding: 4em 0; | |
346 margin-bottom: 4em; | |
347 } | |
348 | |
349 #installation-status-header > h1 { | |
350 text-transform: uppercase; | |
351 } | |
352 | |
353 .section-header > h2 | |
354 { | |
355 margin: 1em 0 0; | |
356 } | |
357 | |
358 .button-primary | |
359 { | |
360 display: inline-block; | |
361 text-decoration: none; | |
362 text-transform: uppercase; | |
363 color: #fff !important; | |
364 text-align: center; | |
365 width: 100%; | |
366 border-radius: 6px; | |
367 padding: 1em 0; | |
368 background: #C70D2C; | |
369 } | |
370 | |
371 .store-buttons | |
372 { | |
373 width: 100%; | |
374 display: flex; | |
375 align-items: center; | |
376 justify-content: center; | |
377 } | |
378 | |
379 .store-button | |
380 { | |
381 display: block; | |
382 width: 180px; | |
383 height: 58px; | |
384 border-radius: 6px; | |
385 background: #000; | |
386 } | |
387 | |
388 .store-button > img | |
389 { | |
390 height: 54px; | |
391 } | |
392 | |
393 .applestore-button | |
394 { | |
395 margin-right: 1em; | |
396 } | |
397 | |
398 [dir="rtl"] .appstore-button | |
399 { | |
400 margin-right: 0; | |
401 margin-left: 1em; | |
402 } | |
403 | |
404 @media (max-width: 1280px) | |
405 { | |
406 .store-buttons | |
407 { | |
408 flex-direction: column; | |
409 } | |
410 | |
411 .store-button | |
412 { | |
413 width: 100%; | |
414 } | |
415 .applestore-button | |
416 { | |
417 margin: 0 0 1em; | |
418 } | |
419 } | |
420 | |
421 #installation-status-header > h1 | |
422 { | |
423 font-size: 3em; | |
424 margin: 0; | |
425 } | |
426 | |
427 /******************************************************************************* | |
428 * #footer | |
429 ******************************************************************************/ | |
430 | |
431 #footer | |
432 { | |
433 overflow: auto; | |
434 margin-top: 2em; | |
435 padding: 2em 0em; | |
436 color: #ececec; | |
437 background-color: #292929; | |
438 font-size: 0.9em; | |
439 } | |
440 | |
441 /* #footer body | |
442 ****************************************************************************** / | |
443 | |
444 #footer h5 | |
445 { | |
446 margin-top: 1em; | |
447 margin-bottom: 1.5em; | |
448 } | |
449 | |
450 #footer h5:after | |
451 { | |
452 content: ""; | |
453 display: block; | |
454 width: 1.25em; | |
455 height: 0.125em; | |
456 margin-top: 0.5em; | |
457 background-color: #ececec; | |
458 } | |
459 | |
460 #footer ul | |
461 { | |
462 padding: 0em; | |
463 list-style-type: none; | |
464 } | |
465 | |
466 #footer a | |
467 { | |
468 color: #ececec; | |
469 } | |
470 | |
471 #footer a:hover, | |
472 #footer a:active, | |
473 #footer a:focus | |
474 { | |
475 color: #fff; | |
51 text-decoration: underline; | 476 text-decoration: underline; |
52 } | 477 } |
53 | 478 |
54 a:hover | 479 /* #footer #social-list |
55 { | 480 ****************************************************************************** / |
56 text-decoration: none; | 481 |
57 } | 482 #social-list ul |
58 | 483 { |
59 button | 484 /* negative margin canceled out by li margin below */ |
60 { | 485 margin: 0em -0.375em; |
61 cursor: pointer; | 486 } |
62 } | 487 |
63 | 488 #social-list li |
64 ul | 489 { |
65 { | 490 float: left; |
66 margin: 0; | 491 margin: 0em 0.375em; |
67 padding: 0; | 492 } |
68 } | 493 |
69 | 494 [dir="rtl"] #social-list li |
70 li | 495 { |
71 { | 496 float: right; |
72 margin: 0; | 497 } |
73 padding: 0; | 498 |
74 list-style-type: none; | 499 #social-list img |
75 } | 500 { |
76 | 501 height: 2em; |
77 header | 502 } |
78 { | 503 |
79 background-image: url(background.png); | 504 @media(min-width: 1200px) |
80 background-repeat: repeat-x; | 505 { |
81 width: 100%; | 506 #social-list img |
82 padding-top: 25px; | 507 { |
83 } | 508 height: 3em; |
84 | 509 } |
85 header h1 | 510 } |
86 { | 511 |
87 font-size: 24px; | 512 /* #footer #footer-legal |
88 font-weight: normal; | 513 ****************************************************************************** / |
89 color: #57ab5b; | 514 |
90 text-align: center; | 515 #footer-legal |
91 margin: 21px auto; | 516 { |
92 padding: 16px 0px; | 517 margin-top: 1em; |
93 border: 1px #57ab5b; | 518 } |
94 border-style: dashed none; | 519 |
95 /* border parallel fix - 957px is the value | 520 @media(min-width: 1200px) |
96 * closest to 960px(page width) which makes | 521 { |
97 * the dashed border parallel | 522 #footer-legal |
98 */ | 523 { |
99 max-width: 957px; | 524 margin-top: 2em; |
100 } | 525 } |
101 | 526 } |
102 h1, | 527 |
103 h2, | 528 /* #footer #footer-legal #legal-list |
104 h3 | 529 ****************************************************************************** / |
105 { | 530 |
106 font-family: CreteRound, Helvetica, Arial, sans-serif; | 531 #legal-list li |
107 } | 532 { |
108 | 533 float: left; |
109 h2 | 534 } |
110 { | 535 |
111 font-size: 26px; | 536 [dir="rtl"] #legal-list li |
112 font-weight: lighter; | 537 { |
113 color: #968d81; | 538 float: right; |
114 line-height: 28px; | 539 } |
115 text-align: center; | 540 |
116 margin: 0; | 541 #legal-list li:after |
117 padding: 0; | 542 { |
118 } | 543 margin: 0em 0.375em; |
119 | 544 } |
120 h3 | 545 |
121 { | 546 /* IE9+ only */ |
122 font-size: 22px; | 547 #legal-list li::after |
123 color: #7F776B; | 548 { |
124 font-weight: normal; | 549 content: "|" |
125 margin-top: 0px; | 550 } |
126 margin-bottom: 10px; | 551 |
127 padding: 0; | 552 #legal-list li:last-of-type::after |
128 line-height: 24px; | 553 { |
129 } | 554 content: none; |
130 | 555 } |
131 h4 | 556 |
132 { | 557 /* float copyright and legal links left and right on ~desktop */ |
133 font-size: 15px; | 558 @media(min-width: 1200px) |
134 color: #7f776b; | 559 { |
135 font-weight: normal; | 560 #copyright-notice |
136 text-align: center; | 561 { |
137 margin: 0; | 562 float: left; |
138 padding: 0; | 563 } |
139 } | 564 |
140 | 565 [dir="rtl"] #copyright-notice |
141 section | 566 { |
142 { | 567 float: right; |
143 margin: 0 auto; | 568 } |
144 margin-bottom: 30px; | 569 |
145 max-width: 960px; | 570 #legal-list |
146 background-image: url(background.png); | 571 { |
147 padding: 40px 100px; | 572 float: right; |
148 box-sizing: border-box; | 573 } |
149 } | 574 |
150 | 575 [dir="rtl"] #legal-list |
151 #general | 576 { |
152 { | 577 float: left; |
153 display: table; | 578 } |
154 padding-left: 0px; | 579 } |
155 padding-right: 0px; | 580 |
156 } | 581 /* hide all footer links except #social-list on ~mobile */ |
157 | 582 @media(max-width: 767px) |
158 #general > .block | 583 { |
159 { | 584 #footer .column |
160 display: table-cell; | 585 { |
161 width: 50%; | 586 display: none; |
162 vertical-align: top; | 587 } |
163 padding: 0px 50px; | 588 |
164 border: dashed 0 #969085; | 589 /* overriding display:none above */ |
165 -webkit-border-start-width: 1px; | 590 #footer #social-list |
166 -moz-border-start-width: 1px; | |
167 border-inline-start-width: 1px; | |
168 } | |
169 | |
170 #general > .block:first-child | |
171 { | |
172 border: none; | |
173 } | |
174 | |
175 #acceptable-ads-block h2 | |
176 { | |
177 margin-bottom: 34px; | |
178 } | |
179 | |
180 #abb-promotion-block:lang(fr) | |
181 { | |
182 display: none; | |
183 } | |
184 | |
185 #abb-promotion-block | |
186 { | |
187 text-align: center; | |
188 } | |
189 | |
190 #abb-promotion-block h2 | |
191 { | |
192 color: #7795b6; | |
193 margin-bottom: 40px; | |
194 } | |
195 | |
196 #abb-promotion-block a | |
197 { | |
198 border: solid 1px #446a96; | |
199 border-radius: 5px; | |
200 display: inline-block; | |
201 padding: 6px 16px; | |
202 background: -webkit-linear-gradient(bottom, #294e76, #6b92be); | |
203 background: linear-gradient(to top, #294e76, #6b92be); | |
204 text-decoration: none; | |
205 text-align: start; | |
206 } | |
207 | |
208 #abb-promotion-block a > div | |
209 { | |
210 display: table-cell; | |
211 vertical-align: middle; | |
212 padding: 6px; | |
213 } | |
214 | |
215 #abb-promotion-block .title | |
216 { | |
217 font-size: 21px; | |
218 color: #ffffff; | |
219 font-weight: bold; | |
220 } | |
221 | |
222 #abb-promotion-block .subtitle | |
223 { | |
224 font-size: 12px; | |
225 color: #9ab7d6; | |
226 } | |
227 | |
228 #abb-promotion-block a:hover | |
229 { | |
230 box-shadow: 0px 0px 5px #5D5D5D; | |
231 } | |
232 | |
233 #abb-promotion-block a:active | |
234 { | |
235 box-shadow: 0px 0px 5px 1px #5D5D5D; | |
236 } | |
237 | |
238 section > p | |
239 { | |
240 margin-top: 15px; | |
241 } | |
242 | |
243 #logo | |
244 { | |
245 margin: 0 auto; | |
246 height: 128px; | |
247 width: 128px; | |
248 display: block; | |
249 } | |
250 | |
251 #share | |
252 { | |
253 background-image: url(background-share.png); | |
254 text-align: center; | |
255 font-family: CreteRound, Helvetica, Arial, sans-serif; | |
256 } | |
257 | |
258 #share h2 | |
259 { | |
260 margin-bottom: 30px; | |
261 } | |
262 | |
263 #share h2, | |
264 #share h2 > a | |
265 { | |
266 color: #fff; | |
267 } | |
268 | |
269 #share h2 > a:hover | |
270 { | |
271 color: #2e5075; | |
272 } | |
273 | |
274 #share span | |
275 { | |
276 color: #bed1e6; | |
277 text-align: center; | |
278 line-height: 34px; | |
279 font-size: 22px; | |
280 display: block; | |
281 } | |
282 | |
283 #donate:hover, .share-buttons a:hover | |
284 { | |
285 box-shadow: 0px 0px 0px 2px #8ca7c4; | |
286 border-radius: 30px; | |
287 } | |
288 | |
289 #share > .block | |
290 { | |
291 display: inline-block; | |
292 vertical-align: top; | |
293 width: 49%; | |
294 padding: 5px 0px; | |
295 border: 1px dashed #37506d; | |
296 border-style: none dashed; | |
297 } | |
298 | |
299 #share > .block:last-child | |
300 { | |
301 -webkit-border-start-style: none; | |
302 -moz-border-start-style: none; | |
303 } | |
304 | |
305 #share > .block > span | |
306 { | |
307 margin: 10px 20px; | |
308 } | |
309 | |
310 .share-buttons | |
311 { | |
312 margin-top: 6px; | |
313 vertical-align: top; | |
314 /* because inline block creates | |
315 * space if not captured with | |
316 * font-size and line-height 0px | |
317 */ | |
318 font-size: 0px; | |
319 line-height: 0px; | |
320 } | |
321 | |
322 .share-buttons > a | |
323 { | |
324 width: 50px; | |
325 height: 50px; | |
326 margin: 0 8px; | |
327 text-decoration: none; | |
328 display: inline-block; | |
329 } | |
330 | |
331 #share-general, | |
332 #share-chinese:lang(zh) | |
333 { | |
334 display: block; | |
335 } | |
336 | |
337 #share-general:lang(zh), | |
338 #share-chinese | |
339 { | |
340 display: none; | |
341 } | |
342 | |
343 #share-chinese > a | |
344 { | |
345 border-bottom: 2px solid transparent; | |
346 } | |
347 | |
348 #share-chinese > a:hover | |
349 { | |
350 box-shadow: none; | |
351 border-radius: 0; | |
352 border-bottom: 2px solid #8CA7C4; | |
353 } | |
354 | |
355 #share-facebook | |
356 { | |
357 background-image: url(social/facebook.png); | |
358 background-repeat: no-repeat; | |
359 } | |
360 | |
361 #share-twitter | |
362 { | |
363 background-image: url(social/twitter.png); | |
364 background-repeat: no-repeat; | |
365 } | |
366 | |
367 #share-gplus | |
368 { | |
369 background-image: url(social/googleplus.png); | |
370 background-repeat: no-repeat; | |
371 } | |
372 | |
373 #share-renren | |
374 { | |
375 background-image: url(social/renren.png); | |
376 background-repeat: no-repeat; | |
377 } | |
378 | |
379 #share-weibo | |
380 { | |
381 background-image: url(social/weibo.png); | |
382 background-repeat: no-repeat; | |
383 } | |
384 | |
385 .warning | |
386 { | |
387 font-size: 160%; | |
388 border: 3px dashed red; | |
389 text-align: center; | |
390 line-height: 1.3em; | |
391 } | |
392 | |
393 #social ul | |
394 { | |
395 list-style: none; | |
396 display: inline-block; | |
397 padding: 0; | |
398 margin: 0; | |
399 } | |
400 | |
401 #social:hover h1 | |
402 { | |
403 opacity: 0; | |
404 } | |
405 | |
406 #social ul:hover li { | |
407 opacity: 0.3; | |
408 } | |
409 | |
410 #social ul li | |
411 { | |
412 display: inline-block; | |
413 margin: 0px 5px; | |
414 -webkit-transition: opacity .5s ease, bottom .3s ease; | |
415 transition: opacity .5s ease, bottom .3s ease; | |
416 position: relative; | |
417 bottom: -30px; | |
418 } | |
419 | |
420 #social ul li:hover | |
421 { | |
422 opacity: 1.0; | |
423 bottom: 0px; | |
424 } | |
425 | |
426 .share-button | |
427 { | |
428 display: inline-block; | |
429 width: 82px; | |
430 height: 82px; | |
431 } | |
432 | |
433 /* Change order of the blocks for French */ | |
434 #content:lang(fr) | |
435 { | |
436 display: table; | |
437 margin: auto; | |
438 caption-side: bottom; | |
439 } | |
440 | |
441 #share:lang(fr) | |
442 { | |
443 display: table-caption; | |
444 } | |
445 | |
446 #donate | |
447 { | |
448 height: 21px; | |
449 display: inline-block; | |
450 margin-top: 15px; | |
451 margin-bottom: 2px; | |
452 font-size: 16px; | |
453 color: #003366; | |
454 cursor: pointer; | |
455 font-weight: bold; | |
456 padding: 5px 18px; | |
457 text-decoration: none; | |
458 border-radius: 20px; | |
459 border: 1px solid #FF9933; | |
460 overflow: hidden; | |
461 font-family: arial, sans-serif; | |
462 background-image: url(donate.png); | |
463 background-repeat: repeat-x; | |
464 } | |
465 | |
466 footer | |
467 { | |
468 margin: 0 auto 30px; | |
469 max-width: 960px; | |
470 text-align: center; | |
471 } | |
472 | |
473 @media (max-width: 970px) | |
474 { | |
475 header | |
476 { | |
477 background-size: 100px 57px; | |
478 } | |
479 | |
480 #logo | |
481 { | |
482 width: 64px; | |
483 height: 64px; | |
484 } | |
485 | |
486 section | |
487 { | |
488 padding: 40px 20px; | |
489 } | |
490 | |
491 #general, | |
492 #general > .block, | |
493 #share > .block | |
494 { | 591 { |
495 display: block; | 592 display: block; |
496 } | 593 } |
497 | 594 } |
498 #general > .block | |
499 { | |
500 width: auto; | |
501 margin-left: 20px; | |
502 margin-right: 20px; | |
503 padding: 10px 0px; | |
504 border-width: 1px 0px 0px; | |
505 } | |
506 | |
507 #share > .block | |
508 { | |
509 width: auto; | |
510 padding: 20px 0px; | |
511 border-style: dashed none none; | |
512 } | |
513 | |
514 #donate, | |
515 .share-buttons | |
516 { | |
517 margin-top: 10px; | |
518 } | |
519 } | |
OLD | NEW |