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