liquid_feedback_frontend
view static/style.css @ 127:4fb486bce608
add pageinator to issue view.
this "paginator" shows links to the prev/area/next issues that have the same
state then the current one. This helps a lot when inspecting new issues or voting.
The voting filter works a little bit different, as he also activtes the not_voted subfilter
because it is most likely only not voted issues are interessting to the user
this "paginator" shows links to the prev/area/next issues that have the same
state then the current one. This helps a lot when inspecting new issues or voting.
The voting filter works a little bit different, as he also activtes the not_voted subfilter
because it is most likely only not voted issues are interessting to the user
| author | Daniel Poelzleithner <poelzi@poelzi.org> |
|---|---|
| date | Tue Oct 05 04:44:06 2010 +0200 (2010-10-05) |
| parents | 6a12fb7e4963 |
| children | e1b916d2e489 |
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 }
74 /*************************************************************************
75 * Notices, warnings and errors
76 */
78 .layout_notice, .layout_error, .layout_warning {
79 background: #fff;
80 font-weight: bold;
81 line-height: 1.7em;
82 -moz-opacity:0.7;
83 }
85 .slot_notice, .slot_warning, .slot_error {
86 padding-left: 1em;
87 }
89 .slot_notice {
90 background-color: #cfc;
91 color: #040;
92 }
94 .slot_warning {
95 background-color: #fec;
96 color: #420;
97 }
99 .slot_error {
100 background-color: #fcc;
101 color: #400;
102 }
104 /*************************************************************************
105 * Navigation, search and language chooser bar
106 */
108 .topbar {
109 background-color: #444;
110 color: #fff;
111 font-size: 75%;
112 line-height: 140%;
113 margin-bottom: 1.8ex;
114 }
116 .topbar a {
117 background-color: #444;
118 color: #fff;
119 }
121 .topbar a:hover {
122 background-color: #fff;
123 color: #000;
124 }
126 .navigation,
127 .logout_button {
128 line-height: 250%;
129 }
131 .navigation img,
132 .logout_button img {
133 margin-right: 0.5em;
134 vertical-align: middle;
135 }
137 .navigation a,
138 .logout_button a {
139 padding: 1ex;
140 }
142 .logout_button {
143 float: right;
144 }
146 .searchbox {
147 margin: 0;
148 padding: 0.1ex 1em 0ex 1em;
149 float: right;
150 line-height: 250%;
151 }
153 .searchbox form {
154 float: left;
155 }
157 .searchbox div {
158 display: inline;
159 }
161 .searchbox select {
162 margin-left: 0.3em;
163 margin-right: 0.4em;
164 font-size: 100%;
165 width: 8em;
166 }
168 .searchbox input[type=text] {
169 width: 8em;
170 padding: 0.25ex 0.25em 0.25ex 0.25em;
171 margin-right: 0.5em;
172 font-size: 100%;
173 }
175 .searchbox input[type=submit] {
176 font-size: 100%;
177 }
179 /*************************************************************************
180 * Title of current page including path and actions
181 */
183 .title_bar {
184 border-bottom: 1px solid #777;
185 padding-top: 1ex;
186 padding-bottom: 0.5ex;
187 }
189 .title_bar_content {
190 margin-left: 1em;
191 }
193 .path {
194 color: #444;
195 }
197 .path div {
198 font-size: 100%;
199 line-height: 180%;
200 }
202 .path a {
203 color: #444;
204 }
206 .slot_path div {
207 display: inline;
208 margin-left: 1em;
209 margin-right: 1em;
210 }
212 .title {
213 color: #000;
214 margin-bottom: 0.5ex;
215 }
217 .slot_title {
218 }
220 .title div {
221 font-weight: bold;
222 font-size: 135%;
223 line-height: 110%;
224 }
226 .title a {
227 color: #000;
228 }
230 .member_image_avatar {
231 float: left;
232 margin-right: 0.5em;
233 }
235 .actions {
236 font-size: 75%;
237 line-height: 220%;
238 }
240 .slot_actions {
241 display: inline;
242 }
244 .actions a {
245 float: left;
246 display: block;
247 padding: 1px 0.5em 1px 0.0em;
248 margin-right: 1em;
249 vertical-align: middle;
250 }
252 .content_navigation {
253 font-size: 75%;
254 background-color: #eee;
255 margin-bottom: 2ex;
256 padding-left: 1em;
257 }
259 .content_navigation div,
260 .content_navigation a {
261 display: inline-block;
262 padding: 3px 0.5em 3px 0.0em;
263 margin-right: 1em;
264 vertical-align: middle;
265 }
267 .actions a:hover {
268 background-color: #d7d7d7;
269 }
271 .actions img {
272 padding-left: 0.2em;
273 padding-right: 0.2em;
274 vertical-align: middle;
275 }
277 .logo {
278 float: right;
279 margin-right: 1em;
280 }
285 /*************************************************************************
286 * vote info / delegation
287 */
289 .interest,
290 .slot_support,
291 .delegation,
292 .voting_requested {
293 float: left;
294 position: relative;
295 z-index: 1;
296 }
298 .interest img,
299 .slot_support img,
300 .delegation img,
301 .voting_requested img {
302 padding-left: 0.2em;
303 padding-right: 0.2em;
304 }
305 .vote_info .head {
306 float: left;
307 margin-right: 1em;
308 }
310 .interest .head_active,
311 .slot_support .head_potential_supporter{
312 background-color: #fec;
313 border: 1px solid #b96;
314 }
316 .interest .head_autoreject {
317 background-color: #fdd;
318 border: 1px solid #b77;
319 }
321 .slot_support .head_supporter {
322 background-color: #dfc;
323 border: 1px solid #8b8;
324 }
326 .slot_support .head_initiator {
327 background-color: #eee;
328 border: 1px solid #999;
329 }
331 .delegation .head_active {
332 background-color: #ddf;
333 border: 1px solid #88b;
334 }
336 .delegation .change_delegation {
337 margin-bottom: 2ex;
338 }
340 .delegation .change_delegation a {
341 display: inline;
342 float: none;
343 padding: 1ex;
344 }
346 .delegation .delegation_participation {
347 margin-left: 20.5em;
348 margin-top: 3ex;
349 font-style: italic;
350 font-size: 80%;
351 }
353 .voting_requested .head_active {
354 background-color: #fdd;
355 border: 1px solid #b77;
356 }
358 .vote_info .close {
359 position: absolute;
360 top: 0;
361 right: 0;
362 padding: 1ex;
363 display: block;
364 }
366 .vote_info .content {
367 font-size: 133%;
368 line-height: 100%;
369 top: 3ex;
370 display: none;
371 position: absolute;
372 z-index: 10;
373 background-color: #fff;
374 border: 1px solid #999;
375 padding: 1em;
376 width: 35em;
377 }
379 .vote_info .delegation_arrow {
380 margin-top: 1ex;
381 margin-bottom: 1ex;
382 vertical-align: middle;
383 }
385 .vote_info .delegation_arrow_overridden {
386 opacity: 0.4;
387 }
389 .vote_info .delegation_scope_overridden {
390 color: #777;
391 }
393 .vote_info .delegation_scope {
394 display: inline;
395 }
397 .vote_info .delegation_info {
398 }
400 .vote_info .member_thumb {
401 clear: left;
402 }
404 .delegation_overridden .member_thumb {
405 opacity: 0.4;
406 }
408 .delegation .revoke {
409 margin: 0.5ex;
410 float: right;
411 }
413 .delegation .revoke img {
414 vertical-align: middle;
415 }
418 .sub_title div {
419 padding-top: 1ex;
420 margin-top: 1ex;
421 font-weight: bold;
422 font-size: 135%;
423 line-height: 110%;
424 }
426 /*************************************************************************
427 * Main content
428 */
430 .main {
431 margin-left: 1em;
432 margin-right: 1em;
433 }
436 /*************************************************************************
437 * ui.tab
438 */
440 .ui_tabs_links {
441 margin-top: 4ex;
442 font-size: 75%;
443 }
445 .ui_tabs_links a {
446 padding: 1ex;
447 line-height: 200%;
448 background-color: #e7e7e7;
449 white-space: nowrap;
450 }
452 .ui_tabs_links a:hover {
453 background-color: #d7d7d7;
454 }
456 .ui_tabs_links a.selected {
457 background-color: #444;
458 color: #fff;
459 text-decoration: none;
460 padding: 1ex;
461 }
463 .ui_tabs_content {
464 border: 1px solid #444;
465 padding: 1ex 1ex 1ex 1ex;
466 }
468 .web10 .ui_tabs_accordeon_head {
469 margin-bottom: 1ex;
470 }
472 .web20 .ui_tabs_accordeon_head {
473 font-size: 80%;
474 font-weight: bold;
475 display: block;
476 background: #eee;
477 border: 1px solid #bbb;
478 color: #000;
479 padding: 0.75ex;
480 margin-top: 2ex;
481 cursor: pointer;
482 }
484 .web20 .ui_tabs_accordeon_head img {
485 vertical-align: middle;
486 margin-right: 0.5em;
487 }
489 .web20 .ui_tabs_accordeon_head .bargraph {
490 margin-right: 0.5em;
491 }
493 .web20 .ui_tabs_accordeon_content {
494 border: 1px solid #aaa;
495 border-top: none;
496 padding: 2ex 1em 2ex 1em;
497 margin-bottom: 3ex;
498 }
500 .web20 .issue_initiative_list .ui_tabs_accordeon_head {
501 background-color: #e5e5ff;
502 }
504 .web20 .issue_initiative_list .ui_tabs_accordeon_head,
505 .web20 .issue_initiative_list .ui_tabs_accordeon_content {
506 border-color: #aad;
507 }
509 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_content {
510 border-color: #bbb;
511 border-width: 1px;
512 }
514 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_head {
515 background-color: #eee;
516 border: 1px solid #bbb;
517 }
519 .web20 .issue_initiative_list .ui_tabs_accordeon_head a {
520 font-size: 120%;
521 }
523 .ui_tabs_links a.yellow {
524 background-color: #fec;
525 color: #000;
526 }
528 .ui_tabs_links a.yellow:hover {
529 background-color: #edb;
530 }
532 .ui_tabs_links a.yellow.selected {
533 background-color: #654;
534 color: #fff;
535 text-decoration: none;
536 padding: 1ex;
537 }
539 .web20 .ui_tabs_accordeon_head.yellow {
540 background-color: #fec;
541 border-color: #b96;
542 xpadding: 1ex;
543 xmargin-bottom: 2ex;
544 }
546 .web20 .ui_tabs_accordeon_content.yellow {
547 border-color: #b96;
548 }
550 /*************************************************************************
551 * ui.filters
552 */
554 .ui_filter_closed_head,
555 .ui_filter_head {
556 color: #777;
557 margin-top: 1ex;
558 margin-bottom: 1.5ex;
559 font-size: 75%;
560 }
562 .ui_filter_head a {
563 color: #777;
564 padding: 0.5ex;
565 }
567 .ui_filter_head a.active {
568 color: #fff;
569 background-color: #777;
570 padding: 0.5ex;
571 }
573 /*************************************************************************
574 * ui.paginate
575 */
577 .ui_paginate_head {
578 margin-bottom: 1ex;
579 }
581 .ui_paginate_foot {
582 margin-top: 1ex;
583 }
585 .ui_paginate_select a {
586 padding: 0.5ex;
587 }
589 /*************************************************************************
590 * ui.bargraph
591 */
593 .bargraph {
594 width: 103px;
595 }
597 .bargraph50 {
598 width: 52px;
599 }
601 .bargraph div {
602 float: left;
603 margin-top: 0.5ex;
604 height: 1.3ex;
605 }
607 .bargraph_legend {
608 margin-top: 2ex;
609 }
611 .bargraph_legend .bargraph {
612 width: 26px;
613 }
615 .bargraph_legend div,
616 .bargraph_legend div div,
617 .bargraph_legend div div div {
618 float: left;
619 }
621 .bargraph_legend_label {
622 margin-left: 0.5em;
623 margin-right: 1em;
624 }
626 /*************************************************************************
627 * vertical ui.form
628 */
630 .login input[type=text],
631 .vertical input[type=text],
632 .login input[type=password],
633 .vertical input[type=password],
634 .vertical textarea,
635 .vertical select {
636 font-family: sans-serif;
637 font-size: 100%;
638 width: 50em;
639 border: 1px solid #444;
640 padding: 0.2ex 0.2em 0.2ex 0.2em;
641 margin-bottom: 1ex;
642 }
644 .login input[type=password],
645 .vertical input[type=password] {
646 width: 16em;
647 }
649 .vertical select {
650 padding-right: 0;
651 }
653 .login .ui_field_label,
654 .vertical .ui_field_label {
655 text-transform: uppercase;
656 font-size: 70%;
657 line-height: 120%;
658 font-weight: bold;
659 color: #777;
660 width: 15em;
661 display: block;
662 float: left;
663 clear: left;
664 text-align: right;
665 padding-right: 0.5em;
666 }
668 .ui_field_label.label_right {
669 text-align: left;
670 width: auto;
671 }
673 .login input[type=text],
674 .login input[type=password] {
675 width: 10em;
676 }
678 .login div,
679 .vertical div {
680 clear: left;
681 }
683 .vertical span {
684 display: block;
685 margin-bottom: 0.5ex;
686 }
688 .vertical span:after {
689 content: " ";
690 }
692 .vertical span span {
693 display: inline;
694 margin-bottom: 0;
695 }
697 .login input[type=submit],
698 .vertical input[type=submit] {
699 font-size: 100%;
700 margin-left: 11em;
701 background-color: #444444;
702 color: #fff;
703 border: none;
704 padding: 0.75ex;
705 }
707 .login input[type=submit]:hover,
708 .vertical input[type=submit]:hover {
709 background-color: #444444;
710 }
712 /*************************************************************************
713 * Tables
714 */
717 table a.action {
718 font-size: 70%;
719 line-height: 190%;
720 padding: 0.5ex;
721 color: #777;
722 }
724 table a.active {
725 color: #fff;
726 }
728 th {
729 text-align: left;
730 border-bottom: 1px solid #000;
731 }
733 tr:hover td {
734 background-color: #ddd;
735 }
737 .nohover tr:hover td {
738 background-color: #fff;
739 }
741 .nohover table tr:hover td {
742 background-color: #ddd;
743 }
746 tr table tr:hover td {
747 background-color: #fff;
748 }
751 /*************************************************************************
752 * Hidden inline form
753 */
755 .hidden_inline_form {
756 display: none;
757 border: 1px solid #444;
758 width: 42em;
759 position: fixed;
760 background-color: #fff;
761 left: 5em;
762 top: 5ex;
763 z-index: 2;
764 }
766 .hidden_inline_form a {
767 padding: 0.5ex;
768 color: #fff;
769 }
772 .hidden_inline_form .head {
773 background-color: #444;
774 color: #fff;
775 display: block;
776 padding: 0.5ex;
777 }
779 .hidden_inline_form input[type=text],
780 .hidden_inline_form textarea,
781 .hidden_inline_form select {
782 width: 30em;
783 }
785 /*************************************************************************
786 * Positive / Negtive votes
787 */
790 .positive_votes span {
791 display: inline;
792 }
794 .positive_votes {
795 display: inline;
796 background-color: #cfc;
797 padding: 0.3ex 0.5em 0.3ex 0.5em;
798 }
800 .negative_votes span {
801 display: inline;
802 }
804 .negative_votes {
805 display: inline;
806 background-color: #fcc;
807 padding: 0.3ex 0.5em 0.3ex 0.5em;
808 }
810 .suggestion_my_opinion a,
811 .suggestion_my_opinion span {
812 white-space: nowrap;
813 padding-left: 0.2ex !important;
814 padding-right: 0.2ex !important;
815 }
817 .active {
818 background-color: #444;
819 color: #fff;
820 }
822 .active_red2 { background-color: #a00; color: #fff !important; }
823 .active_red1 { background-color: #f88; color: #000 !important; }
824 .active_green1 { background-color: #8f8; color: #000 !important; }
825 .active_green2 { background-color: #0a0; color: #000 !important; }
830 /*************************************************************************
831 * Issues
832 */
834 .issues tr {
835 border: 1px solid #ccc;
836 }
838 .issues tr tr {
839 border: none;
840 }
842 .lang_chooser {
843 float: right;
844 margin-right: 0.5em;
845 }
847 .delegation_list_entry {
848 margin-right: 2em;
849 margin-bottom: 2ex;
850 float: left;
851 clear: left;
852 }
854 .delegation_list_entry .delegation_arrow {
855 float: left;
856 }
858 .delegation_list_entry .delegation_scope {
859 float: left;
860 width: 25em;
861 }
863 .delegation_list_entry .delegation_scope a {
864 display: block;
865 }
867 .member_list .member_thumb {
868 float: left;
869 margin-right: 1em;
870 margin-bottom: 2ex;
871 }
873 .member_thumb {
874 text-decoration: none;
875 width: 14.5em;
876 height: 48px;
877 display: block;
878 float: left;
879 border: 1px solid #999;
880 overflow: hidden;
881 xwhite-space: nowrap;
882 position: relative;
883 }
885 .member_thumb a{
886 position: absolute;
887 top: 0;
888 left: 0;
889 padding: 0;
890 margin: 0;
891 }
893 .member_thumb a:hover div {
894 background-color: #444;
895 color: #fff;
896 }
898 .member_thumb img {
899 padding: 0;
900 margin: 0;
901 vertical-align: bottom;
902 }
904 .member_thumb div {
905 }
907 .member_thumb .member_image {
908 }
910 .member_thumb .member_name {
911 position: absolute;
912 left: 48px;
913 top: 2ex;
914 font-size: 100%;
915 width: 14em;
916 }
918 .member_thumb .flags {
919 text-align: right;
920 font-size: 75%;
921 }
923 .member_thumb .flags a,
924 .member_thumb .flags img {
925 position: static;
926 float: right;
927 margin-left: 0.5em;
928 }
931 .member .right {
932 float: right;
933 }
935 .member_thumb.not_accepted,
936 .member_thumb.not_informed {
937 opacity: 0.5;
938 }
940 .member_statement,
941 .draft_content,
942 .suggestion_content {
943 background-color: #eee;
944 border: 1px solid #ccc;
945 padding-left: 1ex;
946 padding-right: 1ex;
947 }
949 .diff {
950 background-color: #eee;
951 border: 1px solid #ccc;
952 padding: 1ex;
953 }
955 .diff_added {
956 background-color: #cfc;
957 text-decoration: underline;
958 }
960 .diff_removed {
961 background-color: #fcc;
962 text-decoration: line-through;
963 }
965 .slot_issue_info {
966 background-color: #eee;
967 border: 1px solid #ccc;
968 float: right;
969 padding: 0.5ex;
970 line-height: 130%;
971 margin-right: 1em;
972 }
974 .issue_info label {
975 float: left;
976 width: 8em;
977 text-transform: uppercase;
978 font-size: 70%;
979 color: #777;
980 font-weight: bold;
981 clear: left;
982 text-align: right;
983 margin-right: 0.7em;
984 }
986 .admitted_info {
987 background-color: #dfd;
988 padding: 1ex;
989 margin-bottom: 2ex;
990 }
992 .not_admitted_info,
993 .revoked_info {
994 background-color: #fdd;
995 padding: 1ex;
996 margin-bottom: 2ex;
997 }
999 .draft_updated_info,
1000 .voting_active_info,
1001 .initiator_invite_info,
1002 .motd,
1003 .public_access_issue_head {
1004 background-color: #fec;
1005 border: 1px solid #b96;
1006 padding: 1ex;
1007 margin-bottom: 2ex;
1008 }
1010 .suggestion_fulfilled {
1011 width: 15em;
1012 }
1013 .suggestion_fulfilled a.action {
1014 padding-left: 0;
1015 line-height: 120%;
1016 }
1018 .help,
1019 .use_terms {
1020 border: 1px solid #bcd;
1021 background-color: #def;
1022 color: #000;
1023 padding: 1ex;
1024 }
1026 .help_visible {
1027 margin-bottom: 1ex;
1028 }
1030 .help_visible .help_icon {
1031 float: right;
1032 }
1034 .slot_help_hidden {
1035 float: right;
1036 margin-right: 1em;
1037 }
1039 .help_actions {
1040 font-size: 75%;
1041 float: right;
1042 }
1044 .help_actions a {
1045 margin-right: 1em;
1046 color: #468;
1047 }
1049 .wiki {
1050 }
1052 .wiki h1,
1053 .wiki h2,
1054 .wiki h3,
1055 .wiki h4 {
1056 margin-top: 1ex;
1057 margin-bottom: 1ex;
1058 }
1060 .wiki h1 {
1061 font-size: 150%;
1062 }
1064 .wiki h2 {
1065 font-size: 125%;
1066 }
1068 .wiki p {
1069 margin-top: 1ex;
1070 margin-bottom: 1ex;
1071 }
1073 form .warning {
1074 background-color: #ffd;
1075 color: #000;
1076 border: 1px solid #dda;
1077 margin: 1ex;
1078 margin-bottom: 2ex;
1079 padding: 1ex;
1080 }
1082 a.not_voted {
1083 display: block;
1084 background-color: #fec;
1085 color: #000;
1086 }
1088 .action_active {
1089 background-color: #fec;
1090 }
1092 .heading {
1093 font-size: 120%;
1094 font-weight: bold;
1095 margin-top: 2ex;
1096 margin-bottom: 1ex;
1097 }
1099 .heading.first {
1100 margin-top: 0;
1101 }
1103 .menu_list li {
1104 padding-top: 1ex;
1105 padding-bottom: 1ex;
1106 }
1108 .deactivated_member_info {
1109 background-color: #a00;
1110 color: #fff;
1111 }
1113 /*************************************************************************
1114 * Voting
1115 */
1117 #voting {
1118 position: relative;
1119 }
1120 #voting .approval, .abstention, .disapproval {
1121 border: 2px black solid;
1122 margin-top: 5ex;
1123 margin-bottom: 5ex;
1124 padding: 1ex;
1125 padding-bottom: 2ex;
1126 }
1127 #voting .approval {
1128 background-color: #9f9;
1129 }
1130 #voting .approval .movable {
1131 background-color: #dfd;
1132 }
1133 #voting .abstention {
1134 background-color: #ccc;
1135 }
1136 #voting .abstention .movable {
1137 background-color: #eee;
1138 }
1139 #voting .disapproval {
1140 background-color: #f88;
1141 }
1142 #voting .disapproval .movable {
1143 background-color: #fbb;
1144 }
1145 #voting .cathead {
1146 font-weight: bold;
1147 }
1148 #voting .movable {
1149 position: relative;
1150 border: 1px black solid;
1151 margin: 1ex;
1152 padding: 0.5ex;
1153 }
1154 #voting .voting_form_active .movable {
1155 cursor: pointer;
1156 }
1157 #voting .voting_form_active .clickable {
1158 cursor: auto;
1159 }
1160 #voting .voting_form_active a.clickable {
1161 cursor: pointer;
1162 }
1164 #voting .grabber {
1165 vertical-align: middle;
1166 cursor: move;
1167 }