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