liquid_feedback_frontend

view static/style.css @ 145:90520c9fca44

implement area filter in timeline

allows the user to ignore any area in the timeline filter.
better display in javascript off
author Daniel Poelzleithner <poelzi@poelzi.org>
date Thu Oct 07 00:35:48 2010 +0200 (2010-10-07)
parents 20e0b64cc1f9
children f5692aafc85b
line source
1 /*************************************************************************
2 * Some global definitions
3 */
5 body, th, td {
6 font-family: sans-serif;
7 font-size: 15px;
8 font-size: 14px;
9 padding: 0;
10 margin: 0;
11 }
13 .area_list {
14 line-height: 170%;
15 }
17 body, a {
18 color: #000;
19 }
21 img {
22 border: none;
23 }
25 table {
26 border-collapse: collapse;
27 border: none;
28 }
30 td, th {
31 padding: 0.5ex 0.5em 0.5ex 0.5em;
32 }
34 td {
35 vertical-align: top;
36 }
38 th {
39 vertical-align: bottom;
40 font-size: 75%;
41 font-weight: bold;
42 }
44 a.active {
45 color: #fff;
46 }
48 .revoked {
49 text-decoration: line-through;
50 }
52 .highlighted {
53 background-color: #fa7;
54 color: #000;
55 }
57 .admin_only {
58 font-style: italic;
59 }
61 a {
62 xvertical-align: middle;
63 }
65 h1 {
66 font-size: 150%;
67 }
69 h2 {
70 font-size: 125%;
71 }
73 .inline {
74 display: inline;
75 }
77 /*************************************************************************
78 * Notices, warnings and errors
79 */
81 .layout_notice, .layout_error, .layout_warning {
82 background: #fff;
83 font-weight: bold;
84 line-height: 1.7em;
85 -moz-opacity:0.7;
86 }
88 .slot_notice, .slot_warning, .slot_error {
89 padding-left: 1em;
90 }
92 .slot_notice {
93 background-color: #cfc;
94 color: #040;
95 }
97 .slot_warning {
98 background-color: #fec;
99 color: #420;
100 }
102 .slot_error {
103 background-color: #fcc;
104 color: #400;
105 }
107 /*************************************************************************
108 * Navigation, search and language chooser bar
109 */
111 .topbar {
112 background-color: #444;
113 color: #fff;
114 font-size: 75%;
115 line-height: 140%;
116 margin-bottom: 1.8ex;
117 }
119 .topbar a {
120 background-color: #444;
121 color: #fff;
122 }
124 .topbar a:hover {
125 background-color: #fff;
126 color: #000;
127 }
129 .navigation,
130 .logout_button {
131 line-height: 250%;
132 }
134 .navigation img,
135 .logout_button img {
136 margin-right: 0.5em;
137 vertical-align: middle;
138 }
140 .navigation a,
141 .logout_button a {
142 padding: 1ex;
143 }
145 .logout_button {
146 float: right;
147 }
149 .searchbox {
150 margin: 0;
151 padding: 0.1ex 1em 0ex 1em;
152 float: right;
153 line-height: 250%;
154 }
156 .searchbox form {
157 float: left;
158 }
160 .searchbox div {
161 display: inline;
162 }
164 .searchbox select {
165 margin-left: 0.3em;
166 margin-right: 0.4em;
167 font-size: 100%;
168 width: 8em;
169 }
171 .searchbox input[type=text] {
172 width: 8em;
173 padding: 0.25ex 0.25em 0.25ex 0.25em;
174 margin-right: 0.5em;
175 font-size: 100%;
176 }
178 .searchbox input[type=submit] {
179 font-size: 100%;
180 }
182 /*************************************************************************
183 * Title of current page including path and actions
184 */
186 .title_bar {
187 border-bottom: 1px solid #777;
188 padding-top: 1ex;
189 padding-bottom: 0.5ex;
190 }
192 .title_bar_content {
193 margin-left: 1em;
194 }
196 .path {
197 color: #444;
198 }
200 .path div {
201 font-size: 100%;
202 line-height: 180%;
203 }
205 .path a {
206 color: #444;
207 }
209 .slot_path div {
210 display: inline;
211 margin-left: 1em;
212 margin-right: 1em;
213 }
215 .title {
216 color: #000;
217 margin-bottom: 0.5ex;
218 }
220 .slot_title {
221 }
223 .title div {
224 font-weight: bold;
225 font-size: 135%;
226 line-height: 110%;
227 }
229 .title a {
230 color: #000;
231 }
233 .member_image_avatar {
234 float: left;
235 margin-right: 0.5em;
236 }
238 .actions {
239 font-size: 75%;
240 line-height: 220%;
241 }
243 .slot_actions {
244 display: inline;
245 }
247 .actions a {
248 float: left;
249 display: block;
250 padding: 1px 0.5em 1px 0.0em;
251 margin-right: 1em;
252 vertical-align: middle;
253 }
255 .content_navigation {
256 font-size: 75%;
257 background-color: #eee;
258 margin-bottom: 2ex;
259 padding-left: 1em;
260 }
262 .content_navigation div,
263 .content_navigation a {
264 display: inline-block;
265 padding: 3px 0.5em 3px 0.0em;
266 margin-right: 1em;
267 vertical-align: middle;
268 }
270 .content_navigation a:hover {
271 background-color: #d7d7d7;
272 }
274 .actions a:hover {
275 background-color: #d7d7d7;
276 }
278 .actions img {
279 padding-left: 0.2em;
280 padding-right: 0.2em;
281 vertical-align: middle;
282 }
284 .logo {
285 float: right;
286 margin-right: 1em;
287 }
292 /*************************************************************************
293 * vote info / delegation
294 */
296 .interest,
297 .slot_support,
298 .delegation,
299 .voting_requested {
300 float: left;
301 position: relative;
302 z-index: 1;
303 }
305 .interest img,
306 .slot_support img,
307 .delegation img,
308 .voting_requested img {
309 padding-left: 0.2em;
310 padding-right: 0.2em;
311 }
312 .vote_info .head {
313 float: left;
314 margin-right: 1em;
315 }
317 .interest .head_active,
318 .slot_support .head_potential_supporter{
319 background-color: #fec;
320 border: 1px solid #b96;
321 }
323 .interest .head_autoreject {
324 background-color: #fdd;
325 border: 1px solid #b77;
326 }
328 .slot_support .head_supporter {
329 background-color: #dfc;
330 border: 1px solid #8b8;
331 }
333 .slot_support .head_initiator {
334 background-color: #eee;
335 border: 1px solid #999;
336 }
338 .delegation .head_active {
339 background-color: #ddf;
340 border: 1px solid #88b;
341 }
343 .delegation .change_delegation {
344 margin-bottom: 2ex;
345 }
347 .delegation .change_delegation a {
348 display: inline;
349 float: none;
350 padding: 1ex;
351 }
353 .delegation .delegation_participation {
354 margin-left: 20.5em;
355 margin-top: 3ex;
356 font-style: italic;
357 font-size: 80%;
358 }
360 .voting_requested .head_active {
361 background-color: #fdd;
362 border: 1px solid #b77;
363 }
365 .vote_info .close {
366 position: absolute;
367 top: 0;
368 right: 0;
369 padding: 1ex;
370 display: block;
371 }
373 .vote_info .content {
374 font-size: 133%;
375 line-height: 100%;
376 top: 3ex;
377 display: none;
378 position: absolute;
379 z-index: 10;
380 background-color: #fff;
381 border: 1px solid #999;
382 padding: 1em;
383 width: 35em;
384 }
386 .vote_info .delegation_arrow {
387 margin-top: 1ex;
388 margin-bottom: 1ex;
389 vertical-align: middle;
390 }
392 .vote_info .delegation_arrow_overridden {
393 opacity: 0.4;
394 }
396 .vote_info .delegation_scope_overridden {
397 color: #777;
398 }
400 .vote_info .delegation_scope {
401 display: inline;
402 }
404 .vote_info .delegation_info {
405 }
407 .vote_info .member_thumb {
408 clear: left;
409 }
411 .delegation_overridden .member_thumb {
412 opacity: 0.4;
413 }
415 .delegation .revoke {
416 margin: 0.5ex;
417 float: right;
418 }
420 .delegation .revoke img {
421 vertical-align: middle;
422 }
425 .sub_title div {
426 padding-top: 1ex;
427 margin-top: 1ex;
428 font-weight: bold;
429 font-size: 135%;
430 line-height: 110%;
431 }
433 /*************************************************************************
434 * Main content
435 */
437 .main {
438 margin-left: 1em;
439 margin-right: 1em;
440 }
443 /*************************************************************************
444 * ui.tab
445 */
447 .ui_tabs_links {
448 margin-top: 4ex;
449 font-size: 75%;
450 }
452 .ui_tabs_links a {
453 padding: 1ex;
454 line-height: 200%;
455 background-color: #e7e7e7;
456 white-space: nowrap;
457 }
459 .ui_tabs_links a:hover {
460 background-color: #d7d7d7;
461 }
463 .ui_tabs_links a.selected {
464 background-color: #444;
465 color: #fff;
466 text-decoration: none;
467 padding: 1ex;
468 }
470 .ui_tabs_content {
471 border: 1px solid #444;
472 padding: 1ex 1ex 1ex 1ex;
473 }
475 .web10 .ui_tabs_accordeon_head {
476 margin-bottom: 1ex;
477 }
479 .web20 .ui_tabs_accordeon_head {
480 font-size: 80%;
481 font-weight: bold;
482 display: block;
483 background: #eee;
484 border: 1px solid #bbb;
485 color: #000;
486 padding: 0.75ex;
487 margin-top: 2ex;
488 cursor: pointer;
489 }
491 .web20 .ui_tabs_accordeon_head img {
492 vertical-align: middle;
493 margin-right: 0.5em;
494 }
496 .web20 .ui_tabs_accordeon_head .bargraph {
497 margin-right: 0.5em;
498 }
500 .web20 .ui_tabs_accordeon_content {
501 border: 1px solid #aaa;
502 border-top: none;
503 padding: 2ex 1em 2ex 1em;
504 margin-bottom: 3ex;
505 }
507 .web20 .issue_initiative_list .ui_tabs_accordeon_head {
508 background-color: #e5e5ff;
509 }
511 .web20 .issue_initiative_list .ui_tabs_accordeon_head,
512 .web20 .issue_initiative_list .ui_tabs_accordeon_content {
513 border-color: #aad;
514 }
516 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_content {
517 border-color: #bbb;
518 border-width: 1px;
519 }
521 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_head {
522 background-color: #eee;
523 border: 1px solid #bbb;
524 }
526 .web20 .issue_initiative_list .ui_tabs_accordeon_head a {
527 font-size: 120%;
528 }
530 .ui_tabs_links a.yellow {
531 background-color: #fec;
532 color: #000;
533 }
535 .ui_tabs_links a.yellow:hover {
536 background-color: #edb;
537 }
539 .ui_tabs_links a.yellow.selected {
540 background-color: #654;
541 color: #fff;
542 text-decoration: none;
543 padding: 1ex;
544 }
546 .web20 .ui_tabs_accordeon_head.yellow {
547 background-color: #fec;
548 border-color: #b96;
549 xpadding: 1ex;
550 xmargin-bottom: 2ex;
551 }
553 .web20 .ui_tabs_accordeon_content.yellow {
554 border-color: #b96;
555 }
557 /*************************************************************************
558 * ui.filters
559 */
561 .ui_filter_closed_head,
562 .ui_filter_head {
563 color: #777;
564 margin-top: 1ex;
565 margin-bottom: 1.5ex;
566 font-size: 75%;
567 }
569 .ui_filter_head a {
570 color: #777;
571 padding: 0.5ex;
572 }
574 .ui_filter_head a.active {
575 color: #fff;
576 background-color: #777;
577 padding: 0.5ex;
578 }
580 /*************************************************************************
581 * ui.paginate
582 */
584 .ui_paginate_head {
585 margin-bottom: 1ex;
586 }
588 .ui_paginate_foot {
589 margin-top: 1ex;
590 }
592 .ui_paginate_select a {
593 padding: 0.5ex;
594 }
596 /*************************************************************************
597 * ui.bargraph
598 */
600 .bargraph {
601 width: 103px;
602 }
604 .bargraph50 {
605 width: 52px;
606 }
608 .bargraph div {
609 float: left;
610 margin-top: 0.5ex;
611 height: 1.3ex;
612 }
614 .bargraph_legend {
615 margin-top: 2ex;
616 }
618 .bargraph_legend .bargraph {
619 width: 26px;
620 }
622 .bargraph_legend div,
623 .bargraph_legend div div,
624 .bargraph_legend div div div {
625 float: left;
626 }
628 .bargraph_legend_label {
629 margin-left: 0.5em;
630 margin-right: 1em;
631 }
633 /*************************************************************************
634 * vertical ui.form
635 */
637 .login input[type=text],
638 .vertical input[type=text],
639 .login input[type=password],
640 .vertical input[type=password],
641 .vertical textarea,
642 .vertical select {
643 font-family: sans-serif;
644 font-size: 100%;
645 width: 50em;
646 border: 1px solid #444;
647 padding: 0.2ex 0.2em 0.2ex 0.2em;
648 margin-bottom: 1ex;
649 }
651 .login input[type=password],
652 .vertical input[type=password] {
653 width: 16em;
654 }
656 .vertical select {
657 padding-right: 0;
658 }
660 .login .ui_field_label,
661 .vertical .ui_field_label {
662 text-transform: uppercase;
663 font-size: 70%;
664 line-height: 120%;
665 font-weight: bold;
666 color: #777;
667 width: 15em;
668 display: block;
669 float: left;
670 clear: left;
671 text-align: right;
672 padding-right: 0.5em;
673 }
675 .ui_field_label.label_right {
676 text-align: left;
677 width: auto;
678 }
680 .login input[type=text],
681 .login input[type=password] {
682 width: 10em;
683 }
685 .login div,
686 .vertical div {
687 clear: left;
688 }
690 .vertical span {
691 display: block;
692 margin-bottom: 0.5ex;
693 }
695 .vertical span:after {
696 content: " ";
697 }
699 .vertical span span {
700 display: inline;
701 margin-bottom: 0;
702 }
704 .login input[type=submit],
705 .vertical input[type=submit] {
706 font-size: 100%;
707 margin-left: 11em;
708 background-color: #444444;
709 color: #fff;
710 border: none;
711 padding: 0.75ex;
712 }
714 .login input[type=submit]:hover,
715 .vertical input[type=submit]:hover {
716 background-color: #444444;
717 }
719 /*************************************************************************
720 * Tables
721 */
724 table a.action {
725 font-size: 70%;
726 line-height: 190%;
727 padding: 0.5ex;
728 color: #777;
729 }
731 table a.active {
732 color: #fff;
733 }
735 th {
736 text-align: left;
737 border-bottom: 1px solid #000;
738 }
740 tr:hover td {
741 background-color: #ddd;
742 }
744 .nohover tr:hover td {
745 background-color: #fff;
746 }
748 .nohover table tr:hover td {
749 background-color: #ddd;
750 }
753 tr table tr:hover td {
754 background-color: #fff;
755 }
758 /*************************************************************************
759 * Hidden inline form
760 */
762 .hidden_inline_form {
763 display: none;
764 border: 1px solid #444;
765 width: 42em;
766 position: fixed;
767 background-color: #fff;
768 left: 5em;
769 top: 5ex;
770 z-index: 2;
771 }
773 .hidden_inline_form a {
774 padding: 0.5ex;
775 color: #fff;
776 }
779 .hidden_inline_form .head {
780 background-color: #444;
781 color: #fff;
782 display: block;
783 padding: 0.5ex;
784 }
786 .hidden_inline_form input[type=text],
787 .hidden_inline_form textarea,
788 .hidden_inline_form select {
789 width: 30em;
790 }
792 /*************************************************************************
793 * Positive / Negtive votes
794 */
797 .positive_votes span {
798 display: inline;
799 }
801 .positive_votes {
802 display: inline;
803 background-color: #cfc;
804 padding: 0.3ex 0.5em 0.3ex 0.5em;
805 }
807 .negative_votes span {
808 display: inline;
809 }
811 .negative_votes {
812 display: inline;
813 background-color: #fcc;
814 padding: 0.3ex 0.5em 0.3ex 0.5em;
815 }
817 .suggestion_my_opinion a,
818 .suggestion_my_opinion span {
819 white-space: nowrap;
820 padding-left: 0.2ex !important;
821 padding-right: 0.2ex !important;
822 }
824 .active {
825 background-color: #444;
826 color: #fff;
827 }
829 .active_red2 { background-color: #a00; color: #fff !important; }
830 .active_red1 { background-color: #f88; color: #000 !important; }
831 .active_green1 { background-color: #8f8; color: #000 !important; }
832 .active_green2 { background-color: #0a0; color: #000 !important; }
837 /*************************************************************************
838 * Issues
839 */
841 .issues tr {
842 border: 1px solid #ccc;
843 }
845 .issues tr tr {
846 border: none;
847 }
849 .lang_chooser {
850 float: right;
851 margin-right: 0.5em;
852 }
854 .delegation_list_entry {
855 margin-right: 2em;
856 margin-bottom: 2ex;
857 float: left;
858 clear: left;
859 }
861 .delegation_list_entry .delegation_arrow {
862 float: left;
863 }
865 .delegation_list_entry .delegation_scope {
866 float: left;
867 width: 25em;
868 }
870 .delegation_list_entry .delegation_scope a {
871 display: block;
872 }
874 .member_list .member_thumb {
875 float: left;
876 margin-right: 1em;
877 margin-bottom: 2ex;
878 }
880 .member_thumb {
881 text-decoration: none;
882 width: 14.5em;
883 height: 48px;
884 display: block;
885 float: left;
886 border: 1px solid #999;
887 overflow: hidden;
888 xwhite-space: nowrap;
889 position: relative;
890 }
892 .member_thumb a{
893 position: absolute;
894 top: 0;
895 left: 0;
896 padding: 0;
897 margin: 0;
898 }
900 .member_thumb a:hover div {
901 background-color: #444;
902 color: #fff;
903 }
905 .member_thumb img {
906 padding: 0;
907 margin: 0;
908 vertical-align: bottom;
909 }
911 .member_thumb div {
912 }
914 .member_thumb .member_image {
915 }
917 .member_thumb .member_name {
918 position: absolute;
919 left: 48px;
920 top: 2ex;
921 font-size: 100%;
922 width: 14em;
923 }
925 .member_thumb .flags {
926 text-align: right;
927 font-size: 75%;
928 }
930 .member_thumb .flags a,
931 .member_thumb .flags img {
932 position: static;
933 float: right;
934 margin-left: 0.5em;
935 }
938 .member .right {
939 float: right;
940 }
942 .member_thumb.not_accepted,
943 .member_thumb.not_informed {
944 opacity: 0.5;
945 }
947 .member_statement,
948 .draft_content,
949 .suggestion_content {
950 background-color: #eee;
951 border: 1px solid #ccc;
952 padding-left: 1ex;
953 padding-right: 1ex;
954 }
957 .suggestion_content,
958 #suggestion_description {
959 font-family: monospace;
960 }
962 .diff {
963 background-color: #eee;
964 border: 1px solid #ccc;
965 padding: 1ex;
966 }
968 .diff_added {
969 background-color: #cfc;
970 text-decoration: underline;
971 }
973 .diff_removed {
974 background-color: #fcc;
975 text-decoration: line-through;
976 }
978 .slot_issue_info {
979 background-color: #eee;
980 border: 1px solid #ccc;
981 float: right;
982 padding: 0.5ex;
983 line-height: 130%;
984 margin-right: 1em;
985 }
987 .issue_info label {
988 float: left;
989 width: 8em;
990 text-transform: uppercase;
991 font-size: 70%;
992 color: #777;
993 font-weight: bold;
994 clear: left;
995 text-align: right;
996 margin-right: 0.7em;
997 }
999 .admitted_info {
1000 background-color: #dfd;
1001 padding: 1ex;
1002 margin-bottom: 2ex;
1005 .not_admitted_info,
1006 .revoked_info {
1007 background-color: #fdd;
1008 padding: 1ex;
1009 margin-bottom: 2ex;
1012 .draft_updated_info,
1013 .voting_active_info,
1014 .initiator_invite_info,
1015 .motd,
1016 .public_access_issue_head {
1017 background-color: #fec;
1018 border: 1px solid #b96;
1019 padding: 1ex;
1020 margin-bottom: 2ex;
1023 .suggestion_fulfilled {
1024 width: 15em;
1026 .suggestion_fulfilled a.action {
1027 padding-left: 0;
1028 line-height: 120%;
1031 .help,
1032 .use_terms {
1033 border: 1px solid #bcd;
1034 background-color: #def;
1035 color: #000;
1036 padding: 1ex;
1039 .help_visible {
1040 margin-bottom: 1ex;
1043 .help_visible .help_icon {
1044 float: right;
1047 .slot_help_hidden {
1048 float: right;
1049 margin-right: 1em;
1052 .help_actions {
1053 font-size: 75%;
1054 float: right;
1057 .help_actions a {
1058 margin-right: 1em;
1059 color: #468;
1062 .wiki {
1065 .wiki h1,
1066 .wiki h2,
1067 .wiki h3,
1068 .wiki h4 {
1069 margin-top: 1ex;
1070 margin-bottom: 1ex;
1073 .wiki h1 {
1074 font-size: 150%;
1077 .wiki h2 {
1078 font-size: 125%;
1081 .wiki p {
1082 margin-top: 1ex;
1083 margin-bottom: 1ex;
1086 form .warning {
1087 background-color: #ffd;
1088 color: #000;
1089 border: 1px solid #dda;
1090 margin: 1ex;
1091 margin-bottom: 2ex;
1092 padding: 1ex;
1095 a.not_voted {
1096 display: block;
1097 background-color: #fec;
1098 color: #000;
1101 .action_active {
1102 background-color: #fec;
1105 .heading {
1106 font-size: 120%;
1107 font-weight: bold;
1108 margin-top: 2ex;
1109 margin-bottom: 1ex;
1112 .heading.first {
1113 margin-top: 0;
1116 .menu_list li {
1117 padding-top: 1ex;
1118 padding-bottom: 1ex;
1121 .deactivated_member_info {
1122 background-color: #a00;
1123 color: #fff;
1126 /*************************************************************************
1127 * Voting
1128 */
1130 #voting {
1131 position: relative;
1133 #voting .approval, .abstention, .disapproval {
1134 border: 2px black solid;
1135 margin-top: 5ex;
1136 margin-bottom: 5ex;
1137 padding: 1ex;
1138 padding-bottom: 2ex;
1140 #voting .approval {
1141 background-color: #9f9;
1143 #voting .approval .movable {
1144 background-color: #dfd;
1146 #voting .abstention {
1147 background-color: #ccc;
1149 #voting .abstention .movable {
1150 background-color: #eee;
1152 #voting .disapproval {
1153 background-color: #f88;
1155 #voting .disapproval .movable {
1156 background-color: #fbb;
1158 #voting .cathead {
1159 font-weight: bold;
1161 #voting .movable {
1162 position: relative;
1163 border: 1px black solid;
1164 margin: 1ex;
1165 padding: 0.5ex;
1167 #voting .voting_form_active .movable {
1168 cursor: pointer;
1170 #voting .voting_form_active .clickable {
1171 cursor: auto;
1173 #voting .voting_form_active a.clickable {
1174 cursor: pointer;
1177 #voting .grabber {
1178 vertical-align: middle;
1179 cursor: move;
1182 /*************************************************************************
1183 * timeline
1184 */
1185 div.ignore_area_list {
1186 float: left;
1187 width: 90%;
1188 margin: 20px 0 1em 0;
1191 div.ignore_area_list >
1192 label.ui_field_label {
1193 text-align: left ;
1194 width: 100%;
1195 border-bottom:1px solid #000000;
1196 color: #000000;
1197 font-size:75%;
1198 font-weight:bold;
1199 vertical-align:bottom;
1200 text-transform:none;
1201 padding:0.5ex 0.5em
1204 div.ignore_area_item {
1205 clear: none;
1206 float: left;
1207 width: 20em;
1208 margin: 0.1ex 0.5em;
1211 div.ignore_area_item > input {
1212 float: none;
1213 clear: none;
1214 display: inline;
1217 div.ignore_area_item >
1218 label.ui_field_label {
1219 float: none;
1220 clear: none;
1221 text-align: left;
1222 display: inline;
1225 div.timeline_results {
1226 clear: both;

Impressum / About Us