tpl/default/css/shaarli.css

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