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

Side by Side Diff: skin/firstRun.css

Issue 29565721: No Issue - Implemented first run page Base URL: https://hg.adblockplus.org/adblockplusui/
Patch Set: Included Header / Footer, addressed previous feedback Created Oct. 17, 2017, 2:06 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« firstRun.html ('K') | « skin/defaults.css ('k') | skin/icons/first-run/appstore-bg.svg » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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: 300;
23 font-stretch: normal;
22 src: local ("Ø"), 24 src: local ("Ø"),
23 /*local ("Ø") forces using no local font called CreteRound*/ 25 url(fonts/SourceSansPro-Light.woff) format("otf");
24 url(fonts/CreteRound-Regular.otf) format("otf"); 26 }
25 } 27
26 28 @font-face
27 @font-face { 29 {
28 font-family: "CreteRound"; 30 font-family: "Source Sans Pro";
29 font-style: italic; 31 font-style: normal;
30 src: url(fonts/CreteRound-Italic.otf); 32 font-weight: 400;
33 font-stretch: normal;
31 src: local ("Ø"), 34 src: local ("Ø"),
32 /*local ("Ø") forces using no local font called CreteRound*/ 35 url(fonts/SourceSansPro-Regular.woff) format("woff");
33 url(fonts/CreteRound-Italic.otf) format("otf"); 36 }
37
38 @font-face
39 {
40 font-family: "Source Sans Pro";
41 font-style: normal;
42 font-weight: 700;
43 font-stretch: normal;
44 src: local ("Ø"),
45 url(fonts/SourceSansPro-bold.woff) format("woff");
46 }
47
48
49 html
50 {
51 font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
52 font-size: 16px;
juliandoucette 2017/10/18 10:42:35 This is unnecessary (because the default is 16px)
34 } 53 }
35 54
36 body 55 body
37 { 56 {
38 font-family: Helvetica, Arial, sans-serif; 57 background-color: #fff;
juliandoucette 2017/10/18 10:42:36 This is unnecessary (because the default is white)
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; 58 margin: 0;
45 padding: 0; 59 padding: 0;
46 } 60 }
47 61
48 a, a:link, a:visited 62 .container
49 { 63 {
50 color: #5a84b3; 64 width: 80%;
65 max-width: 100%;
66 margin: 0 auto 8em;
67 padding: 0px 1em;
68 }
69
70 .column-centered-content
juliandoucette 2017/10/18 10:42:35 SuperNIT: We usually call this `ta-centre`
71 {
72 text-align: center;
73 }
74
75 @media (max-width: 992px)
76 {
77 .one-third
juliandoucette 2017/10/18 10:42:37 NIT: This selector is too general (you mean all on
martin 2017/10/20 10:03:28 How about I give the parent div a class of "conten
juliandoucette 2017/10/20 13:50:22 By "body" I didn't mean <body> or `body .one-third
78 {
79 padding: 3em 0;
80 border-bottom: 1px solid #d3d3d3;
81 }
82 }
83
84 /******************************************************************************
85 * .content
juliandoucette 2017/10/18 10:42:35 SuperNIT: You removed the space before the "*" (th
86 *****************************************************************************/
87
88 .content h1,
89 .content h2,
90 .content h3,
91 .content h4,
92 .content h5
93 {
94 font-weight: bold;
95 margin: 32px 0px;
96 margin: 2rem 0rem;
97 }
98
99 .content h1 { font-size: 2.4em; }
juliandoucette 2017/10/18 10:42:37 Note: I have added smaller heading sizes for mobil
martin 2017/10/20 10:03:27 I pulled the latest changes for `website-defaults`
juliandoucette 2017/10/20 13:50:21 Ack. I didn't push this (https://codereview.adbloc
juliandoucette 2017/10/20 14:13:51 Not to mention that this isn't part of website-def
100 .content h2 { font-size: 1.6em; }
101 .content h3 { font-size: 1.3em; }
102 .content h4 { font-size: 1.2em; }
103 .content h5 { font-size: 1.1em; }
104
105 /*******************************************************************************
106 * #navbar
107 ******************************************************************************/
108
109 #navbar
110 {
111 height: 4em;
112 background-color: #c70d2c;
113 }
114
115 #navbar li
116 {
117 list-style-type: none;
118 }
119
120 /* padding provided by navbar contents */
121 .navbar-container
122 {
123 width: 80%;
124 margin: 0 auto;
125 }
126
127 /* full-width under .container max-width */
128 @media(max-width: 1199px)
129 {
130 .navbar-container
131 {
132 width: 100%;
133 }
134 }
135
136 /* #navbar #navbar-logo
137 ******************************************************************************/
138
139 #navbar-logo
140 {
141 /* padding is visible in hover background-color change */
142 padding: 0em 1em;
143 color: #fff;
144 }
145
146 #navbar-logo:hover,
147 #navbar-logo:active,
148 #navbar-logo:focus
149 {
150 background-color: #AE0013;
151 text-decoration: none;
152 }
153
154 #navbar-logo,
155 #navbar-logo > *
156 {
157 float: left;
158 }
159
160 [dir="rtl"] #navbar-logo,
161 [dir="rtl"] #navbar-logo > *
162 {
163 float: right;
164 }
165
166 #navbar-logo img
167 {
168 height: 4em;
169 padding: 0.5em 0em;
170 margin: 0em 1em 0em 0em;
171 }
172
173 [dir="rtl"] #navbar-logo > img
174 {
175 margin: 0em 0em 0em 1em;
176 }
177
178 #navbar-logo > span
179 {
180 /* full-height: 2.91 * 1.375 = ~4em */
181 line-height: 2.91em;
182 font-size: 1.375em;
183 }
184
185 /* #navbar #navbar-menu-toggle
186 ******************************************************************************/
187
188 #navbar-menu-toggle
189 {
190 float: right;
191 padding: 1em;
192 }
193
194 [dir="rtl"] #navbar-menu-toggle
195 {
196 float: left;
197 }
198
199 /* show on mobile */
200 #navbar-menu-toggle,
201 #navbar-menu-toggle > img
202 {
203 display: block;
204 }
205
206 /* hide on desktop */
207 @media(min-width: 992px)
208 {
209 #navbar-menu-toggle
210 {
211 display: none;
212 }
213 }
214
215 #navbar-menu-toggle > img
216 {
217 /* plus 2em padding = 4em */
218 height: 2em;
219 }
220
221 #navbar-menu-toggle:hover,
222 #navbar-menu-toggle:active,
223 #navbar-menu-toggle:focus
224 {
225 background-color: #AE0013;
226 }
227
228 /* #navbar #navbar-menu
229 ******************************************************************************/
230
231 #navbar-menu a
232 {
233 display: block;
234 color: #fff;
235 text-decoration: none;
236 }
237
238 /* #navbar #navbar-menu #navbar-locale-menu
239 ******************************************************************************/
240
241 /* caret */
242 #navbar-locale-selected:after
243 {
244 display: inline-block;
245 width: 0;
246 height: 0;
247 margin: 0em 0em 0em 0.255em;
248 vertical-align: .255em;
249 content: "";
250 border-top: .3em solid;
251 border-right: .3em solid transparent;
252 border-left: .3em solid transparent;
253 }
254
255 [dir="rtl"] #navbar-locale-selected:after
256 {
257 margin: 0em 0.255em 0em 0em;
258 }
259
260 #navbar-locale-menu
261 {
262 display: none;
263 }
264
265 #navbar-locale-menu.visible
266 {
267 display: block;
268 }
269
270 #navbar-locale-menu > li > a
271 {
272 padding: 0.75em 1em;
273 }
274
275 #navbar-locale-menu > li > a:hover,
276 #navbar-locale-menu > li > a:active,
277 #navbar-locale-menu > li > a:focus
278 {
279 background-color: #434343;
280 }
281
282 /* #navbar #navbar-menu (desktop)
283 ******************************************************************************/
284
285 @media(min-width: 992px)
286 {
287 #navbar-menu
288 {
289 float: right;
290 }
291
292 [dir="rtl"] #navbar-menu
293 {
294 float: left;
295 }
296
297 #navbar-menu > li,
298 #navbar-menu > li > a
299 {
300 display: inline-block;
301 }
302
303 #navbar-menu > li > a
304 {
305 padding: 0em 1em;
306 line-height: 4em;
307 }
308
309 #navbar-menu > li > a:hover,
310 #navbar-menu > li > a:active,
311 #navbar-menu > li > a:focus
312 {
313 background-color: #AE0013;
314 }
315
316 /* #navbar #navbar-menu #navbar-locale-menu
317 ****************************************************************************/
318
319 #navbar-locale-menubar
320 {
321 position: relative;
322 }
323
324 #navbar-locale-menu
325 {
326 position: absolute;
327 min-width: 16em;
328 max-height: 20em;
329 max-height: 50vh;
330 top: 100%;
331 right: 0px;
332 overflow: auto;
333 z-index: 9001;
334 background-color: #292929;
335 }
336
337 [dir="rtl"] #navbar-locale-menu
338 {
339 right: auto;
340 left: 0px;
341 }
342 }
343
344 /* #navbar #navbar-menu (mobile)
345 ******************************************************************************/
346
347 @media(max-width: 991px)
348 {
349 #navbar-menu
350 {
351 display: none;
352 float: left;
353 clear: both;
354 width: 100%;
355 background-color: #292929;
356 }
357
358 #navbar-menu.visible
359 {
360 display: block;
361 }
362
363 #navbar-menu li a
364 {
365 padding: 0.75em 1em;
366 }
367
368 #navbar-menu li a:hover,
369 #navbar-menu li a:active,
370 #navbar-menu li a:focus
371 {
372 background-color: #434343;
373 }
374 }
375
juliandoucette 2017/10/18 10:42:36 There should be some sort of separation here so th
376 .installation-status-header
juliandoucette 2017/10/18 10:42:36 See comment in firstRun.html
377 {
378 text-align: center;
379 background: #f9f9f9;
380 padding: 4em 0;
381 margin-bottom: 4em;
382 }
383
384 .section-header > h2
385 {
386 margin: 1em 0 0;
387 }
388
389 .button-primary
390 {
391 display: inline-block;
392 text-decoration: none;
393 text-transform: uppercase;
394 color: #fff !important;
395 text-align: center;
396 width: 100%;
397 border-radius: 6px;
398 padding: 1em 0;
399 background: #C70D2C;
400 }
401
402 .store-buttons
403 {
404 width: 100%;
405 display: flex;
406 align-items: center;
407 justify-content: center;
408 }
409
410 .store-button
411 {
412 display: block;
413 width: 180px;
414 height: 58px;
415 border-radius: 6px;
416 background: #000;
417 }
418
419 .store-button > img
420 {
421 height: 54px;
422 }
423
424 .applestore-button
425 {
426 margin-right: 1em;
427 }
juliandoucette 2017/10/18 10:42:36 Missing right-to-left style [dir="rtl"] .appstore
428
429 @media (max-width: 1280px)
430 {
431 .store-buttons
432 {
433 flex-direction: column;
434 }
435
436 .store-button
437 {
438 width: 100%;
439 }
440 .applestore-button
441 {
442 margin: 0 0 1em;
443 }
444 }
445
446 h1
juliandoucette 2017/10/18 10:42:37 NIT: I think that this selector is too general (I
447 {
448 font-size: 3em;
449 margin: 0;
450 }
451
452 p
juliandoucette 2017/10/18 10:42:36 I think that all of these styles are already cover
453 {
454 margin: 0 0 1em;
455 font-weight: 400;
456 line-height: 150%;
457 }
458
459 .column-description > a
juliandoucette 2017/10/18 10:42:37 I think that this selector is too specific. I thin
martin 2017/10/20 10:03:27 I went for this specific of a selector because whe
juliandoucette 2017/10/20 13:50:21 That's because [the child combinator only matches
460 {
461 color: #C70D2C;
462 text-decoration: none;
463 font-weight: 400;
464 }
465
466 p > a:hover
juliandoucette 2017/10/18 10:42:35 I think that this is already covered by defaults.c
467 {
51 text-decoration: underline; 468 text-decoration: underline;
52 } 469 }
53 470
54 a:hover 471 /*******************************************************************************
55 { 472 * #footer
56 text-decoration: none; 473 ******************************************************************************/
57 } 474
58 475 #footer
59 button 476 {
60 { 477 overflow: auto;
61 cursor: pointer; 478 margin-top: 2em;
62 } 479 padding: 2em 0em;
63 480 color: #ececec;
64 ul 481 background-color: #292929;
65 { 482 font-size: 0.9em;
66 margin: 0; 483 }
67 padding: 0; 484
68 } 485 /* #footer body
69 486 ******************************************************************************/
70 li 487
71 { 488 #footer h5
72 margin: 0; 489 {
73 padding: 0; 490 margin-top: 1em;
491 margin-bottom: 1.5em;
492 }
493
494 #footer h5:after
495 {
496 content: "";
497 display: block;
498 width: 1.25em;
499 height: 0.125em;
500 margin-top: 0.5em;
501 background-color: #ececec;
502 }
503
504 #footer ul
505 {
506 padding: 0em;
74 list-style-type: none; 507 list-style-type: none;
75 } 508 }
76 509
77 header 510 #footer a
78 { 511 {
79 background-image: url(background.png); 512 color: #ececec;
80 background-repeat: repeat-x; 513 }
81 width: 100%; 514
82 padding-top: 25px; 515 #footer a:hover,
83 } 516 #footer a:active,
84 517 #footer a:focus
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 0px;
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,
103 h2,
104 h3
105 {
106 font-family: CreteRound, Helvetica, Arial, sans-serif;
107 }
108
109 h2
110 {
111 font-size: 26px;
112 font-weight: lighter;
113 color: #968d81;
114 line-height: 28px;
115 text-align: center;
116 margin: 0;
117 padding: 0;
118 }
119
120 h3
121 {
122 font-size: 22px;
123 color: #7F776B;
124 font-weight: normal;
125 margin-top: 0px;
126 margin-bottom: 10px;
127 padding: 0;
128 line-height: 24px;
129 }
130
131 h4
132 {
133 font-size: 15px;
134 color: #7f776b;
135 font-weight: normal;
136 text-align: center;
137 margin: 0;
138 padding: 0;
139 }
140
141 section
142 {
143 margin: 0 auto;
144 margin-bottom: 30px;
145 max-width: 960px;
146 background-image: url(background.png);
147 padding: 40px 100px;
148 box-sizing: border-box;
149 }
150
151 #general
152 {
153 display: table;
154 padding-left: 0px;
155 padding-right: 0px;
156 }
157
158 #general > .block
159 {
160 display: table-cell;
161 width: 50%;
162 vertical-align: top;
163 padding: 0px 50px;
164 border: dashed 0 #969085;
165 -webkit-border-start-width: 1px;
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 { 518 {
266 color: #fff; 519 color: #fff;
267 } 520 text-decoration: underline;
268 521 }
269 #share h2 > a:hover 522
270 { 523 /* #footer #social-list
271 color: #2e5075; 524 ******************************************************************************/
272 } 525
273 526 #social-list ul
274 #share span 527 {
275 { 528 /* negative margin canceled out by li margin below */
276 color: #bed1e6; 529 margin: 0em -0.375em;
277 text-align: center; 530 }
278 line-height: 34px; 531
279 font-size: 22px; 532 #social-list li
280 display: block; 533 {
281 } 534 float: left;
282 535 margin: 0em 0.375em;
283 #donate:hover, .share-buttons a:hover 536 }
284 { 537
285 box-shadow: 0px 0px 0px 2px #8ca7c4; 538 [dir="rtl"] #social-list li
286 border-radius: 30px; 539 {
287 } 540 float: right;
288 541 }
289 #share > .block 542
290 { 543 #social-list img
291 display: inline-block; 544 {
292 vertical-align: top; 545 height: 2em;
293 width: 49%; 546 }
294 padding: 5px 0px; 547
295 border: 1px dashed #37506d; 548 @media(min-width: 1200px)
296 border-style: none dashed; 549 {
297 } 550 #social-list img
298 551 {
299 #share > .block:last-child 552 height: 3em;
300 { 553 }
301 -webkit-border-start-style: none; 554 }
302 -moz-border-start-style: none; 555
303 } 556 /* #footer #footer-legal
304 557 ******************************************************************************/
305 #share > .block > span 558
306 { 559 #footer-legal
307 margin: 10px 20px; 560 {
308 } 561 margin-top: 1em;
309 562 }
310 .share-buttons 563
311 { 564 @media(min-width: 1200px)
312 margin-top: 6px; 565 {
313 vertical-align: top; 566 #footer-legal
314 /* because inline block creates 567 {
315 * space if not captured with 568 margin-top: 2em;
316 * font-size and line-height 0px 569 }
317 */ 570 }
318 font-size: 0px; 571
319 line-height: 0px; 572 /* #footer #footer-legal #legal-list
320 } 573 ******************************************************************************/
321 574
322 .share-buttons > a 575 #legal-list li
323 { 576 {
324 width: 50px; 577 float: left;
325 height: 50px; 578 }
326 margin: 0 8px; 579
327 text-decoration: none; 580 [dir="rtl"] #legal-list li
328 display: inline-block; 581 {
329 } 582 float: right;
330 583 }
331 #share-general, 584
332 #share-chinese:lang(zh) 585 #legal-list li:after
333 { 586 {
334 display: block; 587 margin: 0em 0.375em;
335 } 588 }
336 589
337 #share-general:lang(zh), 590 /* IE9+ only */
338 #share-chinese 591 #legal-list li::after
339 { 592 {
340 display: none; 593 content: "|"
341 } 594 }
342 595
343 #share-chinese > a 596 #legal-list li:last-of-type::after
344 { 597 {
345 border-bottom: 2px solid transparent; 598 content: none;
346 } 599 }
347 600
348 #share-chinese > a:hover 601 /* float copyright and legal links left and right on ~desktop */
349 { 602 @media(min-width: 1200px)
350 box-shadow: none; 603 {
351 border-radius: 0; 604 #copyright-notice
352 border-bottom: 2px solid #8CA7C4; 605 {
353 } 606 float: left;
354 607 }
355 #share-facebook 608
356 { 609 [dir="rtl"] #copyright-notice
357 background-image: url(social/facebook.png); 610 {
358 background-repeat: no-repeat; 611 float: right;
359 } 612 }
360 613
361 #share-twitter 614 #legal-list
362 { 615 {
363 background-image: url(social/twitter.png); 616 float: right;
364 background-repeat: no-repeat; 617 }
365 } 618
366 619 [dir="rtl"] #legal-list
367 #share-gplus 620 {
368 { 621 float: left;
369 background-image: url(social/googleplus.png); 622 }
370 background-repeat: no-repeat; 623 }
371 } 624
372 625 /* hide all footer links except #social-list on ~mobile */
373 #share-renren 626 @media(max-width: 767px)
374 { 627 {
375 background-image: url(social/renren.png); 628 #footer .column
376 background-repeat: no-repeat; 629 {
377 } 630 display: none;
378 631 }
379 #share-weibo 632
380 { 633 /* overriding display:none above */
381 background-image: url(social/weibo.png); 634 #footer #social-list
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 { 635 {
495 display: block; 636 display: block;
496 } 637 }
497 638 }
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 }
OLDNEW
« firstRun.html ('K') | « skin/defaults.css ('k') | skin/icons/first-run/appstore-bg.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld