aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default/css/shaarli.css
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-01-14 15:52:17 +0100
committerArthurHoaro <arthur@hoa.ro>2017-02-27 20:01:54 +0100
commit402b03464812aaec76bc841ca7dacb775baf1e03 (patch)
tree5f5ce030a71ed1ac327f60911cb22f0ca87d21cd /tpl/default/css/shaarli.css
parent009ce9358168cc06c76fc2f4162829e552e633a3 (diff)
downloadShaarli-402b03464812aaec76bc841ca7dacb775baf1e03.tar.gz
Shaarli-402b03464812aaec76bc841ca7dacb775baf1e03.tar.zst
Shaarli-402b03464812aaec76bc841ca7dacb775baf1e03.zip
Introduce the new default Shaarli template
Diffstat (limited to 'tpl/default/css/shaarli.css')
-rw-r--r--tpl/default/css/shaarli.css1180
1 files changed, 1180 insertions, 0 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
new file mode 100644
index 00000000..161c36d6
--- /dev/null
+++ b/tpl/default/css/shaarli.css
@@ -0,0 +1,1180 @@
1/**
2 * General
3 */
4body {
5 background: #c5c5c5;
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 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.subheader-form {
272 visibility: hidden;
273 position: fixed;
274 width: 100%;
275 text-align: center;
276 background: #1b926c;
277 display: block;
278 z-index: 999;
279 height: 30px;
280 padding: 5px 0;
281}
282
283@media screen and (min-width: 64em) {
284 .subheader-form.open, .subheader-form.open * {
285 visibility: visible;
286 }
287}
288
289.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
290 margin: 0 0 5px 0;
291 padding: 5px 5px 3px 15px;
292 height: 20px;
293 width: 20%;
294 background: #f5f5f5;
295 border: medium none currentColor;
296 border-radius: 2px;
297 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
298 color: #252525;
299}
300
301/* because chrome */
302.subheader-form input[type="text"]::-webkit-input-placeholder,
303.subheader-form input[type="password"]::-webkit-input-placeholder
304{
305 color: #252525;
306}
307
308.subheader-form .remember-me {
309 display: inline-block;
310 width: auto;
311 padding: 5px 20px 3px 20px;
312 cursor: pointer;
313}
314
315.subheader-form .remember-me label, .subheader-form .remember-me input {
316 cursor: pointer;
317}
318
319.subheader-form input[type="submit"] {
320 display: inline-block;
321 margin: 0 0 5px 0;
322 padding: 4px 0 4px 0;
323 height: 28px;
324 width: 100px;
325 background: #1b926c;
326 border: 1px solid #f5f5f5;
327 color: #f5f5f5;
328 border-radius: 2px;
329}
330
331.subheader-form input[type="submit"]:hover {
332 background: #f5f5f5;
333 color: #1b926c;
334}
335
336.new-version-message {
337 text-align: center;
338}
339
340.new-version-message a {
341 color: rgb(151, 96, 13);
342 font-weight: bold;
343}
344
345/**
346 * CONTENT - GENERAL
347 */
348#content {
349 position: relative;
350 z-index: 2;
351 margin-top: 45px;
352}
353
354/**
355 * Plugins additional forms
356 */
357.toolbar-plugin {
358 margin: 5px 0;
359 text-align: center;
360}
361
362.toolbar-plugin input[type="text"] {
363 padding: 0 5px;
364 height: 30px;
365 width: 300px;
366 background: #f5f5f5;
367 border: medium none currentColor;
368 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
369 border-radius: 2px;
370 color: #252525;
371}
372
373/* because chrome */
374.toolbar-plugin input[type="text"]::-webkit-input-placeholder {
375 color: #777777;
376}
377
378.toolbar-plugin input[type="submit"] {
379 padding: 0 10px;
380 height: 30px;
381 background: #f5f5f5;
382 border: medium none currentColor;
383 border-radius: 2px;
384 color: #252525;
385}
386
387@media screen and (max-width: 64em) {
388 .toolbar-plugin input[type="text"] {
389 width: 70%;
390
391 }
392}
393
394/**
395 * CONTENT - LINKLIST PAGING
396 * 64em -> lg
397 */
398.linklist-filters {
399 margin: 10px 0;
400 color: #252525;
401 font-size: 0.9em;
402}
403
404.linklist-filters a {
405 padding: 5px 8px;
406 text-decoration: none;
407}
408
409.linklist-filters .filter-off {
410 color: #252525;
411 background: #f5f5f5;
412}
413
414.linklist-filters .filter-on {
415 color: #b0ddce;
416 background: #1b926c;
417}
418
419.linklist-pages {
420 margin: 10px 0;
421 color: #252525;
422 text-align: center;
423}
424
425.linklist-pages a {
426 color: #252525;
427 text-decoration: none;
428}
429
430.linklist-pages a:hover {
431 color: #fff;
432}
433
434.linksperpage {
435 margin: 10px 0;
436 text-align: right;
437 color: #252525;
438 font-size: 0.9em;
439}
440
441.linksperpage a {
442 padding: 5px 5px;
443 text-decoration: none;
444 color: #252525;
445 background: #f5f5f5;
446}
447
448.linksperpage a, .linksperpage input[type="text"] {
449 display: inline-block;
450 width: 20px;
451 text-align: center;
452}
453
454.linksperpage form {
455 display: inline;
456}
457
458.linksperpage input[type="text"] {
459 height: 20px;
460 margin: 0;
461 padding: 4px 5px 3px 8px;
462 background: #f5f5f5;
463 border: medium none currentColor;
464 color: #252525;
465 font-size: 0.8em;
466}
467
468/**
469 * CONTENT - LINKLIST ITEMS
470 */
471.linklist-item {
472 margin: 0 0 15px 0;
473 background: #f5f5f5;
474 box-shadow: 2px 2px 0.5em #797979;
475}
476
477.linklist-item-title, .linklist-item-title h2 {
478 margin: 0;
479 word-wrap: break-word;
480}
481
482.linklist-item-title {
483 position: relative;
484 background: #f5f5f5;
485}
486
487.linklist-item.private .linklist-item-title::before {
488 position: absolute;
489 left: 3px;
490 top: 0;
491 display: block;
492 content:"";
493 background: #F89406;
494 height: 95%;
495 width: 2px;
496 margin-top: 3px;
497 z-index: 1;
498}
499
500.linklist-item-title h2 {
501 padding: 3px 10px 0 10px;
502 line-height: 30px;
503}
504
505.linklist-item-title a {
506 font-size: 0.7em;
507 color: #252525;
508 text-decoration: none;
509 vertical-align: middle;
510 font-family: Roboto Slab, Arial, sans-serif;
511}
512
513.linklist-item-title .linklist-link {
514 font-size: 1.1em;
515 color: #1b926c;
516}
517
518.linklist-item-title .linklist-link:visited {
519 color: #1b926c;
520}
521
522.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
523 color: #252525;
524}
525
526
527.linklist-item-title .label-private {
528 border: solid 1px #F89406;
529 font-family: Arial, sans-serif;
530 font-size: 0.65em;
531 color: #F89406;
532}
533
534.linklist-item-title .fold-button {
535 display: none;
536}
537
538.linklist-item-editbuttons {
539 float: right;
540 padding: 8px 5px;
541}
542
543.linklist-item-editbuttons * {
544 display: block;
545 float: left;
546 margin: 0 1px;
547}
548
549.linklist-item-editbuttons a {
550 font-size: 1em;
551}
552
553.edit-link {
554 font-size: 1.2em;
555 color: #0b5ea6;
556}
557
558.delete-link {
559 font-size: 1.3em;
560 color: #ac2925 !important;
561}
562
563.linklist-item-description {
564 position: relative;
565 padding: 10px;
566 background: #f5f5f5;
567 font-family: Roboto Slab, Arial, sans-serif;
568 word-wrap: break-word;
569 color: #252525;
570 line-height: 1.3em;
571}
572
573.linklist-item.private .linklist-item-description::before {
574 position: absolute;
575 left: 3px;
576 top: 0;
577 display: block;
578 content:"";
579 background: #F89406;
580 height: 95%;
581 width: 2px;
582 z-index: 1;
583}
584
585.linklist-item-description a {
586 text-decoration: none;
587 color: #1b926c;
588}
589
590.linklist-item-description a:hover {
591 color: #252525;
592}
593
594.linklist-item-description a:visited {
595 color: #14553f;
596}
597
598.linklist-item-thumbnail {
599 margin-top: 10px;
600 padding: 10px;
601 float: left;
602}
603
604.linklist-item-infos {
605 padding: 8px 8px 5px 8px;
606 background: #ddd;
607 color: #252525;
608}
609
610.linklist-item-infos a {
611 color: #252525;
612 text-decoration: none;
613}
614
615.linklist-item-infos a:hover {
616 color: #000;
617}
618
619.linklist-item-infos .linklist-item-tags {
620 font-size: 0.8em;
621}
622
623.linklist-item-infos .label-tag {
624 font-size: 1em;
625}
626
627.linklist-item-infos-dateblock {
628 font-size: 0.9em;
629}
630
631.linklist-plugin-icon {
632 width: 13px;
633 height: 13px;
634}
635
636.linklist-item-infos-url {
637 text-align: right;
638 white-space: nowrap;
639 overflow: hidden;
640 text-overflow: ellipsis;
641 font-size: 0.8em;
642}
643
644.linklist-item-infos .mobile-buttons {
645 text-align: right;
646}
647
648.linklist-item-infos .linklist-plugin-icon {
649 display: inline-block;
650 margin: 0 2px;
651 width: 16px;
652 height: 16px;
653}
654
655/** 64em -> lg **/
656@media screen and (max-width: 64em) {
657 .linklist-item-infos-url {
658 text-align: left;
659 }
660}
661
662/**
663 * Footer
664 */
665#footer {
666 margin: 20px 0;
667 padding: 5px;
668 text-align: center;
669 color: #252525;
670}
671
672#footer:before {
673 display: block;
674 content:"";
675 background: linear-gradient(to right, #949393, #252525, #949393);
676 height: 1px;
677 width: 80%;
678 margin: 10px auto;
679}
680
681#footer a {
682 color: #252525;
683}
684
685/**
686 * PAGE FORM
687 */
688.page-form {
689 margin: 20px 0 0 0;
690 background: #f5f5f5;
691 box-shadow: 1px 1px 2px #797979;
692 color: #252525;
693 overflow: hidden;
694}
695
696.page-form .window-title {
697 margin: 0 0 10px 0;
698 padding: 10px 0;
699 width: 100%;
700 color: #1b926c;
701 background: #f5f5f5;
702 text-align: center;
703}
704
705.page-form .window-title:after {
706 display: block;
707 content:"";
708 background: linear-gradient(to right, #f5f5f5, #1b926c, #f5f5f5);
709 height: 1px;
710 width: 80%;
711 margin: auto;
712}
713
714.page-form .window-subtitle {
715 text-align: center;
716}
717
718.page-form a {
719 color: #1b926c;
720 font-weight: bold;
721}
722
723.page-form p {
724 padding: 0 10px;
725 margin: 0;
726}
727
728.page-form input[type="text"],
729.page-form input[type="password"],
730.page-form textarea {
731 box-sizing: border-box;
732 margin: 10px 0;
733 padding: 5px 5px 3px 15px;
734 height: 35px;
735 width: 90%;
736 background: #eeeeee;
737 border: solid 1px #d8d8d8;
738 border-radius: 2px;
739 color: #252525;
740}
741
742.page-form textarea {
743 height: 240px;
744 padding: 15px 5px 3px 15px;
745 resize: vertical;
746 overflow-y: auto;
747 word-wrap:break-word
748}
749
750/* because chrome */
751.page-form input[type="text"]::-webkit-input-placeholder,
752.page-form input[type="password"]::-webkit-input-placeholder {
753 color: #777777;
754}
755
756.page-form input[type="submit"], .page-form a.button {
757 margin: 15px 5px;
758 height: 35px;
759 line-height: 35px;
760 width: 150px;
761 background: #1b926c;
762 color: #f5f5f5;
763 border: none;
764 box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
765 font-size: 1.2em;
766 text-decoration: none;
767 vertical-align: center;
768 font-weight: normal;
769 display: inline-block;
770}
771
772
773.page-form .button.button-red {
774 background: #ac2925;
775}
776
777.page-form .submit-buttons {
778 margin-bottom: 10px;
779}
780
781@media screen and (min-width: 64em) {
782 .page-form .submit-buttons {
783 position: relative;
784 }
785
786 .page-form .submit-buttons .button.button-red {
787 position: absolute;
788 right: 5%;
789 }
790}
791
792@media screen and (max-width: 64em) {
793 .page-form .submit-buttons .button {
794 display: block;
795 margin: auto;
796 }
797}
798
799.page-form select {
800 color: #252525;
801}
802
803/**
804 * PAGE FORM - LIGHT
805 */
806.page-form-light div, .page-form-light p {
807 text-align: center;
808}
809
810/**
811 * PAGE FORM - COMPLETE
812 */
813.page-form-complete {
814 #background: #f5f5f5;
815}
816
817.page-form-complete div, .page-form-complete p {
818 color: #252525;
819}
820
821.page-form-complete .form-label, .page-form-complete .form-input {
822 position: relative;
823 height: 60px;
824}
825
826.page-form-complete .form-label label,
827.page-form-complete .form-input input,
828.page-form-complete .timezone {
829 position: absolute;
830 top: 50%;
831 transform: translateY(-50%);
832}
833
834.page-form-complete .form-label label {
835 text-align: right;
836 right: 0;
837 padding: 0 20px;
838}
839
840.page-form-complete .label-name {
841 font-weight: bold;
842}
843
844.page-form-complete .label-desc {
845 font-size: 0.8em;
846}
847
848.page-form-complete input[type="text"],
849.page-form-complete input[type="password"],
850.page-form-complete textarea {
851 margin: 0;
852}
853
854.page-form section {
855 margin: 10px 0 25px 0;
856}
857
858.page-form table {
859 margin: auto;
860 width: 90%;
861}
862
863.page-form table .order {
864 text-decoration: none;
865 color: #252525;
866}
867
868.page-form table, .page-form th, .page-form td {
869 border-width: 1px 0;
870 border-style: solid;
871 border-color: #aaaaaa;
872}
873
874.page-form th, .page-form td {
875 padding: 5px;
876
877}
878
879/* Awesomeplete fix */
880div.awesomplete {
881 width: inherit;
882}
883
884div.awesomplete > input {
885 display: inherit;
886}
887
888div.awesomplete > ul {
889 z-index: 9999;
890}
891
892.page-form .awesomplete {
893 width: 90%;
894}
895
896.page-form .awesomplete input {
897 width: 100%;
898}
899
900.page-form div.awesomplete > ul {
901 color: black;
902}
903
904@media screen and (max-width: 64em) {
905 .page-form-complete .form-label {
906 height: inherit;
907 }
908
909 .page-form-complete .form-label label,
910 .page-form-complete .form-input input,
911 .page-form-complete .timezone {
912 position: inherit;
913 top: inherit;
914 transform: translateY(0);
915 }
916
917 .page-form-complete .form-input input[type="checkbox"] {
918 position: absolute;
919 top: 50%;
920 right: 50%;
921 transform: translateY(-50%);
922 }
923
924 .page-form-complete .form-input {
925 text-align: center;
926 }
927
928 .page-form-complete .form-label label {
929 display: block;
930 text-align: left;
931 margin: 10px 0 0 0;
932 }
933
934 .timezone-continent:after {
935 content:"\a\a";
936 white-space: pre;
937 }
938
939 .page-form-complete .radio-buttons {
940 text-align: left;
941 padding: 5px 15px;
942 }
943}
944
945/**
946 * Page visitor (page form extended)
947 */
948.page-visitor {
949 color: #252525;
950}
951
952#page404 {
953 color: #3f3f3f;
954}
955
956/**
957 * LOGIN
958 */
959#login-form .remember-me {
960 margin: 5px 0;
961}
962
963/**
964 * Search results
965 */
966.search-result a {
967 color: white;
968 text-decoration: none;
969}
970
971.search-result .label-tag {
972 border-color: white;
973}
974
975.search-result .label-tag .remove {
976 border-left: white 1px solid;
977 padding: 0 0 0 5px;
978 margin: 0 0 0 5px;
979}
980
981/**
982 * TOOLS
983 */
984.tools-item {
985 margin: 10px 0;
986}
987
988.tools-item .pure-button:hover {
989 background-image: none;
990 background-color: #1b926c;
991 color: #f5f5f5;
992}
993
994/**
995 * PLUGIN ADMIN
996 */
997#pluginform .mobile-row {
998 font-size: 0.9em;
999}
1000
1001#pluginform .more {
1002 margin-top: 10px;
1003}
1004
1005@media screen and (max-width: 64em) {
1006 #pluginform .main-row, #pluginform .main-row td {
1007 border-bottom-style: none;
1008 }
1009
1010 #pluginform .mobile-row, #pluginform .mobile-row td {
1011 border-top-style: none;
1012 }
1013}
1014
1015/**
1016 * IMPORT
1017 */
1018#import-field {
1019 margin: 15px 0;
1020}
1021
1022/**
1023 * TAG CLOUD
1024 */
1025#cloudtag {
1026 padding: 10px;
1027 text-align: center;
1028}
1029
1030#cloudtag, #cloudtag a {
1031 color: #000;
1032 text-decoration: none;
1033}
1034
1035#cloudtag .count {
1036 color: #7f7f7f;
1037}
1038
1039/**
1040 * Picture wall CSS
1041 */
1042#picwall_container {
1043 margin: 0 10px 10px 10px;
1044 color: #252525;
1045 background-color: #f5f5f5;
1046 clear: both;
1047}
1048
1049.picwall_pictureframe {
1050 margin: 2px;
1051 background-color: #f5f5f5;
1052 z-index: 5;
1053 position: relative;
1054 display: table-cell;
1055 vertical-align: middle;
1056 width: 90px;
1057 height: 90px;
1058 overflow: hidden;
1059 text-align: center;
1060 float: left;
1061}
1062
1063.b-lazy {
1064 -webkit-transition: opacity 500ms ease-in-out;
1065 -moz-transition: opacity 500ms ease-in-out;
1066 -o-transition: opacity 500ms ease-in-out;
1067 transition: opacity 500ms ease-in-out;
1068 opacity: 0;
1069}
1070.b-lazy.b-loaded {
1071 opacity: 1;
1072}
1073
1074.picwall_pictureframe img {
1075 max-width: 100%;
1076 height: auto;
1077 color: transparent;
1078} /* Adapt the width of the image */
1079
1080.picwall_pictureframe a {
1081 text-decoration: none;
1082}
1083
1084/* CSS to show title when hovering an image - no javascript required. */
1085.picwall_pictureframe span.info {
1086 display: none;
1087 font-family: Arial, sans-serif;
1088}
1089
1090.picwall_pictureframe:hover span.info {
1091 display: block;
1092 position: absolute;
1093 top: 0;
1094 left: 0;
1095 width: 90px;
1096 height: 90px;
1097 font-weight: bold;
1098 font-size: 9pt;
1099 color: #f5f5f5;
1100 text-align: left;
1101 background-color: rgba(0, 0, 0, 0.8);
1102}
1103
1104/**
1105 * DAILY
1106 */
1107.daily-desc {
1108 color: #7f7f7f;
1109 font-size: 0.8em;
1110}
1111
1112.daily-about a {
1113 color: #343434;
1114 text-decoration: none;
1115}
1116
1117.daily-about a:hover {
1118 color: #7f7f7f;
1119}
1120
1121.daily-about h3:before, .daily-about h3:after {
1122 display: block;
1123 content:"";
1124 background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
1125 height: 1px;
1126 width: 90%;
1127 margin: 10px auto;
1128}
1129
1130.daily-entry {
1131 padding: 0 10px;
1132}
1133
1134.daily-entry .daily-entry-title:after {
1135 display: block;
1136 content:"";
1137 background: linear-gradient(to right, #fff, #515151, #fff);
1138 height: 1px;
1139 width: 70%;
1140 margin: 5px auto;
1141}
1142
1143.daily-entry .daily-entry-title {
1144 margin: 10px 0 0 0;
1145}
1146
1147.daily-entry .daily-entry-title a {
1148 color: #000;
1149 text-decoration: none;
1150}
1151
1152.daily-entry .daily-entry-description {
1153 padding: 5px 5px 0 5px;
1154 font-size: 0.9em;
1155 text-align: justify;
1156 word-wrap: break-word;
1157}
1158
1159.daily-entry .daily-entry-tags {
1160 padding: 0 5px 5px 5px;
1161 font-size: 0.8em;
1162}
1163
1164.daily-entry-thumbnail {
1165 float: left;
1166 margin: 15px 5px 5px 5px;
1167}
1168
1169.daily-entry-description a {
1170 text-decoration: none;
1171 color: #1b926c;
1172}
1173
1174.daily-entry-description a:hover {
1175 text-shadow: 1px 1px #ddd;
1176}
1177
1178.daily-entry-description a:visited {
1179 color: #20b988;
1180}