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