assets/default/scss/shaarli.scss

   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: 5px 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-filters .filter-block {
 457     color: #f5f5f5;
 458     background: #ac2925;
 459 }
 460
 461 .linklist-pages {
 462     margin: 5px 0;
 463     color: #252525;
 464     text-align: center;
 465 }
 466
 467 .linklist-pages a {
 468     color: #252525;
 469     text-decoration: none;
 470 }
 471
 472 .linklist-pages a:hover {
 473     color: #fff;
 474 }
 475
 476 .linksperpage {
 477     margin: 5px 0;
 478     text-align: right;
 479     color: #252525;
 480     font-size: 0.9em;
 481 }
 482
 483 .linksperpage a {
 484     padding: 5px 5px;
 485     text-decoration: none;
 486     color: #252525;
 487     background: #f5f5f5;
 488 }
 489
 490 .linksperpage a, .linksperpage input[type="text"] {
 491     display: inline-block;
 492     width: 20px;
 493     text-align: center;
 494 }
 495
 496 .linksperpage form {
 497     display: inline;
 498 }
 499
 500 .linksperpage input[type="text"] {
 501     height: 20px;
 502     margin: 0;
 503     padding: 4px 5px 3px 8px;
 504     background: #f5f5f5;
 505     border: medium none currentColor;
 506     color: #252525;
 507     font-size: 0.8em;
 508 }
 509
 510 /**
 511  * CONTENT - LINKLIST ITEMS
 512  */
 513 .linklist-item {
 514     margin: 0 0 10px 0;
 515     background: #f5f5f5;
 516     box-shadow: 1px 1px 3px #797979;
 517 }
 518
 519 .linklist-item-buttons {
 520     background: transparent;
 521     position: relative;
 522     width: 23px;
 523     z-index: 99;
 524 }
 525
 526 .linklist-item-buttons-right {
 527     float: right;
 528     margin-right: -25px;
 529 }
 530
 531 .linklist-item-buttons * {
 532     display: block;
 533     float: left;
 534     width:100%;
 535     margin: auto;
 536     text-align: center;
 537 }
 538
 539 .linklist-item-title, .linklist-item-title h2  {
 540     margin: 0;
 541     word-wrap: break-word;
 542 }
 543
 544 .linklist-item-title {
 545     position: relative;
 546     background: #f5f5f5;
 547 }
 548
 549 .linklist-item-title h2 {
 550     padding: 3px 10px 0 10px;
 551     line-height: 30px;
 552 }
 553
 554 .linklist-item-title h2 a {
 555     font-size: 0.7em;
 556     color: #252525;
 557     text-decoration: none;
 558     vertical-align: middle;
 559 }
 560
 561 .linklist-item-title .linklist-link {
 562     font-size: 1.1em;
 563     color: #1b926c;
 564 }
 565
 566 .linklist-item-title h2 a:visited .linklist-link {
 567     color: #2a4c41;
 568 }
 569
 570 .linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
 571     color: #252525;
 572 }
 573
 574
 575 .linklist-item-title .label-private {
 576     border: solid 1px #F89406;
 577     font-family: Arial, sans-serif;
 578     font-size: 0.65em;
 579     color: #F89406;
 580 }
 581
 582 .fold-button {
 583     display: none;
 584     color: #252525;
 585 }
 586
 587 .linklist-item-editbuttons {
 588     float: right;
 589     padding: 8px 5px;
 590 }
 591
 592 .linklist-item-editbuttons * {
 593     display: block;
 594     float: left;
 595     margin: 0 1px;
 596 }
 597
 598 .linklist-item-editbuttons a {
 599     font-size: 1em;
 600 }
 601
 602 .edit-link {
 603     font-size: 1.2em;
 604     color: #0b5ea6;
 605 }
 606
 607 .delete-link {
 608     font-size: 1.3em;
 609     color: #ac2925 !important;
 610 }
 611
 612 .linklist-item-description {
 613     position: relative;
 614     padding: 0 10px;
 615     word-wrap: break-word;
 616     color: #252525;
 617     line-height: 1.3em;
 618 }
 619
 620 .linklist-item-description a {
 621     text-decoration: none;
 622     color: #1b926c;
 623 }
 624
 625 .linklist-item-description a:hover {
 626     color: #252525;
 627 }
 628
 629 .linklist-item-description a:visited {
 630     color: #14553f;
 631 }
 632
 633 .linklist-item-thumbnail {
 634     position: relative;
 635     padding: 0 0 0 5px;
 636     margin: 0;
 637     float: right;
 638     z-index: 50;
 639     height: 90px;
 640 }
 641
 642 .linklist-item.private .linklist-item-title::before,
 643 .linklist-item.private .linklist-item-description::before {
 644     position: absolute;
 645     left: 3px;
 646     top: 0;
 647     display: block;
 648     content:"";
 649     background: #F89406;
 650     height: 96%;
 651     width: 2px;
 652     z-index: 1;
 653 }
 654
 655 .linklist-item.private .linklist-item-description::before {
 656     height: 100%;
 657 }
 658
 659 .linklist-item.private .linklist-item-title::before {
 660     margin-top: 3px;
 661 }
 662
 663 .linklist-item-infos {
 664     padding: 4px 8px 4px 8px;
 665     background: #ddd;
 666     color: #252525;
 667 }
 668
 669 .linklist-item-infos a {
 670     color: #252525;
 671     text-decoration: none;
 672 }
 673
 674 .linklist-item-infos a:hover {
 675     color: #000;
 676 }
 677
 678 .linklist-item-infos .linklist-item-tags {
 679     font-size: 0.8em;
 680 }
 681
 682 .linklist-item-infos .label-tag {
 683     font-size: 1em;
 684 }
 685
 686 .linklist-item-infos-dateblock {
 687     font-size: 0.9em;
 688 }
 689
 690 .linklist-plugin-icon {
 691     width: 13px;
 692     height: 13px;
 693 }
 694
 695 .linklist-item-infos-url {
 696     text-align: right;
 697     white-space: nowrap;
 698     overflow: hidden;
 699     text-overflow: ellipsis;
 700     font-size: 0.8em;
 701     height:23px;
 702     line-height:23px;
 703 }
 704
 705 .linklist-item-infos .mobile-buttons {
 706     text-align: right;
 707 }
 708
 709 .linklist-item-infos .linklist-plugin-icon {
 710     display: inline-block;
 711     margin: 0 2px;
 712     width: 16px;
 713     height: 16px;
 714 }
 715
 716 .linklist-item-infos-controls-group {
 717     display: inline-block;
 718     border-right: 1px solid #5d5d5d;
 719     padding-right: 6px;
 720 }
 721
 722 .ctrl-edit {
 723     margin: 0 7px;
 724 }
 725
 726 /** 64em -> lg **/
 727 @media screen and (max-width: 64em) {
 728     .linklist-item-infos-url {
 729         text-align: left;
 730     }
 731 }
 732
 733 /**
 734  * Footer
 735  */
 736 #footer {
 737     margin: 20px 0;
 738     padding: 5px;
 739     text-align: center;
 740     color: #252525;
 741 }
 742
 743 #footer:before {
 744     display: block;
 745     content:"";
 746     background: linear-gradient(to right, #949393, #252525, #949393);
 747     height: 1px;
 748     width: 80%;
 749     margin: 10px auto;
 750 }
 751
 752 #footer a {
 753     color: #252525;
 754 }
 755
 756 /**
 757  * PAGE FORM
 758  */
 759 .page-form {
 760     margin: 20px 0 0 0;
 761     background: #f5f5f5;
 762     box-shadow: 1px 1px 2px #797979;
 763     color: #252525;
 764     overflow: hidden;
 765 }
 766
 767 .page-form .window-title {
 768     margin: 0 0 10px 0;
 769     padding: 10px 0;
 770     width: 100%;
 771     color: #1b926c;
 772     background: #f5f5f5;
 773     text-align: center;
 774 }
 775
 776 .page-form .window-subtitle {
 777     text-align: center;
 778 }
 779
 780 .page-form a {
 781     color: #1b926c;
 782     font-weight: bold;
 783     text-decoration: none;
 784 }
 785
 786 .page-form p {
 787     padding: 5px 10px;
 788     margin: 0;
 789 }
 790
 791 .page-form input[type="text"],
 792 .page-form input[type="password"],
 793 .page-form textarea {
 794     box-sizing: border-box;
 795     margin: 10px 0;
 796     padding: 5px 5px 3px 15px;
 797     height: 35px;
 798     width: 90%;
 799     background: #eeeeee;
 800     border: solid 1px #d8d8d8;
 801     border-radius: 2px;
 802     color: #252525;
 803 }
 804
 805 .page-form textarea {
 806     min-height: 240px;
 807     padding: 15px 5px 3px 15px;
 808     resize: vertical;
 809     overflow-y: auto;
 810     word-wrap:break-word
 811 }
 812
 813 /* because chrome */
 814 .page-form input[type="text"]::-webkit-input-placeholder,
 815 .page-form input[type="password"]::-webkit-input-placeholder {
 816     color: #777777;
 817 }
 818
 819 .page-form input[type="submit"], .page-form a.button {
 820     margin: 15px 5px;
 821     height: 35px;
 822     line-height: 35px;
 823     width: 150px;
 824     background: #1b926c;
 825     color: #f5f5f5;
 826     border: none;
 827     box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
 828     font-size: 1.2em;
 829     text-decoration: none;
 830     vertical-align: center;
 831     font-weight: normal;
 832     display: inline-block;
 833 }
 834
 835
 836 .page-form .button.button-red {
 837     background: #ac2925;
 838 }
 839
 840 .page-form .submit-buttons {
 841     margin-bottom: 10px;
 842 }
 843
 844 @media screen and (min-width: 64em) {
 845     .page-form .submit-buttons {
 846         position: relative;
 847     }
 848
 849     .page-form .submit-buttons .button.button-red {
 850         position: absolute;
 851         right: 5%;
 852     }
 853 }
 854
 855 @media screen and (max-width: 64em) {
 856     .page-form .submit-buttons .button {
 857         display: block;
 858         margin: auto;
 859     }
 860 }
 861
 862 .page-form select {
 863     color: #252525;
 864 }
 865
 866 /**
 867  * PAGE FORM - LIGHT
 868  */
 869 .page-form-light div, .page-form-light p {
 870     text-align: center;
 871 }
 872
 873 /**
 874  * PAGE FORM - COMPLETE
 875  */
 876 .page-form-complete {
 877     #background: #f5f5f5;
 878 }
 879
 880 .page-form-complete div, .page-form-complete p {
 881     color: #252525;
 882 }
 883
 884 .page-form-complete .form-label, .page-form-complete .form-input {
 885     position: relative;
 886     height: 60px;
 887 }
 888
 889 .page-form-complete .form-label label,
 890 .page-form-complete .form-input input,
 891 .page-form-complete .form-input select.align,
 892 .page-form-complete .timezone {
 893     position: absolute;
 894     top: 50%;
 895     transform: translateY(-50%);
 896 }
 897
 898 .page-form-complete .form-label label {
 899     text-align: right;
 900     right: 0;
 901     padding: 0 20px;
 902 }
 903
 904 .page-form-complete .label-name {
 905     font-weight: bold;
 906 }
 907
 908 .page-form-complete .label-desc {
 909     font-size: 0.8em;
 910 }
 911
 912 .page-form-complete input[type="text"],
 913 .page-form-complete input[type="password"],
 914 .page-form-complete textarea {
 915     margin: 0;
 916 }
 917
 918 .page-form section {
 919     margin: 10px 0 25px 0;
 920 }
 921
 922 .page-form table {
 923     margin: auto;
 924     width: 90%;
 925 }
 926
 927 .page-form table .order {
 928     text-decoration: none;
 929     color: #252525;
 930 }
 931
 932 .page-form table, .page-form th, .page-form td {
 933     border-width: 1px 0;
 934     border-style: solid;
 935     border-color: #aaaaaa;
 936 }
 937
 938 .page-form th, .page-form td {
 939     padding: 5px;
 940
 941 }
 942
 943 /* Awesomeplete fix */
 944 div.awesomplete {
 945     width: inherit;
 946 }
 947
 948 div.awesomplete > input {
 949     display: inherit;
 950 }
 951
 952 div.awesomplete > ul {
 953     z-index: 9999;
 954 }
 955
 956 .page-form .awesomplete {
 957     width: 90%;
 958 }
 959
 960 .page-form .awesomplete input {
 961     width: 100%;
 962 }
 963
 964 .page-form div.awesomplete > ul {
 965     color: black;
 966 }
 967
 968 form[name="linkform"].page-form {
 969     overflow: visible;
 970 }
 971
 972 @media screen and (max-width: 64em) {
 973     .page-form-complete .form-label {
 974         height: inherit;
 975     }
 976
 977     .page-form-complete .form-label label,
 978     .page-form-complete .form-input input,
 979     .page-form-complete .timezone {
 980         position: inherit;
 981         top: inherit;
 982         transform: translateY(0);
 983     }
 984
 985     .page-form-complete .form-input input[type="checkbox"] {
 986         position: absolute;
 987         top: 50%;
 988         right: 50%;
 989         transform: translateY(-50%);
 990     }
 991
 992     .page-form-complete .form-input {
 993         text-align: center;
 994     }
 995
 996     .page-form-complete .form-label label {
 997         display: block;
 998         text-align: left;
 999         margin: 10px 0 0 0;
1000     }
1001
1002     .timezone-continent:after {
1003         content:"\a\a";
1004         white-space: pre;
1005     }
1006
1007     .page-form-complete .radio-buttons {
1008         text-align: left;
1009         padding: 5px 15px;
1010     }
1011 }
1012
1013 /**
1014  * Page visitor (page form extended)
1015  */
1016 .page-visitor {
1017     color: #252525;
1018 }
1019
1020 #page404 {
1021     color: #3f3f3f;
1022 }
1023
1024 /**
1025  * EDIT LINK
1026  */
1027 #editlinkform .created-date {
1028     color: #767676;
1029     margin-bottom: 10px;
1030 }
1031
1032 /**
1033  * LOGIN
1034  */
1035 #login-form .remember-me {
1036     margin: 5px 0;
1037 }
1038
1039 /**
1040  * Search results
1041  */
1042 .search-result a {
1043     color: white;
1044     text-decoration: none;
1045 }
1046
1047 .search-result .label-tag {
1048     border-color: white;
1049 }
1050
1051 .search-result .label-tag .remove {
1052     border-left: white 1px solid;
1053     padding: 0 0 0 5px;
1054     margin: 0 0 0 5px;
1055 }
1056
1057 .search-result .label-private {
1058     border: 1px solid white;
1059 }
1060
1061 /**
1062  * TOOLS
1063  */
1064 .tools-item {
1065     margin: 10px 0;
1066 }
1067
1068 .tools-item .pure-button:hover {
1069     background-image: none;
1070     background-color: #1b926c;
1071     color: #f5f5f5;
1072 }
1073
1074 /**
1075  * PLUGIN ADMIN
1076  */
1077 #pluginform .mobile-row {
1078     font-size: 0.9em;
1079 }
1080
1081 #pluginform .more {
1082     margin-top: 10px;
1083 }
1084
1085 @media screen and (max-width: 64em) {
1086     #pluginform .main-row, #pluginform .main-row td {
1087         border-bottom-style: none;
1088     }
1089
1090     #pluginform .mobile-row, #pluginform .mobile-row td {
1091         border-top-style: none;
1092     }
1093 }
1094
1095 /**
1096  * IMPORT
1097  */
1098 #import-field {
1099     margin: 15px 0;
1100 }
1101
1102 /**
1103  * TAG CLOUD
1104  */
1105 #cloudtag {
1106     padding: 10px;
1107     text-align: center;
1108 }
1109
1110 #cloudtag, #cloudtag a {
1111     color: #252525;
1112     text-decoration: none;
1113 }
1114
1115 #cloudtag .count {
1116     color: #7f7f7f;
1117 }
1118
1119 /**
1120  * TAG LIST
1121  */
1122 #taglist {
1123     padding: 0 10px;
1124 }
1125
1126 #taglist a {
1127     color: #252525;
1128     text-decoration: none;
1129 }
1130
1131 #taglist .count {
1132     display: inline-block;
1133     width: 35px;
1134     text-align: right;
1135     color: #7f7f7f;
1136 }
1137
1138 #taglist .rename-tag-form {
1139     display: none;
1140 }
1141
1142 #taglist .delete-tag {
1143     color: #ac2925;
1144     display: none;
1145 }
1146
1147 #taglist .rename-tag {
1148     color: #0b5ea6;
1149 }
1150
1151 #taglist .validate-rename-tag {
1152     color: #1b926c;
1153 }
1154
1155 /**
1156  * Picture wall CSS
1157  */
1158 #picwall_container {
1159     margin: 0 10px 10px 10px;
1160     color: #252525;
1161     background-color: #f5f5f5;
1162     clear: both;
1163 }
1164
1165 .picwall_pictureframe {
1166     margin: 2px;
1167     background-color: #f5f5f5;
1168     z-index: 5;
1169     position: relative;
1170     display: table-cell;
1171     vertical-align: middle;
1172     width: 90px;
1173     height: 90px;
1174     overflow: hidden;
1175     text-align: center;
1176     float: left;
1177 }
1178
1179 .b-lazy {
1180     -webkit-transition: opacity 500ms ease-in-out;
1181     -moz-transition: opacity 500ms ease-in-out;
1182     -o-transition: opacity 500ms ease-in-out;
1183     transition: opacity 500ms ease-in-out;
1184     opacity: 0;
1185 }
1186 .b-lazy.b-loaded {
1187     opacity: 1;
1188 }
1189
1190 .picwall_pictureframe img {
1191     max-width: 100%;
1192     height: auto;
1193     color: transparent;
1194 } /* Adapt the width of the image */
1195
1196 .picwall_pictureframe a {
1197     text-decoration: none;
1198 }
1199
1200 /* CSS to show title when hovering an image - no javascript required. */
1201 .picwall_pictureframe span.info {
1202     display: none;
1203     font-family: Arial, sans-serif;
1204 }
1205
1206 .picwall_pictureframe:hover span.info {
1207     display: block;
1208     position: absolute;
1209     top: 0;
1210     left: 0;
1211     width: 90px;
1212     height: 90px;
1213     font-weight: bold;
1214     font-size: 9pt;
1215     color: #f5f5f5;
1216     text-align: left;
1217     background-color: rgba(0, 0, 0, 0.8);
1218 }
1219
1220 /**
1221  * DAILY
1222  */
1223 .daily-desc {
1224     color: #7f7f7f;
1225     font-size: 0.8em;
1226 }
1227
1228 .daily-about a {
1229     color: #343434;
1230     text-decoration: none;
1231 }
1232
1233 .daily-about a:hover {
1234     color: #7f7f7f;
1235 }
1236
1237 .daily-about h3:before, .daily-about h3:after {
1238     display: block;
1239     content:"";
1240     background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
1241     height: 1px;
1242     width: 90%;
1243     margin: 10px auto;
1244 }
1245
1246 .daily-entry {
1247     padding: 0 10px;
1248 }
1249
1250 .daily-entry .daily-entry-title:after {
1251     display: block;
1252     content:"";
1253     background: linear-gradient(to right, #fff, #515151, #fff);
1254     height: 1px;
1255     width: 70%;
1256     margin: 5px auto;
1257 }
1258
1259 .daily-entry .daily-entry-title {
1260     margin: 10px 0 0 0;
1261 }
1262
1263 .daily-entry .daily-entry-title a {
1264     color: #000;
1265     text-decoration: none;
1266 }
1267
1268 .daily-entry .daily-entry-description {
1269     padding: 5px 5px 0 5px;
1270     font-size: 0.9em;
1271     text-align: justify;
1272     word-wrap: break-word;
1273 }
1274
1275 .daily-entry .daily-entry-tags {
1276     padding: 0 5px 5px 5px;
1277     font-size: 0.8em;
1278 }
1279
1280 .daily-entry-thumbnail {
1281     float: left;
1282     margin: 15px 5px 5px 15px;
1283 }
1284
1285 .daily-entry-description a {
1286     text-decoration: none;
1287     color: #1b926c;
1288 }
1289
1290 .daily-entry-description a:hover {
1291     text-shadow: 1px 1px #ddd;
1292 }
1293
1294 .daily-entry-description a:visited {
1295     color: #20b988;
1296 }
1297
1298 /*
1299  * Fix empty bookmarklet name in Firefox
1300  */
1301 .pure-button {
1302     -moz-user-select: auto;
1303 }
1304
1305 .tag-sort {
1306     margin-top: 30px;
1307     text-align: center;
1308 }
1309
1310 .tag-sort a {
1311     display: inline-block;
1312     margin: 0 15px;
1313     color: white;
1314     text-decoration: none;
1315     font-weight: bold;
1316 }
1317
1318 /**
1319  * Markdown
1320  */
1321 .markdown p {
1322     margin: 0 !important;
1323 }
1324
1325 .markdown p + p {
1326     margin: 0.5em 0 0 0 !important;
1327 }
1328
1329 .markdown *:first-child {
1330     margin-top: 0 !important;
1331 }
1332
1333 .markdown *:last-child {
1334     margin-bottom: 5px !important;
1335 }
1336
1337 /**
1338  * Pure Button
1339  */
1340 .pure-button-success,
1341 .pure-button-error,
1342 .pure-button-warning,
1343 .pure-button-primary,
1344 .pure-button-shaarli,
1345 .pure-button-secondary {
1346     color: white !important;
1347     border-radius: 4px;
1348     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
1349 }
1350
1351 .pure-button-shaarli {
1352     background-color: #1B926C;
1353 }