liquid_feedback_frontend

view static/style.css @ 4:80c215dbf076

find changesets by author, revision, files, or words in the commit message
Version alpha5

Many optical changes and improved usability

Support for different wiki-formatting-engines

Help system
author bsw/jbe
date Thu Dec 10 12:00:00 2009 +0100 (2009-12-10)
parents 768faea1096d
children afd9f769c7ae
line source
1 /*************************************************************************
2 * Some global definitions
3 */
4
5 body, th, td {
6 font-family: sans-serif;
7 font-size: 14px;
8 padding: 0;
9 margin: 0;
10 }
11
12 body, a {
13 color: #000;
14 }
15
16 img {
17 border: none;
18 }
19
20 table {
21 border-collapse: collapse;
22 border: none;
23 }
24
25 td, th {
26 padding: 0.5ex 0.5em 0.5ex 0.5em;
27 }
28
29 td {
30 vertical-align: top;
31 }
32
33 th {
34 vertical-align: bottom;
35 font-size: 75%;
36 font-weight: bold;
37 }
38
39 a.active {
40 color: #fff;
41 }
42
43 .highlighted {
44 background-color: #fa7;
45 color: #000;
46 }
47
48 .admin_only {
49 font-style: italic;
50 }
51
52 a {
53 vertical-align: middle;
54 }
55
56 /*************************************************************************
57 * Notices, warnings and errors
58 */
59
60 .layout_notice, .layout_error, .layout_warning {
61 background: #fff;
62 font-weight: bold;
63 line-height: 1.7em;
64 -moz-opacity:0.7;
65 }
66
67 .slot_notice, .slot_warning, .slot_error {
68 padding-left: 1em;
69 }
70
71 .slot_notice {
72 background-color: #cfc;
73 color: #040;
74 }
75
76 .slot_warning {
77 background-color: #fec;
78 color: #420;
79 }
80
81 .slot_error {
82 background-color: #fcc;
83 color: #400;
84 }
85
86 /*************************************************************************
87 * Navigation, search and language chooser bar
88 */
89
90 .topbar {
91 background-color: #444;
92 color: #fff;
93 font-size: 75%;
94 }
95
96 .topbar a {
97 color: #fff;
98 }
99
100 .topbar a:hover {
101 background-color: #fff;
102 color: #000;
103 }
104
105 .navigation,
106 .logout_button {
107 line-height: 250%;
108 }
109
110 .navigation img,
111 .logout_button img {
112 margin-right: 0.5em;
113 vertical-align: middle;
114 }
115
116 .navigation a,
117 .logout_button a {
118 padding: 1ex;
119 }
120
121 .logout_button {
122 float: right;
123 }
124
125 .searchbox {
126 padding: 0.5ex 1em 0ex 1em;
127 float: right;
128 line-height: 250%;
129 }
130
131 .searchbox div {
132 display: inline;
133 }
134
135 .searchbox select {
136 margin-left: 0.3em;
137 margin-right: 0.4em;
138 font-size: 100%;
139 width: 8em;
140 }
141
142 .searchbox input[type=text] {
143 width: 8em;
144 padding: 0.25ex 0.25em 0.25ex 0.25em;
145 margin-right: 0.5em;
146 font-size: 100%;
147 }
148
149 .searchbox input[type=submit] {
150 font-size: 100%;
151 width: 2.5em;
152 }
153
154 /*************************************************************************
155 * Title of current page including path and actions
156 */
157
158 .title_bar {
159 border-bottom: 1px solid #777;
160 margin-bottom: 2ex;
161 padding-top: 1ex;
162 padding-bottom: 0.5ex;
163 }
164
165 .title_bar_content {
166 margin-left: 1em;
167 }
168
169 .path {
170 color: #444;
171 }
172
173 .path div {
174 font-size: 100%;
175 line-height: 180%;
176 }
177
178 .path a {
179 color: #444;
180 }
181
182 .slot_path div {
183 display: inline;
184 margin-left: 1em;
185 margin-right: 1em;
186 }
187
188 .title {
189 color: #000;
190 margin-bottom: 0.5ex;
191 }
192
193 .slot_title {
194 }
195
196 .title div {
197 font-weight: bold;
198 font-size: 135%;
199 line-height: 110%;
200 }
201
202 .title a {
203 color: #fff;
204 }
205
206 .member_image_avatar {
207 float: left;
208 margin-right: 0.5em;
209 }
210
211 .actions {
212 font-size: 75%;
213 line-height: 220%;
214 }
215
216 .slot_actions {
217 display: inline;
218 }
219
220 .actions a {
221 float: left;
222 display: block;
223 padding: 0.5ex 0.5em 0.5ex 0.0em;
224 margin-right: 1em;
225 vertical-align: middle;
226 }
227
228 .actions a:hover {
229 background-color: #d7d7d7;
230 }
231
232 .actions img {
233 padding-left: 0.2em;
234 padding-right: 0.2em;
235 vertical-align: middle;
236 }
237
238 .logo {
239 float: right;
240 margin-right: 1em;
241 }
242
243 /*************************************************************************
244 * vote info / delegation
245 */
246
247 .interest,
248 .slot_support,
249 .delegation {
250 float: left;
251 position: relative;
252 }
253
254 .interest img,
255 .slot_support img,
256 .delegation img {
257 padding-left: 0.2em;
258 padding-right: 0.2em;
259 }
260 .vote_info .head {
261 float: left;
262 margin-right: 1em;
263 }
264
265 .interest .head_active {
266 background-color: #dfd;
267 border: 1px solid #8b8;
268 }
269
270 .slot_support .head_active {
271 background-color: #dfd;
272 border: 1px solid #8b8;
273 }
274
275 .delegation .head_active {
276 background-color: #ffd;
277 border: 1px solid #bb8;
278 }
279
280 .vote_info .close {
281 position: absolute;
282 top: 0;
283 right: 0;
284 padding: 1ex;
285 display: block;
286 }
287
288 .vote_info .content {
289 font-size: 133%;
290 line-height: 100%;
291 top: 3ex;
292 display: none;
293 position: absolute;
294 z-index: 10;
295 background-color: #fff;
296 border: 1px solid #999;
297 padding: 1em;
298 width: 25em;
299 }
300
301 .vote_info .delegation_arrow {
302 margin-top: 1ex;
303 margin-bottom: 1ex;
304 vertical-align: middle;
305 }
306
307 .vote_info .delegation_arrow_overridden {
308 opacity: 0.4;
309 }
310
311 .vote_info .delegation_scope_overridden {
312 color: #777;
313 }
314
315 .vote_info .delegation_scope {
316 display: inline;
317 }
318
319 .vote_info .delegation_info {
320 }
321
322 .vote_info .member_thumb {
323 clear: left;
324 }
325
326 .delegation_overridden .member_thumb {
327 opacity: 0.4;
328 }
329
330 .delegation .revoke {
331 margin: 0.5ex;
332 float: right;
333 }
334
335 .delegation .revoke img {
336 vertical-align: middle;
337 }
338
339
340 .sub_title div {
341 border-top: 1px solid #444;
342 padding-top: 1ex;
343 margin-top: 1ex;
344 font-weight: bold;
345 font-size: 135%;
346 line-height: 110%;
347 }
348
349 /*************************************************************************
350 * Main content
351 */
352
353 .main {
354 margin-left: 1em;
355 margin-right: 1em;
356 }
357
358
359 /*************************************************************************
360 * ui.tab
361 */
362
363 .ui_tabs_links {
364 margin-top: 4ex;
365 font-size: 75%;
366 }
367
368 .ui_tabs_links a {
369 padding: 1ex;
370 line-height: 200%;
371 background-color: #e7e7e7;
372 white-space: nowrap;
373 }
374
375 .ui_tabs_links a:hover {
376 background-color: #d7d7d7;
377 }
378
379 .ui_tabs_links a.selected {
380 background-color: #444;
381 color: #fff;
382 text-decoration: none;
383 padding: 1ex;
384 }
385
386 .ui_tabs_content {
387 border: 1px solid #444;
388 padding: 1ex 1ex 1ex 1ex;
389 }
390
391 /*************************************************************************
392 * ui.order
393 */
394
395 .ui_filter_head {
396 color: #777;
397 float: left;
398 margin-bottom: 1ex;
399 font-size: 75%;
400 }
401
402 .ui_filter_head a {
403 color: #777;
404 padding: 0.5ex;
405 }
406
407 .ui_filter_head a.active{
408 color: #fff;
409 background-color: #777;
410 padding: 0.5ex;
411 }
412
413 /*************************************************************************
414 * ui.order
415 */
416
417 .ui_order_head {
418 color: #777;
419 text-align: right;
420 margin-bottom: 1ex;
421 font-size: 75%;
422 }
423
424 .ui_order_head a {
425 color: #777;
426 padding: 0.5ex;
427 }
428
429 .ui_order_head a.active{
430 color: #fff;
431 background-color: #777;
432 padding: 0.5ex;
433 }
434
435 /*************************************************************************
436 * ui.paginate
437 */
438
439 .ui_paginate_select a {
440 padding: 0.5ex;
441 }
442
443 /*************************************************************************
444 * ui.bargraph
445 */
446
447 .bargraph {
448 width: 101px;
449 }
450
451 .bargraph div {
452 float: left;
453 margin-top: 0.5ex;
454 height: 1.3ex;
455 }
456
457 .bargraph_legend {
458 margin-top: 2ex;
459 }
460
461 .bargraph_legend .bargraph {
462 width: 26px;
463 }
464
465 .bargraph_legend div,
466 .bargraph_legend div div,
467 .bargraph_legend div div div {
468 float: left;
469 }
470
471 .bargraph_legend_label {
472 margin-left: 0.5em;
473 margin-right: 1em;
474 }
475
476 /*************************************************************************
477 * vertical ui.form
478 */
479
480 .login input[type=text],
481 .vertical input[type=text],
482 .login input[type=password],
483 .vertical input[type=password],
484 .vertical textarea,
485 .vertical select {
486 font-family: sans-serif;
487 font-size: 100%;
488 width: 50em;
489 border: 1px solid #444;
490 padding: 0.2ex 0.2em 0.2ex 0.2em;
491 margin-bottom: 1ex;
492 }
493
494 .login input[type=password],
495 .vertical input[type=password] {
496 width: 16em;
497 }
498
499 .vertical select {
500 padding-right: 0;
501 }
502
503 .login .ui_field_label,
504 .vertical .ui_field_label {
505 text-transform: uppercase;
506 font-size: 70%;
507 line-height: 120%;
508 font-weight: bold;
509 color: #777;
510 width: 15em;
511 display: block;
512 float: left;
513 clear: left;
514 text-align: right;
515 padding-right: 0.5em;
516 }
517
518 .login input[type=text],
519 .login input[type=password] {
520 width: 10em;
521 }
522
523 .login div,
524 .vertical div {
525 clear: left;
526 }
527
528 .vertical span {
529 display: block;
530 margin-bottom: 0.5ex;
531 }
532
533 .vertical span:after {
534 content: " ";
535 }
536
537 .vertical span span {
538 display: inline;
539 margin-bottom: 0;
540 }
541
542 .login input[type=submit],
543 .vertical input[type=submit] {
544 font-size: 100%;
545 margin-left: 11em;
546 background-color: #444444;
547 color: #fff;
548 border: none;
549 padding: 0.75ex;
550 }
551
552 .login input[type=submit]:hover,
553 .vertical input[type=submit]:hover {
554 background-color: #444444;
555 }
556
557 /*************************************************************************
558 * Tables
559 */
560
561
562 table a.action {
563 font-size: 70%;
564 line-height: 190%;
565 padding: 0.5ex;
566 color: #777;
567 }
568
569 table a.active {
570 color: #fff;
571 }
572
573 th {
574 text-align: left;
575 border-bottom: 1px solid #000;
576 }
577
578 tr:hover td {
579 background-color: #ddd;
580 }
581
582
583 tr table tr:hover td {
584 background-color: #fff;
585 }
586
587
588 /*************************************************************************
589 * Hidden inline form
590 */
591
592 .hidden_inline_form {
593 display: none;
594 border: 1px solid #444;
595 width: 42em;
596 position: absolute;
597 background-color: #fff;
598 left: 5em;
599 top: 20ex;
600 }
601
602 .hidden_inline_form a {
603 padding: 0.5ex;
604 color: #fff;
605 }
606
607
608 .hidden_inline_form .head {
609 background-color: #444;
610 color: #fff;
611 display: block;
612 padding: 0.5ex;
613 }
614
615 .hidden_inline_form input[type=text],
616 .hidden_inline_form textarea,
617 .hidden_inline_form select {
618 width: 30em;
619 }
620
621 /*************************************************************************
622 * Positive / Negtive votes
623 */
624
625
626 .positive_votes span {
627 display: inline;
628 }
629
630 .positive_votes {
631 display: inline;
632 background-color: #cfc;
633 padding: 0.3ex 0.5em 0.3ex 0.5em;
634 }
635
636 .negative_votes span {
637 display: inline;
638 }
639
640 .negative_votes {
641 display: inline;
642 background-color: #fcc;
643 padding: 0.3ex 0.5em 0.3ex 0.5em;
644 }
645
646
647
648 .active {
649 background-color: #444;
650 color: #fff;
651 }
652
653 .active_red2 { background-color: #a00; color: #fff !important; }
654 .active_red1 { background-color: #f88; color: #000 !important; }
655 .active_green1 { background-color: #8f8; color: #000 !important; }
656 .active_green2 { background-color: #0a0; color: #000 !important; }
657
658
659
660
661 /*************************************************************************
662 * Issues
663 */
664
665 .issues tr {
666 border: 1px solid #ccc;
667 }
668
669 .issues tr tr {
670 border: none;
671 }
672
673 .lang_chooser {
674 float: right;
675 margin-right: 0.5em;
676 }
677
678 .delegation_list_entry {
679 margin-right: 2em;
680 margin-bottom: 2ex;
681 float: left;
682 clear: left;
683 }
684
685 .delegation_list_entry .delegation_arrow {
686 float: left;
687 }
688
689 .delegation_list_entry .delegation_scope {
690 float: left;
691 width: 25em;
692 }
693
694 .delegation_list_entry .delegation_scope a {
695 display: block;
696 }
697
698 .member_list .member_thumb {
699 float: left;
700 margin-right: 1em;
701 margin-bottom: 2ex;
702 }
703
704 .member_thumb {
705 text-decoration: none;
706 width: 18em;
707 height: 48px;
708 display: block;
709 float: left;
710 border: 1px solid #999;
711 overflow: hidden;
712 xwhite-space: nowrap;
713 position: relative;
714 }
715
716 .member_thumb a{
717 position: absolute;
718 top: 0;
719 left: 0;
720 padding: 0;
721 margin: 0;
722 }
723
724 .member_thumb a:hover div {
725 background-color: #444;
726 color: #fff;
727 }
728
729 .member_thumb img {
730 padding: 0;
731 margin: 0;
732 vertical-align: bottom;
733 }
734
735 .member_thumb div {
736 }
737
738 .member_thumb .member_image {
739 }
740
741 .member_thumb .member_name {
742 position: absolute;
743 left: 48px;
744 top: 2ex;
745 font-size: 100%;
746 width: 14em;
747 }
748
749 .member_thumb .flags {
750 float: right;
751 font-size: 75%;
752 }
753
754 .member_thumb .flags a{
755 position: static;
756 float: right;
757 }
758
759
760 .member .right {
761 float: right;
762 }
763
764 .draft_content,
765 .member_statement {
766 background-color: #eee;
767 border: 1px solid #ccc;
768 padding-left: 1ex;
769 padding-right: 1ex;
770 }
771
772 .diff {
773 background-color: #eee;
774 border: 1px solid #ccc;
775 padding: 1ex;
776 }
777
778 .diff .added {
779 background-color: #cfc;
780 }
781
782 .diff .removed {
783 background-color: #fcc;
784 }
785
786 .slot_issue_info {
787 background-color: #eee;
788 border: 1px solid #ccc;
789 float: right;
790 padding: 0.5ex;
791 line-height: 130%;
792 margin-right: 1em;
793 }
794
795 .issue_info label {
796 float: left;
797 width: 8em;
798 text-transform: uppercase;
799 font-size: 70%;
800 color: #777;
801 font-weight: bold;
802 clear: left;
803 text-align: right;
804 margin-right: 0.7em;
805 }
806
807 .draft_updated_info {
808 border: 2px solid #faa;
809 background-color: #fee;
810 padding: 1ex;
811 }
812
813 .suggestion_fulfilled {
814 width: 15em;
815 }
816 .suggestion_fulfilled a.action {
817 padding-left: 0;
818 line-height: 120%;
819 }
820
821 .help {
822 border: 1px solid #bcd;
823 background-color: #def;
824 color: #000;
825 padding: 1ex;
826 }
827
828 .help_visible {
829 margin-bottom: 1ex;
830 }
831
832 .help_visible .help_icon {
833 float: right;
834 }
835
836 .slot_help_hidden {
837 float: right;
838 margin-right: 1em;
839 }
840
841 .help_actions {
842 font-size: 75%;
843 float: right;
844 }
845
846 .help_actions a {
847 margin-right: 1em;
848 color: #468;
849 }
850
851 .wiki {
852 }
853
854 .wiki h1,
855 .wiki h2,
856 .wiki h3,
857 .wiki h4 {
858 margin-top: 1ex;
859 margin-bottom: 1ex;
860 }
861
862 .wiki h1 {
863 font-size: 150%;
864 }
865
866 .wiki h2 {
867 font-size: 125%;
868 }
869
870 .wiki p {
871 margin-top: 1ex;
872 margin-bottom: 1ex;
873 }
874
875 form .warning {
876 background-color: #ffd;
877 color: #000;
878 border: 1px solid #dda;
879 margin: 1ex;
880 margin-bottom: 2ex;
881 padding: 1ex;
882 }

Impressum / About Us