]> nos-oignons.net Git - website.git/blob - assets/local.css
ajout procedure prolongement d'adhesion
[website.git] / assets / local.css
1 /* vim: set ts=4 sts=4 sw=4 isk+=-,. fen fcl=all fdm=marker fmr={{{,}}} fml=2 : */
2
3 @font-face {
4   font-family: 'Open Sans';
5   font-style: normal;
6   font-weight: 400;
7   src: local('Open Sans'), local('OpenSans'), url(OpenSans/OpenSans.ttf) format('truetype');
8 }
9 @font-face {
10   font-family: 'Open Sans';
11   font-style: normal;
12   font-weight: 700;
13   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(OpenSans/OpenSans-Bold.ttf) format('truetype');
14 }
15 @font-face {
16   font-family: 'Open Sans';
17   font-style: italic;
18   font-weight: 400;
19   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(OpenSans/OpenSans-Italic.ttf) format('truetype');
20 }
21 @font-face {
22   font-family: 'Open Sans';
23   font-style: italic;
24   font-weight: 700;
25   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(OpenSans/OpenSans-BoldItalic.ttf) format('truetype');
26 }
27 @font-face {
28   font-family: 'Inconsolata';
29   font-style: normal;
30   font-weight: 400;
31   src: local('Inconsolata'), local('Inconsolata-Regular'), url(Inconsolata/Inconsolata.otf) format('opentype');
32 }
33
34 /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
35 /* apply a natural box layout model to all elements, but allowing components to change */
36 html {
37   box-sizing: border-box;
38 }
39 *, *:before, *:after {
40   box-sizing: inherit;
41 }
42
43 img,
44 table {
45   max-width: 100%;
46   height: auto;
47 }
48
49
50 html {
51         /*overflow: auto;*/
52 }
53
54 body {
55         margin: 0;
56         padding: 0;
57         font-family: "Open Sans", sans-serif;
58         color: #111;
59         background: #fff url(tile.png) fixed;
60 }
61
62 code,
63 pre {
64         font-family: "Inconsolata", monospace;
65         font-size-adjust: 0.535;
66 }
67
68 dt {
69         font-weight: bold;
70 }
71
72 thead td {
73         text-decoration: underline;
74 }
75
76
77 .body-wrapper {
78         max-width: 70em;
79         margin: 0 auto 0 auto;
80         box-shadow: 0 0 0.2em 0 #333366;
81   background: white;
82 }
83 @media screen and (min-width: 45em) {
84   .menu,
85   .main {
86     display: table-cell;
87     vertical-align: top;
88   }
89   .menu {
90     width: 20%;
91     max-width: 15em;
92     min-width: 11em;
93   }
94   .main {
95   }
96 }
97
98
99 .body-wrapper > header {
100     padding: 1em 0;
101     border-bottom: solid 1px #ccc;
102 }
103 @media screen and (min-width: 390px) {
104   .body-wrapper > header {
105     background: url(filet.png) no-repeat scroll 99% 105px #FFF;
106   }
107 }
108
109
110 #logo {
111     display: block;
112         width: 394px; /* same as .pageheader .header:margin-left */
113         height: 104px;
114   max-width: 100%;
115         background: url(logo-nos-oignons-blanc.png) no-repeat top left;
116   background-size: 100%;
117 }
118 @media screen and (max-width: 390px) {
119   #logo {
120     background-image: url(logo-nos-oignons-blanc-small.png);
121     background-position: left center;
122     height: 100px;
123   }
124 }
125
126 #logo span {
127         display: none;
128 }
129
130 .fundraising-2018-wrapper {
131
132 }
133 .fundraising-2018-wrapper a {
134   display: block;
135   min-height: 100px;
136   background: url(leaderboard_fundraising_2018__fr.png) center center no-repeat;
137   background-size: cover;
138   text-indent: -9999px;
139   margin-bottom: 1em;
140 }
141 body.lang-en .fundraising-2018-wrapper a {
142   background-image: url(leaderboard_fundraising_2018__en.png);
143 }
144
145 /* {{{ .actions */
146 .actions {
147         font-size: 0.8em;
148         text-align: right;
149 }
150 .actions ul {
151   margin: 0;
152   padding: 0.5em;
153   height: auto;
154   list-style-type: none;
155 }
156
157 .breadcrumb,
158 .breadcrumb  a {
159   text-decoration: none;
160   color: #b3b3b3;
161 }
162 .breadcrumb  a:first-child {display: none;}
163 .breadcrumb a:hover {
164   text-decoration: none;
165   color: #57075f;
166 }
167 .breadcrumb  a + a:before {
168   content:"▸";
169   display: inline-block;
170   vertical-align: top;
171   margin: -1px 0.5em 0;
172   color: #b3b3b3;
173 }
174 .breadcrumb  a + a:hover:before {}
175
176 /* .actions }}} */
177 /* {{{ #otherlanguages */
178 #otherlanguages {
179   float: right;
180   font-size: 0.9em;
181 }
182 .translationstatus,
183 .langstatus {display: none;}
184 @media screen and (max-width: 400px) {
185 #otherlanguages {float: none;}
186 }
187 #otherlanguages,
188 #otherlanguages a {
189         color: #b3b3b3;
190         /*background: white;*/
191 }
192 #otherlanguages a:hover {
193   color: #57075f;
194 }
195
196 #otherlanguages ul {
197   padding: 0;
198   margin: 0;
199   list-style: none;
200 }
201 #otherlanguages ul li {
202         /*margin-left: 1em;*/
203 }
204 #otherlanguages .langstatus {
205         /*display: none;*/
206 }
207
208
209 main {
210         background: white url(background.png) no-repeat bottom center;
211       background-size: 50%;
212         color: #111;
213 }
214
215
216 .menu {
217         padding: 1em 0;
218         border: none;
219         background: #f5f5f5;
220 }
221 @media screen and (max-width: 45em) {
222   .menu {
223         border-bottom: solid 1px #ccc;
224   }
225 }
226
227 .menu ul {
228         margin: 0;
229 }
230
231 .menu ul {
232         padding: 0;
233         list-style: none;
234         background: transparent;
235 }
236
237 .menu li {
238         text-align: left;
239 }
240
241 .menu ul li .selflink {
242         color: #57075f;
243         font-weight: bold;
244 }
245
246 .menu ul li > span,
247 .menu ul li > a {
248         display: block;
249         padding: 0.3em 0.5em;
250         text-decoration: none;
251         border: 1px solid #f5f5f5;
252   color: #a756af;
253   background: transparent;
254   font-weight: normal;
255   font-size: 1em;
256 }
257
258
259 .menu a:hover {
260   color: #57075f;
261   background: #eeeeee;
262   text-decoration: none;
263 }
264
265 .menu select {
266   margin: 0.5em 2%;
267   width: 94%;
268   max-width: 94%;
269   background: #fff;
270   border: 1px solid #ccc;
271         color: #57075F;
272   font-size: 1.2em;
273   display: none;
274 }
275
276 @media screen and (max-width: 45em) {
277   .js .menu ul {display: none;}
278   .js .menu select {display: block;}
279 }
280
281
282 main {
283         padding: 1em;
284 }
285
286 main a {
287         color: #57075f;
288         text-decoration: underline;
289 }
290
291 main a:hover {
292         text-decoration: underline;
293 }
294
295 main p {
296         margin: 1em 0 1em 0;
297 }
298 main li p {
299   margin-top: 0;
300 }
301
302 main hr {
303         border: none;
304         border-bottom: dotted 2px #bbbbbb;
305         margin: 2em auto;
306 }
307
308 main h1 {
309         font-size: 1.8em;
310         font-weight: bold;
311   /*text-shadow: 2px 2px 1px #444;*/
312   color: #57075F;
313 }
314 main h1.title {
315   margin-top: 0em;
316   font-size: 2em;
317         color: #ffa430;
318 }
319
320 main h2 {
321   /*color: #ffa430*/
322   color: #57075F;
323 }
324 main h3 {
325   color: #57075F;
326 }
327
328 main h2,
329 main .header {
330         font-size: 1.4em;
331         font-weight: bold;
332 }
333
334 main h2 + p {
335         margin-top: 0.75em;
336 }
337
338 main h3 {
339         font-size: 1.2em;
340         font-weight: bold;
341         margin-bottom: 0;
342         padding-bottom: 0;
343 }
344
345 main h3 + p {
346         margin-top: 0.5em;
347 }
348 h2 sup,
349 h3 sup {
350   font-weight: normal;
351 }
352
353 main blockquote {
354   border-left: 2px solid #A756AF;
355   margin: 0.5em 0;
356   padding: 0.5em 0 0.5em 1em;
357 }
358 main blockquote p {margin: 0;}
359 main blockquote p + p {margin-top: 1em;}
360
361
362 main table {
363         border-top: solid 1px #aaa;
364         border-bottom: solid 1px #aaa;
365         border-collapse: collapse;
366 }
367
368 main table th {
369         background: #fafafa;
370         padding: 0.1em 0.5em;
371         border-bottom: solid 1px #aaaaaa;
372         color: #555555;
373 }
374
375 main table td {
376         padding: 0.1em 0.5em;
377         border-top: solid 1px #ccc;
378 }
379
380 main .header a {
381         text-decoration: none;
382 }
383
384 main .feedlink a {
385   text-decoration: none;
386   /*color: #ffa430;*/
387 }
388
389 main .feedlink {
390   float: right;
391         text-align: left;
392   margin-top: -3.5em;
393 }
394 @media screen and (max-width: 400px) {
395   main .feedlink {
396     float: none;
397     margin-top: -2em;
398     margin-bottom: 2em;
399   }
400 }
401 main .feedlink .feedbutton {
402         font-size: 0.8em;
403         background: transparent;
404         border: none;
405 }
406 main .feedlink .feedbutton:hover {
407         background: transparent;
408         text-decoration: underline;
409 }
410
411 main .footnotes {
412         font-size: 0.8em;
413 }
414
415 .half-section {
416   display: inline-block;
417   vertical-align: top;
418   width: 49.5%;
419 }
420
421 /* main }}} */
422
423
424 .graph {
425   display: inline-block;
426   vertical-align: top;
427   width: 45%;
428   margin: 1em 1%;
429   min-width: 20em;
430   text-align: center;
431 }
432
433 #bandwidth, #weights {text-align: center;}
434 #bandwidth svg, #weights svg {text-align: left;}
435
436 /* Tor nodes table */
437 .tor-nodes {}
438 .tor-nodes th {
439   text-align: left;
440 }
441
442
443
444 .donation-cb {
445   display: inline-block;
446   vertical-align: top;
447   width:45%;
448   padding-right: 4%;
449   min-width: 20em;  
450 }
451
452 /* Paypal donation forms */
453 // .paypal-donation {
454 //      display: inline-block;
455 //      vertical-align: top;
456 //      width:45%;
457 //      padding-right: 4%;
458 //       min-width: 20em;
459 // }
460 .paypal-donation h5 {
461         margin: 0 0 0.5em 0;
462 }
463 .paypal-donation select {
464         display: inline-block;
465         vertical-align: top;
466         margin-right: 1em;
467   min-height:26px;
468         height:26px;
469   background-color: #fff;
470   border: 1px solid #57075F;
471 }
472 .paypal-donation .cancel {
473         font-size: small;
474 }
475
476 .donation-other {
477   display: inline-block;
478   vertical-align: top;
479   width:45%;
480   padding-right: 4%;
481   min-width: 20em;  
482 }
483
484
485 /* Progress bar */
486 .progress-bar-wrapper {
487   margin: 2em auto;
488   height: 85px;
489   width: 600px;
490   background: url(progress_bar.png) top left repeat-x;
491   border: 1px solid #ccc;
492   border-bottom: 0;
493   position: relative;
494 }
495   .progress-bar-wrapper .progress-bar {
496     position: absolute;
497     height: 85px;
498     background: url(progress_bar.png) left -85px repeat-x;
499     z-index: 2;
500     /* animate progress bar */
501     -webkit-animation: progress-bar 1.5s;
502     -moz-animation: progress-bar 1.5s;
503     animation: progress-bar 1.5s;
504   }
505   .progress-bar-wrapper .progress-bar-promises {
506     background-position: left bottom;
507     z-index: 1;
508   }
509
510   /* progress bar animation*/
511   @-webkit-keyframes progress-bar { 0% { width: 0; } }
512   @-moz-keyframes progress-bar { 0% { width: 0; } }
513   keyframes progress-bar { 0% { width: 0; } }
514
515   /* Current amount */
516   .progress-bar-wrapper .progress-bar:after {
517     content: attr(data-current);
518     display: block;
519     position: absolute;
520     top: -22px;
521     right: 0;
522     background: #fff;
523     color: #ccc;
524     font-size: 0.9em;
525   }
526   /* Promises amount */
527   .progress-bar-wrapper .progress-bar-promises:after {
528   }
529
530   /* Temperature bar */
531   .progress-bar-wrapper:before {
532     content: " ";
533     display: block;
534     position: absolute;
535     z-index: 3;
536     bottom: -5px;
537     left: -1px;
538     height: 5px;
539     width: 100%;
540     border: 1px solid #ccc;
541     border-top: 0;
542     background: -moz-linear-gradient(left, #ff0000 0%, #66ff00 100%); /* FF3.6+ */
543     background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(100%,#66ff00)); /* Chrome,Safari4+ */
544     background: -webkit-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Chrome10+,Safari5.1+ */
545     background: -o-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Opera 11.10+ */
546     background: -ms-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* IE10+ */
547     background: linear-gradient(to right, #ff0000 0%,#66ff00 100%); /* W3C */
548     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#66ff00',GradientType=1 ); /* IE6-9 */
549   }
550
551   /* Annual budget */
552   .progress-bar-wrapper:after {
553     content: attr(data-total);
554     display: block;
555     position: absolute;
556     top: -22px;
557     right: 0;
558     background: #fff;
559     color: #ccc;
560     font-size: 0.9em;
561   }
562
563
564
565 /* FDN Form */
566 .fdn-form {}
567   .fdn-form select,
568   .fdn-form input {
569     display: inline-block;
570     vertical-align: top;
571     margin-right: 1em;
572     height: 26px;
573   }
574   .fdn-form #custom-amount {
575     display:none;
576     height: 22px;
577   }
578
579
580 /* Paymium Bitcoin */
581 .paymium-btns {padding-left: 0;}
582 .paymium-btns li {
583   list-style: none;
584   display: inline-block;
585   margin: 0 0.5em 0.5em 0;
586 }
587
588 .paymium-btn {
589   display: inline-block;
590   min-width: 10em;
591   padding: 4px 44px 4px 10px;
592   padding-right: 44px;
593   background: #4d7b99 url(paymium_btc.png) right center no-repeat;
594   border-radius: 4px;
595   text-align: center;
596   color: #fff;
597   text-decoration: none;
598   font-weight: bold;
599 }
600 .paymium-btn:hover{
601   background-color:#5081a0;
602   text-decoration: none;
603 }
604 /* override over weighted selector*/
605 #content .paymium-btn {color: #fff;text-decoration: none;}
606 #content .paymium-btn:hover {color: #fff;text-decoration: none;}
607
608
609 /* {{{ .inlinepage */
610
611 .inlinepage {
612         padding: 0;
613         border: none;
614         margin-bottom: 1em;
615 }
616
617 .inlinepage .header {
618         border-bottom: solid #ccc 1px;
619 }
620
621 .inlinepage .inlineheader .pagedate {
622         margin-top: 0;
623         font-size: 0.8em;
624         font-style: normal;
625         color: #666;
626 }
627
628 /* .inlinepage }}} */
629
630 /* {{{ #footer */
631 #footer {
632   margin: 0;
633   padding: 0.5em 0;
634   text-align: center;
635   color: white;
636   background: #57075f;
637   font-size: 0.85em;
638 }
639 @media screen and (max-width: 45em) {
640   #footer {
641     text-align: left;
642     padding: 0.5em 1em;
643     font-size: 0.8em;
644   }
645 }
646 @media screen and (max-width: 480px) {
647   #footer .pagecopyright span {
648     display: block;
649   }
650 }
651
652 #footer > div {
653     margin-top: 1em;
654 }
655
656
657 #footer a {
658         color: white;
659   text-decoration: none;
660 }
661
662 #footer a:hover {
663         text-decoration: underline;
664 }
665
666 #backlinks {
667         font-size: 0.8em;
668         margin-top: 0;
669 }
670
671 #footer #pageinfo div {
672         font-size: 0.8em;
673         margin-top: 0;
674         margin-bottom: 0;
675 }
676 /* #footer }}} */
677
678 /* {{{ @media print */
679 @media print {
680         .menu,
681         .actions,
682         .feedlink,
683         #backlinks,
684         #otherlanguages {
685                 display: none;
686         }
687
688         #footer,
689         #footer #pageinfo,
690         .page,
691         .pageheader,
692         #pagebody {
693             margin: 0;
694             padding: 0;
695             border: none;
696             box-shadow: none;
697         }
698
699         .page,
700         .pageheader {
701                 border-radius: 0;
702         }
703
704         .pageheader {
705                 position: static;
706                 height: auto;
707         }
708
709         .pageheader .header {
710                 margin-left: 0;
711                 padding-top: 2em;
712                 padding-bottom: 1em;
713         }
714
715         .pageheader .header > span,
716         .parentlinks .parentlinksep {
717                 display: inline;
718                 height: auto;
719         }
720
721         .pageheader a,
722         .pageheader .parentlinks a {
723                 color: #111;
724         }
725
726         .pageheader,
727         .parentlinks a,
728         .parentlinks .parentlinksep + a + .parentlinksep + a {
729                 background: none;
730         }
731
732         .pageheader .parentlinks {
733                 display: inline;
734         }
735
736         .pageheader .title,
737         .parentlinks > a {
738                 position: static;
739         }
740
741         .parentlinks > a span {
742                 display: inline;
743         }
744
745   main h1 {
746     color: #111;
747     text-shadow: none;
748     border-bottom: solid #ccc 1px;
749   }
750
751         main a:link:after,
752         main a:visited:after {
753                 content:" [" attr(href) "] ";
754         }
755
756         #footer {
757                 margin-top: 2em;
758                 text-align: left;
759         }
760 }
761 /* @media print }}} */