]> git.immae.eu Git - github/shaarli/Shaarli.git/blob - shaarli.scss
cd5dd9e6d012af1258609279d77347501c569ef4
[github/shaarli/Shaarli.git] / 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 }