tpl/default/css/shaarli.css

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