assets/default/scss/shaarli.scss

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