app/Resources/static/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-color: #eee;
  19 }
  20
  21 .login {
  22   background-color: #333;
  23 }
  24
  25 .login #main {
  26   padding: 0;
  27   margin: 0;
  28 }
  29
  30 .login form {
  31   background-color: #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-color: #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,
  69 h3,
  70 h4 {
  71   font-family: "PT Sans", sans-serif;
  72   text-transform: uppercase;
  73 }
  74
  75 p,
  76 li,
  77 label {
  78   color: #666;
  79 }
  80
  81 a {
  82   color: #000;
  83   font-weight: bold;
  84 }
  85
  86 a.nostyle {
  87   text-decoration: none;
  88 }
  89
  90 a:hover,
  91 a:focus {
  92   text-decoration: none;
  93 }
  94
  95 form fieldset {
  96   border: 0;
  97   padding: 0;
  98   margin: 0;
  99 }
 100
 101 form input[type="text"],
 102 form input[type="number"],
 103 select,
 104 form input[type="password"],
 105 form input[type="url"],
 106 form input[type="email"] {
 107   border: 1px solid #999;
 108   padding: 0.5em 1em;
 109   min-width: 12em;
 110   color: #666;
 111 }
 112
 113 @media screen and (-webkit-min-device-pixel-ratio: 0) {
 114   select {
 115     -webkit-appearance: none;
 116     border-radius: 0;
 117     background: #fff url("../../_global/img/bg-select.png") no-repeat right center;
 118   }
 119 }
 120
 121 .inline .row {
 122   display: inline-block;
 123   margin-right: 0.5em;
 124 }
 125
 126 .inline label {
 127   min-width: 6em;
 128 }
 129
 130 fieldset label {
 131   display: inline-block;
 132   min-width: 12.5em;
 133   color: #666;
 134 }
 135
 136 label {
 137   margin-right: 0.5em;
 138 }
 139
 140 form .row {
 141   margin-bottom: 0.5em;
 142 }
 143
 144 form button,
 145 input[type="submit"] {
 146   cursor: pointer;
 147   background-color: #000;
 148   color: #fff;
 149   padding: 0.5em 1em;
 150   display: inline-block;
 151   border: 1px solid #000;
 152 }
 153
 154 form button:hover,
 155 form button:focus,
 156 input[type="submit"]:hover,
 157 input[type="submit"]:focus {
 158   background-color: #fff;
 159   color: #000;
 160   -webkit-transition: all 0.5s ease;
 161   -moz-transition: all 0.5s ease;
 162   -ms-transition: all 0.5s ease;
 163   -o-transition: all 0.5s ease;
 164   transition: all 0.5s ease;
 165 }
 166
 167 #bookmarklet {
 168   cursor: move;
 169 }
 170
 171 h2::after {
 172   content: "";
 173   height: 4px;
 174   width: 70px;
 175   background-color: #000;
 176   display: block;
 177 }
 178
 179 .links {
 180   padding: 0;
 181   margin: 0;
 182 }
 183
 184 .links li {
 185   list-style: none;
 186   margin: 0;
 187   padding: 0;
 188 }
 189
 190 #links {
 191   position: fixed;
 192   top: 0;
 193   width: 10em;
 194   left: 0;
 195   text-align: right;
 196   background-color: #333;
 197   padding-top: 9.5em;
 198   height: 100%;
 199   box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.6);
 200   z-index: 15;
 201 }
 202
 203 #main {
 204   margin-left: 12em;
 205   position: relative;
 206   z-index: 10;
 207   padding-right: 5%;
 208   padding-bottom: 1em;
 209 }
 210
 211 #links > li > a {
 212   display: block;
 213   padding: 0.5em 2em 0.5em 1em;
 214   color: #fff;
 215   position: relative;
 216   text-transform: uppercase;
 217   text-decoration: none;
 218   font-weight: normal;
 219   font-family: "PT Sans", sans-serif;
 220   -webkit-transition: all 0.5s ease;
 221   -moz-transition: all 0.5s ease;
 222   -ms-transition: all 0.5s ease;
 223   -o-transition: all 0.5s ease;
 224   transition: all 0.5s ease;
 225 }
 226
 227 #links > li > a:hover,
 228 #links > li > a:focus {
 229   background-color: #999;
 230   color: #000;
 231 }
 232
 233 #links .current::after {
 234   content: "";
 235   width: 0;
 236   height: 0;
 237   position: absolute;
 238   border-style: solid;
 239   border-width: 10px;
 240   border-color: transparent #eee transparent transparent;
 241   right: 0;
 242   top: 50%;
 243   margin-top: -10px;
 244 }
 245
 246 #links li:last-child {
 247   position: fixed;
 248   bottom: 1em;
 249   width: 10em;
 250 }
 251
 252 #links li:last-child a::before {
 253   font-size: 1.2em;
 254   position: relative;
 255   top: 2px;
 256 }
 257
 258 #sort {
 259   padding: 0;
 260   list-style-type: none;
 261   opacity: 0.5;
 262   display: inline-block;
 263 }
 264
 265 #sort li {
 266   display: inline;
 267   font-size: 0.9em;
 268 }
 269
 270 #sort li + li {
 271   margin-left: 10px;
 272 }
 273
 274 #sort a {
 275   padding: 2px 2px 0;
 276   vertical-align: middle;
 277 }
 278
 279 #sort img {
 280   vertical-align: baseline;
 281 }
 282
 283 #sort img:hover {
 284   cursor: pointer;
 285 }
 286
 287 #display-mode {
 288   float: right;
 289   margin-top: 10px;
 290   margin-bottom: 10px;
 291   opacity: 0.5;
 292 }
 293
 294 #listmode {
 295   width: 16px;
 296   display: inline-block;
 297   text-decoration: none;
 298 }
 299
 300 #listmode a:hover {
 301   opacity: 1;
 302 }
 303
 304 #listmode.tablemode {
 305   background-image: url("../img/baggy/table.png");
 306   background-repeat: no-repeat;
 307   background-position: bottom;
 308 }
 309
 310 #listmode.listmode {
 311   background-image: url("../img/baggy/list.png");
 312   background-repeat: no-repeat;
 313   background-position: bottom;
 314 }
 315
 316 #warning_message {
 317   position: fixed;
 318   background-color: #ff6347;
 319   z-index: 1000;
 320   bottom: 0;
 321   left: 0;
 322   width: 100%;
 323   color: #000;
 324 }
 325
 326 /* ==========================================================================
 327    2 = Layout
 328    ========================================================================== */
 329
 330 #content {
 331   margin-top: 2em;
 332   min-height: 30em;
 333 }
 334
 335 footer {
 336   text-align: right;
 337   position: relative;
 338   bottom: 0;
 339   right: 5em;
 340   color: #999;
 341   font-size: 0.8em;
 342   font-style: italic;
 343   z-index: 20;
 344 }
 345
 346 footer a {
 347   color: #999;
 348   font-weight: normal;
 349 }
 350
 351 .list-entries {
 352   letter-spacing: -5px;
 353 }
 354
 355 .listmode .entry {
 356   width: 100% !important;
 357   margin-left: 0 !important;
 358 }
 359
 360 .card-entry-labels {
 361   position: absolute;
 362   top: 100px;
 363   left: -1em;
 364   z-index: 90;
 365   max-width: 50%;
 366   padding-left: 0;
 367 }
 368
 369 .card-entry-labels li {
 370   margin: 10px 10px 10px auto;
 371   padding: 5px 12px 5px 25px;
 372   background-color: rgba(0, 0, 0, 0.6);
 373   border-radius: 0 3px 3px 0;
 374   color: #fff;
 375   cursor: default;
 376   max-height: 2em;
 377   overflow: hidden;
 378   text-overflow: ellipsis;
 379   white-space: nowrap;
 380 }
 381
 382 .card-entry-tags {
 383   max-height: 2em;
 384   overflow-y: hidden;
 385   padding: 0;
 386   margin: 0;
 387 }
 388
 389 .card-entry-tags li,
 390 .card-entry-tags span {
 391   display: inline-block;
 392   margin: 0 5px;
 393   padding: 5px 12px;
 394   background-color: rgba(0, 0, 0, 0.6);
 395   border-radius: 3px;
 396   max-height: 2em;
 397   overflow: hidden;
 398   text-overflow: ellipsis;
 399 }
 400
 401 .card-entry-tags a,
 402 .card-entry-labels a {
 403   text-decoration: none;
 404   font-weight: normal;
 405   color: #fff;
 406 }
 407
 408 .nav-panel-add-tag {
 409   margin-top: 10px;
 410 }
 411
 412 .list-entries + .results {
 413   margin-bottom: 2em;
 414 }
 415
 416 .reading-time,
 417 .created-at {
 418   color: #999;
 419   font-style: italic;
 420   font-weight: normal;
 421   font-size: 0.9em;
 422 }
 423
 424 .estimatedTime small {
 425   position: relative;
 426   top: -1px;
 427 }
 428
 429 .entry {
 430   background-color: #fff;
 431   letter-spacing: normal;
 432   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 433   display: inline-block;
 434   width: 32%;
 435   margin-bottom: 1.5em;
 436   vertical-align: top;
 437   margin-right: 1%;
 438   position: relative;
 439   overflow: hidden;
 440   padding: 1.5em 1.5em 3em;
 441   height: 440px;
 442 }
 443
 444 .entry::before {
 445   content: "";
 446   width: 0;
 447   height: 0;
 448   border-style: solid;
 449   border-color: transparent transparent #000;
 450   border-width: 10px;
 451   position: absolute;
 452   bottom: 0.3em;
 453   z-index: 10;
 454   right: 1.5em;
 455   -webkit-transition: all 0.5s ease;
 456   -moz-transition: all 0.5s ease;
 457   -ms-transition: all 0.5s ease;
 458   -o-transition: all 0.5s ease;
 459   transition: all 0.5s ease;
 460 }
 461
 462 .entry::after {
 463   content: "";
 464   position: absolute;
 465   height: 7px;
 466   width: 100%;
 467   bottom: 0;
 468   left: 0;
 469   background-color: #000;
 470   -webkit-transition: all 0.5s ease;
 471   -moz-transition: all 0.5s ease;
 472   -ms-transition: all 0.5s ease;
 473   -o-transition: all 0.5s ease;
 474   transition: all 0.5s ease;
 475 }
 476
 477 .entry:hover {
 478   box-shadow: 0 3px 10px rgba(0, 0, 0, 1);
 479 }
 480
 481 .entry:hover::after {
 482   height: 40px;
 483 }
 484
 485 .entry:hover::before {
 486   bottom: 2.4em;
 487 }
 488
 489 .entry:hover h2 a {
 490   color: #666;
 491 }
 492
 493 .entry h2 {
 494   text-transform: none;
 495   margin-bottom: 0;
 496   line-height: 1.2;
 497 }
 498
 499 .entry h2::after {
 500   content: none;
 501 }
 502
 503 .entry h2 a {
 504   display: block;
 505   text-decoration: none;
 506   color: #000;
 507   word-wrap: break-word;
 508   -webkit-transition: all 0.5s ease;
 509   -moz-transition: all 0.5s ease;
 510   -ms-transition: all 0.5s ease;
 511   -o-transition: all 0.5s ease;
 512   transition: all 0.5s ease;
 513 }
 514
 515 img.preview {
 516   max-width: calc(100% + 3em);
 517   left: -1.5em;
 518   position: relative;
 519 }
 520
 521 .entry p {
 522   color: #666;
 523   font-size: 0.9em;
 524   line-height: 1.7;
 525   margin-top: 5px;
 526 }
 527
 528 .entry h2 a::first-letter {
 529   text-transform: uppercase;
 530 }
 531
 532 .entry:hover .tools {
 533   bottom: 0;
 534 }
 535
 536 .entry .tools {
 537   position: absolute;
 538   bottom: -50px;
 539   left: 0;
 540   width: 100%;
 541   z-index: 10;
 542   padding-right: 0.5em;
 543   text-align: right;
 544   -webkit-transition: all 0.5s ease;
 545   -moz-transition: all 0.5s ease;
 546   -ms-transition: all 0.5s ease;
 547   -o-transition: all 0.5s ease;
 548   transition: all 0.5s ease;
 549 }
 550
 551 .entry .tools a {
 552   color: #666;
 553   text-decoration: none;
 554   display: block;
 555   padding: 0.4em;
 556 }
 557
 558 .entry .tools a:hover {
 559   color: #fff;
 560 }
 561
 562 .entry .tools li {
 563   display: inline-block;
 564 }
 565
 566 .entry:nth-child(3n+1) {
 567   margin-left: 0;
 568 }
 569
 570 .results {
 571   letter-spacing: -5px;
 572   padding: 0 0 0.5em;
 573 }
 574
 575 .results > * {
 576   display: inline-block;
 577   vertical-align: top;
 578   letter-spacing: normal;
 579   width: 50%;
 580   text-align: right;
 581 }
 582
 583 div.pagination ul {
 584   text-align: right;
 585 }
 586
 587 .nb-results {
 588   text-align: left;
 589   font-style: italic;
 590   color: #999;
 591 }
 592
 593 div.pagination ul > * {
 594   display: inline-block;
 595   margin-left: 0.5em;
 596 }
 597
 598 div.pagination ul a {
 599   color: #999;
 600   text-decoration: none;
 601 }
 602
 603 div.pagination ul a:hover,
 604 div.pagination ul a:focus {
 605   text-decoration: underline;
 606 }
 607
 608 div.pagination ul .prev.disabled,
 609 div.pagination ul .next.disabled {
 610   display: none;
 611 }
 612
 613 div.pagination ul .current {
 614   height: 25px;
 615   padding: 4px 8px;
 616   border: 1px solid #d5d5d5;
 617   text-decoration: none;
 618   font-weight: bold;
 619   color: #000;
 620   background-color: #ccc;
 621 }
 622
 623 /* ==========================================================================
 624   2.1 = "save a link" related styles
 625   ========================================================================== */
 626
 627 .popup-form {
 628   background: rgba(0, 0, 0, 0.5);
 629   position: absolute;
 630   top: 0;
 631   left: 10em;
 632   z-index: 20;
 633   height: 100%;
 634   width: 100%;
 635   margin: 0;
 636   margin-top: -30% !important;
 637   padding: 2em;
 638   display: none;
 639   border-left: 1px #eee solid;
 640 }
 641
 642 .popup-form form {
 643   background-color: #fff;
 644   position: absolute;
 645   top: 0;
 646   left: 0;
 647   z-index: 20;
 648   border: 10px solid #000;
 649   width: 400px;
 650   height: 200px;
 651   padding: 2em;
 652 }
 653
 654 #bagit-form-form .addurl {
 655   margin-left: 0;
 656 }
 657
 658 .closeMessage,
 659 .close-button {
 660   background-color: #000;
 661   color: #fff;
 662   font-size: 1.2em;
 663   line-height: 1.6;
 664   width: 1.6em;
 665   height: 1.6em;
 666   text-align: center;
 667   text-decoration: none;
 668 }
 669
 670 .closeMessage:hover,
 671 .closeMessage:focus,
 672 .close-button:hover,
 673 .close-button:focus {
 674   background-color: #999;
 675   color: #000;
 676 }
 677
 678 .close-button--popup {
 679   display: inline-block;
 680   position: absolute;
 681   top: 0;
 682   right: 0;
 683   font-size: 1.4em;
 684 }
 685
 686 .active-current {
 687   background-color: #999;
 688 }
 689
 690 .active-current::after {
 691   content: "";
 692   width: 0;
 693   height: 0;
 694   position: absolute;
 695   border-style: solid;
 696   border-width: 10px;
 697   border-color: transparent #eee transparent transparent;
 698   right: 0;
 699   top: 50%;
 700   margin-top: -10px;
 701 }
 702
 703 .opacity03 {
 704   opacity: 0.3;
 705 }
 706
 707 .add-to-wallabag-link-after {
 708   background-color: #000;
 709   color: #fff;
 710   padding: 0 3px 2px;
 711 }
 712
 713 a.add-to-wallabag-link-after {
 714   visibility: hidden;
 715   position: absolute;
 716   opacity: 0;
 717   transition-duration: 2s;
 718   transition-timing-function: ease-out;
 719 }
 720
 721 #article article a:hover + a.add-to-wallabag-link-after,
 722 a.add-to-wallabag-link-after:hover {
 723   opacity: 1;
 724   visibility: visible;
 725   transition-duration: 0.3s;
 726   transition-timing-function: ease-in;
 727 }
 728
 729 a.add-to-wallabag-link-after::after {
 730   content: "w";
 731 }
 732
 733 #add-link-result {
 734   font-weight: bold;
 735   font-size: 0.9em;
 736 }
 737
 738 .btn-clickable {
 739   cursor: pointer;
 740 }
 741
 742 /* ==========================================================================
 743    3 = Pictos
 744    ========================================================================== */
 745
 746 @font-face {
 747   font-family: icomoon;
 748   src: url("../fonts/IcoMoon-Free.ttf");
 749   font-weight: normal;
 750   font-style: normal;
 751 }
 752
 753 @font-face {
 754   font-family: 'Material Icons';
 755   font-style: normal;
 756   font-weight: 400;
 757   src: url(../fonts/MaterialIcons-Regular.eot);
 758
 759   /* For IE6-8 */
 760   src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
 761 }
 762
 763 .material-icons {
 764   font-family: 'Material Icons';
 765   font-weight: normal;
 766   font-style: normal;
 767   font-size: 1em;  /* Preferred icon size */
 768   width: 1em;
 769   height: 1em;
 770   display: inline-block;
 771   line-height: 1;
 772   text-transform: none;
 773   letter-spacing: normal;
 774   word-wrap: normal;
 775   white-space: nowrap;
 776   direction: ltr;
 777
 778   /* Support for all WebKit browsers. */
 779   -webkit-font-smoothing: antialiased;
 780
 781   /* Support for Safari and Chrome. */
 782   text-rendering: optimizeLegibility;
 783
 784   /* Support for Firefox. */
 785   -moz-osx-font-smoothing: grayscale;
 786
 787   /* Support for IE. */
 788   font-feature-settings: 'liga';
 789 }
 790
 791 .material-icons.md-18 { font-size: 18px; }
 792 .material-icons.md-24 { font-size: 24px; }
 793 .material-icons.md-36 { font-size: 36px; }
 794 .material-icons.md-48 { font-size: 48px; }
 795
 796 .icon span,
 797 .icon-image span {
 798   position: absolute;
 799   top: -9999px;
 800 }
 801
 802 [class^="icon-"]::before,
 803 [class*=" icon-"]::before {
 804   font-family: icomoon;
 805   speak: none;
 806   font-style: normal;
 807   font-weight: normal;
 808   font-variant: normal;
 809   text-transform: none;
 810   line-height: 1;
 811
 812   /* Enable Ligatures ================ */
 813   letter-spacing: 0;
 814   -webkit-font-feature-settings: "liga";
 815   -moz-font-feature-settings: "liga=1";
 816   -moz-font-feature-settings: "liga";
 817   -ms-font-feature-settings: "liga" 1;
 818   -o-font-feature-settings: "liga";
 819   font-feature-settings: "liga";
 820
 821   /* Better Font Rendering =========== */
 822   -webkit-font-smoothing: antialiased;
 823   -moz-osx-font-smoothing: grayscale;
 824 }
 825
 826 .icon-flattr::before {
 827   content: "\ead4";
 828 }
 829
 830 .icon-mail::before {
 831   content: "\ea86";
 832 }
 833
 834 .icon-up-open::before {
 835   content: "\e80b";
 836 }
 837
 838 .icon-star::before {
 839   content: "\e9d9";
 840 }
 841
 842 .icon-check::before {
 843   content: "\ea10";
 844 }
 845
 846 .icon-link::before {
 847   content: "\e9cb";
 848 }
 849
 850 .icon-reply::before {
 851   content: "\e806";
 852 }
 853
 854 .icon-menu::before {
 855   content: "\e9bd";
 856 }
 857
 858 .icon-clock::before {
 859   content: "\e803";
 860 }
 861
 862 .icon-twitter::before {
 863   content: "\ea96";
 864 }
 865
 866 .icon-down-open::before {
 867   content: "\e809";
 868 }
 869
 870 .icon-trash::before {
 871   content: "\e9ac";
 872 }
 873
 874 .icon-delete::before {
 875   content: "\ea0d";
 876 }
 877
 878 .icon-power::before {
 879   content: "\ea14";
 880 }
 881
 882 .icon-arrow-up-thick::before {
 883   content: "\ea3a";
 884 }
 885
 886 .icon-rss::before {
 887   content: "\e808";
 888 }
 889
 890 .icon-print::before {
 891   content: "\e954";
 892 }
 893
 894 .icon-reload::before {
 895   content: "\ea2e";
 896 }
 897
 898 .icon-price-tags::before {
 899   content: "\e936";
 900 }
 901
 902 .icon-eye::before {
 903   content: "\e9ce";
 904 }
 905
 906 .icon-no-eye::before {
 907   content: "\e9d1";
 908 }
 909
 910 .icon-calendar::before {
 911   content: "\e953";
 912 }
 913
 914 .icon-time::before {
 915   content: "\e952";
 916 }
 917
 918 /* .icon-image class, for image-based icons
 919   ========================================================================== */
 920
 921 .icon-image {
 922   background-size: 16px 16px;
 923   background-repeat: no-repeat;
 924   background-position: center;
 925   padding-right: 1em !important;
 926   padding-left: 1em !important;
 927 }
 928
 929 /* Carrot (http://carrot.org) */
 930 .icon-image--carrot {
 931   background-image: url("../../_global/img/icons/carrot-icon--white.png");
 932 }
 933
 934 /* Diaspora */
 935 .icon-image--diaspora {
 936   background-image: url("../../_global/img/icons/diaspora-icon--black.png");
 937 }
 938
 939 /* Unmark.it */
 940 .icon-image--unmark {
 941   background-image: url("../../_global/img/icons/unmark-icon--black.png");
 942 }
 943
 944 /* shaarli */
 945 .icon-image--shaarli {
 946   background-image: url("../../_global/img/icons/shaarli.png");
 947 }
 948
 949 /* ==========================================================================
 950    Icon selected
 951    ========================================================================== */
 952
 953 .icon-star.fav::before {
 954   color: #fff;
 955 }
 956
 957 .icon-check.archive::before {
 958   color: #fff;
 959 }
 960
 961 /* ==========================================================================
 962    4 = Messages
 963    ========================================================================== */
 964
 965 .messages {
 966   text-align: left;
 967   margin-top: 1em;
 968 }
 969
 970 .messages > * {
 971   display: inline-block;
 972 }
 973
 974 .warning {
 975   font-weight: bold;
 976   display: block;
 977   width: 100%;
 978 }
 979
 980 .more-info {
 981   font-size: 0.85em;
 982   line-height: 1.5;
 983   color: #aaa;
 984 }
 985
 986 .more-info a {
 987   color: #aaa;
 988 }
 989
 990 /* ==========================================================================
 991    5 = Article
 992    ========================================================================== */
 993
 994 #article {
 995   width: 70%;
 996   margin-bottom: 3em;
 997   text-align: justify;
 998 }
 999
