tpl/default/css/shaarli.css

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