assets/default/scss/shaarli.scss

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