liquid_feedback_frontend

view static/style.css @ 150:eaf3db89a6e1

implement initiative pager in content_navigation

this allows you to swtich between the initiatives very quickly
author Daniel Poelzleithner <poelzi@poelzi.org>
date Fri Oct 08 04:29:20 2010 +0200 (2010-10-08)
parents f5692aafc85b
children 1652c4cd3154
line source
1 /*************************************************************************
2 * Some global definitions
3 */
5 body {
6 background: #fff;
7 }
9 body, th, td {
10 font-family: sans-serif;
11 font-size: 15px;
12 font-size: 14px;
13 padding: 0;
14 margin: 0;
15 }
17 .area_list {
18 line-height: 170%;
19 }
21 body, a {
22 color: #000;
23 }
25 img {
26 border: none;
27 }
29 table {
30 border-collapse: collapse;
31 border: none;
32 }
34 td, th {
35 padding: 0.5ex 0.5em 0.5ex 0.5em;
36 }
38 td {
39 vertical-align: top;
40 }
42 th {
43 vertical-align: bottom;
44 font-size: 75%;
45 font-weight: bold;
46 }
48 a.active {
49 color: #fff;
50 }
52 .revoked {
53 text-decoration: line-through;
54 }
56 .highlighted {
57 background-color: #fa7;
58 color: #000;
59 }
61 .admin_only {
62 font-style: italic;
63 }
65 a {
66 xvertical-align: middle;
67 }
69 h1 {
70 font-size: 150%;
71 }
73 h2 {
74 font-size: 125%;
75 }
77 .inline {
78 display: inline;
79 }
81 /*************************************************************************
82 * Notices, warnings and errors
83 */
85 .layout_notice, .layout_error, .layout_warning {
86 background: #fff;
87 font-weight: bold;
88 line-height: 1.7em;
89 -moz-opacity:0.7;
90 }
92 .slot_notice, .slot_warning, .slot_error {
93 padding-left: 1em;
94 }
96 .slot_notice {
97 background-color: #cfc;
98 color: #040;
99 }
101 .slot_warning {
102 background-color: #fec;
103 color: #420;
104 }
106 .slot_error {
107 background-color: #fcc;
108 color: #400;
109 }
111 /*************************************************************************
112 * Navigation, search and language chooser bar
113 */
115 .topbar {
116 background-color: #444;
117 color: #fff;
118 font-size: 75%;
119 line-height: 140%;
120 margin-bottom: 1.8ex;
121 }
123 .topbar a {
124 background-color: #444;
125 color: #fff;
126 }
128 .topbar a:hover {
129 background-color: #fff;
130 color: #000;
131 }
133 .navigation,
134 .logout_button {
135 line-height: 250%;
136 }
138 .navigation img,
139 .logout_button img {
140 margin-right: 0.5em;
141 vertical-align: middle;
142 }
144 .navigation a,
145 .logout_button a {
146 padding: 1ex;
147 }
149 .logout_button {
150 float: right;
151 }
153 .searchbox {
154 margin: 0;
155 padding: 0.1ex 1em 0ex 1em;
156 float: right;
157 line-height: 250%;
158 }
160 .searchbox form {
161 float: left;
162 }
164 .searchbox div {
165 display: inline;
166 }
168 .searchbox select {
169 margin-left: 0.3em;
170 margin-right: 0.4em;
171 font-size: 100%;
172 width: 8em;
173 }
175 .searchbox input[type=text] {
176 width: 8em;
177 padding: 0.25ex 0.25em 0.25ex 0.25em;
178 margin-right: 0.5em;
179 font-size: 100%;
180 }
182 .searchbox input[type=submit] {
183 font-size: 100%;
184 }
186 /*************************************************************************
187 * Title of current page including path and actions
188 */
190 .title_bar {
191 border-bottom: 1px solid #777;
192 padding-top: 1ex;
193 padding-bottom: 0.5ex;
194 }
196 .title_bar_content {
197 margin-left: 1em;
198 }
200 .path {
201 color: #444;
202 }
204 .path div {
205 font-size: 100%;
206 line-height: 180%;
207 }
209 .path a {
210 color: #444;
211 }
213 .slot_path div {
214 display: inline;
215 margin-left: 1em;
216 margin-right: 1em;
217 }
219 .title {
220 color: #000;
221 margin-bottom: 0.5ex;
222 }
224 .slot_title {
225 }
227 .title div {
228 font-weight: bold;
229 font-size: 135%;
230 line-height: 110%;
231 }
233 .title a {
234 color: #000;
235 }
237 .member_image_avatar {
238 float: left;
239 margin-right: 0.5em;
240 }
242 .actions {
243 font-size: 75%;
244 line-height: 220%;
245 }
247 .slot_actions {
248 display: inline;
249 }
251 .actions a {
252 float: left;
253 display: block;
254 padding: 1px 0.5em 1px 0.0em;
255 margin-right: 1em;
256 vertical-align: middle;
257 }
259 .content_navigation {
260 font-size: 75%;
261 background-color: #eee;
262 margin-bottom: 2ex;
263 padding-left: 1em;
264 }
266 .content_navigation div,
267 .content_navigation a {
268 display: inline-block;
269 padding: 3px 0.5em 3px 0.0em;
270 margin-right: 1em;
271 vertical-align: middle;
272 }
274 .content_navigation a:hover {
275 background-color: #d7d7d7;
276 }
278 .content_navigation_seperator {
279 height: 1.4em;
280 border-left: 1px solid black;
281 }
283 .actions a:hover {
284 background-color: #d7d7d7;
285 }
287 .actions img {
288 padding-left: 0.2em;
289 padding-right: 0.2em;
290 vertical-align: middle;
291 }
293 .logo {
294 float: right;
295 margin-right: 1em;
296 }
301 /*************************************************************************
302 * vote info / delegation
303 */
305 .interest,
306 .slot_support,
307 .delegation,
308 .voting_requested {
309 float: left;
310 position: relative;
311 z-index: 1;
312 }
314 .interest img,
315 .slot_support img,
316 .delegation img,
317 .voting_requested img {
318 padding-left: 0.2em;
319 padding-right: 0.2em;
320 }
321 .vote_info .head {
322 float: left;
323 margin-right: 1em;
324 }
326 .interest .head_active,
327 .slot_support .head_potential_supporter{
328 background-color: #fec;
329 border: 1px solid #b96;
330 }
332 .interest .head_autoreject {
333 background-color: #fdd;
334 border: 1px solid #b77;
335 }
337 .slot_support .head_supporter {
338 background-color: #dfc;
339 border: 1px solid #8b8;
340 }
342 .slot_support .head_initiator {
343 background-color: #eee;
344 border: 1px solid #999;
345 }
347 .delegation .head_active {
348 background-color: #ddf;
349 border: 1px solid #88b;
350 }
352 .delegation .change_delegation {
353 margin-bottom: 2ex;
354 }
356 .delegation .change_delegation a {
357 display: inline;
358 float: none;
359 padding: 1ex;
360 }
362 .delegation .delegation_participation {
363 margin-left: 20.5em;
364 margin-top: 3ex;
365 font-style: italic;
366 font-size: 80%;
367 }
369 .voting_requested .head_active {
370 background-color: #fdd;
371 border: 1px solid #b77;
372 }
374 .vote_info .close {
375 position: absolute;
376 top: 0;
377 right: 0;
378 padding: 1ex;
379 display: block;
380 }
382 .vote_info .content {
383 font-size: 133%;
384 line-height: 100%;
385 top: 3ex;
386 display: none;
387 position: absolute;
388 z-index: 10;
389 background-color: #fff;
390 border: 1px solid #999;
391 padding: 1em;
392 width: 35em;
393 }
395 .vote_info .delegation_arrow {
396 margin-top: 1ex;
397 margin-bottom: 1ex;
398 vertical-align: middle;
399 }
401 .vote_info .delegation_arrow_overridden {
402 opacity: 0.4;
403 }
405 .vote_info .delegation_scope_overridden {
406 color: #777;
407 }
409 .vote_info .delegation_scope {
410 display: inline;
411 }
413 .vote_info .delegation_info {
414 }
416 .vote_info .member_thumb {
417 clear: left;
418 }
420 .delegation_overridden .member_thumb {
421 opacity: 0.4;
422 }
424 .delegation .revoke {
425 margin: 0.5ex;
426 float: right;
427 }
429 .delegation .revoke img {
430 vertical-align: middle;
431 }
434 .sub_title div {
435 padding-top: 1ex;
436 margin-top: 1ex;
437 font-weight: bold;
438 font-size: 135%;
439 line-height: 110%;
440 }
442 /*************************************************************************
443 * Main content
444 */
446 .main {
447 margin-left: 1em;
448 margin-right: 1em;
449 }
452 /*************************************************************************
453 * ui.tab
454 */
456 .ui_tabs_links {
457 margin-top: 4ex;
458 font-size: 75%;
459 }
461 .ui_tabs_links a {
462 padding: 1ex;
463 line-height: 200%;
464 background-color: #e7e7e7;
465 white-space: nowrap;
466 }
468 .ui_tabs_links a:hover {
469 background-color: #d7d7d7;
470 }
472 .ui_tabs_links a.selected {
473 background-color: #444;
474 color: #fff;
475 text-decoration: none;
476 padding: 1ex;
477 }
479 .ui_tabs_content {
480 border: 1px solid #444;
481 padding: 1ex 1ex 1ex 1ex;
482 }
484 .web10 .ui_tabs_accordeon_head {
485 margin-bottom: 1ex;
486 }
488 .web20 .ui_tabs_accordeon_head {
489 font-size: 80%;
490 font-weight: bold;
491 display: block;
492 background: #eee;
493 border: 1px solid #bbb;
494 color: #000;
495 padding: 0.75ex;
496 margin-top: 2ex;
497 cursor: pointer;
498 }
500 .web20 .ui_tabs_accordeon_head img {
501 vertical-align: middle;
502 margin-right: 0.5em;
503 }
505 .web20 .ui_tabs_accordeon_head .bargraph {
506 margin-right: 0.5em;
507 }
509 .web20 .ui_tabs_accordeon_content {
510 border: 1px solid #aaa;
511 border-top: none;
512 padding: 2ex 1em 2ex 1em;
513 margin-bottom: 3ex;
514 }
516 .web20 .issue_initiative_list .ui_tabs_accordeon_head {
517 background-color: #e5e5ff;
518 }
520 .web20 .issue_initiative_list .ui_tabs_accordeon_head,
521 .web20 .issue_initiative_list .ui_tabs_accordeon_content {
522 border-color: #aad;
523 }
525 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_content {
526 border-color: #bbb;
527 border-width: 1px;
528 }
530 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_head {
531 background-color: #eee;
532 border: 1px solid #bbb;
533 }
535 .web20 .issue_initiative_list .ui_tabs_accordeon_head a {
536 font-size: 120%;
537 }
539 .ui_tabs_links a.yellow {
540 background-color: #fec;
541 color: #000;
542 }
544 .ui_tabs_links a.yellow:hover {
545 background-color: #edb;
546 }
548 .ui_tabs_links a.yellow.selected {
549 background-color: #654;
550 color: #fff;
551 text-decoration: none;
552 padding: 1ex;
553 }
555 .web20 .ui_tabs_accordeon_head.yellow {
556 background-color: #fec;
557 border-color: #b96;
558 xpadding: 1ex;
559 xmargin-bottom: 2ex;
560 }
562 .web20 .ui_tabs_accordeon_content.yellow {
563 border-color: #b96;
564 }
566 /*************************************************************************
567 * ui.filters
568 */
570 .ui_filter_closed_head,
571 .ui_filter_head {
572 color: #777;
573 margin-top: 1ex;
574 margin-bottom: 1.5ex;
575 font-size: 75%;
576 }
578 .ui_filter_head a {
579 color: #777;
580 padding: 0.5ex;
581 }
583 .ui_filter_head a.active {
584 color: #fff;
585 background-color: #777;
586 padding: 0.5ex;
587 }
589 /*************************************************************************
590 * ui.paginate
591 */
593 .ui_paginate_head {
594 margin-bottom: 1ex;
595 }
597 .ui_paginate_foot {
598 margin-top: 1ex;
599 }
601 .ui_paginate_select a {
602 padding: 0.5ex;
603 }
605 /*************************************************************************
606 * ui.bargraph
607 */
609 .bargraph {
610 width: 103px;
611 }
613 .bargraph50 {
614 width: 52px;
615 }
617 .bargraph div {
618 float: left;
619 margin-top: 0.5ex;
620 height: 1.3ex;
621 }
623 .bargraph_legend {
624 margin-top: 2ex;
625 }
627 .bargraph_legend .bargraph {
628 width: 26px;
629 }
631 .bargraph_legend div,
632 .bargraph_legend div div,
633 .bargraph_legend div div div {
634 float: left;
635 }
637 .bargraph_legend_label {
638 margin-left: 0.5em;
639 margin-right: 1em;
640 }
642 /*************************************************************************
643 * vertical ui.form
644 */
646 .login input[type=text],
647 .vertical input[type=text],
648 .login input[type=password],
649 .vertical input[type=password],
650 .vertical textarea,
651 .vertical select {
652 font-family: sans-serif;
653 font-size: 100%;
654 width: 50em;
655 border: 1px solid #444;
656 padding: 0.2ex 0.2em 0.2ex 0.2em;
657 margin-bottom: 1ex;
658 }
660 .login input[type=password],
661 .vertical input[type=password] {
662 width: 16em;
663 }
665 .vertical select {
666 padding-right: 0;
667 }
669 .login .ui_field_label,
670 .vertical .ui_field_label {
671 text-transform: uppercase;
672 font-size: 70%;
673 line-height: 120%;
674 font-weight: bold;
675 color: #777;
676 width: 15em;
677 display: block;
678 float: left;
679 clear: left;
680 text-align: right;
681 padding-right: 0.5em;
682 }
684 .ui_field_label.label_right {
685 text-align: left;
686 width: auto;
687 }
689 .login input[type=text],
690 .login input[type=password] {
691 width: 10em;
692 }
694 .login div,
695 .vertical div {
696 clear: left;
697 }
699 .vertical span {
700 display: block;
701 margin-bottom: 0.5ex;
702 }
704 .vertical span:after {
705 content: " ";
706 }
708 .vertical span span {
709 display: inline;
710 margin-bottom: 0;
711 }
713 .login input[type=submit],
714 .vertical input[type=submit] {
715 font-size: 100%;
716 margin-left: 11em;
717 background-color: #444444;
718 color: #fff;
719 border: none;
720 padding: 0.75ex;
721 }
723 .login input[type=submit]:hover,
724 .vertical input[type=submit]:hover {
725 background-color: #444444;
726 }
728 /*************************************************************************
729 * Tables
730 */
733 table a.action {
734 font-size: 70%;
735 line-height: 190%;
736 padding: 0.5ex;
737 color: #777;
738 }
740 table a.active {
741 color: #fff;
742 }
744 th {
745 text-align: left;
746 border-bottom: 1px solid #000;
747 }
749 tr:hover td {
750 background-color: #ddd;
751 }
753 .nohover tr:hover td {
754 background-color: #fff;
755 }
757 .nohover table tr:hover td {
758 background-color: #ddd;
759 }
762 tr table tr:hover td {
763 background-color: #fff;
764 }
767 /*************************************************************************
768 * Hidden inline form
769 */
771 .hidden_inline_form {
772 display: none;
773 border: 1px solid #444;
774 width: 42em;
775 position: fixed;
776 background-color: #fff;
777 left: 5em;
778 top: 5ex;
779 z-index: 2;
780 }
782 .hidden_inline_form a {
783 padding: 0.5ex;
784 color: #fff;
785 }
788 .hidden_inline_form .head {
789 background-color: #444;
790 color: #fff;
791 display: block;
792 padding: 0.5ex;
793 }
795 .hidden_inline_form input[type=text],
796 .hidden_inline_form textarea,
797 .hidden_inline_form select {
798 width: 30em;
799 }
801 /*************************************************************************
802 * Positive / Negtive votes
803 */
806 .positive_votes span {
807 display: inline;
808 }
810 .positive_votes {
811 display: inline;
812 background-color: #cfc;
813 padding: 0.3ex 0.5em 0.3ex 0.5em;
814 }
816 .negative_votes span {
817 display: inline;
818 }
820 .negative_votes {
821 display: inline;
822 background-color: #fcc;
823 padding: 0.3ex 0.5em 0.3ex 0.5em;
824 }
826 .suggestion_my_opinion a,
827 .suggestion_my_opinion span {
828 white-space: nowrap;
829 padding-left: 0.2ex !important;
830 padding-right: 0.2ex !important;
831 }
833 .active {
834 background-color: #444;
835 color: #fff;
836 }
838 .active_red2 { background-color: #a00; color: #fff !important; }
839 .active_red1 { background-color: #f88; color: #000 !important; }
840 .active_green1 { background-color: #8f8; color: #000 !important; }
841 .active_green2 { background-color: #0a0; color: #000 !important; }
846 /*************************************************************************
847 * Issues
848 */
850 .issues tr {
851 border: 1px solid #ccc;
852 }
854 .issues tr tr {
855 border: none;
856 }
858 .lang_chooser {
859 float: right;
860 margin-right: 0.5em;
861 }
863 .delegation_list_entry {
864 margin-right: 2em;
865 margin-bottom: 2ex;
866 float: left;
867 clear: left;
868 }
870 .delegation_list_entry .delegation_arrow {
871 float: left;
872 }
874 .delegation_list_entry .delegation_scope {
875 float: left;
876 width: 25em;
877 }
879 .delegation_list_entry .delegation_scope a {
880 display: block;
881 }
883 .member_list .member_thumb {
884 float: left;
885 margin-right: 1em;
886 margin-bottom: 2ex;
887 }
889 .member_thumb {
890 text-decoration: none;
891 width: 14.5em;
892 height: 48px;
893 display: block;
894 float: left;
895 border: 1px solid #999;
896 overflow: hidden;
897 xwhite-space: nowrap;
898 position: relative;
899 }
901 .member_thumb a{
902 position: absolute;
903 top: 0;
904 left: 0;
905 padding: 0;
906 margin: 0;
907 }
909 .member_thumb a:hover div {
910 background-color: #444;
911 color: #fff;
912 }
914 .member_thumb img {
915 padding: 0;
916 margin: 0;
917 vertical-align: bottom;
918 }
920 .member_thumb div {
921 }
923 .member_thumb .member_image {
924 }
926 .member_thumb .member_name {
927 position: absolute;
928 left: 48px;
929 top: 2ex;
930 font-size: 100%;
931 width: 14em;
932 }
934 .member_thumb .flags {
935 text-align: right;
936 font-size: 75%;
937 }
939 .member_thumb .flags a,
940 .member_thumb .flags img {
941 position: static;
942 float: right;
943 margin-left: 0.5em;
944 }
947 .member .right {
948 float: right;
949 }
951 .member_thumb.not_accepted,
952 .member_thumb.not_informed {
953 opacity: 0.5;
954 }
956 .member_statement,
957 .draft_content,
958 .suggestion_content {
959 background-color: #eee;
960 border: 1px solid #ccc;
961 padding-left: 1ex;
962 padding-right: 1ex;
963 }
966 .suggestion_content,
967 #suggestion_description {
968 font-family: monospace;
969 }
971 .diff {
972 background-color: #eee;
973 border: 1px solid #ccc;
974 padding: 1ex;
975 }
977 .diff_added {
978 background-color: #cfc;
979 text-decoration: underline;
980 }
982 .diff_removed {
983 background-color: #fcc;
984 text-decoration: line-through;
985 }
987 .slot_issue_info {
988 background-color: #eee;
989 border: 1px solid #ccc;
990 float: right;
991 padding: 0.5ex;
992 line-height: 130%;
993 margin-right: 1em;
994 }
996 .issue_info label {
997 float: left;
998 width: 8em;
999 text-transform: uppercase;
1000 font-size: 70%;
1001 color: #777;
1002 font-weight: bold;
1003 clear: left;
1004 text-align: right;
1005 margin-right: 0.7em;
1008 .admitted_info {
1009 background-color: #dfd;
1010 padding: 1ex;
1011 margin-bottom: 2ex;
1014 .not_admitted_info,
1015 .revoked_info {
1016 background-color: #fdd;
1017 padding: 1ex;
1018 margin-bottom: 2ex;
1021 .draft_updated_info,
1022 .voting_active_info,
1023 .initiator_invite_info,
1024 .motd,
1025 .public_access_issue_head {
1026 background-color: #fec;
1027 border: 1px solid #b96;
1028 padding: 1ex;
1029 margin-bottom: 2ex;
1032 .suggestion_fulfilled {
1033 width: 15em;
1035 .suggestion_fulfilled a.action {
1036 padding-left: 0;
1037 line-height: 120%;
1040 .help,
1041 .use_terms {
1042 border: 1px solid #bcd;
1043 background-color: #def;
1044 color: #000;
1045 padding: 1ex;
1048 .help_visible {
1049 margin-bottom: 1ex;
1052 .help_visible .help_icon {
1053 float: right;
1056 .slot_help_hidden {
1057 float: right;
1058 margin-right: 1em;
1061 .help_actions {
1062 font-size: 75%;
1063 float: right;
1066 .help_actions a {
1067 margin-right: 1em;
1068 color: #468;
1071 .wiki {
1074 .wiki h1,
1075 .wiki h2,
1076 .wiki h3,
1077 .wiki h4 {
1078 margin-top: 1ex;
1079 margin-bottom: 1ex;
1082 .wiki h1 {
1083 font-size: 150%;
1086 .wiki h2 {
1087 font-size: 125%;
1090 .wiki p {
1091 margin-top: 1ex;
1092 margin-bottom: 1ex;
1095 form .warning {
1096 background-color: #ffd;
1097 color: #000;
1098 border: 1px solid #dda;
1099 margin: 1ex;
1100 margin-bottom: 2ex;
1101 padding: 1ex;
1104 a.not_voted {
1105 display: block;
1106 background-color: #fec;
1107 color: #000;
1110 .action_active {
1111 background-color: #fec;
1114 .heading {
1115 font-size: 120%;
1116 font-weight: bold;
1117 margin-top: 2ex;
1118 margin-bottom: 1ex;
1121 .heading.first {
1122 margin-top: 0;
1125 .menu_list li {
1126 padding-top: 1ex;
1127 padding-bottom: 1ex;
1130 .deactivated_member_info {
1131 background-color: #a00;
1132 color: #fff;
1135 /*************************************************************************
1136 * Voting
1137 */
1139 #voting {
1140 position: relative;
1142 #voting .approval, .abstention, .disapproval {
1143 border: 2px black solid;
1144 margin-top: 5ex;
1145 margin-bottom: 5ex;
1146 padding: 1ex;
1147 padding-bottom: 2ex;
1149 #voting .approval {
1150 background-color: #9f9;
1152 #voting .approval .movable {
1153 background-color: #dfd;
1155 #voting .abstention {
1156 background-color: #ccc;
1158 #voting .abstention .movable {
1159 background-color: #eee;
1161 #voting .disapproval {
1162 background-color: #f88;
1164 #voting .disapproval .movable {
1165 background-color: #fbb;
1167 #voting .cathead {
1168 font-weight: bold;
1170 #voting .movable {
1171 position: relative;
1172 border: 1px black solid;
1173 margin: 1ex;
1174 padding: 0.5ex;
1176 #voting .voting_form_active .movable {
1177 cursor: pointer;
1179 #voting .voting_form_active .clickable {
1180 cursor: auto;
1182 #voting .voting_form_active a.clickable {
1183 cursor: pointer;
1186 #voting .grabber {
1187 vertical-align: middle;
1188 cursor: move;
1191 /*************************************************************************
1192 * timeline
1193 */
1194 div.ignore_area_list {
1195 float: left;
1196 width: 90%;
1197 margin: 20px 0 1em 0;
1200 div.ignore_area_list >
1201 label.ui_field_label {
1202 text-align: left ;
1203 width: 100%;
1204 border-bottom:1px solid #000000;
1205 color: #000000;
1206 font-size:75%;
1207 font-weight:bold;
1208 vertical-align:bottom;
1209 text-transform:none;
1210 padding:0.5ex 0.5em
1213 div.ignore_area_item {
1214 clear: none;
1215 float: left;
1216 width: 20em;
1217 margin: 0.1ex 0.5em;
1220 div.ignore_area_item > input {
1221 float: none;
1222 clear: none;
1223 display: inline;
1226 div.ignore_area_item >
1227 label.ui_field_label {
1228 float: none;
1229 clear: none;
1230 text-align: left;
1231 display: inline;
1234 div.timeline_results {
1235 clear: both;

Impressum / About Us