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