liquid_feedback_frontend
view static/style.css @ 112:29519f2f9929
static links allow only one tab opened at the same time
| author | jorges |
|---|---|
| date | Sun Sep 19 16:00:38 2010 +0200 (2010-09-19) |
| parents | 6a12fb7e4963 |
| children | 4fb486bce608 |
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 margin-bottom: 2ex;
186 padding-top: 1ex;
187 padding-bottom: 0.5ex;
188 }
190 .title_bar_content {
191 margin-left: 1em;
192 }
194 .path {
195 color: #444;
196 }
198 .path div {
199 font-size: 100%;
200 line-height: 180%;
201 }
203 .path a {
204 color: #444;
205 }
207 .slot_path div {
208 display: inline;
209 margin-left: 1em;
210 margin-right: 1em;
211 }
213 .title {
214 color: #000;
215 margin-bottom: 0.5ex;
216 }
218 .slot_title {
219 }
221 .title div {
222 font-weight: bold;
223 font-size: 135%;
224 line-height: 110%;
225 }
227 .title a {
228 color: #000;
229 }
231 .member_image_avatar {
232 float: left;
233 margin-right: 0.5em;
234 }
236 .actions {
237 font-size: 75%;
238 line-height: 220%;
239 }
241 .slot_actions {
242 display: inline;
243 }
245 .actions a {
246 float: left;
247 display: block;
248 padding: 1px 0.5em 1px 0.0em;
249 margin-right: 1em;
250 vertical-align: middle;
251 }
253 .actions a:hover {
254 background-color: #d7d7d7;
255 }
257 .actions img {
258 padding-left: 0.2em;
259 padding-right: 0.2em;
260 vertical-align: middle;
261 }
263 .logo {
264 float: right;
265 margin-right: 1em;
266 }
268 /*************************************************************************
269 * vote info / delegation
270 */
272 .interest,
273 .slot_support,
274 .delegation,
275 .voting_requested {
276 float: left;
277 position: relative;
278 z-index: 1;
279 }
281 .interest img,
282 .slot_support img,
283 .delegation img,
284 .voting_requested img {
285 padding-left: 0.2em;
286 padding-right: 0.2em;
287 }
288 .vote_info .head {
289 float: left;
290 margin-right: 1em;
291 }
293 .interest .head_active,
294 .slot_support .head_potential_supporter{
295 background-color: #fec;
296 border: 1px solid #b96;
297 }
299 .interest .head_autoreject {
300 background-color: #fdd;
301 border: 1px solid #b77;
302 }
304 .slot_support .head_supporter {
305 background-color: #dfc;
306 border: 1px solid #8b8;
307 }
309 .slot_support .head_initiator {
310 background-color: #eee;
311 border: 1px solid #999;
312 }
314 .delegation .head_active {
315 background-color: #ddf;
316 border: 1px solid #88b;
317 }
319 .delegation .change_delegation {
320 margin-bottom: 2ex;
321 }
323 .delegation .change_delegation a {
324 display: inline;
325 float: none;
326 padding: 1ex;
327 }
329 .delegation .delegation_participation {
330 margin-left: 20.5em;
331 margin-top: 3ex;
332 font-style: italic;
333 font-size: 80%;
334 }
336 .voting_requested .head_active {
337 background-color: #fdd;
338 border: 1px solid #b77;
339 }
341 .vote_info .close {
342 position: absolute;
343 top: 0;
344 right: 0;
345 padding: 1ex;
346 display: block;
347 }
349 .vote_info .content {
350 font-size: 133%;
351 line-height: 100%;
352 top: 3ex;
353 display: none;
354 position: absolute;
355 z-index: 10;
356 background-color: #fff;
357 border: 1px solid #999;
358 padding: 1em;
359 width: 35em;
360 }
362 .vote_info .delegation_arrow {
363 margin-top: 1ex;
364 margin-bottom: 1ex;
365 vertical-align: middle;
366 }
368 .vote_info .delegation_arrow_overridden {
369 opacity: 0.4;
370 }
372 .vote_info .delegation_scope_overridden {
373 color: #777;
374 }
376 .vote_info .delegation_scope {
377 display: inline;
378 }
380 .vote_info .delegation_info {
381 }
383 .vote_info .member_thumb {
384 clear: left;
385 }
387 .delegation_overridden .member_thumb {
388 opacity: 0.4;
389 }
391 .delegation .revoke {
392 margin: 0.5ex;
393 float: right;
394 }
396 .delegation .revoke img {
397 vertical-align: middle;
398 }
401 .sub_title div {
402 padding-top: 1ex;
403 margin-top: 1ex;
404 font-weight: bold;
405 font-size: 135%;
406 line-height: 110%;
407 }
409 /*************************************************************************
410 * Main content
411 */
413 .main {
414 margin-left: 1em;
415 margin-right: 1em;
416 }
419 /*************************************************************************
420 * ui.tab
421 */
423 .ui_tabs_links {
424 margin-top: 4ex;
425 font-size: 75%;
426 }
428 .ui_tabs_links a {
429 padding: 1ex;
430 line-height: 200%;
431 background-color: #e7e7e7;
432 white-space: nowrap;
433 }
435 .ui_tabs_links a:hover {
436 background-color: #d7d7d7;
437 }
439 .ui_tabs_links a.selected {
440 background-color: #444;
441 color: #fff;
442 text-decoration: none;
443 padding: 1ex;
444 }
446 .ui_tabs_content {
447 border: 1px solid #444;
448 padding: 1ex 1ex 1ex 1ex;
449 }
451 .web10 .ui_tabs_accordeon_head {
452 margin-bottom: 1ex;
453 }
455 .web20 .ui_tabs_accordeon_head {
456 font-size: 80%;
457 font-weight: bold;
458 display: block;
459 background: #eee;
460 border: 1px solid #bbb;
461 color: #000;
462 padding: 0.75ex;
463 margin-top: 2ex;
464 cursor: pointer;
465 }
467 .web20 .ui_tabs_accordeon_head img {
468 vertical-align: middle;
469 margin-right: 0.5em;
470 }
472 .web20 .ui_tabs_accordeon_head .bargraph {
473 margin-right: 0.5em;
474 }
476 .web20 .ui_tabs_accordeon_content {
477 border: 1px solid #aaa;
478 border-top: none;
479 padding: 2ex 1em 2ex 1em;
480 margin-bottom: 3ex;
481 }
483 .web20 .issue_initiative_list .ui_tabs_accordeon_head {
484 background-color: #e5e5ff;
485 }
487 .web20 .issue_initiative_list .ui_tabs_accordeon_head,
488 .web20 .issue_initiative_list .ui_tabs_accordeon_content {
489 border-color: #aad;
490 }
492 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_content {
493 border-color: #bbb;
494 border-width: 1px;
495 }
497 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_head {
498 background-color: #eee;
499 border: 1px solid #bbb;
500 }
502 .web20 .issue_initiative_list .ui_tabs_accordeon_head a {
503 font-size: 120%;
504 }
506 .ui_tabs_links a.yellow {
507 background-color: #fec;
508 color: #000;
509 }
511 .ui_tabs_links a.yellow:hover {
512 background-color: #edb;
513 }
515 .ui_tabs_links a.yellow.selected {
516 background-color: #654;
517 color: #fff;
518 text-decoration: none;
519 padding: 1ex;
520 }
522 .web20 .ui_tabs_accordeon_head.yellow {
523 background-color: #fec;
524 border-color: #b96;
525 xpadding: 1ex;
526 xmargin-bottom: 2ex;
527 }
529 .web20 .ui_tabs_accordeon_content.yellow {
530 border-color: #b96;
531 }
533 /*************************************************************************
534 * ui.filters
535 */
537 .ui_filter_closed_head,
538 .ui_filter_head {
539 color: #777;
540 margin-top: 1ex;
541 margin-bottom: 1.5ex;
542 font-size: 75%;
543 }
545 .ui_filter_head a {
546 color: #777;
547 padding: 0.5ex;
548 }
550 .ui_filter_head a.active {
551 color: #fff;
552 background-color: #777;
553 padding: 0.5ex;
554 }
556 /*************************************************************************
557 * ui.paginate
558 */
560 .ui_paginate_head {
561 margin-bottom: 1ex;
562 }
564 .ui_paginate_foot {
565 margin-top: 1ex;
566 }
568 .ui_paginate_select a {
569 padding: 0.5ex;
570 }
572 /*************************************************************************
573 * ui.bargraph
574 */
576 .bargraph {
577 width: 103px;
578 }
580 .bargraph50 {
581 width: 52px;
582 }
584 .bargraph div {
585 float: left;
586 margin-top: 0.5ex;
587 height: 1.3ex;
588 }
590 .bargraph_legend {
591 margin-top: 2ex;
592 }
594 .bargraph_legend .bargraph {
595 width: 26px;
596 }
598 .bargraph_legend div,
599 .bargraph_legend div div,
600 .bargraph_legend div div div {
601 float: left;
602 }
604 .bargraph_legend_label {
605 margin-left: 0.5em;
606 margin-right: 1em;
607 }
609 /*************************************************************************
610 * vertical ui.form
611 */
613 .login input[type=text],
614 .vertical input[type=text],
615 .login input[type=password],
616 .vertical input[type=password],
617 .vertical textarea,
618 .vertical select {
619 font-family: sans-serif;
620 font-size: 100%;
621 width: 50em;
622 border: 1px solid #444;
623 padding: 0.2ex 0.2em 0.2ex 0.2em;
624 margin-bottom: 1ex;
625 }
627 .login input[type=password],
628 .vertical input[type=password] {
629 width: 16em;
630 }
632 .vertical select {
633 padding-right: 0;
634 }
636 .login .ui_field_label,
637 .vertical .ui_field_label {
638 text-transform: uppercase;
639 font-size: 70%;
640 line-height: 120%;
641 font-weight: bold;
642 color: #777;
643 width: 15em;
644 display: block;
645 float: left;
646 clear: left;
647 text-align: right;
648 padding-right: 0.5em;
649 }
651 .ui_field_label.label_right {
652 text-align: left;
653 width: auto;
654 }
656 .login input[type=text],
657 .login input[type=password] {
658 width: 10em;
659 }
661 .login div,
662 .vertical div {
663 clear: left;
664 }
666 .vertical span {
667 display: block;
668 margin-bottom: 0.5ex;
669 }
671 .vertical span:after {
672 content: " ";
673 }
675 .vertical span span {
676 display: inline;
677 margin-bottom: 0;
678 }
680 .login input[type=submit],
681 .vertical input[type=submit] {
682 font-size: 100%;
683 margin-left: 11em;
684 background-color: #444444;
685 color: #fff;
686 border: none;
687 padding: 0.75ex;
688 }
690 .login input[type=submit]:hover,
691 .vertical input[type=submit]:hover {
692 background-color: #444444;
693 }
695 /*************************************************************************
696 * Tables
697 */
700 table a.action {
701 font-size: 70%;
702 line-height: 190%;
703 padding: 0.5ex;
704 color: #777;
705 }
707 table a.active {
708 color: #fff;
709 }
711 th {
712 text-align: left;
713 border-bottom: 1px solid #000;
714 }
716 tr:hover td {
717 background-color: #ddd;
718 }
720 .nohover tr:hover td {
721 background-color: #fff;
722 }
724 .nohover table tr:hover td {
725 background-color: #ddd;
726 }
729 tr table tr:hover td {
730 background-color: #fff;
731 }
734 /*************************************************************************
735 * Hidden inline form
736 */
738 .hidden_inline_form {
739 display: none;
740 border: 1px solid #444;
741 width: 42em;
742 position: fixed;
743 background-color: #fff;
744 left: 5em;
745 top: 5ex;
746 z-index: 2;
747 }
749 .hidden_inline_form a {
750 padding: 0.5ex;
751 color: #fff;
752 }
755 .hidden_inline_form .head {
756 background-color: #444;
757 color: #fff;
758 display: block;
759 padding: 0.5ex;
760 }
762 .hidden_inline_form input[type=text],
763 .hidden_inline_form textarea,
764 .hidden_inline_form select {
765 width: 30em;
766 }
768 /*************************************************************************
769 * Positive / Negtive votes
770 */
773 .positive_votes span {
774 display: inline;
775 }
777 .positive_votes {
778 display: inline;
779 background-color: #cfc;
780 padding: 0.3ex 0.5em 0.3ex 0.5em;
781 }
783 .negative_votes span {
784 display: inline;
785 }
787 .negative_votes {
788 display: inline;
789 background-color: #fcc;
790 padding: 0.3ex 0.5em 0.3ex 0.5em;
791 }
793 .suggestion_my_opinion a,
794 .suggestion_my_opinion span {
795 white-space: nowrap;
796 padding-left: 0.2ex !important;
797 padding-right: 0.2ex !important;
798 }
800 .active {
801 background-color: #444;
802 color: #fff;
803 }
805 .active_red2 { background-color: #a00; color: #fff !important; }
806 .active_red1 { background-color: #f88; color: #000 !important; }
807 .active_green1 { background-color: #8f8; color: #000 !important; }
808 .active_green2 { background-color: #0a0; color: #000 !important; }
813 /*************************************************************************
814 * Issues
815 */
817 .issues tr {
818 border: 1px solid #ccc;
819 }
821 .issues tr tr {
822 border: none;
823 }
825 .lang_chooser {
826 float: right;
827 margin-right: 0.5em;
828 }
830 .delegation_list_entry {
831 margin-right: 2em;
832 margin-bottom: 2ex;
833 float: left;
834 clear: left;
835 }
837 .delegation_list_entry .delegation_arrow {
838 float: left;
839 }
841 .delegation_list_entry .delegation_scope {
842 float: left;
843 width: 25em;
844 }
846 .delegation_list_entry .delegation_scope a {
847 display: block;
848 }
850 .member_list .member_thumb {
851 float: left;
852 margin-right: 1em;
853 margin-bottom: 2ex;
854 }
856 .member_thumb {
857 text-decoration: none;
858 width: 14.5em;
859 height: 48px;
860 display: block;
861 float: left;
862 border: 1px solid #999;
863 overflow: hidden;
864 xwhite-space: nowrap;
865 position: relative;
866 }
868 .member_thumb a{
869 position: absolute;
870 top: 0;
871 left: 0;
872 padding: 0;
873 margin: 0;
874 }
876 .member_thumb a:hover div {
877 background-color: #444;
878 color: #fff;
879 }
881 .member_thumb img {
882 padding: 0;
883 margin: 0;
884 vertical-align: bottom;
885 }
887 .member_thumb div {
888 }
890 .member_thumb .member_image {
891 }
893 .member_thumb .member_name {
894 position: absolute;
895 left: 48px;
896 top: 2ex;
897 font-size: 100%;
898 width: 14em;
899 }
901 .member_thumb .flags {
902 text-align: right;
903 font-size: 75%;
904 }
906 .member_thumb .flags a,
907 .member_thumb .flags img {
908 position: static;
909 float: right;
910 margin-left: 0.5em;
911 }
914 .member .right {
915 float: right;
916 }
918 .member_thumb.not_accepted,
919 .member_thumb.not_informed {
920 opacity: 0.5;
921 }
923 .member_statement,
924 .draft_content,
925 .suggestion_content {
926 background-color: #eee;
927 border: 1px solid #ccc;
928 padding-left: 1ex;
929 padding-right: 1ex;
930 }
932 .diff {
933 background-color: #eee;
934 border: 1px solid #ccc;
935 padding: 1ex;
936 }
938 .diff_added {
939 background-color: #cfc;
940 text-decoration: underline;
941 }
943 .diff_removed {
944 background-color: #fcc;
945 text-decoration: line-through;
946 }
948 .slot_issue_info {
949 background-color: #eee;
950 border: 1px solid #ccc;
951 float: right;
952 padding: 0.5ex;
953 line-height: 130%;
954 margin-right: 1em;
955 }
957 .issue_info label {
958 float: left;
959 width: 8em;
960 text-transform: uppercase;
961 font-size: 70%;
962 color: #777;
963 font-weight: bold;
964 clear: left;
965 text-align: right;
966 margin-right: 0.7em;
967 }
969 .admitted_info {
970 background-color: #dfd;
971 padding: 1ex;
972 margin-bottom: 2ex;
973 }
975 .not_admitted_info,
976 .revoked_info {
977 background-color: #fdd;
978 padding: 1ex;
979 margin-bottom: 2ex;
980 }
982 .draft_updated_info,
983 .voting_active_info,
984 .initiator_invite_info,
985 .motd,
986 .public_access_issue_head {
987 background-color: #fec;
988 border: 1px solid #b96;
989 padding: 1ex;
990 margin-bottom: 2ex;
991 }
993 .suggestion_fulfilled {
994 width: 15em;
995 }
996 .suggestion_fulfilled a.action {
997 padding-left: 0;
998 line-height: 120%;
999 }
1001 .help,
1002 .use_terms {
1003 border: 1px solid #bcd;
1004 background-color: #def;
1005 color: #000;
1006 padding: 1ex;
1007 }
1009 .help_visible {
1010 margin-bottom: 1ex;
1011 }
1013 .help_visible .help_icon {
1014 float: right;
1015 }
1017 .slot_help_hidden {
1018 float: right;
1019 margin-right: 1em;
1020 }
1022 .help_actions {
1023 font-size: 75%;
1024 float: right;
1025 }
1027 .help_actions a {
1028 margin-right: 1em;
1029 color: #468;
1030 }
1032 .wiki {
1033 }
1035 .wiki h1,
1036 .wiki h2,
1037 .wiki h3,
1038 .wiki h4 {
1039 margin-top: 1ex;
1040 margin-bottom: 1ex;
1041 }
1043 .wiki h1 {
1044 font-size: 150%;
1045 }
1047 .wiki h2 {
1048 font-size: 125%;
1049 }
1051 .wiki p {
1052 margin-top: 1ex;
1053 margin-bottom: 1ex;
1054 }
1056 form .warning {
1057 background-color: #ffd;
1058 color: #000;
1059 border: 1px solid #dda;
1060 margin: 1ex;
1061 margin-bottom: 2ex;
1062 padding: 1ex;
1063 }
1065 a.not_voted {
1066 display: block;
1067 background-color: #fec;
1068 color: #000;
1069 }
1071 .action_active {
1072 background-color: #fec;
1073 }
1075 .heading {
1076 font-size: 120%;
1077 font-weight: bold;
1078 margin-top: 2ex;
1079 margin-bottom: 1ex;
1080 }
1082 .heading.first {
1083 margin-top: 0;
1084 }
1086 .menu_list li {
1087 padding-top: 1ex;
1088 padding-bottom: 1ex;
1089 }
1091 .deactivated_member_info {
1092 background-color: #a00;
1093 color: #fff;
1094 }
1096 /*************************************************************************
1097 * Voting
1098 */
1100 #voting {
1101 position: relative;
1102 }
1103 #voting .approval, .abstention, .disapproval {
1104 border: 2px black solid;
1105 margin-top: 5ex;
1106 margin-bottom: 5ex;
1107 padding: 1ex;
1108 padding-bottom: 2ex;
1109 }
1110 #voting .approval {
1111 background-color: #9f9;
1112 }
1113 #voting .approval .movable {
1114 background-color: #dfd;
1115 }
1116 #voting .abstention {
1117 background-color: #ccc;
1118 }
1119 #voting .abstention .movable {
1120 background-color: #eee;
1121 }
1122 #voting .disapproval {
1123 background-color: #f88;
1124 }
1125 #voting .disapproval .movable {
1126 background-color: #fbb;
1127 }
1128 #voting .cathead {
1129 font-weight: bold;
1130 }
1131 #voting .movable {
1132 position: relative;
1133 border: 1px black solid;
1134 margin: 1ex;
1135 padding: 0.5ex;
1136 }
1137 #voting .voting_form_active .movable {
1138 cursor: pointer;
1139 }
1140 #voting .voting_form_active .clickable {
1141 cursor: auto;
1142 }
1143 #voting .voting_form_active a.clickable {
1144 cursor: pointer;
1145 }
1147 #voting .grabber {
1148 vertical-align: middle;
1149 cursor: move;
1150 }