]> git.immae.eu Git - github/shaarli/Shaarli.git/blame - tpl/default/css/shaarli.css
visited links color: same hue as unvisited links, darkened
[github/shaarli/Shaarli.git] / tpl / default / css / shaarli.css
CommitLineData
402b0346
A
1/**
2 * General
3 */
4body {
70401690 5 background: #d0d0d0;
402b0346
A
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 {
ad5c7570 38 font-family: 'Roboto';
402b0346
A
39 font-weight: 400;
40 font-style: normal;
41 src:
ad5c7570
A
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;
402b0346
A
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
402b0346
A
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
6ccd0b21 214#search, #search-linklist, #search-tagcloud {
402b0346
A
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}
f210d94f
LC
229@media screen and (max-width: 64em) {
230 .searchform {
231 max-width: 260px;
232 margin: 0 auto;
233 }
234}
402b0346
A
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,
6ccd0b21 243#search-tagcloud button,
402b0346 244#search-linklist button {
f210d94f
LC
245 padding: 4px 8px 6px 8px;
246 background-color: #1B926C;
247 color: #f5f5f5;
402b0346 248 border: none;
f210d94f 249 border-radius: 2px;
402b0346
A
250}
251
f210d94f
LC
252#search-tagcloud button {
253 width: 90%;
402b0346
A
254}
255
f210d94f
LC
256@media screen and (max-width: 64em) {
257 #search-linklist button {
258 width: 100%;
259 }
260 #search-linklist .awesomplete {
261 margin: 5px 0;
262 }
402b0346
A
263}
264
265#search button:hover,
f210d94f 266#search-linklist button:hover,
6ccd0b21
LC
267#search-tagcloud button:hover {
268 color: #d0d0d0;
269}
402b0346 270
f210d94f 271#search,
402b0346 272#search-linklist {
f210d94f 273 padding: 6px 0;
402b0346
A
274}
275
402b0346
A
276@media screen and (max-width: 64em) {
277 #search, #search * {
278 visibility: hidden;
279 }
280}
281
29a837f3
A
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
402b0346
A
295#header-login-form input[type="text"], #header-login-form input[type="password"] {
296 width: 200px;
297}
298
70401690
A
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
402b0346
A
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 {
402b0346
A
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
70401690
A
420.toolbar-plugin input[type="submit"]:hover {
421 background: #fff;
422}
423
402b0346
A
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: 10px 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-pages {
457 margin: 10px 0;
458 color: #252525;
459 text-align: center;
460}
461
462.linklist-pages a {
463 color: #252525;
464 text-decoration: none;
465}
466
467.linklist-pages a:hover {
468 color: #fff;
469}
470
471.linksperpage {
472 margin: 10px 0;
473 text-align: right;
474 color: #252525;
475 font-size: 0.9em;
476}
477
478.linksperpage a {
479 padding: 5px 5px;
480 text-decoration: none;
481 color: #252525;
482 background: #f5f5f5;
483}
484
485.linksperpage a, .linksperpage input[type="text"] {
486 display: inline-block;
487 width: 20px;
488 text-align: center;
489}
490
491.linksperpage form {
492 display: inline;
493}
494
495.linksperpage input[type="text"] {
496 height: 20px;
497 margin: 0;
498 padding: 4px 5px 3px 8px;
499 background: #f5f5f5;
500 border: medium none currentColor;
501 color: #252525;
502 font-size: 0.8em;
503}
504
505/**
506 * CONTENT - LINKLIST ITEMS
507 */
508.linklist-item {
509 margin: 0 0 15px 0;
510 background: #f5f5f5;
511 box-shadow: 2px 2px 0.5em #797979;
512}
513
514.linklist-item-title, .linklist-item-title h2 {
515 margin: 0;
516 word-wrap: break-word;
517}
518
519.linklist-item-title {
520 position: relative;
521 background: #f5f5f5;
522}
523
402b0346
A
524.linklist-item-title h2 {
525 padding: 3px 10px 0 10px;
526 line-height: 30px;
527}
528
529.linklist-item-title a {
530 font-size: 0.7em;
531 color: #252525;
532 text-decoration: none;
533 vertical-align: middle;
402b0346
A
534}
535
536.linklist-item-title .linklist-link {
537 font-size: 1.1em;
538 color: #1b926c;
539}
540
acadb080 541.linklist-item-title a:visited .linklist-link {
ceb738c5 542 color: #2a4c41;
402b0346
A
543}
544
545.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
546 color: #252525;
547}
548
549
550.linklist-item-title .label-private {
551 border: solid 1px #F89406;
552 font-family: Arial, sans-serif;
553 font-size: 0.65em;
554 color: #F89406;
555}
556
557.linklist-item-title .fold-button {
558 display: none;
559}
560
561.linklist-item-editbuttons {
562 float: right;
563 padding: 8px 5px;
564}
565
566.linklist-item-editbuttons * {
567 display: block;
568 float: left;
569 margin: 0 1px;
570}
571
572.linklist-item-editbuttons a {
573 font-size: 1em;
574}
575
576.edit-link {
577 font-size: 1.2em;
578 color: #0b5ea6;
579}
580
581.delete-link {
582 font-size: 1.3em;
583 color: #ac2925 !important;
584}
585
586.linklist-item-description {
587 position: relative;
588 padding: 10px;
402b0346
A
589 word-wrap: break-word;
590 color: #252525;
591 line-height: 1.3em;
592}
593
70401690 594 {
402b0346
A
595 position: absolute;
596 left: 3px;
597 top: 0;
598 display: block;
599 content:"";
600 background: #F89406;
601 height: 95%;
602 width: 2px;
603 z-index: 1;
604}
605
606.linklist-item-description a {
607 text-decoration: none;
608 color: #1b926c;
609}
610
611.linklist-item-description a:hover {
612 color: #252525;
613}
614
615.linklist-item-description a:visited {
616 color: #14553f;
617}
618
619.linklist-item-thumbnail {
70401690 620 position: relative;
402b0346
A
621 margin-top: 10px;
622 padding: 10px;
623 float: left;
70401690
A
624 z-index: 50;
625}
626
627.linklist-item.private .linklist-item-title::before,
628.linklist-item.private .linklist-item-description::before,
629.linklist-item.private .linklist-item-thumbnail::before {
630 position: absolute;
631 left: 3px;
632 top: 0;
633 display: block;
634 content:"";
635 background: #F89406;
636 height: 95%;
637 width: 2px;
638 z-index: 1;
639}
640
641.linklist-item.private .linklist-item-title::before {
642 margin-top: 3px;
402b0346
A
643}
644
645.linklist-item-infos {
646 padding: 8px 8px 5px 8px;
647 background: #ddd;
648 color: #252525;
649}
650
651.linklist-item-infos a {
652 color: #252525;
653 text-decoration: none;
654}
655
656.linklist-item-infos a:hover {
657 color: #000;
658}
659
660.linklist-item-infos .linklist-item-tags {
661 font-size: 0.8em;
662}
663
664.linklist-item-infos .label-tag {
665 font-size: 1em;
666}
667
668.linklist-item-infos-dateblock {
669 font-size: 0.9em;
670}
671
672.linklist-plugin-icon {
673 width: 13px;
674 height: 13px;
675}
676
677.linklist-item-infos-url {
678 text-align: right;
679 white-space: nowrap;
680 overflow: hidden;
681 text-overflow: ellipsis;
682 font-size: 0.8em;
683}
684
685.linklist-item-infos .mobile-buttons {
686 text-align: right;
687}
688
689.linklist-item-infos .linklist-plugin-icon {
690 display: inline-block;
691 margin: 0 2px;
692 width: 16px;
693 height: 16px;
694}
695
696/** 64em -> lg **/
697@media screen and (max-width: 64em) {
698 .linklist-item-infos-url {
699 text-align: left;
700 }
701}
702
703/**
704 * Footer
705 */
706#footer {
707 margin: 20px 0;
708 padding: 5px;
709 text-align: center;
710 color: #252525;
711}
712
713#footer:before {
714 display: block;
715 content:"";
716 background: linear-gradient(to right, #949393, #252525, #949393);
717 height: 1px;
718 width: 80%;
719 margin: 10px auto;
720}
721
722#footer a {
723 color: #252525;
724}
725
726/**
727 * PAGE FORM
728 */
729.page-form {
730 margin: 20px 0 0 0;
731 background: #f5f5f5;
732 box-shadow: 1px 1px 2px #797979;
733 color: #252525;
734 overflow: hidden;
735}
736
737.page-form .window-title {
738 margin: 0 0 10px 0;
739 padding: 10px 0;
740 width: 100%;
741 color: #1b926c;
742 background: #f5f5f5;
743 text-align: center;
744}
745
402b0346
A
746.page-form .window-subtitle {
747 text-align: center;
748}
749
750.page-form a {
751 color: #1b926c;
752 font-weight: bold;
aa4797ba 753 text-decoration: none;
402b0346
A
754}
755
756.page-form p {
aa4797ba 757 padding: 5px 10px;
402b0346
A
758 margin: 0;
759}
760
761.page-form input[type="text"],
762.page-form input[type="password"],
763.page-form textarea {
764 box-sizing: border-box;
765 margin: 10px 0;
766 padding: 5px 5px 3px 15px;
767 height: 35px;
768 width: 90%;
769 background: #eeeeee;
770 border: solid 1px #d8d8d8;
771 border-radius: 2px;
772 color: #252525;
773}
774
775.page-form textarea {
70401690 776 min-height: 240px;
402b0346
A
777 padding: 15px 5px 3px 15px;
778 resize: vertical;
779 overflow-y: auto;
780 word-wrap:break-word
781}
782
783/* because chrome */
784.page-form input[type="text"]::-webkit-input-placeholder,
785.page-form input[type="password"]::-webkit-input-placeholder {
786 color: #777777;
787}
788
789.page-form input[type="submit"], .page-form a.button {
790 margin: 15px 5px;
791 height: 35px;
792 line-height: 35px;
793 width: 150px;
794 background: #1b926c;
795 color: #f5f5f5;
796 border: none;
797 box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
798 font-size: 1.2em;
799 text-decoration: none;
800 vertical-align: center;
801 font-weight: normal;
802 display: inline-block;
803}
804
805
806.page-form .button.button-red {
807 background: #ac2925;
808}
809
810.page-form .submit-buttons {
811 margin-bottom: 10px;
812}
813
814@media screen and (min-width: 64em) {
815 .page-form .submit-buttons {
816 position: relative;
817 }
818
819 .page-form .submit-buttons .button.button-red {
820 position: absolute;
821 right: 5%;
822 }
823}
824
825@media screen and (max-width: 64em) {
826 .page-form .submit-buttons .button {
827 display: block;
828 margin: auto;
829 }
830}
831
832.page-form select {
833 color: #252525;
834}
835
836/**
837 * PAGE FORM - LIGHT
838 */
839.page-form-light div, .page-form-light p {
840 text-align: center;
841}
842
843/**
844 * PAGE FORM - COMPLETE
845 */
846.page-form-complete {
847 #background: #f5f5f5;
848}
849
850.page-form-complete div, .page-form-complete p {
851 color: #252525;
852}
853
854.page-form-complete .form-label, .page-form-complete .form-input {
855 position: relative;
856 height: 60px;
857}
858
859.page-form-complete .form-label label,
860.page-form-complete .form-input input,
7cea7c7a 861.page-form-complete .form-input select.align,
402b0346
A
862.page-form-complete .timezone {
863 position: absolute;
864 top: 50%;
865 transform: translateY(-50%);
866}
867
868.page-form-complete .form-label label {
869 text-align: right;
870 right: 0;
871 padding: 0 20px;
872}
873
874.page-form-complete .label-name {
875 font-weight: bold;
876}
877
878.page-form-complete .label-desc {
879 font-size: 0.8em;
880}
881
882.page-form-complete input[type="text"],
883.page-form-complete input[type="password"],
884.page-form-complete textarea {
885 margin: 0;
886}
887
888.page-form section {
889 margin: 10px 0 25px 0;
890}
891
892.page-form table {
893 margin: auto;
894 width: 90%;
895}
896
897.page-form table .order {
898 text-decoration: none;
899 color: #252525;
900}
901
902.page-form table, .page-form th, .page-form td {
903 border-width: 1px 0;
904 border-style: solid;
905 border-color: #aaaaaa;
906}
907
908.page-form th, .page-form td {
909 padding: 5px;
910
911}
912
913/* Awesomeplete fix */
914div.awesomplete {
915 width: inherit;
916}
917
918div.awesomplete > input {
919 display: inherit;
920}
921
922div.awesomplete > ul {
923 z-index: 9999;
924}
925
926.page-form .awesomplete {
927 width: 90%;
928}
929
930.page-form .awesomplete input {
931 width: 100%;
932}
933
934.page-form div.awesomplete > ul {
935 color: black;
936}
937
15162272
A
938form[name="linkform"].page-form {
939 overflow: visible;
940}
941
402b0346
A
942@media screen and (max-width: 64em) {
943 .page-form-complete .form-label {
944 height: inherit;
945 }
946
947 .page-form-complete .form-label label,
948 .page-form-complete .form-input input,
949 .page-form-complete .timezone {
950 position: inherit;
951 top: inherit;
952 transform: translateY(0);
953 }
954
955 .page-form-complete .form-input input[type="checkbox"] {
956 position: absolute;
957 top: 50%;
958 right: 50%;
959 transform: translateY(-50%);
960 }
961
962 .page-form-complete .form-input {
963 text-align: center;
964 }
965
966 .page-form-complete .form-label label {
967 display: block;
968 text-align: left;
969 margin: 10px 0 0 0;
970 }
971
972 .timezone-continent:after {
973 content:"\a\a";
974 white-space: pre;
975 }
976
977 .page-form-complete .radio-buttons {
978 text-align: left;
979 padding: 5px 15px;
980 }
981}
982
983/**
984 * Page visitor (page form extended)
985 */
986.page-visitor {
987 color: #252525;
988}
989
990#page404 {
991 color: #3f3f3f;
992}
993
807cade6
A
994/**
995 * EDIT LINK
996 */
997#editlinkform .created-date {
998 color: #767676;
999 margin-bottom: 10px;
1000}
1001
402b0346
A
1002/**
1003 * LOGIN
1004 */
1005#login-form .remember-me {
1006 margin: 5px 0;
1007}
1008
1009/**
1010 * Search results
1011 */
1012.search-result a {
1013 color: white;
1014 text-decoration: none;
1015}
1016
1017.search-result .label-tag {
1018 border-color: white;
1019}
1020
1021.search-result .label-tag .remove {
1022 border-left: white 1px solid;
1023 padding: 0 0 0 5px;
1024 margin: 0 0 0 5px;
1025}
1026
7c26f662
A
1027.search-result .label-private {
1028 border: 1px solid white;
1029}
1030
402b0346
A
1031/**
1032 * TOOLS
1033 */
1034.tools-item {
1035 margin: 10px 0;
1036}
1037
1038.tools-item .pure-button:hover {
1039 background-image: none;
1040 background-color: #1b926c;
1041 color: #f5f5f5;
1042}
1043
1044/**
1045 * PLUGIN ADMIN
1046 */
1047#pluginform .mobile-row {
1048 font-size: 0.9em;
1049}
1050
1051#pluginform .more {
1052 margin-top: 10px;
1053}
1054
1055@media screen and (max-width: 64em) {
1056 #pluginform .main-row, #pluginform .main-row td {
1057 border-bottom-style: none;
1058 }
1059
1060 #pluginform .mobile-row, #pluginform .mobile-row td {
1061 border-top-style: none;
1062 }
1063}
1064
1065/**
1066 * IMPORT
1067 */
1068#import-field {
1069 margin: 15px 0;
1070}
1071
1072/**
1073 * TAG CLOUD
1074 */
1075#cloudtag {
1076 padding: 10px;
1077 text-align: center;
1078}
1079
1080#cloudtag, #cloudtag a {
aa4797ba 1081 color: #252525;
402b0346
A
1082 text-decoration: none;
1083}
1084
1085#cloudtag .count {
1086 color: #7f7f7f;
1087}
1088
aa4797ba
A
1089/**
1090 * TAG LIST
1091 */
1092#taglist {
1093 padding: 0 10px;
1094}
1095
1096#taglist a {
1097 color: #252525;
1098 text-decoration: none;
1099}
1100
1101#taglist .count {
1102 display: inline-block;
1103 width: 35px;
1104 text-align: right;
1105 color: #7f7f7f;
1106}
1107
82e3bb5f
A
1108#taglist .rename-tag-form {
1109 display: none;
1110}
1111
aa4797ba
A
1112#taglist .delete-tag {
1113 color: #ac2925;
1114 display: none;
1115}
1116
1117#taglist .rename-tag {
1118 color: #0b5ea6;
1119}
1120
1121#taglist .validate-rename-tag {
1122 color: #1b926c;
1123}
1124
402b0346
A
1125/**
1126 * Picture wall CSS
1127 */
1128#picwall_container {
1129 margin: 0 10px 10px 10px;
1130 color: #252525;
1131 background-color: #f5f5f5;
1132 clear: both;
1133}
1134
1135.picwall_pictureframe {
1136 margin: 2px;
1137 background-color: #f5f5f5;
1138 z-index: 5;
1139 position: relative;
1140 display: table-cell;
1141 vertical-align: middle;
1142 width: 90px;
1143 height: 90px;
1144 overflow: hidden;
1145 text-align: center;
1146 float: left;
1147}
1148
1149.b-lazy {
1150 -webkit-transition: opacity 500ms ease-in-out;
1151 -moz-transition: opacity 500ms ease-in-out;
1152 -o-transition: opacity 500ms ease-in-out;
1153 transition: opacity 500ms ease-in-out;
1154 opacity: 0;
1155}
1156.b-lazy.b-loaded {
1157 opacity: 1;
1158}
1159
1160.picwall_pictureframe img {
1161 max-width: 100%;
1162 height: auto;
1163 color: transparent;
1164} /* Adapt the width of the image */
1165
1166.picwall_pictureframe a {
1167 text-decoration: none;
1168}
1169
1170/* CSS to show title when hovering an image - no javascript required. */
1171.picwall_pictureframe span.info {
1172 display: none;
1173 font-family: Arial, sans-serif;
1174}
1175
1176.picwall_pictureframe:hover span.info {
1177 display: block;
1178 position: absolute;
1179 top: 0;
1180 left: 0;
1181 width: 90px;
1182 height: 90px;
1183 font-weight: bold;
1184 font-size: 9pt;
1185 color: #f5f5f5;
1186 text-align: left;
1187 background-color: rgba(0, 0, 0, 0.8);
1188}
1189
1190/**
1191 * DAILY
1192 */
1193.daily-desc {
1194 color: #7f7f7f;
1195 font-size: 0.8em;
1196}
1197
1198.daily-about a {
1199 color: #343434;
1200 text-decoration: none;
1201}
1202
1203.daily-about a:hover {
1204 color: #7f7f7f;
1205}
1206
1207.daily-about h3:before, .daily-about h3:after {
1208 display: block;
1209 content:"";
1210 background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
1211 height: 1px;
1212 width: 90%;
1213 margin: 10px auto;
1214}
1215
1216.daily-entry {
1217 padding: 0 10px;
1218}
1219
1220.daily-entry .daily-entry-title:after {
1221 display: block;
1222 content:"";
1223 background: linear-gradient(to right, #fff, #515151, #fff);
1224 height: 1px;
1225 width: 70%;
1226 margin: 5px auto;
1227}
1228
1229.daily-entry .daily-entry-title {
1230 margin: 10px 0 0 0;
1231}
1232
1233.daily-entry .daily-entry-title a {
1234 color: #000;
1235 text-decoration: none;
1236}
1237
1238.daily-entry .daily-entry-description {
1239 padding: 5px 5px 0 5px;
1240 font-size: 0.9em;
1241 text-align: justify;
1242 word-wrap: break-word;
1243}
1244
1245.daily-entry .daily-entry-tags {
1246 padding: 0 5px 5px 5px;
1247 font-size: 0.8em;
1248}
1249
1250.daily-entry-thumbnail {
1251 float: left;
70401690 1252 margin: 15px 5px 5px 15px;
402b0346
A
1253}
1254
1255.daily-entry-description a {
1256 text-decoration: none;
1257 color: #1b926c;
1258}
1259
1260.daily-entry-description a:hover {
1261 text-shadow: 1px 1px #ddd;
1262}
1263
1264.daily-entry-description a:visited {
1265 color: #20b988;
1266}
70401690
A
1267
1268/*
1269 * Fix empty bookmarklet name in Firefox
1270 */
1271.pure-button {
1272 -moz-user-select: auto;
1273}
aa4797ba
A
1274
1275.tag-sort {
1276 margin-top: 30px;
1277 text-align: center;
1278}
1279
1280.tag-sort a {
1281 display: inline-block;
1282 margin: 0 15px;
1283 color: white;
1284 text-decoration: none;
1285 font-weight: bold;
1286}