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     height: 25px;
 323     width: 100px;
 324     background: #0C7653;
 325     border: medium none currentColor;
 326     box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
 327     color: #f5f5f5;
 328 }
 329
 330 .new-version-message {
 331     text-align: center;
 332 }
 333
 334 .new-version-message a {
 335     color: rgb(151, 96, 13);
 336     font-weight: bold;
 337 }
 338
 339 /**
 340  * CONTENT - GENERAL
 341  */
 342 #content {
 343     position: relative;
 344     z-index: 2;
 345     margin-top: 45px;
 346 }
 347
 348 /**
 349  * Plugins additional forms
 350  */
 351 .toolbar-plugin {
 352     margin: 5px 0;
 353     text-align: center;
 354 }
 355
 356 .toolbar-plugin input[type="text"] {
 357     padding: 0 5px;
 358     height: 30px;
 359     width: 300px;
 360     background: #f5f5f5;
 361     border: medium none currentColor;
 362     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
 363     border-radius: 2px;
 364     color: #252525;
 365 }
 366
 367 /* because chrome */
 368 .toolbar-plugin input[type="text"]::-webkit-input-placeholder {
 369     color: #777777;
 370 }
 371
 372 .toolbar-plugin input[type="submit"] {
 373     padding: 0 10px;
 374     height: 30px;
 375     background: #f5f5f5;
 376     border: medium none currentColor;
 377     border-radius: 2px;
 378     color: #252525;
 379 }
 380
 381 @media screen and (max-width: 64em) {
 382     .toolbar-plugin input[type="text"] {
 383         width: 70%;
 384
 385     }
 386 }
 387
 388 /**
 389  * CONTENT - LINKLIST PAGING
 390  * 64em -> lg
 391  */
 392 .linklist-filters {
 393     margin: 10px 0;
 394     color: #252525;
 395     font-size: 0.9em;
 396 }
 397
 398 .linklist-filters a {
 399     padding: 5px 8px;
 400     text-decoration: none;
 401 }
 402
 403 .linklist-filters .filter-off {
 404     color: #252525;
 405     background: #f5f5f5;
 406 }
 407
 408 .linklist-filters .filter-on {
 409     color: #b0ddce;
 410     background: #1b926c;
 411 }
 412
 413 .linklist-pages {
 414     margin: 10px 0;
 415     color: #252525;
 416     text-align: center;
 417 }
 418
 419 .linklist-pages a {
 420     color: #252525;
 421     text-decoration: none;
 422 }
 423
 424 .linklist-pages a:hover {
 425     color: #fff;
 426 }
 427
 428 .linksperpage {
 429     margin: 10px 0;
 430     text-align: right;
 431     color: #252525;
 432     font-size: 0.9em;
 433 }
 434
 435 .linksperpage a {
 436     padding: 5px 5px;
 437     text-decoration: none;
 438     color: #252525;
 439     background: #f5f5f5;
 440 }
 441
 442 .linksperpage a, .linksperpage input[type="text"] {
 443     display: inline-block;
 444     width: 20px;
 445     text-align: center;
 446 }
 447
 448 .linksperpage form {
 449     display: inline;
 450 }
 451
 452 .linksperpage input[type="text"] {
 453     height: 20px;
 454     margin: 0;
 455     padding: 4px 5px 3px 8px;
 456     background: #f5f5f5;
 457     border: medium none currentColor;
 458     color: #252525;
 459     font-size: 0.8em;
 460 }
 461
 462 /**
 463  * CONTENT - LINKLIST ITEMS
 464  */
 465 .linklist-item {
 466     margin: 0 0 15px 0;
 467     background: #f5f5f5;
 468     box-shadow: 2px 2px 0.5em #797979;
 469 }
 470
 471 .linklist-item-title, .linklist-item-title h2  {
 472     margin: 0;
 473     word-wrap: break-word;
 474 }
 475
 476 .linklist-item-title {
 477     position: relative;
 478     background: #f5f5f5;
 479 }
 480
 481 .linklist-item.private .linklist-item-title::before {
 482     position: absolute;
 483     left: 3px;
 484     top: 0;
 485     display: block;
 486     content:"";
 487     background: #F89406;
 488     height: 95%;
 489     width: 2px;
 490     margin-top: 3px;
 491     z-index: 1;
 492 }
 493
 494 .linklist-item-title h2 {
 495     padding: 3px 10px 0 10px;
 496     line-height: 30px;
 497 }
 498
 499 .linklist-item-title a {
 500     font-size: 0.7em;
 501     color: #252525;
 502     text-decoration: none;
 503     vertical-align: middle;
 504     font-family: Roboto Slab, Arial, sans-serif;
 505 }
 506
 507 .linklist-item-title .linklist-link {
 508     font-size: 1.1em;
 509     color: #1b926c;
 510 }
 511
 512 .linklist-item-title .linklist-link:visited {
 513     color: #1b926c;
 514 }
 515
 516 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
 517     color: #252525;
 518 }
 519
 520
 521 .linklist-item-title .label-private {
 522     border: solid 1px #F89406;
 523     font-family: Arial, sans-serif;
 524     font-size: 0.65em;
 525     color: #F89406;
 526 }
 527
 528 .linklist-item-title .fold-button {
 529     display: none;
 530 }
 531
 532 .linklist-item-editbuttons {
 533     float: right;
 534     padding: 8px 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.3em;
 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     line-height: 1.3em;
 565 }
 566
 567 .linklist-item.private .linklist-item-description::before {
 568     position: absolute;
 569     left: 3px;
 570     top: 0;
 571     display: block;
 572     content:"";
 573     background: #F89406;
 574     height: 95%;
 575     width: 2px;
 576     z-index: 1;
 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     display: inline-block;
 764 }
 765
 766
 767 .page-form .button.button-red {
 768     background: #ac2925;
 769 }
 770
 771 .page-form .submit-buttons {
 772     margin-bottom: 10px;
 773 }
 774
 775 @media screen and (min-width: 64em) {
 776     .page-form .submit-buttons {
 777         position: relative;
 778     }
 779
 780     .page-form .submit-buttons .button.button-red {
 781         position: absolute;
 782         right: 5%;
 783     }
 784 }
 785
 786 @media screen and (max-width: 64em) {
 787     .page-form .submit-buttons .button {
 788         display: block;
 789         margin: auto;
 790     }
 791 }
 792
 793 .page-form select {
 794     color: #252525;
 795 }
 796
 797 /**
 798  * PAGE FORM - LIGHT
 799  */
 800 .page-form-light div, .page-form-light p {
 801     text-align: center;
 802 }
 803
 804 /**
 805  * PAGE FORM - COMPLETE
 806  */
 807 .page-form-complete {
 808     #background: #f5f5f5;
 809 }
 810
 811 .page-form-complete div, .page-form-complete p {
 812     color: #252525;
 813 }
 814
 815 .page-form-complete .form-label, .page-form-complete .form-input {
 816     position: relative;
 817     height: 60px;
 818 }
 819
 820 .page-form-complete .form-label label,
 821 .page-form-complete .form-input input,
 822 .page-form-complete .timezone {
 823     position: absolute;
 824     top: 50%;
 825     transform: translateY(-50%);
 826 }
 827
 828 .page-form-complete .form-label label {
 829     text-align: right;
 830     right: 0;
 831     padding: 0 20px;
 832 }
 833
 834 .page-form-complete .label-name {
 835     font-weight: bold;
 836 }
 837
 838 .page-form-complete .label-desc {
 839     font-size: 0.8em;
 840 }
 841
 842 .page-form-complete input[type="text"],
 843 .page-form-complete input[type="password"],
 844 .page-form-complete textarea {
 845     margin: 0;
 846 }
 847
 848 .page-form section {
 849     margin: 10px 0 25px 0;
 850 }
 851
 852 .page-form table {
 853     margin: auto;
 854     width: 90%;
 855 }
 856
 857 .page-form table .order {
 858     text-decoration: none;
 859     color: #252525;
 860 }
 861
 862 .page-form table, .page-form th, .page-form td {
 863     border-width: 1px 0;
 864     border-style: solid;
 865     border-color: #aaaaaa;
 866 }
 867
 868 .page-form th, .page-form td {
 869     padding: 5px;
 870
 871 }
 872
 873 /* Awesomeplete fix */
 874 .page-form .awesomplete {
 875     width: 90%;
 876 }
 877
 878 .page-form .awesomplete input {
 879     width: 100%;
 880 }
 881
 882 .page-form div.awesomplete > ul {
 883     color: black;
 884 }
 885
 886 @media screen and (max-width: 64em) {
 887     .page-form-complete .form-label {
 888         height: inherit;
 889     }
 890
 891     .page-form-complete .form-label label,
 892     .page-form-complete .form-input input,
 893     .page-form-complete .timezone {
 894         position: inherit;
 895         top: inherit;
 896         transform: translateY(0);
 897     }
 898
 899     .page-form-complete .form-input input[type="checkbox"] {
 900         position: absolute;
 901         top: 50%;
 902         right: 50%;
 903         transform: translateY(-50%);
 904     }
 905
 906     .page-form-complete .form-input {
 907         text-align: center;
 908     }
 909
 910     .page-form-complete .form-label label {
 911         display: block;
 912         text-align: left;
 913         margin: 10px 0 0 0;
 914     }
 915
 916     .timezone-continent:after {
 917         content:"\a\a";
 918         white-space: pre;
 919     }
 920
 921     .page-form-complete .radio-buttons {
 922         text-align: left;
 923         padding: 5px 15px;
 924     }
 925 }
 926
 927 /**
 928  * Page visitor (page form extended)
 929  */
 930 .page-visitor {
 931     color: #252525;
 932 }
 933
 934 #page404 {
 935     color: #3f3f3f;
 936 }
 937
 938 /**
 939  * LOGIN
 940  */
 941 #login-form .remember-me {
 942     margin: 5px 0;
 943 }
 944
 945 /**
 946  * Search results
 947  */
 948 .search-result a {
 949     color: white;
 950     text-decoration: none;
 951 }
 952
 953 .search-result .label-tag {
 954     border-color: white;
 955 }
 956
 957 .search-result .label-tag .remove {
 958     border-left: white 1px solid;
 959     padding: 0 0 0 5px;
 960     margin: 0 0 0 5px;
 961 }
 962
 963 /**
 964  * TOOLS
 965  */
 966 .tools-item {
 967     margin: 10px 0;
 968 }
 969
 970 .tools-item .pure-button:hover {
 971     background-image: none;
 972     background-color: #1b926c;
 973     color: #f5f5f5;
 974 }
 975
 976 /**
 977  * PLUGIN ADMIN
 978  */
 979 #pluginform .mobile-row {
 980     font-size: 0.9em;
 981 }
 982
 983 #pluginform .more {
 984     margin-top: 10px;
 985 }
 986
 987 @media screen and (max-width: 64em) {
 988     #pluginform .main-row, #pluginform .main-row td {
 989         border-bottom-style: none;
 990     }
 991
 992     #pluginform .mobile-row, #pluginform .mobile-row td {
 993         border-top-style: none;
 994     }
 995 }
 996
 997 /**
 998  * IMPORT
 999  */
