4151e00b52539af9cc645649ada707a571a0d404
[Sone.git] / src / main / resources / static / css / sone.css
1 /* Sone Main CSS File */
2
3 /* first, override some fproxy rules. */
4 #sone div, #sone span, #sone .post .time,#sone .post .delete,#sone .post .show-reply-form, input[type=text], textarea {
5         font: inherit;
6 }
7
8 input[type=text], textarea {
9         font-size: 90%;
10         margin: 0.5ex;
11         margin-left: 0;
12         border: solid 1px #ccc;
13         padding: 0.5ex;
14         height: 1.5em;
15         width: 50em;
16         outline: none;
17 }
18
19 input[type=text].short {
20         width: 25em;
21 }
22
23 textarea {
24         height: 4em;
25 }
26
27 #sone button {
28         background-color: #ddd;
29         border-width: 1px;
30         color: #444;
31         padding: 0.5ex 1.5ex;
32 }
33
34 #sone form {
35         margin: 0px;
36 }
37
38 #sone select {
39         color: #444;
40         padding: 0.5ex 1.5ex;
41 }
42
43 /* now for the real stuff. */
44
45 #sone {
46         width: 55em;
47         margin: auto;
48 }
49
50 #sone .hidden {
51         display: none;
52 }
53
54 #sone .toggle-link {
55         margin-top: 1em;
56 }
57
58 #sone #formPassword {
59         display: none;
60 }
61
62 #sone a, #sone a:link, #sone a:visited {
63         color: rgb(28, 131, 191);
64         font-size: inherit;
65         text-decoration: none;
66 }
67
68 #sone a:active, #sone a:hover {
69         color: rgb(255, 172, 0);
70 }
71
72 #sone a.link {
73         cursor: pointer;
74 }
75
76 #sone a.internet {
77         color: rgb(255, 0, 0);
78 }
79
80 #sone a.internet:before {
81         content: '⚠ ';
82 }
83
84 #sone a.freenet:before {
85         content: '» ';
86 }
87
88 #sone a.freenet-trusted {
89         color: rgb(0, 128, 0);
90 }
91
92 #sone a.freenet-trusted:before {
93         content: '★ ';
94 }
95
96 #sone a.in-page-link:before {
97         content: '↓ ';
98 }
99
100 #sone a img {
101         border: none;
102 }
103
104 #sone .small-link {
105         font-size: 85%;
106 }
107
108 #sone .parsed {
109         white-space: pre-wrap;
110 }
111
112 #sone #main.offline {
113         opacity: 0.5;
114 }
115
116 #sone #offline-marker {
117         display: none;
118         position: fixed;
119         top: 2em;
120         right: 2em;
121         width: 128px;
122         height: 128px;
123         background-image: url("../images/sone-offline.png");
124 }
125
126 #sone #notification-area {
127         margin-top: 1em;
128 }
129
130 #sone #notification-area .notification {
131         padding: 1ex;
132         border: solid 1px #ccc;
133         background-color: #ffffa0;
134         margin-bottom: 1ex;
135         min-height: 3.5ex;
136 }
137
138 #sone #notification-area .notification button {
139         margin-left: 1ex;
140 }
141
142 #sone #notification-area .notification .dismiss {
143         float: right;
144 }
145
146 #sone #notification-area .notification .post-count {
147         margin-left: 1ex;
148 }
149
150 #sone #notification-area .notification .mark-as-read {
151         float: right;
152 }
153
154 #sone #notification-area .notification .hidden {
155         display: none;
156 }
157
158 #sone #notification-area #local-post-notification, #sone #notification-area #local-reply-notification {
159         display: none;
160 }
161
162 #sone #plugin-warning {
163         border: solid 0.5em red;
164         padding: 0.5em;
165         margin-bottom: 1em;
166 }
167
168 #sone #profile {
169         height: 80px;
170         margin-top: 1em;
171         margin-bottom: 1ex;
172 }
173
174 #sone .profile-avatar {
175         display: inline-block;
176         width: 80px;
177         height: 80px;
178         overflow: hidden;
179         position: absolute;
180 }
181
182 #sone .profile-link {
183         font-weight: bold;
184         color: rgb(28, 131, 191);
185 }
186
187 #sone #profile.online .picture {
188         position: absolute;
189 }
190
191 #sone #profile.offline .picture {
192         position: absolute;
193 }
194
195 #sone #profile.offline .edit-profile-link, #sone #profile.offline .profile-link {
196         display: none;
197 }
198
199 #sone #profile .edit-profile-link {
200         font-size: 85%;
201 }
202
203 #sone #home-sone {
204         margin-top: 1ex;
205         margin-left: 80px;
206         padding-left: 1ex;
207 }
208
209 #sone #update-status {
210         margin-bottom: 1em;
211 }
212
213 #sone #update-status label, #sone #post-message label {
214         display: none;
215 }
216
217 #sone #update-status input[type=text] {
218         width: 45em;
219 }
220
221 #sone #update-status textarea {
222         width: 45em;
223 }
224
225 #sone #update-status button {
226         float: right;
227 }
228
229 #sone #update-status .select-sender, #sone .create-reply .select-sender, #sone #post-message .select-sender {
230         display: none;
231 }
232
233 #sone #update-status .select-sender button, #sone #post-message .select-sender button {
234         display: inline;
235         float: left;
236 }
237
238 #sone .nice-name {
239         font-weight: bold;
240 }
241
242 #sone #main {
243         padding: 1em;
244         padding-top: 0px;
245 }
246
247 #sone #edit-profile #birth-day, #sone #edit-profile #birth-month, #sone #edit-profile #birth-year {
248         display: inline;
249         width: 15em;
250 }
251
252 #sone #edit-profile #birth-day input, #sone #edit-profile #birth-month input, #sone #edit-profile #birth-year input {
253         width: 4em;
254         text-align: right;
255 }
256
257 #sone td.numeric {
258         text-align: right;
259 }
260
261 #sone .post {
262         padding: 1ex 0px;
263         border-bottom: solid 1px #ccc;
264         clear: both;
265         position: relative;
266 }
267
268 #sone .post.new {
269         background-color: #ffffa0;
270         padding-left: 1ex;
271 }
272
273 #sone .post.last {
274         padding: 1ex 0px;
275         border-bottom: none;
276 }
277
278 #sone .post .sone-menu {
279         position: absolute;
280         top: 0;
281         left: -1ex;
282         padding: 1ex 1ex;
283         margin: -1px -1px;
284         display: none;
285         background-color: rgb(255, 255, 224);
286         border: solid 1px rgb(0, 0, 0);
287         z-index: 1;
288 }
289
290 #sone .post .sone-menu .avatar {
291         position: absolute;
292         margin-right: 1ex;
293 }
294
295 #sone .menu-avatar {
296         display: inline-block;
297         width: 64px;
298         height: 64px;
299         overflow: hidden;
300 }
301
302 #sone .post .sone-menu .inner-menu {
303         margin-left: 64px;
304         padding-left: 1ex;
305         min-height: 64px;
306 }
307
308 #sone .sone-menu .follow, #sone .sone-menu .unfollow {
309         cursor: pointer;
310 }
311
312 #sone .post > .avatar {
313         position: absolute;
314 }
315
316 #sone .post-avatar {
317         display: inline-block;
318         width: 48px;
319         height: 48px;
320         overflow: hidden;
321 }
322
323 #sone .post > .inner-part {
324         margin-left: 48px;
325         padding-left: 0.5em;
326         min-height: 48px;
327 }
328
329 #sone .post .author, #sone .post .recipient {
330         display: inline;
331         font-weight: bold;
332 }
333
334 #sone .post .author-wot-link {
335         font-size: 90%;
336 }
337
338 #sone .post .text, #sone .post .raw-text, #sone .post .short-text {
339         display: inline;
340         white-space: pre-wrap;
341         word-wrap: break-word;
342 }
343
344 #sone .post .text.hidden, #sone .post .raw-text.hidden, #sone .post .short-text.hidden {
345         display: none;
346 }
347
348 #sone .post .expand-post-text:before, #sone .post .expand-reply-text:before {
349         content: "» ";
350 }
351
352 #sone .post .shrink-post-text:before, #sone .post .shrink-reply-text:before {
353         content: "« ";
354 }
355
356 #sone .post .shrink-post-text {
357         cursor: pointer;
358 }
359
360 #sone .post .status-line {
361         margin-top: 0.5ex;
362         font-size: 85%;
363 }
364
365 #sone .separator {
366         font: inherit;
367         color: rgb(28, 131, 191);
368 }
369
370 #sone .show-source, #sone .show-reply-source {
371         display: inline;
372 }
373
374 #sone .permalink {
375         display: inline;
376 }
377
378 #sone .post .bookmarks {
379         display: inline;
380         color: rgb(28, 131, 191);
381 }
382
383 #sone .post .bookmark, #sone .post .unbookmark {
384         display: inline;
385         font: inherit;
386         margin: 0px;
387 }
388
389 #sone .post .time {
390         display: inline;
391         color: #666;
392 }
393
394 #sone .post .delete, #sone .post .likes, #sone .post .like, #sone .post .unlike, #sone .post .trust, #sone .post .distrust, #sone .post .untrust {
395         display: inline;
396         font: inherit;
397         margin: 0px;
398 }
399
400 #sone .post .likes.hidden {
401         display: none;
402 }
403
404 #sone .post .like.hidden, #sone .post .unlike.hidden, #sone .post .trust.hidden, #sone .post .distrust.hidden, #sone .post .untrust.hidden, #sone .post .bookmark.hidden, #sone .post .unbookmark.hidden {
405         display: none;
406 }
407
408 #sone .post .delete button, #sone .post .like button, #sone .post .unlike button, #sone .post .trust button, #sone .post .distrust button, #sone .post .untrust button, #sone .post .bookmark button, #sone .post .unbookmark button {
409         border: 0px;
410         background: none;
411         padding: 0px;
412         color: rgb(28, 131, 191);
413         font: inherit;
414         margin: 0px;
415 }
416
417 #sone .post .delete button.confirm {
418         color: red;
419         font-weight: bold;
420 }
421
422 #sone .post .untrust button {
423         color: rgb(255, 0, 0);
424 }
425
426 #sone .post .delete button:hover, #sone .post .like button:hover, #sone .post .unlike button:hover, #sone .post .trust button:hover, #sone .post .distrust button:hover, #sone .post .untrust button:hover, #sone .post .bookmark button:hover, #sone .post .unbookmark button:hover {
427         border: 0px;
428         background: none;
429         padding: 0px;
430         color: rgb(255, 172, 0);
431         cursor: pointer;
432 }
433
434 #sone .post .likes span {
435         font: inherit;
436         color: green;
437 }
438
439 #sone .post .linked-elements {
440         margin-top: 1ex;
441 }
442
443 #sone .linked-element.loaded .image {
444         display: inline-block;
445         border: solid 1px black;
446         width: 160px;
447         height: 120px;
448         background-size: cover;
449         background-position: center;
450         margin-right: 1ex;
451         margin-bottom: 1ex;
452 }
453
454 #sone .linked-element.loaded .html-page {
455         display: inline-block;
456         width: 160px;
457         max-height: 120px;
458         overflow: hidden;
459         vertical-align: top;
460 }
461
462 #sone .reply .linked-element.loaded .html-page {
463         width: 120px;
464         max-height: 90px;
465 }
466
467 #sone .linked-element.loaded .html-page .heading {
468         font-size: 115%;
469         font-weight: 600;
470         text-overflow: ellipsis;
471         overflow: hidden;
472         white-space: nowrap;
473 }
474
475 #sone .linked-element.loaded .html-page .description {
476         font-size: 85%;
477 }
478
479 #sone .linked-element.loaded .html-page {
480         display: inline-block;
481 }
482
483 #sone .post .replies {
484         clear: both;
485         padding-top: 0.2ex;
486 }
487
488 #sone .post .replies .click-to-show {
489         background-color: #f0f0ff;
490         font-size: 85%;
491         padding: 0.5em;
492         cursor: pointer;
493 }
494
495 #sone .post .replies .click-to-show.new {
496         background-color: #ffffa0;
497 }
498
499 #sone .post .reply > .avatar {
500         position: absolute;
501 }
502
503 #sone .reply-avatar {
504         display: inline-block;
505         width: 36px;
506         height: 36px;
507         overflow: hidden;
508 }
509
510 #sone .post .reply > .inner-part {
511         margin-left: 36px;
512         padding-left: 0.5em;
513         min-height: 36px;
514 }
515
516 #sone .post .reply {
517         position: relative;
518         clear: both;
519         background-color: #f0f0ff;
520         margin: 1ex 0px;
521         padding: 1ex;
522 }
523
524 #sone .post .reply .inner-part {
525         font-size: 85%;
526 }
527
528 #sone .post .reply.new {
529         background-color: #ffffa0;
530 }
531
532 #sone .post .reply .time {
533         float: none;
534         display: inline;
535         color: #666;
536         font-size: inherit;
537 }
538
539 #sone .post .reply .linked-elements {
540         margin-top: 1ex;
541 }
542
543 #sone .post .reply .linked-element.loaded .image {
544         display: inline-block;
545         border: solid 1px black;
546         width: 120px;
547         height: 90px;
548         background-size: cover;
549         background-position: center;
550         margin-right: 1ex;
551         margin-bottom: 1ex;
552 }
553
554 #sone .post .show-reply-form {
555         display: inline;
556 }
557
558 #sone .post .show-reply-form span {
559         color: rgb(28, 131, 191);
560         cursor: pointer;
561         font: inherit;
562 }
563
564 #sone .post .show-reply-form span:hover {
565         color: rgb(255, 172, 0);
566 }
567
568 #sone .post .create-reply {
569         clear: both;
570         background-color: #f0f0ff;
571         padding: 0.5ex;
572 }
573
574 #sone .post .create-reply input[type=text] {
575         margin-left: 0.5ex;
576         width: 42em;
577 }
578
579 #sone .post .create-reply textarea {
580         margin-left: 0.5ex;
581         width: 42em;
582         height: 4em;
583 }
584
585 #sone .post .create-reply button {
586         float: right;
587 }
588
589 #sone .create-reply .select-sender button, #sone #post-message .select-sender button {
590         display: inline;
591         float: left;
592 }
593
594 #sone .sone {
595         clear: both;
596         background-color: #f0f0ff;
597         border: 1px solid #ccc;
598         margin-bottom: 0.5ex;
599         padding: 0.5ex;
600 }
601
602 #sone .sone.local {
603         background-color: #f0fff0;
604 }
605
606 #sone .sone.new {
607         background-color: #ffffa0;
608 }
609
610 #sone .sone .profile-link {
611         display: inline;
612 }
613
614 #sone .sone .sone-stats {
615         display: inline;
616 }
617
618 #sone .sone .short-request-uri {
619         clear: both;
620         float: right;
621 }
622
623 #sone .sone .unknown-marker, #sone .sone .download-marker, #sone .sone .insert-marker, #sone .sone .idle-marker, #sone .sone .modified-marker {
624         display: none;
625 }
626
627 #sone .sone.unknown .unknown-marker, #sone .sone.idle .idle-marker, #sone .sone.downloading .download-marker, #sone .sone.inserting .insert-marker, #sone .sone.modified .modified-marker {
628         display: inline;
629         float: right;
630         border: solid 1px #ccc;
631         border-right: none;
632         border-top: none;
633         padding: 0 0.5ex;
634         position: relative;
635         right: -0.5ex;
636         top: -0.5ex
637 }
638
639 #sone .sone.idle.modified .idle-marker {
640         display: none;
641 }
642
643 #sone .sone .last-update {
644         float: right;
645         display: inline;
646 }
647
648 #sone .sone .modified-marker, #sone .sone .unknown-marker {
649         color: red;
650         font-weight: bold;
651 }
652
653 #sone .sone form.follow, #sone .sone form.unfollow, #sone .sone form.lock, #sone .sone form.unlock {
654         display: inline;
655         border: solid 1px #ccc;
656         border-left: none;
657         border-bottom: none;
658         padding: 0 0.5ex;
659         position: relative;
660         left: -0.5ex;
661         bottom: -0.5ex
662 }
663
664 #sone .sone form.follow button, #sone .sone form.unfollow button, #sone .sone form.lock button, #sone .sone form.unlock button {
665         display: inline;
666         color: rgb(28, 131, 191);
667         background: none;
668         border: none;
669         font: inherit;
670         padding: 0px;
671 }
672
673 #sone .sone form.follow button:hover, #sone .sone form.unfollow button:hover, #sone .sone form.lock button:hover, #sone .sone form.unlock button:hover {
674         display: inline;
675         color: rgb(255, 172, 0);
676 }
677
678 #sone .sone.locked form.lock, #sone .sone.unlocked form.unlock {
679         display: none;
680 }
681
682 #sone .sone form.hidden {
683         display: none;
684 }
685
686 #sone .sone .spacer {
687         display: inline;
688 }
689
690 #sone .profile-field, #sone #edit-profile button[type=submit], #sone #delete-profile-field {
691         margin-top: 1em;
692 }
693
694 #sone .profile-field .name {
695         display: inline;
696         font-weight: bold;
697 }
698
699 #sone .profile-field .name.hidden {
700         display: none;
701 }
702
703 #sone .profile-field button.confirm.edit {
704         font-weight: bold;
705         color: #080;
706 }
707
708 #sone .profile-field button.cancel {
709         font-weight: bold;
710         color: red;
711 }
712
713 #sone .profile-field .value {
714         margin-left: 2em;
715 }
716
717 #sone #edit-profile .profile-field .value {
718         margin-left: inherit;
719 }
720
721 #sone .profile-field .edit-field-name, #sone .profile-field .move-up-field, #sone .profile-field .move-down-field, #sone .profile-field .delete-field-name {
722         float: right;
723         margin-top: -1ex;
724         position: relative;
725 }
726
727 #sone .backlinks {
728         font-size: 80%;
729         margin-bottom: 1em;
730 }
731
732 #sone .backlinks .backlink {
733         display: inline;
734 }
735
736 #sone .album {
737 }
738
739 #sone .image-row, #sone .album-row {
740         display: table-row;
741 }
742
743 #sone .image-container, #sone .album-container {
744         width: 250px;
745         height: 250px;
746         overflow: hidden;
747         padding: -1px;
748         border: solid 1px #000;
749 }
750
751 #sone .image, #sone .album {
752         display: table-cell;
753         vertical-align: top;
754         text-align: center;
755         padding: 0.5ex;
756 }
757
758 #sone .single-image img {
759         border: solid 1px #000;
760         background-color: #fff;
761 }
762
763 #sone .image .edit-image input, #sone .album .edit-album input {
764         width: 95%;
765 }
766
767 #sone .image .edit-image textarea, #sone .album .edit-album textarea {
768         width: 95%;
769 }
770
771 #sone .image .album-sone {
772         font-size: 80%;
773 }
774
775 #sone .image .image-title, #sone .album .album-title {
776         font-weight: bold;
777 }
778
779 #sone .image .image-description, #sone .album .album-description {
780         text-align: left;
781         width: 98%;
782         word-wrap: break-word;
783         max-height: 5em;
784         overflow: auto;
785 }
786
787 #sone .backlinks .separator {
788         display: inline;
789 }
790
791 #sone #search {
792         text-align: right;
793 }
794
795 #sone #search input[type=text] {
796         width: 35em;
797 }
798
799 #sone #sone-results + #sone #post-results {
800         clear: both;
801         padding-top: 1em;
802 }
803
804 #sone #tail {
805         margin-top: 1em;
806         border-top: solid 1px #ccc;
807         padding-top: 2em;
808         text-align: center;
809         font-size: 75%;
810         color: #888;
811 }
812
813 #sone #tail #version-information {
814         margin-top: 1em;
815 }
816
817 #sone #add-sone textarea, #sone #create-sone textarea, #sone #load-sone textarea, #sone #edit-profile textarea {
818         height: 1.5em;
819 }
820
821 #sone #add-sone button {
822         position: absolute;
823 }
824
825 #sone .navigation {
826         text-align: center;
827 }
828
829 #sone .navigation .first a, #sone .navigation .previous a, #sone .navigation .next a, #sone .navigation .last a, #sone .navigation .first span, #sone .navigation .previous span, #sone .navigation .next span, #sone .navigation .last span {
830         display: block;
831         height: 1.5em;
832         padding: 0.5ex;
833         width: 3em;
834         border: solid 1px #ccc;
835         background-color: #f0f0ff;
836         margin: 1ex 0;
837 }
838
839 #sone .navigation .first, #sone .navigation .previous {
840         float: left;
841 }
842
843 #sone .navigation .current-page, #sone .navigation .total-pages {
844         position: relative;
845         top: 0.5em;
846         margin-top: 0.5ex;
847         display: inline;
848 }
849
850 #sone .navigation .total-pages:before {
851         content: '/ ';
852 }
853
854 #sone .navigation .next, #sone .navigation .last {
855         float: right;
856 }
857
858 #sone .clear {
859         clear: both;
860 }
861
862 #sone h1 {
863         font-family: inherit;
864         font-size: 200%;
865         font-weight: bold;
866         clear: both;
867 }
868
869 #sone h1.backlink {
870         margin-bottom: 0px;
871 }
872
873 #sone h2 {
874         font-family: inherit;
875         font-size: 150%;
876         font-weight: bold;
877         clear: both;
878 }
879
880 #sone .error label {
881         color: red;
882         font-weight: bold;
883 }
884
885 #sone input.default, #sone textarea.default {
886         color: #888;
887 }
888
889 #sone input[type=text].key {
890         width: 130ex;;
891         font-size: 75%;
892 }
893
894 #sone .confirm {
895         font-weight: bold;
896         color: red;
897 }
898
899 #sone .warning {
900         color: red;
901         font-style: italic;
902 }
903
904 #sone #sort-options {
905         margin-bottom: 1em;
906 }
907
908 #sone ul#avatar-selection {
909         padding: 0;
910 }
911
912 #sone #avatar-selection li {
913         display: inline-block;
914 }
915
916 #sone #avatar-selection li .post-avatar {
917         vertical-align: middle;
918         margin-top: 0.5em;
919 }
920
921 #sone #avatar-selection li#no-avatar {
922         display: block;
923 }
924
925 #sone form#options ul {
926         padding-left: 1em;
927 }
928
929 #sone form#options li {
930         list-style-type: none;
931 }
932
933 #sone table thead tr {
934         font-weight: bold;
935 }