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