1000 #import-field {
1001     margin: 15px 0;
1002 }
1003
1004 /**
1005  * TAG CLOUD
1006  */
1007 #cloudtag {
1008     padding: 10px;
1009     text-align: center;
1010 }
1011
1012 #cloudtag, #cloudtag a {
1013     color: #000;
1014     text-decoration: none;
1015 }
1016
1017 #cloudtag .count {
1018     color: #7f7f7f;
1019 }
1020
1021 /**
1022  * Picture wall CSS
1023  */
1024 #picwall_container {
1025     margin: 0 10px 10px 10px;
1026     color: #252525;
1027     background-color: #f5f5f5;
1028     clear: both;
1029 }
1030
1031 .picwall_pictureframe {
1032     margin: 2px;
1033     background-color: #f5f5f5;
1034     z-index: 5;
1035     position: relative;
1036     display: table-cell;
1037     vertical-align: middle;
1038     width: 90px;
1039     height: 90px;
1040     overflow: hidden;
1041     text-align: center;
1042     float: left;
1043 }
1044
1045 .b-lazy {
1046     -webkit-transition: opacity 500ms ease-in-out;
1047     -moz-transition: opacity 500ms ease-in-out;
1048     -o-transition: opacity 500ms ease-in-out;
1049     transition: opacity 500ms ease-in-out;
1050     opacity: 0;
1051 }
1052 .b-lazy.b-loaded {
1053     opacity: 1;
1054 }
1055
1056 .picwall_pictureframe img {
1057     max-width: 100%;
1058     height: auto;
1059     color: transparent;
1060 } /* Adapt the width of the image */
1061
1062 .picwall_pictureframe a {
1063     text-decoration: none;
1064 }
1065
1066 /* CSS to show title when hovering an image - no javascript required. */
1067 .picwall_pictureframe span.info {
1068     display: none;
1069     font-family: Arial, sans-serif;
1070 }
1071
1072 .picwall_pictureframe:hover span.info {
1073     display: block;
1074     position: absolute;
1075     top: 0;
1076     left: 0;
1077     width: 90px;
1078     height: 90px;
1079     font-weight: bold;
1080     font-size: 9pt;
1081     color: #f5f5f5;
1082     text-align: left;
1083     background-color: rgba(0, 0, 0, 0.8);
1084 }
1085
1086 /**
1087  * DAILY
1088  */
1089 .daily-desc {
1090     color: #7f7f7f;
1091     font-size: 0.8em;
1092 }
1093
1094 .daily-about a {
1095     color: #343434;
1096     text-decoration: none;
1097 }
1098
1099 .daily-about a:hover {
1100     color: #7f7f7f;
1101 }
1102
1103 .daily-about h3:before, .daily-about h3:after {
1104     display: block;
1105     content:"";
1106     background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
1107     height: 1px;
1108     width: 90%;
1109     margin: 10px auto;
1110 }
1111
1112 .daily-entry {
1113     padding: 0 10px;
1114 }
1115
1116 .daily-entry .daily-entry-title:after {
1117     display: block;
1118     content:"";
1119     background: linear-gradient(to right, #fff, #515151, #fff);
1120     height: 1px;
1121     width: 70%;
1122     margin: 5px auto;
1123 }
1124
1125 .daily-entry .daily-entry-title {
1126     margin: 10px 0 0 0;
1127 }
1128
1129 .daily-entry .daily-entry-title a {
1130     color: #000;
1131     text-decoration: none;
1132 }
1133
1134 .daily-entry .daily-entry-description {
1135     padding: 5px 5px 0 5px;
1136     font-size: 0.9em;
1137     text-align: justify;
1138     word-wrap: break-word;
1139 }
1140
1141 .daily-entry .daily-entry-tags {
1142     padding: 0 5px 5px 5px;
1143     font-size: 0.8em;
1144 }
1145
1146 .daily-entry-thumbnail {
1147     float: left;
1148     margin: 15px 5px 5px 5px;
1149 }
1150
1151 .daily-entry-description a {
1152     text-decoration: none;
1153     color: #1b926c;
1154 }
1155
1156 .daily-entry-description a:hover {
1157     text-shadow: 1px 1px #ddd;
1158 }
1159
1160 .daily-entry-description a:visited {
1161     color: #20b988;
1162 }