assets/default/scss/shaarli.scss

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