Formatting and whitespace fixes.
[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 #formPassword {
55         display: none;
56 }
57
58 #sone a, #sone a:link, #sone a:visited {
59         color: rgb(28, 131, 191);
60         font-size: inherit;
61         text-decoration: none;
62 }
63
64 #sone a:active, #sone a:hover {
65         color: rgb(255, 172, 0);
66 }
67
68 #sone a.link {
69         cursor: pointer;
70 }
71
72 #sone a.internet {
73         color: rgb(255, 0, 0);
74 }
75
76 #sone a.internet:before {
77         content: '⚠ ';
78 }
79
80 #sone a.freenet:before {
81         content: '» ';
82 }
83
84 #sone a.freenet-trusted {
85         color: rgb(0, 128, 0);
86 }
87
88 #sone a.freenet-trusted:before {
89         content: '★ ';
90 }
91
92 #sone a img {
93         border: none;
94 }
95
96 #sone #notification-area {
97         margin-top: 1em;
98 }
99
100 #sone #notification-area .notification {
101         padding: 1ex;
102         border: solid 1px #ccc;
103         background-color: #ffffa0;
104         margin-bottom: 1ex;
105         min-height: 3.5ex;
106 }
107
108 #sone #notification-area .notification button {
109         margin-left: 1ex;
110 }
111
112 #sone #notification-area .notification .dismiss {
113         float: right;
114 }
115
116 #sone #notification-area .notification .post-count {
117         margin-left: 1ex;
118 }
119
120 #sone #notification-area .notification .mark-as-read {
121         float: right;
122 }
123
124 #sone #notification-area .notification .hidden {
125         display: none;
126 }
127
128 #sone #plugin-warning {
129         border: solid 0.5em red;
130         padding: 0.5em;
131         margin-bottom: 1em;
132 }
133
134 #sone #profile {
135         height: 80px;
136         margin-top: 1em;
137         margin-bottom: 1ex;
138 }
139
140 #sone .profile-link {
141         font-weight: bold;
142         color: rgb(28, 131, 191);
143 }
144
145 #sone #profile.online .picture {
146         position: absolute;
147 }
148
149 #sone #profile.offline .picture {
150         position: absolute;
151 }
152
153 #sone #profile.offline .edit-profile-link, #sone #profile.offline .profile-link {
154         display: none;
155 }
156
157 #sone #profile .edit-profile-link {
158         font-size: 85%;
159 }
160
161 #sone #home-sone {
162         margin-top: 1ex;
163         margin-left: 80px;
164         padding-left: 1ex;
165 }
166
167 #sone #update-status {
168         margin-bottom: 1em;
169 }
170
171 #sone #update-status label, #sone #post-message label {
172         display: none;
173 }
174
175 #sone #update-status input[type=text] {
176         width: 45em;
177 }
178
179 #sone #update-status textarea {
180         width: 45em;
181 }
182
183 #sone #update-status button {
184         float: right;
185 }
186
187 #sone #update-status .select-sender, #sone .create-reply .select-sender, #sone #post-message .select-sender {
188         display: none;
189 }
190
191 #sone #update-status .select-sender button, #sone #post-message .select-sender button {
192         display: inline;
193         float: left;
194 }
195
196 #sone .nice-name {
197         font-weight: bold;
198 }
199
200 #sone #main {
201         padding: 1em;
202         padding-top: 0px;
203 }
204
205 #sone #edit-profile #birth-day, #sone #edit-profile #birth-month, #sone #edit-profile #birth-year {
206         display: inline;
207         width: 15em;
208 }
209
210 #sone #edit-profile #birth-day input, #sone #edit-profile #birth-month input, #sone #edit-profile #birth-year input {
211         width: 4em;
212         text-align: right;
213 }
214
215 #sone .post {
216         padding: 1ex 0px;
217         border-bottom: solid 1px #ccc;
218         clear: both;
219 }
220
221 #sone .post.new {
222         background-color: #ffffa0;
223         padding-left: 1ex;
224 }
225
226 #sone .post.last {
227         padding: 1ex 0px;
228         border-bottom: none;
229 }
230
231 #sone .post > .avatar {
232         position: absolute;
233 }
234
235 #sone .post > .inner-part {
236         margin-left: 48px;
237         padding-left: 0.5em;
238         min-height: 48px;
239 }
240
241 #sone .post .author, #sone .post .recipient {
242         display: inline;
243         font-weight: bold;
244 }
245
246 #sone .post .text, #sone .post .raw-text {
247         display: inline;
248         white-space: pre-wrap;
249 }
250
251 #sone .post .text.hidden, #sone .post .raw-text.hidden {
252         display: none;
253 }
254
255 #sone .post .status-line {
256         margin-top: 0.5ex;
257         font-size: 85%;
258 }
259
260 #sone .separator {
261         font: inherit;
262         color: rgb(28, 131, 191);
263 }
264
265 #sone .show-source, #sone .show-reply-source {
266         display: inline;
267 }
268
269 #sone .permalink {
270         display: inline;
271 }
272
273 #sone .post .bookmarks {
274         display: inline;
275         color: rgb(28, 131, 191);
276 }
277
278 #sone .post .bookmark, #sone .post .unbookmark {
279         display: inline;
280         font: inherit;
281         margin: 0px;
282 }
283
284 #sone .post .time {
285         display: inline;
286         color: #666;
287 }
288
289 #sone .post .delete, #sone .post .likes, #sone .post .like, #sone .post .unlike, #sone .post .trust, #sone .post .distrust, #sone .post .untrust {
290         display: inline;
291         font: inherit;
292         margin: 0px;
293 }
294
295 #sone .post .likes.hidden {
296         display: none;
297 }
298
299 #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 {
300         display: none;
301 }
302
303 #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 {
304         border: 0px;
305         background: none;
306         padding: 0px;
307         color: rgb(28, 131, 191);
308         font: inherit;
309         margin: 0px;
310 }
311
312 #sone .post .delete button.confirm {
313         color: red;
314         font-weight: bold;
315 }
316
317 #sone .post .trust button {
318         color: rgb(0, 128, 0);
319 }
320
321 #sone .post .distrust button {
322         color: rgb(255, 0, 0);
323 }
324
325 #sone .post .untrust button {
326         color: rgb(64, 64, 64);
327 }
328
329 #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 {
330         border: 0px;
331         background: none;
332         padding: 0px;
333         color: rgb(255, 172, 0);
334         cursor: pointer;
335 }
336
337 #sone .post .likes span {
338         font: inherit;
339         color: green;
340 }
341
342 #sone .post .replies {
343         clear: both;
344         padding-top: 0.2ex;
345 }
346
347 #sone .post .replies .click-to-show {
348         background-color: #f0f0ff;
349         font-size: 85%;
350         padding: 0.5em;
351         cursor: pointer;
352 }
353
354 #sone .post .replies .click-to-show.new {
355         background-color: #ffffa0;
356 }
357
358 #sone .post .reply > .avatar {
359         position: absolute;
360 }
361
362 #sone .post .reply > .inner-part {
363         margin-left: 36px;
364         padding-left: 0.5em;
365         min-height: 36px;
366 }
367
368 #sone .post .reply {
369         clear: both;
370         background-color: #f0f0ff;
371         font-size: 85%;
372         margin: 1ex 0px;
373         padding: 1ex;
374 }
375
376 #sone .post .reply.new {
377         background-color: #ffffa0;
378 }
379
380 #sone .post .reply .time {
381         float: none;
382         display: inline;
383         color: #666;
384         font-size: inherit;
385 }
386
387 #sone .post .show-reply-form {
388         display: inline;
389 }
390
391 #sone .post .show-reply-form span {
392         color: rgb(28, 131, 191);
393         cursor: pointer;
394         font: inherit;
395 }
396
397 #sone .post .show-reply-form span:hover {
398         color: rgb(255, 172, 0);
399 }
400
401 #sone .post .create-reply {
402         clear: both;
403         background-color: #f0f0ff;
404         padding: 0.5ex;
405 }
406
407 #sone .post .create-reply input[type=text] {
408         margin-left: 0.5ex;
409         width: 42em;
410 }
411
412 #sone .post .create-reply textarea {
413         margin-left: 0.5ex;
414         width: 42em;
415         height: 4em;
416 }
417
418 #sone .post .create-reply button {
419         float: right;
420 }
421
422 #sone .create-reply .select-sender button, #sone #post-message .select-sender button {
423         display: inline;
424         float: left;
425 }
426
427 #sone .sone {
428         clear: both;
429         background-color: #f0f0ff;
430         border: 1px solid #ccc;
431         margin-bottom: 0.5ex;
432         padding: 0.5ex;
433 }
434
435 #sone .sone.local {
436         background-color: #f0fff0;
437 }
438
439 #sone .sone.new {
440         background-color: #ffffa0;
441 }
442
443 #sone .sone .profile-link {
444         display: block;
445 }
446
447 #sone .sone .short-request-uri {
448         clear: both;
449         float: right;
450 }
451
452 #sone .sone .unknown-marker, #sone .sone .download-marker, #sone .sone .insert-marker, #sone .sone .idle-marker, #sone .sone .modified-marker {
453         display: none;
454 }
455
456 #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 {
457         display: inline;
458         float: right;
459         border: solid 1px #ccc;
460         border-right: none;
461         border-top: none;
462         padding: 0 0.5ex;
463         position: relative;
464         right: -0.5ex;
465         top: -0.5ex
466 }
467
468 #sone .sone.idle.modified .idle-marker {
469         display: none;
470 }
471
472 #sone .sone .last-update {
473         float: right;
474         display: inline;
475 }
476
477 #sone .sone .modified-marker, #sone .sone .unknown-marker {
478         color: red;
479         font-weight: bold;
480 }
481
482 #sone .sone form.follow, #sone .sone form.unfollow, #sone .sone form.lock, #sone .sone form.unlock {
483         display: inline;
484         border: solid 1px #ccc;
485         border-left: none;
486         border-bottom: none;
487         padding: 0 0.5ex;
488         position: relative;
489         left: -0.5ex;
490         bottom: -0.5ex
491 }
492
493 #sone .sone form.follow button, #sone .sone form.unfollow button, #sone .sone form.lock button, #sone .sone form.unlock button {
494         display: inline;
495         color: rgb(28, 131, 191);
496         background: none;
497         border: none;
498         font: inherit;
499         padding: 0px;
500 }
501
502 #sone .sone form.follow button:hover, #sone .sone form.unfollow button:hover, #sone .sone form.lock button:hover, #sone .sone form.unlock button:hover {
503         display: inline;
504         color: rgb(255, 172, 0);
505 }
506
507 #sone .sone.locked form.lock, #sone .sone.unlocked form.unlock {
508         display: none;
509 }
510
511 #sone .sone form.hidden {
512         display: none;
513 }
514
515 #sone .sone .spacer {
516         display: inline;
517 }
518
519 #sone .profile-field, #sone #edit-profile button[type=submit], #sone #delete-profile-field {
520         margin-top: 1em;
521 }
522
523 #sone .profile-field .name {
524         display: inline;
525         font-weight: bold;
526 }
527
528 #sone .profile-field .name.hidden {
529         display: none;
530 }
531
532 #sone .profile-field button.confirm.edit {
533         font-weight: bold;
534         color: #080;
535 }
536
537 #sone .profile-field button.cancel {
538         font-weight: bold;
539         color: red;
540 }
541
542 #sone .profile-field .value {
543         margin-left: 2em;
544 }
545
546 #sone #edit-profile .profile-field .value {
547         margin-left: inherit;
548 }
549
550 #sone .profile-field .edit-field-name, #sone .profile-field .move-up-field, #sone .profile-field .move-down-field, #sone .profile-field .delete-field-name {
551         float: right;
552         margin-top: -1ex;
553         position: relative;
554 }
555
556 #sone #search {
557         text-align: right;
558 }
559
560 #sone #search input[type=text] {
561         width: 35em;
562 }
563
564 #sone #sone-results + #sone #post-results {
565         clear: both;
566         padding-top: 1em;
567 }
568
569 #sone #tail {
570         margin-top: 1em;
571         border-top: solid 1px #ccc;
572         padding-top: 2em;
573         text-align: center;
574         font-size: 75%;
575         color: #888;
576 }
577
578 #sone #tail #version-information {
579         margin-top: 1em;
580 }
581
582 #sone #add-sone textarea, #sone #create-sone textarea, #sone #load-sone textarea, #sone #edit-profile textarea {
583         height: 1.5em;
584 }
585
586 #sone #add-sone button {
587         position: absolute;
588 }
589
590 #sone .navigation {
591         text-align: center;
592 }
593
594 #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 {
595         display: block;
596         height: 1.5em;
597         padding: 0.5ex;
598         width: 3em;
599         border: solid 1px #ccc;
600         background-color: #f0f0ff;
601         margin: 1ex 0;
602 }
603
604 #sone .navigation .first, #sone .navigation .previous {
605         float: left;
606 }
607
608 #sone .navigation .current-page, #sone .navigation .total-pages {
609         position: relative;
610         top: 0.5em;
611         margin-top: 0.5ex;
612         display: inline;
613 }
614
615 #sone .navigation .total-pages:before {
616         content: '/ ';
617 }
618
619 #sone .navigation .next, #sone .navigation .last {
620         float: right;
621 }
622
623 #sone h1 {
624         font-family: inherit;
625         font-size: 200%;
626         font-weight: bold;
627         clear: both;
628 }
629
630 #sone h2 {
631         font-family: inherit;
632         font-size: 150%;
633         font-weight: bold;
634         clear: both;
635 }
636
637 #sone .error label {
638         color: red;
639         font-weight: bold;
640 }
641
642 #sone input.default {
643         color: #888;
644 }
645
646 #sone input[type=text].key {
647         width: 130ex;;
648         font-size: 75%;
649 }
650
651 #sone .confirm {
652         font-weight: bold;
653         color: red;
654 }