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