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