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