1000 #article .tags {
1001   margin-bottom: 1em;
1002 }
1003
1004 #article i {
1005   font-style: normal;
1006 }
1007
1008 blockquote {
1009   border: 1px solid #999;
1010   background-color: #fff;
1011   padding: 1em;
1012   margin: 0;
1013 }
1014
1015 #article h1 {
1016   text-align: left;
1017 }
1018
1019 #article h2,
1020 #article h3,
1021 #article h4 {
1022   text-transform: none;
1023 }
1024
1025 #article h2::after {
1026   content: none;
1027 }
1028
1029 .topPosF {
1030   position: fixed;
1031   right: 20%;
1032   bottom: 2em;
1033   font-size: 1.5em;
1034 }
1035
1036 #article_toolbar {
1037   margin-bottom: 1em;
1038 }
1039
1040 #article_toolbar li {
1041   display: inline-block;
1042   margin: 3px auto;
1043 }
1044
1045 #article_toolbar a {
1046   background-color: #000;
1047   padding: 0.3em 0.5em 0.2em;
1048   color: #fff;
1049   text-decoration: none;
1050 }
1051
1052 #article_toolbar a:hover,
1053 #article_toolbar a:focus {
1054   background-color: #999;
1055 }
1056
1057 #nav-btn-add-tag {
1058   cursor: pointer;
1059 }
1060
1061 .shaarli::before {
1062   content: "*";
1063 }
1064
1065 .return {
1066   text-decoration: none;
1067   margin-top: 1em;
1068   display: block;
1069 }
1070
1071 .return::before {
1072   margin-right: 0.5em;
1073 }
1074
1075 .notags {
1076   font-style: italic;
1077   color: #999;
1078 }
1079
1080 .icon-rss {
1081   background-color: #000;
1082   color: #fff;
1083   padding: 0.2em 0.5em;
1084 }
1085
1086 .icon-rss::before {
1087   position: relative;
1088   top: 2px;
1089 }
1090
1091 .list-tags li {
1092   margin-bottom: 0.5em;
1093 }
1094
1095 .list-tags .icon-rss:hover,
1096 .list-tags .icon-rss:focus {
1097   background-color: #fff;
1098   color: #000;
1099   text-decoration: none;
1100 }
1101
1102 .list-tags a {
1103   text-decoration: none;
1104 }
1105
1106 .list-tags a:hover,
1107 .list-tags a:focus {
1108   text-decoration: underline;
1109 }
1110
1111 pre code {
1112   font-family: "Courier New", Courier, monospace;
1113 }
1114
1115 #filters {
1116   position: fixed;
1117   width: 20%;
1118   height: 100%;
1119   top: 0;
1120   right: 0;
1121   background-color: #fff;
1122   padding: 15px;
1123   padding-right: 30px;
1124   padding-top: 30px;
1125   border-left: 1px #333 solid;
1126   z-index: 12;
1127   min-width: 300px;
1128 }
1129
1130 #filters form .filter-group {
1131   margin: 5px;
1132 }
1133
1134 #download-form {
1135   position: fixed;
1136   width: 10%;
1137   height: 100%;
1138   top: 0;
1139   right: 0;
1140   background-color: #fff;
1141   padding: 15px;
1142   padding-right: 30px;
1143   padding-top: 30px;
1144   border-left: 1px #333 solid;
1145   z-index: 12;
1146   min-width: 200px;
1147 }
1148
1149 #download-form li {
1150   display: block;
1151   padding: 0.5em 2em 0.5em 1em;
1152   color: #fff;
1153   position: relative;
1154   text-transform: uppercase;
1155   text-decoration: none;
1156   font-weight: 400;
1157   font-family: PT Sans, sans-serif;
1158   transition: all 0.5s ease;
1159 }
1160
1161 /* ==========================================================================
1162    6 = Media Queries
1163    ========================================================================== */
1164
1165 @media screen and (max-width: 1050px) {
1166   .entry {
1167     width: 49%;
1168   }
1169
1170   .entry:nth-child(3n+1) {
1171     margin-left: 1.5%;
1172   }
1173
1174   .entry:nth-child(2n+1) {
1175     margin-left: 0;
1176   }
1177 }
1178
1179 @media screen and (max-width: 900px) {
1180   #article {
1181     width: 80%;
1182   }
1183
1184   .topPosF {
1185     right: 2.5em;
1186   }
1187 }
1188
1189 @media screen and (max-width: 700px) {
1190   .entry {
1191     width: 100%;
1192     margin-left: 0;
1193   }
1194
1195   #display-mode {
1196     display: none;
1197   }
1198 }
1199
1200 @media screen and (max-height: 770px) {
1201   .menu.users,
1202   .menu.internal,
1203   .menu.developer {
1204     display: none;
1205   }
1206 }
1207
1208 @media screen and (max-width: 500px) {
1209   .entry {
1210     width: 100%;
1211     margin-left: 0;
1212   }
1213
1214   body > header {
1215     background-color: #333;
1216     position: fixed;
1217     top: 0;
1218     width: 100%;
1219     height: 3em;
1220     z-index: 11;
1221   }
1222
1223   #links li:last-child {
1224     position: static;
1225     width: auto;
1226   }
1227
1228   #links li:last-child a::before {
1229     content: none;
1230   }
1231
1232   .logo {
1233     width: 1.25em;
1234     height: 1.25em;
1235     left: 0;
1236     top: 0;
1237   }
1238
1239   .login > header {
1240     position: static;
1241   }
1242
1243   .login form {
1244     width: 100%;
1245     position: static;
1246     margin-left: 0;
1247   }
1248
1249   .login .logo {
1250     height: auto;
1251     top: 0.5em;
1252     width: 75px;
1253     margin-left: -37.5px;
1254   }
1255
1256   .desktopHide {
1257     display: block;
1258     position: fixed;
1259     z-index: 20;
1260     top: 0;
1261     right: 0;
1262     border: 0;
1263     width: 2.5em;
1264     height: 2.5em;
1265     cursor: pointer;
1266     background-color: #999;
1267     font-size: 1.2em;
1268   }
1269
1270   .desktopHide:hover,
1271   .desktopHide:focus {
1272     background-color: #fff;
1273   }
1274
1275   #links {
1276     display: none;
1277     width: 100%;
1278     height: auto;
1279     padding-top: 3em;
1280   }
1281
1282   #links.menu--open {
1283     display: block;
1284   }
1285
1286   footer {
1287     position: static;
1288     margin-right: 3em;
1289   }
1290
1291   #main {
1292     margin-left: 1.5em;
1293     padding-right: 1.5em;
1294     position: static;
1295     margin-top: 3em;
1296   }
1297
1298   .card-entry-labels {
1299     display: none;
1300   }
1301
1302   #article_toolbar .topPosF {
1303     display: none;
1304   }
1305
1306   #article {
1307     width: 100%;
1308   }
1309
1310   #article h1 {
1311     font-size: 1.5em;
1312   }
1313
1314   #article_toolbar a {
1315     padding: 0.3em 0.4em 0.2em;
1316   }
1317
1318   #display-mode {
1319     display: none;
1320   }
1321
1322   .popup-form,
1323   #bagit-form,
1324   #search-form {
1325     left: 0;
1326     width: 100%;
1327     border-left: none;
1328   }
1329
1330   .popup-form form,
1331   #bagit-form form,
1332   #search-form form {
1333     width: 100%;
1334   }
1335 }