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 }}} */