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