aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets/default/scss/shaarli.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/default/scss/shaarli.scss')
-rw-r--r--assets/default/scss/shaarli.scss1353
1 files changed, 1353 insertions, 0 deletions
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
new file mode 100644
index 00000000..1e07a88e
--- /dev/null
+++ b/assets/default/scss/shaarli.scss
@@ -0,0 +1,1353 @@
1/**
2 * General
3 */
4body {
5 background: #d0d0d0;
6}
7
8.strong {
9 font-weight: bold;
10}
11
12.clear {
13 clear: both;
14}
15
16.center {
17 text-align: center;
18 margin: auto;
19}
20
21.label {
22 display: inline-block;
23 padding: .25em .4em;
24 font-size: 75%;
25 font-weight: 700;
26 line-height: 1;
27 text-align: center;
28 white-space: nowrap;
29 vertical-align: baseline;
30 border-radius: .25rem;
31}
32
33pre {
34 max-width: 100%;
35}
36
37@font-face {
38 font-family: 'Roboto';
39 font-weight: 400;
40 font-style: normal;
41 src:
42 local('Roboto'),
43 local('Roboto-Regular'),
44 url('../fonts/Roboto-Regular.woff2') format('woff2'),
45 url('../fonts/Roboto-Regular.woff') format('woff');
46}
47
48@font-face {
49 font-family: 'Roboto';
50 font-weight: 700;
51 font-style: normal;
52 src:
53 local('Roboto'),
54 local('Roboto-Bold'),
55 url('../fonts/Roboto-Bold.woff2') format('woff2'),
56 url('../fonts/Roboto-Bold.woff') format('woff');
57}
58
59body, .pure-g [class*="pure-u"] {
60 font-family: Roboto, Arial, sans-serif;
61}
62
63/**
64 * Extends Pure grids responsive to hide items.
65 * Use xx-0 to hide an item on xx screen.
66 * Display it at any level with xx-visible.
67 */
68.pure-u-0 { display: none !important; }
69@media screen and (min-width: 35.5em) {
70 .pure-u-sm-0 { display: none !important; }
71 .pure-u-sm-visible { display: inline-block !important; }
72}
73@media screen and (min-width: 48em) {
74 .pure-u-md-0 { display: none !important; }
75 .pure-u-md-visible { display: inline-block !important; }
76}
77@media screen and (min-width: 64em) {
78 .pure-u-lg-0 { display: none !important; }
79 .pure-u-lg-visible { display: inline-block !important; }
80}
81@media screen and (min-width: 80em) {
82 .pure-u-xl-0 { display: none !important; }
83 .pure-u-xl-visible { display: inline-block !important; }
84}
85
86/**
87 * Make pure-extras alert closable.
88 */
89.pure-alert-closable .fa-times {
90 float: right;
91}
92.pure-alert-close {
93 cursor: pointer;
94}
95
96.pure-alert-success {
97 background-color: #1b926c;
98}
99
100.anchor:target {
101 padding-top: 40px;
102}
103/**
104 * MENU
105 **/
106.shaarli-menu {
107 position: fixed;
108 top: 0;
109 width: 100%;
110 --height: 50px;
111 background: #1b926c;
112 -webkit-font-smoothing: antialiased;
113 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
114 max-height: 45px;
115 transition: max-height 0.5s;
116 overflow: hidden;
117 z-index: 999;
118}
119
120/* Chrome bugfix: with 100% height, it only displays the first element. */
121.pure-menu-item {
122 height: 45px;
123}
124
125.shaarli-menu.open {
126 max-height: 500px;
127 transition: max-height 0.75s;
128}
129
130.head-logo {
131 float: left;
132 margin: 0 5px 0 0;
133}
134
135.pure-menu-link,
136.pure-menu-link:visited,
137.pure-menu-selected .pure-menu-link,
138.pure-menu-selected .pure-menu-link:visited {
139 padding: 0.8em 1em;
140 color: #f5f5f5;
141}
142
143.pure-menu-link:hover, .pure-menu-link:focus,
144.pure-menu-selected .pure-menu-link:hover,
145.pure-menu-selected .pure-menu-link:focus {
146 color: #fff;
147 background: transparent;
148}
149
150.pure-menu-item:hover::after {
151 margin: -4px auto 0 auto;
152 display: block;
153 content:"";
154 background: #fff;
155 height: 4px;
156 width: 100%;
157}
158
159.menu-toggle {
160 width: 34px;
161 height: 45px;
162 position: absolute;
163 top: 5px;
164 right: 0;
165 display: none;
166}
167
168.menu-toggle .bar {
169 background-color: #b0ddce;
170 display: block;
171 width: 20px;
172 height: 2px;
173 border-radius: 100px;
174 position: absolute;
175 top: 18px;
176 right: 7px;
177 transition: all 0.5s;
178}
179
180.menu-toggle .bar:first-child {
181 transform: translateY(-6px);
182}
183
184.menu-toggle.x .bar {
185 transform: rotate(45deg);
186}
187
188.menu-toggle.x .bar:first-child {
189 transform: rotate(-45deg);
190}
191
192@media screen and (max-width: 64em) {
193 .menu-toggle {
194 display: block;
195 }
196}
197
198.header-buttons {
199 text-align: right;
200}
201
202.linkcount {
203 color: #252525;
204 font-size: 0.8em;
205}
206
207@media screen and (min-width: 64em) {
208 .linkcount {
209 position: absolute;
210 right: 5px;
211 }
212}
213
214#search, #search-linklist, #search-tagcloud {
215 text-align: center;
216 width: 100%;
217}
218
219#search input[type="text"], #search-linklist input[type="text"] {
220 padding: 0 5px;
221 height: 30px;
222 width: 260px;
223 background: #f5f5f5;
224 border: medium none currentColor;
225 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
226 border-radius: 2px;
227 color: #252525;
228}
229@media screen and (max-width: 64em) {
230 .searchform {
231 max-width: 260px;
232 margin: 0 auto;
233 }
234}
235
236/* because chrome */
237#search input[type="text"]::-webkit-input-placeholder,
238#search-linklist input[type="text"]::-webkit-input-placeholder {
239 color: #777777;
240}
241
242#search button,
243#search-tagcloud button,
244#search-linklist button {
245 padding: 4px 8px 6px 8px;
246 background-color: #1B926C;
247 color: #f5f5f5;
248 border: none;
249 border-radius: 2px;
250}
251
252#search-tagcloud button {
253 width: 90%;
254}
255
256@media screen and (max-width: 64em) {
257 #search-linklist button {
258 width: 100%;
259 }
260 #search-linklist .awesomplete {
261 margin: 5px 0;
262 }
263}
264
265#search button:hover,
266#search-linklist button:hover,
267#search-tagcloud button:hover {
268 color: #d0d0d0;
269}
270
271#search,
272#search-linklist {
273 padding: 6px 0;
274}
275
276@media screen and (max-width: 64em) {
277 #search, #search * {
278 visibility: hidden;
279 }
280}
281
282.subheader-form a.button {
283 color: #f5f5f5;
284 font-weight: bold;
285 text-decoration: none;
286 border: 2px solid #f5f5f5;
287 border-radius: 5px;
288 padding: 3px 10px;
289}
290
291.linklist-item-editbuttons .delete-checkbox {
292 display: none;
293}
294
295#header-login-form input[type="text"], #header-login-form input[type="password"] {
296 width: 200px;
297}
298
299/* because chrome */
300#header-login-form input[type="text"]::-webkit-input-placeholder,
301#header-login-form input[type="password"]::-webkit-input-placeholder {
302 color: #777777;
303}
304
305.subheader-form {
306 visibility: hidden;
307 position: fixed;
308 width: 100%;
309 text-align: center;
310 background: #1b926c;
311 display: block;
312 z-index: 999;
313 height: 30px;
314 padding: 5px 0;
315}
316
317@media screen and (min-width: 64em) {
318 .subheader-form.open, .subheader-form.open * {
319 visibility: visible;
320 }
321}
322
323.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
324 padding: 5px 5px 3px 15px;
325 height: 20px;
326 width: 20%;
327 background: #f5f5f5;
328 border: medium none currentColor;
329 border-radius: 2px;
330 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
331 color: #252525;
332}
333
334/* because chrome */
335.subheader-form input[type="text"]::-webkit-input-placeholder,
336.subheader-form input[type="password"]::-webkit-input-placeholder
337{
338 color: #252525;
339}
340
341.subheader-form .remember-me {
342 display: inline-block;
343 width: auto;
344 padding: 5px 20px 3px 20px;
345 cursor: pointer;
346}
347
348.subheader-form .remember-me label, .subheader-form .remember-me input {
349 cursor: pointer;
350}
351
352.subheader-form input[type="submit"] {
353 display: inline-block;
354 margin: 0 0 5px 0;
355 padding: 4px 0 4px 0;
356 height: 28px;
357 width: 100px;
358 background: #1b926c;
359 border: 1px solid #f5f5f5;
360 color: #f5f5f5;
361 border-radius: 2px;
362}
363
364.subheader-form input[type="submit"]:hover {
365 background: #f5f5f5;
366 color: #1b926c;
367}
368
369.new-version-message {
370 text-align: center;
371}
372
373.new-version-message a {
374 color: rgb(151, 96, 13);
375 font-weight: bold;
376}
377
378/**
379 * CONTENT - GENERAL
380 */
381#content {
382 position: relative;
383 z-index: 2;
384 margin-top: 45px;
385}
386
387/**
388 * Plugins additional forms
389 */
390.toolbar-plugin {
391 margin: 5px 0;
392 text-align: center;
393}
394
395.toolbar-plugin input[type="text"] {
396 padding: 0 5px;
397 height: 30px;
398 width: 300px;
399 background: #f5f5f5;
400 border: medium none currentColor;
401 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
402 border-radius: 2px;
403 color: #252525;
404}
405
406/* because chrome */
407.toolbar-plugin input[type="text"]::-webkit-input-placeholder {
408 color: #777777;
409}
410
411.toolbar-plugin input[type="submit"] {
412 padding: 0 10px;
413 height: 30px;
414 background: #f5f5f5;
415 border: medium none currentColor;
416 border-radius: 2px;
417 color: #252525;
418}
419
420.toolbar-plugin input[type="submit"]:hover {
421 background: #fff;
422}
423
424@media screen and (max-width: 64em) {
425 .toolbar-plugin input[type="text"] {
426 width: 70%;
427
428 }
429}
430
431/**
432 * CONTENT - LINKLIST PAGING
433 * 64em -> lg
434 */
435.linklist-filters {
436 margin: 5px 0;
437 color: #252525;
438 font-size: 0.9em;
439}
440
441.linklist-filters a {
442 padding: 5px 8px;
443 text-decoration: none;
444}
445
446.linklist-filters .filter-off {
447 color: #252525;
448 background: #f5f5f5;
449}
450
451.linklist-filters .filter-on {
452 color: #b0ddce;
453 background: #1b926c;
454}
455
456.linklist-filters .filter-block {
457 color: #f5f5f5;
458 background: #ac2925;
459}
460
461.linklist-pages {
462 margin: 5px 0;
463 color: #252525;
464 text-align: center;
465}
466
467.linklist-pages a {
468 color: #252525;
469 text-decoration: none;
470}
471
472.linklist-pages a:hover {
473 color: #fff;
474}
475
476.linksperpage {
477 margin: 5px 0;
478 text-align: right;
479 color: #252525;
480 font-size: 0.9em;
481}
482
483.linksperpage a {
484 padding: 5px 5px;
485 text-decoration: none;
486 color: #252525;
487 background: #f5f5f5;
488}
489
490.linksperpage a, .linksperpage input[type="text"] {
491 display: inline-block;
492 width: 20px;
493 text-align: center;
494}
495
496.linksperpage form {
497 display: inline;
498}
499
500.linksperpage input[type="text"] {
501 height: 20px;
502 margin: 0;
503 padding: 4px 5px 3px 8px;
504 background: #f5f5f5;
505 border: medium none currentColor;
506 color: #252525;
507 font-size: 0.8em;
508}
509
510/**
511 * CONTENT - LINKLIST ITEMS
512 */
513.linklist-item {
514 margin: 0 0 10px 0;
515 background: #f5f5f5;
516 box-shadow: 1px 1px 3px #797979;
517}
518
519.linklist-item-buttons {
520 background: transparent;
521 position: relative;
522 width: 23px;
523 z-index: 99;
524}
525
526.linklist-item-buttons-right {
527 float: right;
528 margin-right: -25px;
529}
530
531.linklist-item-buttons * {
532 display: block;
533 float: left;
534 width:100%;
535 margin: auto;
536 text-align: center;
537}
538
539.linklist-item-title, .linklist-item-title h2 {
540 margin: 0;
541 word-wrap: break-word;
542}
543
544.linklist-item-title {
545 position: relative;
546 background: #f5f5f5;
547}
548
549.linklist-item-title h2 {
550 padding: 3px 10px 0 10px;
551 line-height: 30px;
552}
553
554.linklist-item-title h2 a {
555 font-size: 0.7em;
556 color: #252525;
557 text-decoration: none;
558 vertical-align: middle;
559}
560
561.linklist-item-title .linklist-link {
562 font-size: 1.1em;
563 color: #1b926c;
564}
565
566.linklist-item-title h2 a:visited .linklist-link {
567 color: #2a4c41;
568}
569
570.linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
571 color: #252525;
572}
573
574
575.linklist-item-title .label-private {
576 border: solid 1px #F89406;
577 font-family: Arial, sans-serif;
578 font-size: 0.65em;
579 color: #F89406;
580}
581
582.fold-button {
583 display: none;
584 color: #252525;
585}
586
587.linklist-item-editbuttons {
588 float: right;
589 padding: 8px 5px;
590}
591
592.linklist-item-editbuttons * {
593 display: block;
594 float: left;
595 margin: 0 1px;
596}
597
598.linklist-item-editbuttons a {
599 font-size: 1em;
600}
601
602.edit-link {
603 font-size: 1.2em;
604 color: #0b5ea6;
605}
606
607.delete-link {
608 font-size: 1.3em;
609 color: #ac2925 !important;
610}
611
612.linklist-item-description {
613 position: relative;
614 padding: 0 10px;
615 word-wrap: break-word;
616 color: #252525;
617 line-height: 1.3em;
618}
619
620.linklist-item-description a {
621 text-decoration: none;
622 color: #1b926c;
623}
624
625.linklist-item-description a:hover {
626 color: #252525;
627}
628
629.linklist-item-description a:visited {
630 color: #14553f;
631}
632
633.linklist-item-thumbnail {
634 position: relative;
635 padding: 0 0 0 5px;
636 margin: 0;
637 float: right;
638 z-index: 50;
639 height: 90px;
640}
641
642.linklist-item.private .linklist-item-title::before,
643.linklist-item.private .linklist-item-description::before {
644 position: absolute;
645 left: 3px;
646 top: 0;
647 display: block;
648 content:"";
649 background: #F89406;
650 height: 96%;
651 width: 2px;
652 z-index: 1;
653}
654
655.linklist-item.private .linklist-item-description::before {
656 height: 100%;
657}
658
659.linklist-item.private .linklist-item-title::before {
660 margin-top: 3px;
661}
662
663.linklist-item-infos {
664 padding: 4px 8px 4px 8px;
665 background: #ddd;
666 color: #252525;
667}
668
669.linklist-item-infos a {
670 color: #252525;
671 text-decoration: none;
672}
673
674.linklist-item-infos a:hover {
675 color: #000;
676}
677
678.linklist-item-infos .linklist-item-tags {
679 font-size: 0.8em;
680}
681
682.linklist-item-infos .label-tag {
683 font-size: 1em;
684}
685
686.linklist-item-infos-dateblock {
687 font-size: 0.9em;
688}
689
690.linklist-plugin-icon {
691 width: 13px;
692 height: 13px;
693}
694
695.linklist-item-infos-url {
696 text-align: right;
697 white-space: nowrap;
698 overflow: hidden;
699 text-overflow: ellipsis;
700 font-size: 0.8em;
701 height:23px;
702 line-height:23px;
703}
704
705.linklist-item-infos .mobile-buttons {
706 text-align: right;
707}
708
709.linklist-item-infos .linklist-plugin-icon {
710 display: inline-block;
711 margin: 0 2px;
712 width: 16px;
713 height: 16px;
714}
715
716.linklist-item-infos-controls-group {
717 display: inline-block;
718 border-right: 1px solid #5d5d5d;
719 padding-right: 6px;
720}
721
722.ctrl-edit {
723 margin: 0 7px;
724}
725
726/** 64em -> lg **/
727@media screen and (max-width: 64em) {
728 .linklist-item-infos-url {
729 text-align: left;
730 }
731}
732
733/**
734 * Footer
735 */
736#footer {
737 margin: 20px 0;
738 padding: 5px;
739 text-align: center;
740 color: #252525;
741}
742
743#footer:before {
744 display: block;
745 content:"";
746 background: linear-gradient(to right, #949393, #252525, #949393);
747 height: 1px;
748 width: 80%;
749 margin: 10px auto;
750}
751
752#footer a {
753 color: #252525;
754}
755
756/**
757 * PAGE FORM
758 */
759.page-form {
760 margin: 20px 0 0 0;
761 background: #f5f5f5;
762 box-shadow: 1px 1px 2px #797979;
763 color: #252525;
764 overflow: hidden;
765}
766
767.page-form .window-title {
768 margin: 0 0 10px 0;
769 padding: 10px 0;
770 width: 100%;
771 color: #1b926c;
772 background: #f5f5f5;
773 text-align: center;
774}
775
776.page-form .window-subtitle {
777 text-align: center;
778}
779
780.page-form a {
781 color: #1b926c;
782 font-weight: bold;
783 text-decoration: none;
784}
785
786.page-form p {
787 padding: 5px 10px;
788 margin: 0;
789}
790
791.page-form input[type="text"],
792.page-form input[type="password"],
793.page-form textarea {
794 box-sizing: border-box;
795 margin: 10px 0;
796 padding: 5px 5px 3px 15px;
797 height: 35px;
798 width: 90%;
799 background: #eeeeee;
800 border: solid 1px #d8d8d8;
801 border-radius: 2px;
802 color: #252525;
803}
804
805.page-form textarea {
806 min-height: 240px;
807 padding: 15px 5px 3px 15px;
808 resize: vertical;
809 overflow-y: auto;
810 word-wrap:break-word
811}
812
813/* because chrome */
814.page-form input[type="text"]::-webkit-input-placeholder,
815.page-form input[type="password"]::-webkit-input-placeholder {
816 color: #777777;
817}
818
819.page-form input[type="submit"], .page-form a.button {
820 margin: 15px 5px;
821 height: 35px;
822 line-height: 35px;
823 width: 150px;
824 background: #1b926c;
825 color: #f5f5f5;
826 border: none;
827 box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
828 font-size: 1.2em;
829 text-decoration: none;
830 vertical-align: center;
831 font-weight: normal;
832 display: inline-block;
833}
834
835
836.page-form .button.button-red {
837 background: #ac2925;
838}
839
840.page-form .submit-buttons {
841 margin-bottom: 10px;
842}
843
844@media screen and (min-width: 64em) {
845 .page-form .submit-buttons {
846 position: relative;
847 }
848
849 .page-form .submit-buttons .button.button-red {
850 position: absolute;
851 right: 5%;
852 }
853}
854
855@media screen and (max-width: 64em) {
856 .page-form .submit-buttons .button {
857 display: block;
858 margin: auto;
859 }
860}
861
862.page-form select {
863 color: #252525;
864}
865
866/**
867 * PAGE FORM - LIGHT
868 */
869.page-form-light div, .page-form-light p {
870 text-align: center;
871}
872
873/**
874 * PAGE FORM - COMPLETE
875 */
876.page-form-complete {
877 #background: #f5f5f5;
878}
879
880.page-form-complete div, .page-form-complete p {
881 color: #252525;
882}
883
884.page-form-complete .form-label, .page-form-complete .form-input {
885 position: relative;
886 height: 60px;
887}
888
889.page-form-complete .form-label label,
890.page-form-complete .form-input input,
891.page-form-complete .form-input select.align,
892.page-form-complete .timezone {
893 position: absolute;
894 top: 50%;
895 transform: translateY(-50%);
896}
897
898.page-form-complete .form-label label {
899 text-align: right;
900 right: 0;
901 padding: 0 20px;
902}
903
904.page-form-complete .label-name {
905 font-weight: bold;
906}
907
908.page-form-complete .label-desc {
909 font-size: 0.8em;
910}
911
912.page-form-complete input[type="text"],
913.page-form-complete input[type="password"],
914.page-form-complete textarea {
915 margin: 0;
916}
917
918.page-form section {
919 margin: 10px 0 25px 0;
920}
921
922.page-form table {
923 margin: auto;
924 width: 90%;
925}
926
927.page-form table .order {
928 text-decoration: none;
929 color: #252525;
930}
931
932.page-form table, .page-form th, .page-form td {
933 border-width: 1px 0;
934 border-style: solid;
935 border-color: #aaaaaa;
936}
937
938.page-form th, .page-form td {
939 padding: 5px;
940
941}
942
943/* Awesomeplete fix */
944div.awesomplete {
945 width: inherit;
946}
947
948div.awesomplete > input {
949 display: inherit;
950}
951
952div.awesomplete > ul {
953 z-index: 9999;
954}
955
956.page-form .awesomplete {
957 width: 90%;
958}
959
960.page-form .awesomplete input {
961 width: 100%;
962}
963
964.page-form div.awesomplete > ul {
965 color: black;
966}
967
968form[name="linkform"].page-form {
969 overflow: visible;
970}
971
972@media screen and (max-width: 64em) {
973 .page-form-complete .form-label {
974 height: inherit;
975 }
976
977 .page-form-complete .form-label label,
978 .page-form-complete .form-input input,
979 .page-form-complete .timezone {
980 position: inherit;
981 top: inherit;
982 transform: translateY(0);
983 }
984
985 .page-form-complete .form-input input[type="checkbox"] {
986 position: absolute;
987 top: 50%;
988 right: 50%;
989 transform: translateY(-50%);
990 }
991
992 .page-form-complete .form-input {
993 text-align: center;
994 }
995
996 .page-form-complete .form-label label {
997 display: block;
998 text-align: left;
999 margin: 10px 0 0 0;
1000 }
1001
1002 .timezone-continent:after {
1003 content:"\a\a";
1004 white-space: pre;
1005 }
1006
1007 .page-form-complete .radio-buttons {
1008 text-align: left;
1009 padding: 5px 15px;
1010 }
1011}
1012
1013/**
1014 * Page visitor (page form extended)
1015 */
1016.page-visitor {
1017 color: #252525;
1018}
1019
1020#page404 {
1021 color: #3f3f3f;
1022}
1023
1024/**
1025 * EDIT LINK
1026 */
1027#editlinkform .created-date {
1028 color: #767676;
1029 margin-bottom: 10px;
1030}
1031
1032/**
1033 * LOGIN
1034 */
1035#login-form .remember-me {
1036 margin: 5px 0;
1037}
1038
1039/**
1040 * Search results
1041 */
1042.search-result a {
1043 color: white;
1044 text-decoration: none;
1045}
1046
1047.search-result .label-tag {
1048 border-color: white;
1049}
1050
1051.search-result .label-tag .remove {
1052 border-left: white 1px solid;
1053 padding: 0 0 0 5px;
1054 margin: 0 0 0 5px;
1055}
1056
1057.search-result .label-private {
1058 border: 1px solid white;
1059}
1060
1061/**
1062 * TOOLS
1063 */
1064.tools-item {
1065 margin: 10px 0;
1066}
1067
1068.tools-item .pure-button:hover {
1069 background-image: none;
1070 background-color: #1b926c;
1071 color: #f5f5f5;
1072}
1073
1074/**
1075 * PLUGIN ADMIN
1076 */
1077#pluginform .mobile-row {
1078 font-size: 0.9em;
1079}
1080
1081#pluginform .more {
1082 margin-top: 10px;
1083}
1084
1085@media screen and (max-width: 64em) {
1086 #pluginform .main-row, #pluginform .main-row td {
1087 border-bottom-style: none;
1088 }
1089
1090 #pluginform .mobile-row, #pluginform .mobile-row td {
1091 border-top-style: none;
1092 }
1093}
1094
1095/**
1096 * IMPORT
1097 */
1098#import-field {
1099 margin: 15px 0;
1100}
1101
1102/**
1103 * TAG CLOUD
1104 */
1105#cloudtag {
1106 padding: 10px;
1107 text-align: center;
1108}
1109
1110#cloudtag, #cloudtag a {
1111 color: #252525;
1112 text-decoration: none;
1113}
1114
1115#cloudtag .count {
1116 color: #7f7f7f;
1117}
1118
1119/**
1120 * TAG LIST
1121 */
1122#taglist {
1123 padding: 0 10px;
1124}
1125
1126#taglist a {
1127 color: #252525;
1128 text-decoration: none;
1129}
1130
1131#taglist .count {
1132 display: inline-block;
1133 width: 35px;
1134 text-align: right;
1135 color: #7f7f7f;
1136}
1137
1138#taglist .rename-tag-form {
1139 display: none;
1140}
1141
1142#taglist .delete-tag {
1143 color: #ac2925;
1144 display: none;
1145}
1146
1147#taglist .rename-tag {
1148 color: #0b5ea6;
1149}
1150
1151#taglist .validate-rename-tag {
1152 color: #1b926c;
1153}
1154
1155/**
1156 * Picture wall CSS
1157 */
1158#picwall_container {
1159 margin: 0 10px 10px 10px;
1160 color: #252525;
1161 background-color: #f5f5f5;
1162 clear: both;
1163}
1164
1165.picwall_pictureframe {
1166 margin: 2px;
1167 background-color: #f5f5f5;
1168 z-index: 5;
1169 position: relative;
1170 display: table-cell;
1171 vertical-align: middle;
1172 width: 90px;
1173 height: 90px;
1174 overflow: hidden;
1175 text-align: center;
1176 float: left;
1177}
1178
1179.b-lazy {
1180 -webkit-transition: opacity 500ms ease-in-out;
1181 -moz-transition: opacity 500ms ease-in-out;
1182 -o-transition: opacity 500ms ease-in-out;
1183 transition: opacity 500ms ease-in-out;
1184 opacity: 0;
1185}
1186.b-lazy.b-loaded {
1187 opacity: 1;
1188}
1189
1190.picwall_pictureframe img {
1191 max-width: 100%;
1192 height: auto;
1193 color: transparent;
1194} /* Adapt the width of the image */
1195
1196.picwall_pictureframe a {
1197 text-decoration: none;
1198}
1199
1200/* CSS to show title when hovering an image - no javascript required. */
1201.picwall_pictureframe span.info {
1202 display: none;
1203 font-family: Arial, sans-serif;
1204}
1205
1206.picwall_pictureframe:hover span.info {
1207 display: block;
1208 position: absolute;
1209 top: 0;
1210 left: 0;
1211 width: 90px;
1212 height: 90px;
1213 font-weight: bold;
1214 font-size: 9pt;
1215 color: #f5f5f5;
1216 text-align: left;
1217 background-color: rgba(0, 0, 0, 0.8);
1218}
1219
1220/**
1221 * DAILY
1222 */
1223.daily-desc {
1224 color: #7f7f7f;
1225 font-size: 0.8em;
1226}
1227
1228.daily-about a {
1229 color: #343434;
1230 text-decoration: none;
1231}
1232
1233.daily-about a:hover {
1234 color: #7f7f7f;
1235}
1236
1237.daily-about h3:before, .daily-about h3:after {
1238 display: block;
1239 content:"";
1240 background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
1241 height: 1px;
1242 width: 90%;
1243 margin: 10px auto;
1244}
1245
1246.daily-entry {
1247 padding: 0 10px;
1248}
1249
1250.daily-entry .daily-entry-title:after {
1251 display: block;
1252 content:"";
1253 background: linear-gradient(to right, #fff, #515151, #fff);
1254 height: 1px;
1255 width: 70%;
1256 margin: 5px auto;
1257}
1258
1259.daily-entry .daily-entry-title {
1260 margin: 10px 0 0 0;
1261}
1262
1263.daily-entry .daily-entry-title a {
1264 color: #000;
1265 text-decoration: none;
1266}
1267
1268.daily-entry .daily-entry-description {
1269 padding: 5px 5px 0 5px;
1270 font-size: 0.9em;
1271 text-align: justify;
1272 word-wrap: break-word;
1273}
1274
1275.daily-entry .daily-entry-tags {
1276 padding: 0 5px 5px 5px;
1277 font-size: 0.8em;
1278}
1279
1280.daily-entry-thumbnail {
1281 float: left;
1282 margin: 15px 5px 5px 15px;
1283}
1284
1285.daily-entry-description a {
1286 text-decoration: none;
1287 color: #1b926c;
1288}
1289
1290.daily-entry-description a:hover {
1291 text-shadow: 1px 1px #ddd;
1292}
1293
1294.daily-entry-description a:visited {
1295 color: #20b988;
1296}
1297
1298/*
1299 * Fix empty bookmarklet name in Firefox
1300 */
1301.pure-button {
1302 -moz-user-select: auto;
1303}
1304
1305.tag-sort {
1306 margin-top: 30px;
1307 text-align: center;
1308}
1309
1310.tag-sort a {
1311 display: inline-block;
1312 margin: 0 15px;
1313 color: white;
1314 text-decoration: none;
1315 font-weight: bold;
1316}
1317
1318/**
1319 * Markdown
1320 */
1321.markdown p {
1322 margin: 0 !important;
1323}
1324
1325.markdown p + p {
1326 margin: 0.5em 0 0 0 !important;
1327}
1328
1329.markdown *:first-child {
1330 margin-top: 0 !important;
1331}
1332
1333.markdown *:last-child {
1334 margin-bottom: 5px !important;
1335}
1336
1337/**
1338 * Pure Button
1339 */
1340.pure-button-success,
1341.pure-button-error,
1342.pure-button-warning,
1343.pure-button-primary,
1344.pure-button-shaarli,
1345.pure-button-secondary {
1346 color: white !important;
1347 border-radius: 4px;
1348 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
1349}
1350
1351.pure-button-shaarli {
1352 background-color: #1B926C;
1353}