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