]> git.immae.eu Git - github/shaarli/Shaarli.git/blame - assets/default/scss/shaarli.scss
Merge pull request #1698 from ArthurHoaro/feature/plugins-search-filter
[github/shaarli/Shaarli.git] / assets / default / scss / shaarli.scss
CommitLineData
b2143ff4 1$fa-font-path: '~fork-awesome/fonts';
a33c5653 2
b2143ff4 3@import '~fork-awesome/scss/fork-awesome';
a33c5653
A
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
c69585f3
A
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;
8fc0a984 16$dark-green: #186446;
c69585f3
A
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
a5a0c039
A
28:root {
29 --main-color: #{$main-green};
30 --background-color: #{$background-color};
31 --dark-main-color: #{$dark-green};
32}
33
c69585f3 34// General
402b0346 35body {
a5a0c039 36 background: var(--background-color);
402b0346
A
37}
38
39.strong {
c69585f3 40 font-weight: bold;
402b0346
A
41}
42
43.clear {
c69585f3 44 clear: both;
402b0346
A
45}
46
47.center {
c69585f3
A
48 margin: auto;
49 text-align: center;
402b0346
A
50}
51
52.label {
c69585f3
A
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;
402b0346
A
62}
63
64pre {
c69585f3 65 max-width: 100%;
402b0346
A
66}
67
68@font-face {
c69585f3
A
69 font-family: 'Roboto';
70 font-weight: 400;
71 font-style: normal;
96746d71
A
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');
ad5c7570
A
77}
78
79@font-face {
c69585f3
A
80 font-family: 'Roboto';
81 font-weight: 700;
82 font-style: normal;
96746d71
A
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');
c69585f3
A
88}
89
90body,
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
402b0346 102@media screen and (min-width: 35.5em) {
c69585f3
A
103 .pure-u-sm-0 {
104 display: none !important;
105 }
106
107 .pure-u-sm-visible {
108 display: inline-block !important;
109 }
402b0346 110}
c69585f3 111
402b0346 112@media screen and (min-width: 48em) {
c69585f3
A
113 .pure-u-md-0 {
114 display: none !important;
115 }
116
117 .pure-u-md-visible {
118 display: inline-block !important;
119 }
402b0346 120}
c69585f3 121
402b0346 122@media screen and (min-width: 64em) {
c69585f3
A
123 .pure-u-lg-0 {
124 display: none !important;
125 }
126
127 .pure-u-lg-visible {
128 display: inline-block !important;
129 }
402b0346 130}
c69585f3 131
402b0346 132@media screen and (min-width: 80em) {
c69585f3
A
133 .pure-u-xl-0 {
134 display: none !important;
135 }
136
137 .pure-u-xl-visible {
138 display: inline-block !important;
139 }
402b0346
A
140}
141
b3bd8c3e
A
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
c69585f3
A
152// Make pure-extras alert closable.
153.pure-alert-closable {
154 .fa-times {
402b0346 155 float: right;
c69585f3 156 }
402b0346 157}
c69585f3 158
402b0346 159.pure-alert-close {
c69585f3 160 cursor: pointer;
402b0346
A
161}
162
163.pure-alert-success {
a5a0c039 164 background-color: var(--main-color);
402b0346
A
165}
166
28f26524
A
167.pure-alert-warning {
168 a {
169 color: $warning-text;
170 font-weight: bold;
171 }
172}
173
e85b7a05
A
174.page-single-alert {
175 margin-top: 100px;
176}
177
c69585f3
A
178.anchor {
179 &:target {
402b0346 180 padding-top: 40px;
c69585f3 181 }
402b0346 182}
c69585f3
A
183
184// MENU
402b0346 185.shaarli-menu {
c69585f3
A
186 position: fixed;
187 top: 0;
188 transition: max-height .5s;
189 z-index: 999;
a5a0c039 190 background: var(--main-color);
c69585f3
A
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 }
402b0346
A
201}
202
402b0346 203.pure-menu-item {
c69585f3
A
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 }
402b0346
A
217}
218
219.head-logo {
c69585f3
A
220 float: left;
221 margin: 0 5px 0 0;
402b0346
A
222}
223
c69585f3
A
224%menu-link {
225 padding: .8em 1em;
226 color: $almost-white;
402b0346
A
227}
228
c69585f3
A
229%menu-link-hover {
230 background: transparent;
231 color: $white;
402b0346
A
232}
233
c69585f3
A
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 }
402b0346
A
245}
246
c69585f3
A
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 }
402b0346
A
260}
261
c69585f3
A
262.menu-toggle {
263 display: none;
264 position: absolute;
265 top: 5px;
266 right: 0;
267 width: 34px;
268 height: 45px;
269
270 .bar {
402b0346 271 display: block;
402b0346
A
272 position: absolute;
273 top: 18px;
274 right: 7px;
c69585f3
A
275 border-radius: 100px;
276 background-color: $light-green;
277 width: 20px;
278 height: 2px;
279 transition-duration: .5s;
402b0346 280
c69585f3
A
281 &:first-child {
282 transform: translateY(-6px);
283 }
284 }
402b0346 285
c69585f3
A
286 &.x {
287 .bar {
288 transform: rotate(45deg);
402b0346 289
c69585f3
A
290 &:first-child {
291 transform: rotate(-45deg);
292 }
293 }
294 }
402b0346
A
295}
296
297@media screen and (max-width: 64em) {
c69585f3
A
298 .menu-toggle {
299 display: block;
300 }
402b0346
A
301}
302
303.header-buttons {
c69585f3 304 text-align: right;
402b0346
A
305}
306
307.linkcount {
c69585f3
A
308 color: $dark-grey;
309 font-size: .8em;
402b0346
A
310}
311
312@media screen and (min-width: 64em) {
c69585f3
A
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 }
402b0346 337 }
c69585f3 338 }
402b0346 339
c69585f3
A
340 button {
341 border: 0;
402b0346 342 border-radius: 2px;
a5a0c039 343 background-color: var(--main-color);
c69585f3
A
344 padding: 4px 8px 6px;
345 color: $almost-white;
346 }
402b0346
A
347}
348
c69585f3
A
349@media screen and (max-width: 64em) {
350 .searchform {
351 margin: 0 auto;
352 max-width: 260px;
353 }
402b0346
A
354}
355
c69585f3
A
356.search-tagcloud {
357 button {
f210d94f 358 width: 90%;
c69585f3 359 }
402b0346
A
360}
361
f210d94f 362@media screen and (max-width: 64em) {
c69585f3
A
363 .search-linklist {
364 button {
365 width: 100%;
f210d94f 366 }
402b0346 367
c69585f3
A
368 .awesomplete {
369 margin: 5px 0;
402b0346 370 }
c69585f3 371 }
402b0346
A
372}
373
c69585f3
A
374.header-search,
375.search-linklist,
376.search-tagcloud {
377 button {
378 &:hover {
a5a0c039 379 color: var(--background-color);
c69585f3
A
380 }
381 }
29a837f3
A
382}
383
c69585f3
A
384.header-search,
385.search-linklist {
386 padding: 6px 0;
29a837f3
A
387}
388
c69585f3 389@media screen and (max-width: 64em) {
96746d71 390 .header-search,
c69585f3
A
391 .header-search * {
392 visibility: hidden;
393 }
402b0346
A
394}
395
c69585f3
A
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;
c69585f3 402 color: $dark-grey;
70401690
A
403}
404
402b0346 405.subheader-form {
c69585f3
A
406 display: block;
407 position: fixed;
408 visibility: hidden;
409 z-index: 999;
a5a0c039 410 background: var(--main-color);
c69585f3
A
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 }
402b0346 424 }
c69585f3 425 }
402b0346 426
c69585f3
A
427 &[type='submit'] {
428 display: inline-block;
429 margin: 0 0 5px;
430 border: 1px solid $almost-white;
402b0346 431 border-radius: 2px;
a5a0c039 432 background: var(--main-color);
c69585f3
A
433 padding: 4px 0;
434 width: 100px;
435 height: 28px;
436 color: $almost-white;
402b0346 437
c69585f3
A
438 &:hover {
439 background: $almost-white;
a5a0c039 440 color: var(--main-color);
c69585f3
A
441 }
442 }
443
444 .remember-me {
445 @extend %subheader-form-input;
402b0346 446
402b0346 447 display: inline-block;
402b0346 448 cursor: pointer;
c69585f3
A
449 padding: 5px 20px 3px;
450 width: auto;
402b0346 451
c69585f3
A
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 }
402b0346
A
468}
469
c69585f3
A
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 }
402b0346
A
482}
483
c69585f3
A
484@media screen and (min-width: 64em) {
485 .subheader-form {
486 &.open {
487 visibility: visible;
488
489 * {
490 visibility: visible;
491 }
492 }
493 }
402b0346
A
494}
495
496.new-version-message {
c69585f3 497 text-align: center;
402b0346 498
c69585f3
A
499 a {
500 color: $warning-text;
402b0346 501 font-weight: bold;
c69585f3 502 }
402b0346
A
503}
504
8eac2e54
A
505.header-alert-message {
506 text-align: center;
507}
508
c69585f3
A
509// CONTENT - GENERAL
510.container {
511 position: relative;
512 z-index: 2;
513 margin-top: 45px;
402b0346
A
514}
515
c69585f3 516// Plugins additional forms
402b0346 517.toolbar-plugin {
c69585f3
A
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 }
402b0346 536
c69585f3
A
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 }
70401690
A
550}
551
402b0346 552@media screen and (max-width: 64em) {
c69585f3
A
553 .toolbar-plugin {
554 input {
555 &[type='text'] {
402b0346 556 width: 70%;
c69585f3 557 }
402b0346 558 }
c69585f3 559 }
402b0346
A
560}
561
c69585f3
A
562// CONTENT - LINKLIST PAGING
563// 64em -> lg
402b0346 564.linklist-filters {
c69585f3
A
565 margin: 5px 0;
566 color: $dark-grey;
567 font-size: .9em;
402b0346 568
c69585f3 569 a {
54ee2408
A
570 display: inline-block;
571 margin: 3px 0;
402b0346
A
572 padding: 5px 8px;
573 text-decoration: none;
c69585f3 574 }
402b0346 575
c69585f3
A
576 .filter-off {
577 background: $almost-white;
578 color: $dark-grey;
579 }
402b0346 580
c69585f3 581 .filter-on {
a5a0c039 582 background: var(--main-color);
c69585f3
A
583 color: $light-green;
584 }
402b0346 585
c69585f3
A
586 .filter-block {
587 background: $red;
588 color: $almost-white;
589 }
9d4736a3
A
590}
591
402b0346 592.linklist-pages {
c69585f3
A
593 margin: 5px 0;
594 text-align: center;
595 color: $dark-grey;
402b0346 596
c69585f3 597 a {
402b0346 598 text-decoration: none;
c69585f3
A
599 color: $dark-grey;
600
601 &:hover {
602 color: $white;
603 }
604 }
402b0346
A
605}
606
c69585f3
A
607%linksperpage-button {
608 display: inline-block;
609 width: 20px;
610 text-align: center;
402b0346
A
611}
612
613.linksperpage {
c69585f3
A
614 margin: 5px 0;
615 text-align: right;
616 color: $dark-grey;
617 font-size: .9em;
402b0346 618
c69585f3
A
619 form {
620 display: inline;
621 }
402b0346 622
c69585f3
A
623 a {
624 @extend %linksperpage-button;
402b0346 625
c69585f3
A
626 background: $almost-white;
627 padding: 5px;
628 text-decoration: none;
629 color: $dark-grey;
c69585f3 630
e813934a
KC
631 &.selected {
632 background: var(--main-color);
633 color: $white;
96746d71 634 }
816ffba7
KC
635 }
636
c69585f3
A
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 }
402b0346
A
650}
651
c69585f3
A
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: '';
402b0346
A
663}
664
402b0346 665.linklist-item {
7b4fea0e 666 position: relative;
c69585f3
A
667 margin: 0 0 10px;
668 box-shadow: 1px 1px 3px $light-grey;
669 background: $almost-white;
670
671 &.private {
7b4fea0e
A
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: '';
c69585f3
A
682 }
683 }
4e3875c0
A
684
685 .search-highlight {
686 background-color: yellow;
687 }
94c17565
A
688}
689
690.linklist-item-buttons {
c69585f3
A
691 position: relative;
692 z-index: 99;
693 background: transparent;
694 width: 23px;
94c17565
A
695}
696
697.linklist-item-buttons-right {
c69585f3
A
698 float: right;
699 margin-right: -25px;
94c17565
A
700}
701
702.linklist-item-buttons * {
c69585f3
A
703 display: block;
704 float: left;
705 margin: auto;
706 width: 100%;
707 text-align: center;
402b0346
A
708}
709
710.linklist-item-title {
c69585f3
A
711 position: relative;
712 margin: 0;
713 background: $almost-white;
714 word-wrap: break-word;
402b0346 715
c69585f3
A
716 h2 {
717 margin: 0;
718 padding: 3px 10px 0;
402b0346 719 line-height: 30px;
c69585f3 720 word-wrap: break-word;
402b0346 721
c69585f3
A
722 a {
723 vertical-align: middle;
724 text-decoration: none;
725 color: $dark-grey;
726 font-size: .7em;
727
728 &:visited {
729 .linklist-link {
a5a0c039 730 color: var(--dark-main-color);
c69585f3
A
731 }
732 }
733
734 &:hover {
735 color: $dark-grey;
736 }
737 }
738 }
402b0346 739
c69585f3 740 .linklist-link {
a5a0c039 741 color: var(--main-color);
402b0346 742 font-size: 1.1em;
402b0346 743
c69585f3
A
744 &:hover {
745 color: $dark-grey;
746 }
747 }
402b0346 748
d3defcac
A
749 .label {
750 font-family: Arial, sans-serif;
751 font-size: .65em;
752 }
753
c69585f3
A
754 .label-private {
755 border: solid 1px $orange;
756 color: $orange;
d3defcac
A
757 }
758
759 .label-sticky {
760 border: solid 1px $blue;
761 color: $blue;
c69585f3 762 }
402b0346
A
763}
764
94c17565 765.fold-button {
c69585f3
A
766 display: none;
767 color: $dark-grey;
402b0346
A
768}
769
770.linklist-item-editbuttons {
c69585f3
A
771 float: right;
772 padding: 8px 5px;
402b0346 773
c69585f3 774 * {
402b0346
A
775 display: block;
776 float: left;
777 margin: 0 1px;
c69585f3 778 }
402b0346 779
c69585f3 780 a {
402b0346 781 font-size: 1em;
c69585f3
A
782 }
783
fc574e64 784 .link-checkbox {
c69585f3
A
785 display: none;
786 }
402b0346
A
787}
788
789.edit-link {
c69585f3
A
790 color: $blue;
791 font-size: 1.2em;
402b0346
A
792}
793
794.delete-link {
c69585f3
A
795 color: $red !important;
796 font-size: 1.3em;
402b0346
A
797}
798
4154c25b 799.pin-link {
d9bf5b31 800 font-size: 1.3em;
4154c25b
A
801}
802
803.pinned-link {
d9bf5b31 804 color: $blue !important;
4154c25b
A
805}
806
402b0346 807.linklist-item-description {
c69585f3
A
808 position: relative;
809 padding: 0 10px;
810 line-height: 1.3em;
811 color: $dark-grey;
812 word-wrap: break-word;
402b0346 813
c69585f3 814 a {
402b0346 815 text-decoration: none;
a5a0c039 816 color: var(--main-color);
402b0346 817
c69585f3
A
818 &:hover {
819 color: $dark-grey;
820 }
402b0346 821
c69585f3 822 &:visited {
a5a0c039 823 color: var(--dark-main-color);
c69585f3
A
824 }
825 }
402b0346
A
826}
827
828.linklist-item-thumbnail {
c69585f3
A
829 position: relative;
830 float: right;
831 z-index: 50;
832 margin: 0;
833 padding: 0 0 0 5px;
834 height: 90px;
402b0346
A
835}
836
837.linklist-item-infos {
c69585f3
A
838 background: $background-linklist-info;
839 padding: 4px 8px;
840 color: $dark-grey;
402b0346 841
c69585f3 842 a {
402b0346 843 text-decoration: none;
c69585f3 844 color: $dark-grey;
402b0346 845
c69585f3
A
846 &:hover {
847 color: $black;
848 }
849 }
402b0346 850
c69585f3
A
851 .linklist-item-tags {
852 font-size: .8em;
853 }
402b0346 854
c69585f3 855 .label-tag {
402b0346 856 font-size: 1em;
c69585f3
A
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 }
402b0346
A
869}
870
871.linklist-item-infos-dateblock {
c69585f3 872 font-size: .9em;
402b0346
A
873}
874
875.linklist-plugin-icon {
c69585f3
A
876 width: 13px;
877 height: 13px;
402b0346
A
878}
879
880.linklist-item-infos-url {
c69585f3
A
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;
402b0346
A
888}
889
94c17565 890.linklist-item-infos-controls-group {
c69585f3
A
891 display: inline-block;
892 border-right: 1px solid $light-grey;
893 padding-right: 6px;
94c17565
A
894}
895
896.ctrl-edit {
c69585f3 897 margin: 0 7px;
94c17565
A
898}
899
4154c25b 900.ctrl-delete {
d9bf5b31 901 margin: 0 7px 0 0;
4154c25b
A
902}
903
c69585f3 904// 64em -> lg
402b0346 905@media screen and (max-width: 64em) {
c69585f3
A
906 .linklist-item-infos-url {
907 text-align: left;
908 }
402b0346
A
909}
910
c69585f3
A
911// Footer
912.footer-container {
913 margin: 20px 0;
914 padding: 5px;
915 text-align: center;
916 color: $dark-grey;
402b0346 917
c69585f3 918 &::before {
402b0346 919 display: block;
402b0346 920 margin: 10px auto;
a5a0c039 921 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
c69585f3
A
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;
a5a0c039 950 background: var(--main-color);
c69585f3
A
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;
402b0346
A
959}
960
402b0346 961.page-form {
c69585f3
A
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;
402b0346
A
971 padding: 10px 0;
972 width: 100%;
402b0346 973 text-align: center;
a5a0c039 974 color: var(--main-color);
c69585f3 975 }
402b0346 976
c69585f3 977 .window-subtitle {
402b0346 978 text-align: center;
c69585f3 979 }
402b0346 980
c69585f3 981 a {
aa4797ba 982 text-decoration: none;
a5a0c039 983 color: var(--main-color);
c69585f3 984 font-weight: bold;
402b0346 985
c69585f3
A
986 &.button {
987 @extend %page-form-button;
988 }
989 }
990
991 p {
402b0346 992 margin: 0;
c69585f3
A
993 padding: 5px 10px;
994 }
402b0346 995
c69585f3
A
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;
402b0346 1020
402b0346 1021 padding: 15px 5px 3px 15px;
c69585f3 1022 min-height: 240px;
402b0346
A
1023 resize: vertical;
1024 overflow-y: auto;
c69585f3
A
1025 word-wrap: break-word;
1026 }
402b0346 1027
c69585f3
A
1028 select {
1029 color: $dark-grey;
1030 }
402b0346 1031
c69585f3
A
1032 .button {
1033 &.button-red {
1034 background: $red;
1035 }
5d8de758
A
1036
1037 &.button-grey {
1038 background: $light-grey;
1039 }
c69585f3 1040 }
402b0346 1041
c69585f3
A
1042 .submit-buttons {
1043 margin-bottom: 10px;
1044 }
402b0346 1045
c69585f3
A
1046 section {
1047 margin: 10px 0 25px;
1048 }
402b0346 1049
c69585f3
A
1050 table,
1051 th,
1052 td {
1053 border-width: 1px 0;
1054 border-style: solid;
1055 border-color: $light-grey;
1056 }
402b0346 1057
c69585f3
A
1058 th,
1059 td {
1060 padding: 5px;
1061 }
1062
1063 table {
0cf76ccb 1064 margin: 10px auto 25px auto;
c69585f3
A
1065 width: 90%;
1066
1067 .order {
1068 text-decoration: none;
1069 color: $dark-grey;
402b0346 1070 }
c69585f3 1071 }
402b0346 1072
c69585f3
A
1073 .awesomplete {
1074 width: 90%;
1075
1076 input {
1077 width: 100%;
1078 }
1079 }
1080
1081 div {
1082 .awesomplete {
1083 > ul {
1084 color: $black;
1085 }
402b0346 1086 }
c69585f3
A
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 }
5d8de758
A
1100
1101 &.button-grey {
1102 position: absolute;
1103 left: 5%;
1104 }
c69585f3
A
1105 }
1106 }
1107 }
402b0346
A
1108}
1109
1110@media screen and (max-width: 64em) {
c69585f3
A
1111 .page-form {
1112 .submit-buttons {
1113 .button {
402b0346 1114 margin: auto;
c69585f3 1115 }
402b0346 1116 }
c69585f3 1117 }
402b0346
A
1118}
1119
c69585f3
A
1120// PAGE FORM - LIGHT
1121.page-form-light {
1122 div,
1123 p {
402b0346 1124 text-align: center;
c69585f3 1125 }
402b0346
A
1126}
1127
c69585f3
A
1128// PAGE FORM - COMPLETE
1129%page-form-valign {
1130 position: absolute;
1131 top: 50%;
1132 transform: translateY(-50%);
402b0346
A
1133}
1134
c69585f3
A
1135.page-form-complete {
1136 div,
1137 p {
1138 color: $dark-grey;
1139 }
1140
1141 .form-label,
1142 .form-input {
402b0346
A
1143 position: relative;
1144 height: 60px;
c69585f3 1145 }
402b0346 1146
c69585f3
A
1147 .form-label {
1148 label {
1149 @extend %page-form-valign;
402b0346 1150
c69585f3
A
1151 right: 0;
1152 padding: 0 20px;
1153 text-align: right;
1154 }
1155 }
402b0346 1156
c69585f3 1157 .label-name {
402b0346 1158 font-weight: bold;
c69585f3 1159 }
402b0346 1160
c69585f3
A
1161 .label-desc {
1162 font-size: .8em;
1163 }
402b0346 1164
c69585f3
A
1165 .form-input {
1166 input {
1167 @extend %page-form-valign;
402b0346 1168
c69585f3
A
1169 &[type='text'],
1170 &[type='password'] {
1171 margin: 0;
1172 }
1173 }
402b0346 1174
c69585f3
A
1175 select {
1176 &.align {
1177 @extend %page-form-valign;
1178 }
1179 }
1180 }
402b0346 1181
c69585f3
A
1182 textarea {
1183 margin: 0;
1184 }
402b0346 1185
c69585f3
A
1186 .timezone {
1187 @extend %page-form-valign;
1188 }
402b0346
A
1189}
1190
c69585f3
A
1191// Awesomeplete fix
1192div {
1193 &.awesomplete {
402b0346 1194 width: inherit;
402b0346 1195
c69585f3
A
1196 > input {
1197 display: inherit;
1198 }
402b0346 1199
c69585f3
A
1200 > ul {
1201 z-index: 9999;
1202 }
1203 }
402b0346
A
1204}
1205
c69585f3
A
1206form {
1207 &[name='linkform'] {
1208 &.page-form {
1209 overflow: visible;
1210 }
1211 }
402b0346
A
1212}
1213
c69585f3
A
1214@media screen and (max-width: 64em) {
1215 %page-form-valign-mobile {
1216 position: inherit;
1217 top: inherit;
1218 transform: translateY(0);
1219 }
402b0346 1220
c69585f3
A
1221 .page-form-complete {
1222 .form-label {
1223 height: inherit;
402b0346 1224
c69585f3
A
1225 label {
1226 @extend %page-form-valign-mobile;
15162272 1227
c69585f3
A
1228 display: block;
1229 margin: 10px 0 0;
1230 text-align: left;
1231 }
402b0346
A
1232 }
1233
c69585f3
A
1234 .form-input {
1235 text-align: center;
402b0346 1236
c69585f3
A
1237 input {
1238 @extend %page-form-valign-mobile;
402b0346 1239
c69585f3
A
1240 &[type='checkbox'] {
1241 position: absolute;
1242 top: 50%;
1243 right: 50%;
1244 transform: translateY(-50%);
1245 }
1246 }
402b0346
A
1247 }
1248
c69585f3
A
1249 .timezone {
1250 @extend %page-form-valign-mobile;
402b0346
A
1251 }
1252
c69585f3
A
1253 .radio-buttons {
1254 padding: 5px 15px;
1255 text-align: left;
402b0346 1256 }
c69585f3 1257 }
402b0346 1258
c69585f3
A
1259 .timezone-continent {
1260 &::after {
1261 white-space: pre;
1262 content: '\a\a';
402b0346 1263 }
c69585f3 1264 }
402b0346
A
1265}
1266
c69585f3 1267// Page visitor (page form extended)
402b0346 1268.page-visitor {
c69585f3 1269 color: $dark-grey;
402b0346
A
1270}
1271
dd51f653 1272.page-error-container {
c69585f3 1273 color: $dark-grey;
6c50a6cc
A
1274
1275 h2 {
dd51f653 1276 margin: 70px 0 25px;
6c50a6cc
A
1277 }
1278
cfdd2094
A
1279 a {
1280 color: var(--main-color);
1281 }
1282
6c50a6cc 1283 pre {
6c50a6cc
A
1284 margin: 0 20%;
1285 padding: 20px 0;
dd51f653 1286 text-align: left;
cfdd2094 1287 line-height: 1em;
6c50a6cc 1288 }
402b0346
A
1289}
1290
c69585f3
A
1291// EDIT LINK
1292.edit-link-container {
1293 .created-date {
807cade6 1294 margin-bottom: 10px;
c69585f3
A
1295 color: $light-grey;
1296 }
807cade6
A
1297}
1298
4cf3564d
A
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
c69585f3
A
1350// LOGIN
1351.login-form-container {
1352 .remember-me {
402b0346 1353 margin: 5px 0;
c69585f3 1354 }
402b0346
A
1355}
1356
c69585f3
A
1357// Search results
1358.search-result {
1359 a {
402b0346 1360 text-decoration: none;
c69585f3
A
1361 color: $white;
1362 }
402b0346 1363
c69585f3
A
1364 .label-tag {
1365 border-color: $white;
402b0346 1366
c69585f3
A
1367 .remove {
1368 margin: 0 0 0 5px;
1369 border-left: $white 1px solid;
1370 padding: 0 0 0 5px;
1371 }
1372 }
402b0346 1373
c69585f3
A
1374 .label-private {
1375 border: 1px solid $white;
1376 }
7c26f662
A
1377}
1378
c69585f3 1379// TOOLS
402b0346 1380.tools-item {
c69585f3 1381 margin: 10px 0;
402b0346 1382
c69585f3
A
1383 .pure-button {
1384 &:hover {
a5a0c039 1385 background-color: var(--main-color);
c69585f3
A
1386 background-image: none;
1387 color: $almost-white;
1388 }
1389 }
402b0346
A
1390}
1391
c69585f3
A
1392// PLUGIN ADMIN
1393.pluginform-container {
1394 .mobile-row {
1395 font-size: .9em;
1396 }
402b0346 1397
c69585f3 1398 .more {
402b0346 1399 margin-top: 10px;
c69585f3 1400 }
402b0346
A
1401}
1402
1403@media screen and (max-width: 64em) {
c69585f3
A
1404 .pluginform-container {
1405 .main-row {
1406 border-top-style: none;
1407 border-bottom-style: none;
402b0346 1408
c69585f3 1409 td {
402b0346 1410 border-top-style: none;
c69585f3
A
1411 border-bottom-style: none;
1412 }
402b0346 1413 }
c69585f3 1414 }
402b0346
A
1415}
1416
c69585f3
A
1417// IMPORT
1418.import-field-container {
1419 margin: 15px 0;
402b0346
A
1420}
1421
c69585f3
A
1422// TAG CLOUD
1423.cloudtag-container {
1424 padding: 10px;
1425 text-align: center;
1426 text-decoration: none;
1427 color: $dark-grey;
402b0346 1428
c69585f3 1429 a {
402b0346 1430 text-decoration: none;
c69585f3
A
1431 color: $dark-grey;
1432 }
402b0346 1433
c69585f3
A
1434 .count {
1435 color: $light-grey;
1436 }
402b0346
A
1437}
1438
c69585f3
A
1439// TAG LIST
1440.taglist-container {
1441 padding: 0 10px;
aa4797ba 1442
c69585f3 1443 a {
aa4797ba 1444 text-decoration: none;
c69585f3
A
1445 color: $dark-grey;
1446 }
aa4797ba 1447
c69585f3 1448 .count {
aa4797ba
A
1449 display: inline-block;
1450 width: 35px;
1451 text-align: right;
c69585f3
A
1452 color: $light-grey;
1453 }
aa4797ba 1454
c69585f3 1455 .rename-tag-form {
82e3bb5f 1456 display: none;
c69585f3 1457 }
82e3bb5f 1458
c69585f3 1459 .delete-tag {
aa4797ba 1460 display: none;
c69585f3
A
1461 color: $red;
1462 }
1463
1464 .rename-tag {
1465 color: $blue;
1466 }
1467
1468 .validate-rename-tag {
a5a0c039 1469 color: var(--main-color);
c69585f3
A
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 {
402b0346
A
1496 max-width: 100%;
1497 height: auto;
1498 color: transparent;
c69585f3 1499 }
402b0346 1500
c69585f3 1501 a {
402b0346 1502 text-decoration: none;
c69585f3 1503 }
402b0346 1504
c69585f3
A
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 }
402b0346
A
1530}
1531
c69585f3
A
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;
b5e2b23c
A
1538 min-width: 1px;
1539 min-height: 1px;
c69585f3
A
1540
1541 &.b-loaded {
1542 opacity: 1;
1543 }
402b0346
A
1544}
1545
c69585f3 1546// DAILY
402b0346 1547.daily-desc {
c69585f3
A
1548 color: $light-grey;
1549 font-size: .8em;
402b0346 1550
c69585f3 1551 a {
402b0346 1552 text-decoration: none;
c69585f3 1553 color: $dark-grey;
402b0346 1554
c69585f3
A
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;
a5a0c039 1567 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
c69585f3
A
1568 width: 90%;
1569 height: 1px;
1570 content: '';
1571 }
1572 }
402b0346
A
1573}
1574
1575.daily-entry {
c69585f3 1576 padding: 0 10px;
402b0346 1577
c69585f3
A
1578 .daily-entry-title {
1579 margin: 10px 0 0;
402b0346 1580
c69585f3
A
1581 a {
1582 text-decoration: none;
1583 color: $black;
1584 }
402b0346 1585
c69585f3
A
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 }
402b0346 1595
c69585f3
A
1596 .daily-entry-description {
1597 padding: 5px 5px 0;
402b0346 1598 text-align: justify;
c69585f3 1599 font-size: .9em;
402b0346 1600 word-wrap: break-word;
c69585f3 1601 }
402b0346 1602
c69585f3
A
1603 .daily-entry-tags {
1604 padding: 0 5px 5px;
1605 font-size: .8em;
1606 }
402b0346
A
1607}
1608
1609.daily-entry-thumbnail {
c69585f3
A
1610 float: left;
1611 margin: 15px 5px 5px 15px;
402b0346
A
1612}
1613
c69585f3
A
1614.daily-entry-description {
1615 a {
402b0346 1616 text-decoration: none;
a5a0c039 1617 color: var(--main-color);
402b0346 1618
c69585f3
A
1619 &:hover {
1620 text-shadow: 1px 1px $background-linklist-info;
1621 }
402b0346 1622
c69585f3 1623 &:visited {
a5a0c039 1624 color: var(--dark-main-color);
c69585f3
A
1625 }
1626 }
402b0346 1627}
70401690 1628
c69585f3 1629// Fix empty bookmarklet name in Firefox
70401690 1630.pure-button {
c69585f3 1631 -moz-user-select: auto;
70401690 1632}
aa4797ba
A
1633
1634.tag-sort {
c69585f3
A
1635 margin-top: 30px;
1636 text-align: center;
aa4797ba 1637
c69585f3 1638 a {
f4ea7cd5 1639 background: $almost-white;
aa4797ba 1640 display: inline-block;
f4ea7cd5 1641 padding: 5px;
aa4797ba 1642 text-decoration: none;
f4ea7cd5 1643 color: $dark-grey;
c69585f3 1644 }
aa4797ba 1645}
94c17565 1646
c69585f3
A
1647// Markdown
1648.markdown {
1649 p {
94c17565 1650 margin: 0 !important;
c69585f3 1651 }
94c17565 1652
c69585f3
A
1653 p + p {
1654 margin: .5em 0 0 !important;
1655 }
94c17565 1656
c69585f3
A
1657 * {
1658 &:first-child {
1659 margin-top: 0 !important;
1660 }
94c17565 1661
c69585f3
A
1662 &:last-child {
1663 margin-bottom: 5px !important;
1664 }
1665 }
055ce4bd
A
1666}
1667
c69585f3 1668// Pure Button
055ce4bd
A
1669.pure-button-success,
1670.pure-button-error,
1671.pure-button-warning,
1672.pure-button-primary,
1673.pure-button-shaarli,
1674.pure-button-secondary {
c69585f3
A
1675 border-radius: 4px;
1676 text-shadow: 0 1px 1px $dark-shadow;
1677 color: $white !important;
055ce4bd
A
1678}
1679
1680.pure-button-shaarli {
a5a0c039 1681 background-color: var(--main-color);
055ce4bd 1682}
28f26524
A
1683
1684.progressbar {
1685 border-radius: 6px;
a5a0c039 1686 background-color: var(--main-color);
28f26524
A
1687 padding: 1px;
1688
1689 > div {
1690 border-radius: 10px;
96746d71
A
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 );
28f26524
A
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}
374f89e7 1721
0cf76ccb
A
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
5d8de758
A
1776// Batch creation
1777input[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
6a716758
A
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
5d8de758
A
1833.addlink-batch-form-block {
1834 .pure-alert {
1835 margin: 25px 0 0 0;
1836 }
1837}
1838
374f89e7
A
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}