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