tpl/default/css/shaarli.css

   1 /**
   2  * General
   3  */
   4 body {
   5     background: #d0d0d0;
   6 }
   7
   8 .strong {
   9     font-weight: bold;
  10 }
  11
  12 .clear {
  13     clear: both;
  14 }
  15
  16 .center {
  17     text-align: center;
  18     margin: auto;
  19 }
  20
  21 .label {
  22     display: inline-block;
  23     padding: .25em .4em;
  24     font-size: 75%;
  25     font-weight: 700;
  26     line-height: 1;
  27     text-align: center;
  28     white-space: nowrap;
  29     vertical-align: baseline;
  30     border-radius: .25rem;
  31 }
  32
  33 pre {
  34     max-width: 100%;
  35 }
  36
  37 @font-face {
  38     font-family: 'Roboto';
  39     font-weight: 400;
  40     font-style: normal;
  41     src:
  42     local('Roboto'),
  43     local('Roboto-Regular'),
  44     url('../fonts/Roboto-Regular.woff2') format('woff2'),
  45     url('../fonts/Roboto-Regular.woff') format('woff');
  46 }
  47
  48 @font-face {
  49     font-family: 'Roboto';
  50     font-weight: 700;
  51     font-style: normal;
  52     src:
  53     local('Roboto'),
  54     local('Roboto-Bold'),
  55     url('../fonts/Roboto-Bold.woff2') format('woff2'),
  56     url('../fonts/Roboto-Bold.woff') format('woff');
  57 }
  58
  59 body, .pure-g [class*="pure-u"] {
  60     font-family: Roboto, Arial, sans-serif;
  61 }
  62
  63 /**
  64  * Extends Pure grids responsive to hide items.
  65  * Use xx-0 to hide an item on xx screen.
  66  * Display it at any level with xx-visible.
  67  */
  68 .pure-u-0 { display: none !important; }
  69 @media screen and (min-width: 35.5em) {
  70     .pure-u-sm-0 { display: none !important; }
  71     .pure-u-sm-visible { display: inline-block !important; }
  72 }
  73 @media screen and (min-width: 48em) {
  74     .pure-u-md-0 { display: none !important; }
  75     .pure-u-md-visible { display: inline-block !important; }
  76 }
  77 @media screen and (min-width: 64em) {
  78     .pure-u-lg-0 { display: none !important; }
  79     .pure-u-lg-visible { display: inline-block !important; }
  80 }
  81 @media screen and (min-width: 80em) {
  82     .pure-u-xl-0 { display: none !important; }
  83     .pure-u-xl-visible { display: inline-block !important; }
  84 }
  85
  86 /**
  87  * Make pure-extras alert closable.
  88  */
  89 .pure-alert-closable .fa-times {
  90     float: right;
  91 }
  92 .pure-alert-close {
  93     cursor: pointer;
  94 }
  95
  96 .pure-alert-success {
  97     background-color: #1b926c;
  98 }
  99
 100 .anchor:target {
 101     padding-top: 40px;
 102 }
 103 /**
 104  * MENU
 105  **/
 106 .shaarli-menu {
 107     position: fixed;
 108     top: 0;
 109     width: 100%;
 110     --height: 50px;
 111     background: #1b926c;
 112     -webkit-font-smoothing: antialiased;
 113     /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
 114     max-height: 45px;
 115     transition: max-height 0.5s;
 116     overflow: hidden;
 117     z-index: 999;
 118 }
 119
 120 /* Chrome bugfix: with 100% height, it only displays the first element. */
 121 .pure-menu-item {
 122     height: 45px;
 123 }
 124
 125 .shaarli-menu.open {
 126     max-height: 500px;
 127     transition: max-height 0.75s;
 128 }
 129
 130 .head-logo {
 131     float: left;
 132     margin: 0 5px 0 0;
 133 }
 134
 135 .pure-menu-link,
 136 .pure-menu-link:visited,
 137 .pure-menu-selected .pure-menu-link,
 138 .pure-menu-selected .pure-menu-link:visited {
 139     padding: 0.8em 1em;
 140     color: #f5f5f5;
 141 }
 142
 143 .pure-menu-link:hover, .pure-menu-link:focus,
 144 .pure-menu-selected .pure-menu-link:hover,
 145 .pure-menu-selected .pure-menu-link:focus {
 146     color: #fff;
 147     background: transparent;
 148 }
 149
 150 .pure-menu-item:hover::after {
 151     margin: -4px auto 0 auto;
 152     display: block;
 153     content:"";
 154     background: #fff;
 155     height: 4px;
 156     width: 100%;
 157 }
 158
 159 .menu-toggle {
 160     width: 34px;
 161     height: 45px;
 162     position: absolute;
 163     top: 5px;
 164     right: 0;
 165     display: none;
 166 }
 167
 168 .menu-toggle .bar {
 169     background-color: #b0ddce;
 170     display: block;
 171     width: 20px;
 172     height: 2px;
 173     border-radius: 100px;
 174     position: absolute;
 175     top: 18px;
 176     right: 7px;
 177     transition: all 0.5s;
 178 }
 179
 180 .menu-toggle .bar:first-child {
 181     transform: translateY(-6px);
 182 }
 183
 184 .menu-toggle.x .bar {
 185     transform: rotate(45deg);
 186 }
 187
 188 .menu-toggle.x .bar:first-child {
 189     transform: rotate(-45deg);
 190 }
 191
 192 @media screen and (max-width: 64em) {
 193     .menu-toggle {
 194         display: block;
 195     }
 196 }
 197
 198 .header-buttons {
 199     text-align: right;
 200 }
 201
 202 .linkcount {
 203     color: #252525;
 204     font-size: 0.8em;
 205 }
 206
 207 @media screen and (min-width: 64em) {
 208     .linkcount {
 209         position: absolute;
 210         right: 5px;
 211     }
 212 }
 213
 214 #search, #search-linklist {
 215     text-align: center;
 216     width: 100%;
 217 }
 218
 219 #search input[type="text"], #search-linklist input[type="text"] {
 220     padding: 0 5px;
 221     height: 30px;
 222     width: 260px;
 223     background: #f5f5f5;
 224     border: medium none currentColor;
 225     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
 226     border-radius: 2px;
 227     color: #252525;
 228 }
 229
 230 /* because chrome */
 231 #search input[type="text"]::-webkit-input-placeholder,
 232 #search-linklist input[type="text"]::-webkit-input-placeholder {
 233     color: #777777;
 234 }
 235
 236 #search button,
 237 #search-linklist button {
 238     background: transparent;
 239     border: none;
 240 }
 241
 242 #search button {
 243     color: #f5f5f5;
 244 }
 245
 246 #search-linklist button {
 247     color: #252525;
 248 }
 249
 250 #search button:hover,
 251 #search-linklist button:hover {
 252     color: #fff;
 253 }
 254
 255 #search-linklist {
 256     padding: 5px 0;
 257 }
 258
 259 @media screen and (min-width: 64em) {
 260     #search .searchform,
 261     #search-linklist .searchform {
 262         margin-right: 25px;
 263         text-align: right;
 264     }
 265
 266     #search .tagfilter,
 267     #search-linklist .tagfilter {
 268         margin-left: 25px;
 269         text-align: left;
 270     }
 271 }
 272 @media screen and (max-width: 64em) {
 273     #search, #search * {
 274         visibility: hidden;
 275     }
 276 }
 277
 278 #header-login-form input[type="text"], #header-login-form input[type="password"] {
 279     width: 200px;
 280 }
 281
 282 /* because chrome */
 283 #header-login-form input[type="text"]::-webkit-input-placeholder,
 284 #header-login-form input[type="password"]::-webkit-input-placeholder {
 285     color: #777777;
 286 }
 287
 288 .subheader-form {
 289     visibility: hidden;
 290     position: fixed;
 291     width: 100%;
 292     text-align: center;
 293     background: #1b926c;
 294     display: block;
 295     z-index: 999;
 296     height: 30px;
 297     padding: 5px 0;
 298 }
 299
 300 @media screen and (min-width: 64em) {
 301     .subheader-form.open, .subheader-form.open * {
 302         visibility: visible;
 303     }
 304 }
 305
 306 .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
 307     margin: 0 0 5px 0;
 308     padding: 5px 5px 3px 15px;
 309     height: 20px;
 310     width: 20%;
 311     background: #f5f5f5;
 312     border: medium none currentColor;
 313     border-radius: 2px;
 314     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
 315     color: #252525;
 316 }
 317
 318 /* because chrome */
 319 .subheader-form input[type="text"]::-webkit-input-placeholder,
 320 .subheader-form input[type="password"]::-webkit-input-placeholder
 321 {
 322     color: #252525;
 323 }
 324
 325 .subheader-form .remember-me {
 326     display: inline-block;
 327     width: auto;
 328     padding: 5px 20px 3px 20px;
 329     cursor: pointer;
 330 }
 331
 332 .subheader-form .remember-me label, .subheader-form .remember-me input {
 333     cursor: pointer;
 334 }
 335
 336 .subheader-form input[type="submit"] {
 337     display: inline-block;
 338     margin: 0 0 5px 0;
 339     padding: 4px 0 4px 0;
 340     height: 28px;
 341     width: 100px;
 342     background: #1b926c;
 343     border: 1px solid #f5f5f5;
 344     color: #f5f5f5;
 345     border-radius: 2px;
 346 }
 347
 348 .subheader-form input[type="submit"]:hover {
 349     background: #f5f5f5;
 350     color: #1b926c;
 351 }
 352
 353 .new-version-message {
 354     text-align: center;
 355 }
 356
 357 .new-version-message a {
 358     color: rgb(151, 96, 13);
 359     font-weight: bold;
 360 }
 361
 362 /**
 363  * CONTENT - GENERAL
 364  */
 365 #content {
 366     position: relative;
 367     z-index: 2;
 368     margin-top: 45px;
 369 }
 370
 371 /**
 372  * Plugins additional forms
 373  */
 374 .toolbar-plugin {
 375     margin: 5px 0;
 376     text-align: center;
 377 }
 378
 379 .toolbar-plugin input[type="text"] {
 380     padding: 0 5px;
 381     height: 30px;
 382     width: 300px;
 383     background: #f5f5f5;
 384     border: medium none currentColor;
 385     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
 386     border-radius: 2px;
 387     color: #252525;
 388 }
 389
 390 /* because chrome */
 391 .toolbar-plugin input[type="text"]::-webkit-input-placeholder {
 392     color: #777777;
 393 }
 394
 395 .toolbar-plugin input[type="submit"] {
 396     padding: 0 10px;
 397     height: 30px;
 398     background: #f5f5f5;
 399     border: medium none currentColor;
 400     border-radius: 2px;
 401     color: #252525;
 402 }
 403
 404 .toolbar-plugin input[type="submit"]:hover {
 405     background: #fff;
 406 }
 407
 408 @media screen and (max-width: 64em) {
 409     .toolbar-plugin input[type="text"] {
 410         width: 70%;
 411
 412     }
 413 }
 414
 415 /**
 416  * CONTENT - LINKLIST PAGING
 417  * 64em -> lg
 418  */
 419 .linklist-filters {
 420     margin: 10px 0;
 421     color: #252525;
 422     font-size: 0.9em;
 423 }
 424
 425 .linklist-filters a {
 426     padding: 5px 8px;
 427     text-decoration: none;
 428 }
 429
 430 .linklist-filters .filter-off {
 431     color: #252525;
 432     background: #f5f5f5;
 433 }
 434
 435 .linklist-filters .filter-on {
 436     color: #b0ddce;
 437     background: #1b926c;
 438 }
 439
 440 .linklist-pages {
 441     margin: 10px 0;
 442     color: #252525;
 443     text-align: center;
 444 }
 445
 446 .linklist-pages a {
 447     color: #252525;
 448     text-decoration: none;
 449 }
 450
 451 .linklist-pages a:hover {
 452     color: #fff;
 453 }
 454
 455 .linksperpage {
 456     margin: 10px 0;
 457     text-align: right;
 458     color: #252525;
 459     font-size: 0.9em;
 460 }
 461
 462 .linksperpage a {
 463     padding: 5px 5px;
 464     text-decoration: none;
 465     color: #252525;
 466     background: #f5f5f5;
 467 }
 468
 469 .linksperpage a, .linksperpage input[type="text"] {
 470     display: inline-block;
 471     width: 20px;
 472     text-align: center;
 473 }
 474
 475 .linksperpage form {
 476     display: inline;
 477 }
 478
 479 .linksperpage input[type="text"] {
 480     height: 20px;
 481     margin: 0;
 482     padding: 4px 5px 3px 8px;
 483     background: #f5f5f5;
 484     border: medium none currentColor;
 485     color: #252525;
 486     font-size: 0.8em;
 487 }
 488
 489 /**
 490  * CONTENT - LINKLIST ITEMS
 491  */
 492 .linklist-item {
 493     margin: 0 0 15px 0;
 494     background: #f5f5f5;
 495     box-shadow: 2px 2px 0.5em #797979;
 496 }
 497
 498 .linklist-item-title, .linklist-item-title h2  {
 499     margin: 0;
 500     word-wrap: break-word;
 501 }
 502
 503 .linklist-item-title {
 504     position: relative;
 505     background: #f5f5f5;
 506 }
 507
 508 .linklist-item-title h2 {
 509     padding: 3px 10px 0 10px;
 510     line-height: 30px;
 511 }
 512
 513 .linklist-item-title a {
 514     font-size: 0.7em;
 515     color: #252525;
 516     text-decoration: none;
 517     vertical-align: middle;
 518 }
 519
 520 .linklist-item-title .linklist-link {
 521     font-size: 1.1em;
 522     color: #1b926c;
 523 }
 524
 525 .linklist-item-title .linklist-link:visited {
 526     color: #1b926c;
 527 }
 528
 529 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 530     color: #252525;
 531 }
 532
 533
 534 .linklist-item-title .label-private {
 535     border: solid 1px #F89406;
 536     font-family: Arial, sans-serif;
 537     font-size: 0.65em;
 538     color: #F89406;
 539 }
 540
 541 .linklist-item-title .fold-button {
 542     display: none;
 543 }
 544
 545 .linklist-item-editbuttons {
 546     float: right;
 547     padding: 8px 5px;
 548 }
 549
 550 .linklist-item-editbuttons * {
 551     display: block;
 552     float: left;
 553     margin: 0 1px;
 554 }
 555
 556 .linklist-item-editbuttons a {
 557     font-size: 1em;
 558 }
 559
 560 .edit-link {
 561     font-size: 1.2em;
 562     color: #0b5ea6;
 563 }
 564
 565 .delete-link {
 566     font-size: 1.3em;
 567     color: #ac2925 !important;
 568 }
 569
 570 .linklist-item-description {
 571     position: relative;
 572     padding: 10px;
 573     word-wrap: break-word;
 574     color: #252525;
 575     line-height: 1.3em;
 576 }
 577
 578  {
 579     position: absolute;
 580     left: 3px;
 581     top: 0;
 582     display: block;
 583     content:"";
 584     background: #F89406;
 585     height: 95%;
 586     width: 2px;
 587     z-index: 1;
 588 }
 589
 590 .linklist-item-description a {
 591     text-decoration: none;
 592     color: #1b926c;
 593 }
 594
 595 .linklist-item-description a:hover {
 596     color: #252525;
 597 }
 598
 599 .linklist-item-description a:visited {
 600     color: #14553f;
 601 }
 602
 603 .linklist-item-thumbnail {
 604     position: relative;
 605     margin-top: 10px;
 606     padding: 10px;
 607     float: left;
 608     z-index: 50;
 609 }
 610
 611 .linklist-item.private .linklist-item-title::before,
 612 .linklist-item.private .linklist-item-description::before,
 613 .linklist-item.private .linklist-item-thumbnail::before {
 614     position: absolute;
 615     left: 3px;
 616     top: 0;
 617     display: block;
 618     content:"";
 619     background: #F89406;
 620     height: 95%;
 621     width: 2px;
 622     z-index: 1;
 623 }
 624
 625 .linklist-item.private .linklist-item-title::before {
 626     margin-top: 3px;
 627 }
 628
 629 .linklist-item-infos {
 630     padding: 8px 8px 5px 8px;
 631     background: #ddd;
 632     color: #252525;
 633 }
 634
 635 .linklist-item-infos a {
 636     color: #252525;
 637     text-decoration: none;
 638 }
 639
 640 .linklist-item-infos a:hover {
 641     color: #000;
 642 }
 643
 644 .linklist-item-infos .linklist-item-tags {
 645     font-size: 0.8em;
 646 }
 647
 648 .linklist-item-infos .label-tag {
 649     font-size: 1em;
 650 }
 651
 652 .linklist-item-infos-dateblock {
 653     font-size: 0.9em;
 654 }
 655
 656 .linklist-plugin-icon {
 657     width: 13px;
 658     height: 13px;
 659 }
 660
 661 .linklist-item-infos-url {
 662     text-align: right;
 663     white-space: nowrap;
 664     overflow: hidden;
 665     text-overflow: ellipsis;
 666     font-size: 0.8em;
 667 }
 668
 669 .linklist-item-infos .mobile-buttons {
 670     text-align: right;
 671 }
 672
 673 .linklist-item-infos .linklist-plugin-icon {
 674     display: inline-block;
 675     margin: 0 2px;
 676     width: 16px;
 677     height: 16px;
 678 }
 679
 680 /** 64em -> lg **/
 681 @media screen and (max-width: 64em) {
 682     .linklist-item-infos-url {
 683         text-align: left;
 684     }
 685 }
 686
 687 /**
 688  * Footer
 689  */
 690 #footer {
 691     margin: 20px 0;
 692     padding: 5px;
 693     text-align: center;
 694     color: #252525;
 695 }
 696
 697 #footer:before {
 698     display: block;
 699     content:"";
 700     background: linear-gradient(to right, #949393, #252525, #949393);
 701     height: 1px;
 702     width: 80%;
 703     margin: 10px auto;
 704 }
 705
 706 #footer a {
 707     color: #252525;
 708 }
 709
 710 /**
 711  * PAGE FORM
 712  */
 713 .page-form {
 714     margin: 20px 0 0 0;
 715     background: #f5f5f5;
 716     box-shadow: 1px 1px 2px #797979;
 717     color: #252525;
 718     overflow: hidden;
 719 }
 720
 721 .page-form .window-title {
 722     margin: 0 0 10px 0;
 723     padding: 10px 0;
 724     width: 100%;
 725     color: #1b926c;
 726     background: #f5f5f5;
 727     text-align: center;
 728 }
 729
 730 .page-form .window-subtitle {
 731     text-align: center;
 732 }
 733
 734 .page-form a {
 735     color: #1b926c;
 736     font-weight: bold;
 737 }
 738
 739 .page-form p {
 740     padding: 0 10px;
 741     margin: 0;
 742 }
 743
 744 .page-form input[type="text"],
 745 .page-form input[type="password"],
 746 .page-form textarea {
 747     box-sizing: border-box;
 748     margin: 10px 0;
 749     padding: 5px 5px 3px 15px;
 750     height: 35px;
 751     width: 90%;
 752     background: #eeeeee;
 753     border: solid 1px #d8d8d8;
 754     border-radius: 2px;
 755     color: #252525;
 756 }
 757
 758 .page-form textarea {
 759     min-height: 240px;
 760     padding: 15px 5px 3px 15px;
 761     resize: vertical;
 762     overflow-y: auto;
 763     word-wrap:break-word
 764 }
 765
 766 /* because chrome */
 767 .page-form input[type="text"]::-webkit-input-placeholder,
 768 .page-form input[type="password"]::-webkit-input-placeholder {
 769     color: #777777;
 770 }
 771
 772 .page-form input[type="submit"], .page-form a.button {
 773     margin: 15px 5px;
 774     height: 35px;
 775     line-height: 35px;
 776     width: 150px;
 777     background: #1b926c;
 778     color: #f5f5f5;
 779     border: none;
 780     box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
 781     font-size: 1.2em;
 782     text-decoration: none;
 783     vertical-align: center;
 784     font-weight: normal;
 785     display: inline-block;
 786 }
 787
 788
 789 .page-form .button.button-red {
 790     background: #ac2925;
 791 }
 792
 793 .page-form .submit-buttons {
 794     margin-bottom: 10px;
 795 }
 796
 797 @media screen and (min-width: 64em) {
 798     .page-form .submit-buttons {
 799         position: relative;
 800     }
 801
 802     .page-form .submit-buttons .button.button-red {
 803         position: absolute;
 804         right: 5%;
 805     }
 806 }
 807
 808 @media screen and (max-width: 64em) {
 809     .page-form .submit-buttons .button {
 810         display: block;
 811         margin: auto;
 812     }
 813 }
 814
 815 .page-form select {
 816     color: #252525;
 817 }
 818
 819 /**
 820  * PAGE FORM - LIGHT
 821  */
 822 .page-form-light div, .page-form-light p {
 823     text-align: center;
 824 }
 825
 826 /**
 827  * PAGE FORM - COMPLETE
 828  */
 829 .page-form-complete {
 830     #background: #f5f5f5;
 831 }
 832
 833 .page-form-complete div, .page-form-complete p {
 834     color: #252525;
 835 }
 836
 837 .page-form-complete .form-label, .page-form-complete .form-input {
 838     position: relative;
 839     height: 60px;
 840 }
 841
 842 .page-form-complete .form-label label,
 843 .page-form-complete .form-input input,
 844 .page-form-complete .form-input select.align,
 845 .page-form-complete .timezone {
 846     position: absolute;
 847     top: 50%;
 848     transform: translateY(-50%);
 849 }
 850
 851 .page-form-complete .form-label label {
 852     text-align: right;
 853     right: 0;
 854     padding: 0 20px;
 855 }
 856
 857 .page-form-complete .label-name {
 858     font-weight: bold;
 859 }
 860
 861 .page-form-complete .label-desc {
 862     font-size: 0.8em;
 863 }
 864
 865 .page-form-complete input[type="text"],
 866 .page-form-complete input[type="password"],
 867 .page-form-complete textarea {
 868     margin: 0;
 869 }
 870
 871 .page-form section {
 872     margin: 10px 0 25px 0;
 873 }
 874
 875 .page-form table {
 876     margin: auto;
 877     width: 90%;
 878 }
 879
 880 .page-form table .order {
 881     text-decoration: none;
 882     color: #252525;
 883 }
 884
 885 .page-form table, .page-form th, .page-form td {
 886     border-width: 1px 0;
 887     border-style: solid;
 888     border-color: #aaaaaa;
 889 }
 890
 891 .page-form th, .page-form td {
 892     padding: 5px;
 893
 894 }
 895
 896 /* Awesomeplete fix */
 897 div.awesomplete {
 898     width: inherit;
 899 }
 900
 901 div.awesomplete > input {
 902     display: inherit;
 903 }
 904
 905 div.awesomplete > ul {
 906     z-index: 9999;
 907 }
 908
 909 .page-form .awesomplete {
 910     width: 90%;
 911 }
 912
 913 .page-form .awesomplete input {
 914     width: 100%;
 915 }
 916
 917 .page-form div.awesomplete > ul {
 918     color: black;
 919 }
 920
 921 form[name="linkform"].page-form {
 922     overflow: visible;
 923 }
 924
 925 @media screen and (max-width: 64em) {
 926     .page-form-complete .form-label {
 927         height: inherit;
 928     }
 929
 930     .page-form-complete .form-label label,
 931     .page-form-complete .form-input input,
 932     .page-form-complete .timezone {
 933         position: inherit;
 934         top: inherit;
 935         transform: translateY(0);
 936     }
 937
 938     .page-form-complete .form-input input[type="checkbox"] {
 939         position: absolute;
 940         top: 50%;
 941         right: 50%;
 942         transform: translateY(-50%);
 943     }
 944
 945     .page-form-complete .form-input {
 946         text-align: center;
 947     }
 948
 949     .page-form-complete .form-label label {
 950         display: block;
 951         text-align: left;
 952         margin: 10px 0 0 0;
 953     }
 954
 955     .timezone-continent:after {
 956         content:"\a\a";
 957         white-space: pre;
 958     }
 959
 960     .page-form-complete .radio-buttons {
 961         text-align: left;
 962         padding: 5px 15px;
 963     }
 964 }
 965
 966 /**
 967  * Page visitor (page form extended)
 968  */
 969 .page-visitor {
 970     color: #252525;
 971 }
 972
 973 #page404 {
 974     color: #3f3f3f;
 975 }
 976
 977 /**
 978  * LOGIN
 979  */
 980 #login-form .remember-me {
 981     margin: 5px 0;
 982 }
 983
 984 /**
 985  * Search results
 986  */
 987 .search-result a {
 988     color: white;
 989     text-decoration: none;
 990 }
 991
 992 .search-result .label-tag {
 993     border-color: white;
 994 }
 995
 996 .search-result .label-tag .remove {
 997     border-left: white 1px solid;
 998     padding: 0 0 0 5px;
 999     margin: 0 0 0 5px;
1000 }
1001
1002 .search-result .label-private {
1003     border: 1px solid white;
1004 }
1005
1006 /**
1007  * TOOLS
1008  */
1009 .tools-item {
1010     margin: 10px 0;
1011 }
1012
1013 .tools-item .pure-button:hover {
1014     background-image: none;
1015     background-color: #1b926c;
1016     color: #f5f5f5;
1017 }
1018
1019 /**
1020  * PLUGIN ADMIN
1021  */
1022 #pluginform .mobile-row {
1023     font-size: 0.9em;
1024 }
1025
1026 #pluginform .more {
1027     margin-top: 10px;
1028 }
1029
1030 @media screen and (max-width: 64em) {
1031     #pluginform .main-row, #pluginform .main-row td {
1032         border-bottom-style: none;
1033     }
1034
1035     #pluginform .mobile-row, #pluginform .mobile-row td {
1036         border-top-style: none;
1037     }
1038 }
1039
1040 /**
1041  * IMPORT
1042  */
1043 #import-field {
1044     margin: 15px 0;
1045 }
1046
1047 /**
1048  * TAG CLOUD
1049  */
1050 #cloudtag {
1051     padding: 10px;
1052     text-align: center;
1053 }
1054
1055 #cloudtag, #cloudtag a {
1056     color: #000;
1057     text-decoration: none;
1058 }
1059
1060 #cloudtag .count {
1061     color: #7f7f7f;
1062 }
1063
1064 /**
1065  * Picture wall CSS
1066  */
1067 #picwall_container {
1068     margin: 0 10px 10px 10px;
1069     color: #252525;
1070     background-color: #f5f5f5;
1071     clear: both;
1072 }
1073
1074 .picwall_pictureframe {
1075     margin: 2px;
1076     background-color: #f5f5f5;
1077     z-index: 5;
1078     position: relative;
1079     display: table-cell;
1080     vertical-align: middle;
1081     width: 90px;
1082     height: 90px;
1083     overflow: hidden;
1084     text-align: center;
1085     float: left;
1086 }
1087
1088 .b-lazy {
1089     -webkit-transition: opacity 500ms ease-in-out;
1090     -moz-transition: opacity 500ms ease-in-out;
1091     -o-transition: opacity 500ms ease-in-out;
1092     transition: opacity 500ms ease-in-out;
1093     opacity: 0;
1094 }
1095 .b-lazy.b-loaded {
1096     opacity: 1;
1097 }
1098
1099 .picwall_pictureframe img {
1100     max-width: 100%;
1101     height: auto;
1102     color: transparent;
1103 } /* Adapt the width of the image */
1104
1105 .picwall_pictureframe a {
1106     text-decoration: none;
1107 }
1108
1109 /* CSS to show title when hovering an image - no javascript required. */
1110 .picwall_pictureframe span.info {
1111     display: none;
1112     font-family: Arial, sans-serif;
1113 }
1114
1115 .picwall_pictureframe:hover span.info {
1116     display: block;
1117     position: absolute;
1118     top: 0;
1119     left: 0;
1120     width: 90px;
1121     height: 90px;
1122     font-weight: bold;
1123     font-size: 9pt;
1124     color: #f5f5f5;
1125     text-align: left;
1126     background-color: rgba(0, 0, 0, 0.8);
1127 }
1128
1129 /**
1130  * DAILY
1131  */
1132 .daily-desc {
1133     color: #7f7f7f;
1134     font-size: 0.8em;
1135 }
1136
1137 .daily-about a {
1138     color: #343434;
1139     text-decoration: none;
1140 }
1141
1142 .daily-about a:hover {
1143     color: #7f7f7f;
1144 }
1145
1146 .daily-about h3:before, .daily-about h3:after {
1147     display: block;
1148     content:"";
1149     background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
1150     height: 1px;
1151     width: 90%;
1152     margin: 10px auto;
1153 }
1154
1155 .daily-entry {
1156     padding: 0 10px;
1157 }
1158
1159 .daily-entry .daily-entry-title:after {
1160     display: block;
1161     content:"";
1162     background: linear-gradient(to right, #fff, #515151, #fff);
1163     height: 1px;
1164     width: 70%;
1165     margin: 5px auto;
1166 }
1167
1168 .daily-entry .daily-entry-title {
1169     margin: 10px 0 0 0;
1170 }
1171
1172 .daily-entry .daily-entry-title a {
1173     color: #000;
1174     text-decoration: none;
1175 }
1176
1177 .daily-entry .daily-entry-description {
1178     padding: 5px 5px 0 5px;
1179     font-size: 0.9em;
1180     text-align: justify;
1181     word-wrap: break-word;
1182 }
1183
1184 .daily-entry .daily-entry-tags {
1185     padding: 0 5px 5px 5px;
1186     font-size: 0.8em;
1187 }
1188
1189 .daily-entry-thumbnail {
1190     float: left;
1191     margin: 15px 5px 5px 15px;
1192 }
1193
1194 .daily-entry-description a {
1195     text-decoration: none;
1196     color: #1b926c;
1197 }
1198
1199 .daily-entry-description a:hover {
1200     text-shadow: 1px 1px #ddd;
1201 }
1202
1203 .daily-entry-description a:visited {
1204     color: #20b988;
1205 }
1206
1207 /*
1208  * Fix empty bookmarklet name in Firefox
1209  */
1210 .pure-button {
1211     -moz-user-select: auto;
1212 }