themes/baggy/css/main.css

   1 /* ==========================================================================
   2    Sommaire
   3
   4    1 = Style Guide
   5    2 = Layout
   6    3 = Pictos
   7    4 = Messages
   8    5 = Article
   9    6 = Media queries
  10
  11    ========================================================================== */
  12
  13 html {
  14   min-height: 100%;
  15 }
  16
  17 body {
  18   background: #EEE;
  19 }
  20
  21 .login {
  22   background: #333;
  23 }
  24
  25 .login #main {
  26   padding: 0;
  27   margin: 0;
  28 }
  29
  30 .login form {
  31   background: #FFF;
  32   padding: 1.5em;
  33   box-shadow: 0 1px 8px rgba(0,0,0,0.9);
  34   width: 20em;
  35   position: absolute;
  36   top: 8em;
  37   left: 50%;
  38   margin-left: -10em;
  39 }
  40
  41 .login .logo {
  42   position: absolute;
  43   top: 2em;
  44   left: 50%;
  45   margin-left: -55px;
  46 }
  47
  48 /* ==========================================================================
  49    1 = Style Guide
  50    ========================================================================== */
  51
  52 ::selection {
  53   color: #FFF;
  54   background: #000;
  55 }
  56
  57 .desktopHide {
  58   display: none;
  59 }
  60
  61 .logo {
  62   position: fixed;
  63   z-index: 20;
  64   top: 0.4em;
  65   left: 0.6em;
  66 }
  67
  68 h2, h3, h4 {
  69   font-family: 'PT Sans', sans-serif;
  70   text-transform: uppercase;
  71 }
  72
  73 p, li {
  74   color: #666;
  75 }
  76
  77 a {
  78   color: #000;
  79   font-weight: bold;
  80 }
  81
  82 a:hover, a:focus {
  83   text-decoration: none;
  84 }
  85
  86 form fieldset {
  87   border:0;
  88   padding: 0;
  89   margin: 0;
  90 }
  91
  92 form input[type="text"], select, form input[type="password"], form input[type="url"] {
  93   border: 1px solid #999;
  94   padding: 0.5em 1em;
  95   min-width: 12em;
  96   color: #666;
  97 }
  98
  99 @media screen and (-webkit-min-device-pixel-ratio:0){
 100   select{
 101     -webkit-appearance: none;
 102     border-radius: 0;
 103     background: #FFF url(../img/bg-select.png) no-repeat right center;
 104   }
 105 }
 106
 107 fieldset label {
 108   min-width: 12.5em;
 109 }
 110
 111 .inline .row {
 112   display: inline-block;
 113   margin-right: 0.5em;
 114 }
 115
 116 .inline label {
 117   min-width: 6em;
 118 }
 119
 120 fieldset label {
 121   display: inline-block;
 122   margin-right: 0.5em;
 123   color: #666;
 124 }
 125
 126 form .row {
 127   margin-bottom: 0.5em;
 128 }
 129
 130 form button, input[type="submit"] {
 131   cursor:pointer;
 132   background: #000;
 133   color: #FFF;
 134   border:0;
 135   padding: 0.5em 1em;
 136   display: inline-block;
 137   border:1px solid #000;
 138 }
 139
 140   form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus {
 141     background: #FFF;
 142     color: #000;
 143     -webkit-transition: all 0.5s ease;
 144      -moz-transition: all 0.5s ease;
 145       -ms-transition: all 0.5s ease;
 146        -o-transition: all 0.5s ease;
 147           transition: all 0.5s ease;
 148   }
 149
 150 #bookmarklet {
 151   cursor: move;
 152 }
 153
 154 h2:after {
 155   content: "";
 156   height: 4px;
 157   width: 70px;
 158   background: #000;
 159   display: block;
 160 }
 161
 162 .links {
 163   padding: 0;
 164   margin: 0;
 165 }
 166   .links li {
 167     list-style: none;
 168     margin: 0;
 169     padding: 0;
 170   }
 171
 172
 173 #links {
 174   position: fixed;
 175   top: 0;
 176   width: 9em;
 177   left: 0;
 178   text-align: right;
 179   background: #333;
 180   padding-top: 9em;
 181   height: 100%;
 182   box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
 183   z-index: 10;
 184 }
 185
 186 #main {
 187   margin-left: 12em;
 188   position: relative;
 189   z-index: 10;
 190   padding-right: 5%;
 191 }
 192
 193   #links a {
 194     display: block;
 195     padding: 0.5em 2em 0.5em 1em;
 196     color: #FFF;
 197     position: relative;
 198     text-transform: uppercase;
 199     text-decoration: none;
 200     font-weight: normal;
 201     font-family: 'PT Sans', sans-serif;
 202     -webkit-transition: all 0.5s ease;
 203      -moz-transition: all 0.5s ease;
 204       -ms-transition: all 0.5s ease;
 205        -o-transition: all 0.5s ease;
 206           transition: all 0.5s ease;
 207   }
 208
 209   #links a:hover, #links a:focus {
 210     background: #999;
 211     color: #000;
 212   }
 213
 214   #links .current:after {
 215     content: "";
 216     width: 0;
 217     height: 0;
 218     position: absolute;
 219     border-style: solid;
 220     border-width: 10px;
 221     border-color:  transparent #EEE transparent transparent;
 222     right: 0;
 223     top: 50%;
 224     margin-top: -10px;
 225   }
 226
 227   #links li:last-child {
 228     position: fixed;
 229     bottom: 1em;
 230     width: 10%;
 231   }
 232
 233   #links li:last-child a:before {
 234     font-size: 1.2em;
 235     position: relative;
 236     top: 2px;
 237   }
 238
 239
 240 /* ==========================================================================
 241    2 = Layout
 242    ========================================================================== */
 243
 244 #content {
 245   margin-top: 5em;
 246   min-height: 30em;
 247 }
 248
 249 footer {
 250   text-align: right;
 251   position: fixed;
 252   bottom: 0;
 253   right: 5em;
 254   color: #999;
 255   font-size: 0.8em;
 256   font-style: italic;
 257 }
 258
 259 footer a {
 260   color: #999;
 261   font-weight: normal;
 262 }
 263
 264 .list-entries {
 265   letter-spacing:-5px;
 266 }
 267
 268 .list-entries + .results {
 269   margin-bottom: 2em;
 270 }
 271
 272 .estimatedTime a {
 273   color: #999;
 274   font-style: italic;
 275   font-weight: normal;
 276   font-size: 0.9em;
 277 }
 278
 279 .estimatedTime small {
 280   position: relative;
 281   top: -1px;
 282 }
 283
 284 .entrie {
 285   background: #FFF;
 286   letter-spacing:normal;
 287   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
 288   display: inline-block;
 289   width: 32%;
 290   margin-bottom: 1.5em;
 291   vertical-align: top;
 292   margin-left: 1.5%;
 293   position: relative;
 294   overflow: hidden;
 295   padding: 1.5em 1.5em 3em 1.5em;
 296   -webkit-transition: all 0.5s ease;
 297      -moz-transition: all 0.5s ease;
 298       -ms-transition: all 0.5s ease;
 299        -o-transition: all 0.5s ease;
 300           transition: all 0.5s ease;
 301 }
 302
 303 .entrie:before {
 304   content: "";
 305   width: 0;
 306   height: 0;
 307   border-style:solid;
 308   border-color: transparent transparent #000 transparent;
 309   border-width: 10px;
 310   position: absolute;
 311   bottom: 0.3em;
 312   z-index: 10;
 313   right: 1.5em;
 314   -webkit-transition: all 0.5s ease;
 315      -moz-transition: all 0.5s ease;
 316       -ms-transition: all 0.5s ease;
 317        -o-transition: all 0.5s ease;
 318           transition: all 0.5s ease;
 319 }
 320
 321 .entrie:after {
 322   content: "";
 323   position: absolute;
 324   height: 7px;
 325   width: 100%;
 326   bottom: 0;
 327   left: 0;
 328   background: #000;
 329   -webkit-transition: all 0.5s ease;
 330      -moz-transition: all 0.5s ease;
 331       -ms-transition: all 0.5s ease;
 332        -o-transition: all 0.5s ease;
 333           transition: all 0.5s ease;
 334 }
 335
 336 .entrie:hover {
 337   box-shadow: 0 3px 10px rgba(0,0,0,1);
 338 }
 339
 340 .entrie:hover:after {
 341   height: 40px;
 342 }
 343
 344 .entrie:hover:before {
 345   bottom: 2.4em;
 346 }
 347
 348 .entrie:hover h2 a {
 349   color: #666;
 350 }
 351
 352 .entrie h2 {
 353   text-transform: none;
 354   margin-bottom: 0;
 355 }
 356
 357   .entrie h2:after {
 358     content: none;
 359   }
 360
 361 .entrie h2 a {
 362   display: block;
 363   text-decoration: none;
 364   color: #000;
 365   word-wrap: break-word;
 366   -webkit-transition: all 0.5s ease;
 367      -moz-transition: all 0.5s ease;
 368       -ms-transition: all 0.5s ease;
 369        -o-transition: all 0.5s ease;
 370           transition: all 0.5s ease;
 371 }
 372
 373 .entrie h2 a:after {
 374   content: "";
 375   position: absolute;
 376   top: 0;
 377   width: 100%;
 378   height: 100%;
 379   left: 0;
 380 }
 381
 382 .entrie p {
 383   color: #666;
 384   font-size: 0.9em;
 385   line-height: 1.7;
 386 }
 387
 388   .entrie h2 a:first-letter {
 389     text-transform: uppercase;
 390   }
 391
 392 .entrie:hover .tools {
 393   bottom: 0;
 394 }
 395
 396 .entrie .tools {
 397   position: absolute;
 398   bottom: -50px;
 399   left: 0;
 400   width: 100%;
 401   z-index: 10;
 402   padding-right: 0.5em;
 403   text-align: right;
 404   -webkit-transition: all 0.5s ease;
 405      -moz-transition: all 0.5s ease;
 406       -ms-transition: all 0.5s ease;
 407        -o-transition: all 0.5s ease;
 408           transition: all 0.5s ease;
 409 }
 410
 411   .entrie .tools a {
 412     color: #666;
 413     text-decoration: none;
 414     display: block;
 415     padding: 0.4em;
 416   }
 417
 418   .entrie .tools a:hover {
 419     color: #FFF;
 420   }
 421
 422   .entrie .tools li {
 423     display: inline-block;
 424   }
 425
 426 .entrie:nth-child(3n+1) {
 427   margin-left: 0;
 428 }
 429
 430 .results {
 431   letter-spacing: -5px;
 432   padding: 0 0 0.5em;
 433 }
 434
 435 .results > * {
 436   display: inline-block;
 437   vertical-align: top;
 438   letter-spacing: normal;
 439   width: 50%;
 440 }
 441
 442 .pagination {
 443   text-align: right;
 444 }
 445
 446 .nb-results {
 447   text-align: left;
 448   font-style: italic;
 449   color: #999;
 450 }
 451
 452 .pagination > * {
 453   display: inline-block;
 454   margin-left: 0.5em;
 455 }
 456
 457 .pagination a {
 458   color: #999;
 459   text-decoration: none;
 460 }
 461
 462   .pagination a:hover, .pagination a:focus {
 463     text-decoration: underline;
 464   }
 465
 466 .pagination .disabled {
 467   display: none;
 468 }
 469
 470 /* ==========================================================================
 471    3 = Pictos
 472    ========================================================================== */
 473
 474 @font-face {
 475   font-family: 'icomoon';
 476   src:url('../fonts/icomoon.eot?-s0mcsx');
 477   src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
 478     url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
 479     url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
 480     url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
 481   font-weight: normal;
 482   font-style: normal;
 483 }
 484
 485 .icon span {
 486   position: absolute;
 487   top: -9999px;
 488 }
 489
 490 [class^="icon-"]:before, [class*=" icon-"]:before {
 491   font-family: 'icomoon';
 492   speak: none;
 493   font-style: normal;
 494   font-weight: normal;
 495   font-variant: normal;
 496   text-transform: none;
 497   line-height: 1;
 498
 499   /* Better Font Rendering =========== */
 500   -webkit-font-smoothing: antialiased;
 501   -moz-osx-font-smoothing: grayscale;
 502 }
 503
 504 .icon-flattr:before {
 505   content: "\e800";
 506 }
 507 .icon-mail:before {
 508   content: "\e80a";
 509 }
 510 .icon-up-open:before {
 511   content: "\e80b";
 512 }
 513 .icon-star:before {
 514   content: "\e805";
 515 }
 516 .icon-check:before {
 517   content: "\e804";
 518 }
 519 .icon-link:before {
 520   content: "\e801";
 521 }
 522 .icon-reply:before {
 523   content: "\e806";
 524 }
 525 .icon-menu:before {
 526   content: "\e802";
 527 }
 528 .icon-clock:before {
 529   content: "\e803";
 530 }
 531 .icon-twitter:before {
 532   content: "\e807";
 533 }
 534 .icon-down-open:before {
 535   content: "\e809";
 536 }
 537 .icon-trash:before {
 538   content: "\e80c";
 539 }
 540 .icon-delete:before {
 541   content: "\e600";
 542 }
 543 .icon-power:before {
 544   content: "\e601";
 545 }
 546 .icon-arrow-up-thick:before {
 547   content: "\e602";
 548 }
 549 .icon-rss:before {
 550   content: "\e808";
 551 }
 552
 553 /* ==========================================================================
 554    Icon selected
 555    ========================================================================== */
 556
 557 .icon-star.fav:before {
 558   color: #FFF;
 559 }
 560
 561 /* ==========================================================================
 562    4 = Messages
 563    ========================================================================== */
 564
 565 .messages {
 566   text-align: left;
 567   margin-top: 1em;
 568 }
 569
 570 .messages > * { display: inline-block;}
 571
 572 .closeMessage {
 573   background: #000;
 574   color: #FFF;
 575   padding: 0.2em 0.5em;
 576   text-decoration: none;
 577 }
 578
 579   .closeMessage:hover, .closeMessage:focus {
 580     background: #FFF;
 581     color: #000;
 582   }
 583
 584 .warning {
 585   font-size: 3em;
 586   color: #999;
 587   font-style: italic;
 588   position: absolute;
 589   top: 50%;
 590   left: 0;
 591   width: 100%;
 592   text-align: center;
 593   padding-right: 5%;
 594   margin-top: -2em;
 595 }
 596
 597 /* ==========================================================================
 598    5 = Article
 599    ========================================================================== */
 600
 601 #article {
 602   width: 70%;
 603   margin-bottom: 3em;
 604 }
 605
 606 #article .tags {
 607   margin-bottom: 1em;
 608 }
 609
 610 #article i {
 611   font-style: normal;
 612 }
 613
 614 blockquote {
 615   border:1px solid #999;
 616   background: #FFF;
 617   padding: 1em;
 618   margin: 0;
 619 }
 620
 621 #article h2, #article h3, #article h4 {
 622   text-transform: none;
 623 }
 624
 625 #article h2:after {
 626   content: none;
 627 }
 628
 629 .topPosF {
 630   position: fixed;
 631   right: 20%;
 632   bottom: 2em;
 633   font-size: 1.5em;
 634 }
 635
 636 #article_toolbar {
 637   margin-bottom: 1em;
 638 }
 639
 640 #article_toolbar li {
 641   display: inline-block;
 642 }
 643
 644 #article_toolbar a {
 645   background: #000;
 646   padding: 0.3em 0.5em 0.2em;
 647   color: #FFF;
 648   text-decoration: none;
 649 }
 650
 651   #article_toolbar a:hover, #article_toolbar a:focus {
 652     background: #999;
 653   }
 654
 655 .shaarli:before {
 656   content: "*";
 657 }
 658
 659 .return {
 660   text-decoration: none;
 661   margin-top: 1em;
 662   display: block;
 663 }
 664
 665 .return:before {
 666   margin-right: 0.5em;
 667 }
 668
 669 .notags {
 670   font-style: italic;
 671   color: #999;
 672 }
 673
 674 .icon-rss {
 675   background: #000;
 676   color: #FFF;
 677   padding: 0.2em 0.5em;
 678 }
 679
 680 .icon-rss:before {
 681   position: relative;
 682   top: 2px;
 683 }
 684
 685 .list-tags li {
 686   margin-bottom: 0.5em;
 687 }
 688
 689 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
 690   background: #FFF;
 691   color: #000;
 692   text-decoration: none;
 693 }
 694
 695 .list-tags a {
 696   text-decoration: none;
 697 }
 698
 699 .list-tags a:hover, .list-tags a:focus {
 700   text-decoration: underline;
 701 }
 702
 703 /* ==========================================================================
 704    6 = Media Queries
 705    ========================================================================== */
 706
 707 @media screen and (max-width: 1050px) {
 708   .entrie {
 709     width: 49%;
 710   }
 711   .entrie:nth-child(3n+1) {
 712     margin-left: 1.5%;
 713   }
 714   .entrie:nth-child(2n+1) {
 715     margin-left: 0;
 716   }
 717 }
 718
 719 @media screen and (max-width: 900px) {
 720   #article {
 721     width: 80%;
 722   }
 723   .topPosF {
 724     right: 2.5em;
 725   }
 726 }
 727
 728 @media screen and (max-width: 700px) {
 729   .entrie {
 730     width: 100%;
 731     margin-left: 0;
 732   }
 733 }
 734
 735 @media screen and (max-width: 500px) {
 736   .entrie {
 737     width: 100%;
 738     margin-left: 0;
 739   }
 740   body > header {
 741     background: #333;
 742     position: fixed;
 743     top: 0;
 744     width: 100%;
 745     height: 3em;
 746     z-index: 11;
 747   }
 748   #links li:last-child {
 749     position: static;
 750     width: auto;
 751   }
 752   #links li:last-child a:before {
 753     content: none;
 754   }
 755   .logo {
 756     width: 1.5em;
 757     height: 1.5em;
 758     left: 0;
 759     top: 0;
 760   }
 761   .login > header {
 762     position: static;
 763   }
 764   .login form {
 765     width: 100%;
 766     position: static;
 767     margin-left: 0;
 768   }
 769   .login .logo {
 770     width: auto;
 771     height: auto;
 772     top: 0.5em;
 773     width: 75px;
 774     height: 75px;
 775     margin-left: -37.5px;
 776   }
 777   .desktopHide {
 778     display: block;
 779     position: fixed;
 780     z-index: 20;
 781     top: 0;
 782     right: 0;
 783     border:0;
 784     width: 2.5em;
 785     height: 2.5em;
 786     cursor: pointer;
 787     background: #999;
 788     font-size: 1.2em;
 789   }
 790     .desktopHide:hover, .desktopHide:focus {
 791       background: #FFF;
 792     }
 793   #links {
 794     display: none;
 795     width: 100%;
 796     height: auto;
 797     padding-top: 3em;
 798   }
 799   footer  {
 800     position: static;
 801     margin-right: 3em;
 802   }
 803   #main {
 804     margin-left: 1.5em;
 805     padding-right: 1.5em;
 806     position: static;
 807   }
 808   #article_toolbar .topPosF {
 809     display: none;
 810   }
 811
 812   #article {
 813     width: 100%;
 814   }
 815
 816   #article h1 {
 817     font-size: 1.5em;
 818   }
 819   #article_toolbar a {
 820     padding: 0.3em 0.4em 0.2em;
 821   }
 822 }