liquid_feedback_frontend
view static/style.css @ 16:559c6be0e1e9
"Vote later" feature; Refactored interest box
| author | bsw |
|---|---|
| date | Tue Feb 02 00:10:17 2010 +0100 (2010-02-02) |
| parents | 77d58efe99fd |
| children | 00d1004545f1 |
line source
1 /*************************************************************************
2 * Some global definitions
3 */
5 body, th, td {
6 font-family: sans-serif;
7 font-size: 14px;
8 padding: 0;
9 margin: 0;
10 }
12 body, a {
13 color: #000;
14 }
16 img {
17 border: none;
18 }
20 table {
21 border-collapse: collapse;
22 border: none;
23 }
25 td, th {
26 padding: 0.5ex 0.5em 0.5ex 0.5em;
27 }
29 td {
30 vertical-align: top;
31 }
33 th {
34 vertical-align: bottom;
35 font-size: 75%;
36 font-weight: bold;
37 }
39 a.active {
40 color: #fff;
41 }
43 .revoked {
44 text-decoration: line-through;
45 }
47 .highlighted {
48 background-color: #fa7;
49 color: #000;
50 }
52 .admin_only {
53 font-style: italic;
54 }
56 a {
57 vertical-align: middle;
58 }
60 h1 {
61 font-size: 150%;
62 }
64 h2 {
65 font-size: 125%;
66 }
69 /*************************************************************************
70 * Notices, warnings and errors
71 */
73 .layout_notice, .layout_error, .layout_warning {
74 background: #fff;
75 font-weight: bold;
76 line-height: 1.7em;
77 -moz-opacity:0.7;
78 }
80 .slot_notice, .slot_warning, .slot_error {
81 padding-left: 1em;
82 }
84 .slot_notice {
85 background-color: #cfc;
86 color: #040;
87 }
89 .slot_warning {
90 background-color: #fec;
91 color: #420;
92 }
94 .slot_error {
95 background-color: #fcc;
96 color: #400;
97 }
99 /*************************************************************************
100 * Navigation, search and language chooser bar
101 */
103 .topbar {
104 background-color: #444;
105 color: #fff;
106 font-size: 75%;
107 }
109 .topbar a {
110 background-color: #444;
111 color: #fff;
112 }
114 .topbar a:hover {
115 background-color: #fff;
116 color: #000;
117 }
119 .navigation,
120 .logout_button {
121 line-height: 250%;
122 }
124 .navigation img,
125 .logout_button img {
126 margin-right: 0.5em;
127 vertical-align: middle;
128 }
130 .navigation a,
131 .logout_button a {
132 padding: 1ex;
133 }
135 .logout_button {
136 float: right;
137 }
139 .searchbox {
140 padding: 0.5ex 1em 0ex 1em;
141 float: right;
142 line-height: 250%;
143 }
145 .searchbox div {
146 display: inline;
147 }
149 .searchbox select {
150 margin-left: 0.3em;
151 margin-right: 0.4em;
152 font-size: 100%;
153 width: 8em;
154 }
156 .searchbox input[type=text] {
157 width: 8em;
158 padding: 0.25ex 0.25em 0.25ex 0.25em;
159 margin-right: 0.5em;
160 font-size: 100%;
161 }
163 .searchbox input[type=submit] {
164 font-size: 100%;
165 width: 2.5em;
166 }
168 /*************************************************************************
169 * Title of current page including path and actions
170 */
172 .title_bar {
173 border-bottom: 1px solid #777;
174 margin-bottom: 2ex;
175 padding-top: 1ex;
176 padding-bottom: 0.5ex;
177 }
179 .title_bar_content {
180 margin-left: 1em;
181 }
183 .path {
184 color: #444;
185 }
187 .path div {
188 font-size: 100%;
189 line-height: 180%;
190 }
192 .path a {
193 color: #444;
194 }
196 .slot_path div {
197 display: inline;
198 margin-left: 1em;
199 margin-right: 1em;
200 }
202 .title {
203 color: #000;
204 margin-bottom: 0.5ex;
205 }
207 .slot_title {
208 }
210 .title div {
211 font-weight: bold;
212 font-size: 135%;
213 line-height: 110%;
214 }
216 .title a {
217 color: #000;
218 }
220 .member_image_avatar {
221 float: left;
222 margin-right: 0.5em;
223 }
225 .actions {
226 font-size: 75%;
227 line-height: 220%;
228 }
230 .slot_actions {
231 display: inline;
232 }
234 .actions a {
235 float: left;
236 display: block;
237 padding: 1px 0.5em 1px 0.0em;
238 margin-right: 1em;
239 vertical-align: middle;
240 }
242 .actions a:hover {
243 background-color: #d7d7d7;
244 }
246 .actions img {
247 padding-left: 0.2em;
248 padding-right: 0.2em;
249 vertical-align: middle;
250 }
252 .logo {
253 float: right;
254 margin-right: 1em;
255 }
257 /*************************************************************************
258 * vote info / delegation
259 */
261 .interest,
262 .slot_support,
263 .delegation,
264 .voting_requested {
265 float: left;
266 position: relative;
267 }
269 .interest img,
270 .slot_support img,
271 .delegation img,
272 .voting_requested img {
273 padding-left: 0.2em;
274 padding-right: 0.2em;
275 }
276 .vote_info .head {
277 float: left;
278 margin-right: 1em;
279 }
281 .interest .head_active,
282 .slot_support .head_potential_supporter{
283 background-color: #fec;
284 border: 1px solid #b96;
285 }
287 .slot_support .head_supporter {
288 background-color: #dfc;
289 border: 1px solid #8b8;
290 }
292 .slot_support .head_initiator {
293 background-color: #eee;
294 border: 1px solid #999;
295 }
297 .delegation .head_active {
298 background-color: #ddf;
299 border: 1px solid #88b;
300 }
302 .voting_requested .head_active {
303 background-color: #fdd;
304 border: 1px solid #b77;
305 }
307 .vote_info .close {
308 position: absolute;
309 top: 0;
310 right: 0;
311 padding: 1ex;
312 display: block;
313 }
315 .vote_info .content {
316 font-size: 133%;
317 line-height: 100%;
318 top: 3ex;
319 display: none;
320 position: absolute;
321 z-index: 10;
322 background-color: #fff;
323 border: 1px solid #999;
324 padding: 1em;
325 width: 25em;
326 }
328 .vote_info .delegation_arrow {
329 margin-top: 1ex;
330 margin-bottom: 1ex;
331 vertical-align: middle;
332 }
334 .vote_info .delegation_arrow_overridden {
335 opacity: 0.4;
336 }
338 .vote_info .delegation_scope_overridden {
339 color: #777;
340 }
342 .vote_info .delegation_scope {
343 display: inline;
344 }
346 .vote_info .delegation_info {
347 }
349 .vote_info .member_thumb {
350 clear: left;
351 }
353 .delegation_overridden .member_thumb {
354 opacity: 0.4;
355 }
357 .delegation .revoke {
358 margin: 0.5ex;
359 float: right;
360 }
362 .delegation .revoke img {
363 vertical-align: middle;
364 }
367 .sub_title div {
368 border-top: 1px solid #444;
369 padding-top: 1ex;
370 margin-top: 1ex;
371 font-weight: bold;
372 font-size: 135%;
373 line-height: 110%;
374 }
376 /*************************************************************************
377 * Main content
378 */
380 .main {
381 margin-left: 1em;
382 margin-right: 1em;
383 }
386 /*************************************************************************
387 * ui.tab
388 */
390 .ui_tabs_links {
391 margin-top: 4ex;
392 font-size: 75%;
393 }
395 .ui_tabs_links a {
396 padding: 1ex;
397 line-height: 200%;
398 background-color: #e7e7e7;
399 white-space: nowrap;
400 }
402 .ui_tabs_links a:hover {
403 background-color: #d7d7d7;
404 }
406 .ui_tabs_links a.selected {
407 background-color: #444;
408 color: #fff;
409 text-decoration: none;
410 padding: 1ex;
411 }
413 .ui_tabs_content {
414 border: 1px solid #444;
415 padding: 1ex 1ex 1ex 1ex;
416 }
418 /*************************************************************************
419 * ui.filter
420 * ui.order
421 */
423 .ui_filter_head,
424 .ui_order_head {
425 color: #777;
426 margin-top: 1ex;
427 margin-bottom: 1.5ex;
428 font-size: 75%;
429 }
431 .ui_filter_head a,
432 .ui_order_head a {
433 color: #777;
434 padding: 0.5ex;
435 }
437 .ui_filter_head a.active,
438 .ui_order_head a.active {
439 color: #fff;
440 background-color: #777;
441 padding: 0.5ex;
442 }
444 /*************************************************************************
445 * ui.paginate
446 */
448 .ui_paginate_head {
449 margin-bottom: 1ex;
450 }
452 .ui_paginate_foot {
453 margin-top: 1ex;
454 }
456 .ui_paginate_select a {
457 padding: 0.5ex;
458 }
460 /*************************************************************************
461 * ui.bargraph
462 */
464 .bargraph {
465 width: 101px;
466 }
468 .bargraph div {
469 float: left;
470 margin-top: 0.5ex;
471 height: 1.3ex;
472 }
474 .bargraph_legend {
475 margin-top: 2ex;
476 }
478 .bargraph_legend .bargraph {
479 width: 26px;
480 }
482 .bargraph_legend div,
483 .bargraph_legend div div,
484 .bargraph_legend div div div {
485 float: left;
486 }
488 .bargraph_legend_label {
489 margin-left: 0.5em;
490 margin-right: 1em;
491 }
493 /*************************************************************************
494 * vertical ui.form
495 */
497 .login input[type=text],
498 .vertical input[type=text],
499 .login input[type=password],
500 .vertical input[type=password],
501 .vertical textarea,
502 .vertical select {
503 font-family: sans-serif;
504 font-size: 100%;
505 width: 50em;
506 border: 1px solid #444;
507 padding: 0.2ex 0.2em 0.2ex 0.2em;
508 margin-bottom: 1ex;
509 }
511 .login input[type=password],
512 .vertical input[type=password] {
513 width: 16em;
514 }
516 .vertical select {
517 padding-right: 0;
518 }
520 .login .ui_field_label,
521 .vertical .ui_field_label {
522 text-transform: uppercase;
523 font-size: 70%;
524 line-height: 120%;
525 font-weight: bold;
526 color: #777;
527 width: 15em;
528 display: block;
529 float: left;
530 clear: left;
531 text-align: right;
532 padding-right: 0.5em;
533 }
535 .ui_field_label.label_right {
536 text-align: left;
537 width: auto;
538 }
540 .login input[type=text],
541 .login input[type=password] {
542 width: 10em;
543 }
545 .login div,
546 .vertical div {
547 clear: left;
548 }
550 .vertical span {
551 display: block;
552 margin-bottom: 0.5ex;
553 }
555 .vertical span:after {
556 content: " ";
557 }
559 .vertical span span {
560 display: inline;
561 margin-bottom: 0;
562 }
564 .login input[type=submit],
565 .vertical input[type=submit] {
566 font-size: 100%;
567 margin-left: 11em;
568 background-color: #444444;
569 color: #fff;
570 border: none;
571 padding: 0.75ex;
572 }
574 .login input[type=submit]:hover,
575 .vertical input[type=submit]:hover {
576 background-color: #444444;
577 }
579 /*************************************************************************
580 * Tables
581 */
584 table a.action {
585 font-size: 70%;
586 line-height: 190%;
587 padding: 0.5ex;
588 color: #777;
589 }
591 table a.active {
592 color: #fff;
593 }
595 th {
596 text-align: left;
597 border-bottom: 1px solid #000;
598 }
600 tr:hover td {
601 background-color: #ddd;
602 }
604 .nohover tr:hover td {
605 background-color: #fff;
606 }
608 .nohover table tr:hover td {
609 background-color: #ddd;
610 }
613 tr table tr:hover td {
614 background-color: #fff;
615 }
618 /*************************************************************************
619 * Hidden inline form
620 */
622 .hidden_inline_form {
623 display: none;
624 border: 1px solid #444;
625 width: 42em;
626 position: fixed;
627 background-color: #fff;
628 left: 5em;
629 top: 5ex;
630 }
632 .hidden_inline_form a {
633 padding: 0.5ex;
634 color: #fff;
635 }
638 .hidden_inline_form .head {
639 background-color: #444;
640 color: #fff;
641 display: block;
642 padding: 0.5ex;
643 }
645 .hidden_inline_form input[type=text],
646 .hidden_inline_form textarea,
647 .hidden_inline_form select {
648 width: 30em;
649 }
651 /*************************************************************************
652 * Positive / Negtive votes
653 */
656 .positive_votes span {
657 display: inline;
658 }
660 .positive_votes {
661 display: inline;
662 background-color: #cfc;
663 padding: 0.3ex 0.5em 0.3ex 0.5em;
664 }
666 .negative_votes span {
667 display: inline;
668 }
670 .negative_votes {
671 display: inline;
672 background-color: #fcc;
673 padding: 0.3ex 0.5em 0.3ex 0.5em;
674 }
676 .suggestion_my_opinion a {
677 white-space: nowrap;
678 padding-left: 0.2ex !important;
679 padding-right: 0.2ex !important;
680 }
682 .active {
683 background-color: #444;
684 color: #fff;
685 }
687 .active_red2 { background-color: #a00; color: #fff !important; }
688 .active_red1 { background-color: #f88; color: #000 !important; }
689 .active_green1 { background-color: #8f8; color: #000 !important; }
690 .active_green2 { background-color: #0a0; color: #000 !important; }
695 /*************************************************************************
696 * Issues
697 */
699 .issues tr {
700 border: 1px solid #ccc;
701 }
703 .issues tr tr {
704 border: none;
705 }
707 .lang_chooser {
708 float: right;
709 margin-right: 0.5em;
710 }
712 .delegation_list_entry {
713 margin-right: 2em;
714 margin-bottom: 2ex;
715 float: left;
716 clear: left;
717 }
719 .delegation_list_entry .delegation_arrow {
720 float: left;
721 }
723 .delegation_list_entry .delegation_scope {
724 float: left;
725 width: 25em;
726 }
728 .delegation_list_entry .delegation_scope a {
729 display: block;
730 }
732 .member_list .member_thumb {
733 float: left;
734 margin-right: 1em;
735 margin-bottom: 2ex;
736 }
738 .member_thumb {
739 text-decoration: none;
740 width: 18em;
741 height: 48px;
742 display: block;
743 float: left;
744 border: 1px solid #999;
745 overflow: hidden;
746 xwhite-space: nowrap;
747 position: relative;
748 }
750 .member_thumb a{
751 position: absolute;
752 top: 0;
753 left: 0;
754 padding: 0;
755 margin: 0;
756 }
758 .member_thumb a:hover div {
759 background-color: #444;
760 color: #fff;
761 }
763 .member_thumb img {
764 padding: 0;
765 margin: 0;
766 vertical-align: bottom;
767 }
769 .member_thumb div {
770 }
772 .member_thumb .member_image {
773 }
775 .member_thumb .member_name {
776 position: absolute;
777 left: 48px;
778 top: 2ex;
779 font-size: 100%;
780 width: 14em;
781 }
783 .member_thumb .flags {
784 float: right;
785 font-size: 75%;
786 }
788 .member_thumb .flags a{
789 position: static;
790 float: right;
791 }
794 .member .right {
795 float: right;
796 }
798 .member_thumb.not_accepted {
799 opacity: 0.5;
800 }
802 .draft_content,
803 .member_statement {
804 background-color: #eee;
805 border: 1px solid #ccc;
806 padding-left: 1ex;
807 padding-right: 1ex;
808 }
810 .diff {
811 background-color: #eee;
812 border: 1px solid #ccc;
813 padding: 1ex;
814 }
816 .diff .added {
817 background-color: #cfc;
818 }
820 .diff .removed {
821 background-color: #fcc;
822 }
824 .slot_issue_info {
825 background-color: #eee;
826 border: 1px solid #ccc;
827 float: right;
828 padding: 0.5ex;
829 line-height: 130%;
830 margin-right: 1em;
831 }
833 .issue_info label {
834 float: left;
835 width: 8em;
836 text-transform: uppercase;
837 font-size: 70%;
838 color: #777;
839 font-weight: bold;
840 clear: left;
841 text-align: right;
842 margin-right: 0.7em;
843 }
845 .draft_updated_info,
846 .voting_active_info,
847 .revoked_info,
848 .initiator_invite_info,
849 .motd {
850 background-color: #fec;
851 border: 2px solid #b96;
852 padding: 1ex;
853 }
855 .suggestion_fulfilled {
856 width: 15em;
857 }
858 .suggestion_fulfilled a.action {
859 padding-left: 0;
860 line-height: 120%;
861 }
863 .help,
864 .use_terms {
865 border: 1px solid #bcd;
866 background-color: #def;
867 color: #000;
868 padding: 1ex;
869 }
871 .help_visible {
872 margin-bottom: 1ex;
873 }
875 .help_visible .help_icon {
876 float: right;
877 }
879 .slot_help_hidden {
880 float: right;
881 margin-right: 1em;
882 }
884 .help_actions {
885 font-size: 75%;
886 float: right;
887 }
889 .help_actions a {
890 margin-right: 1em;
891 color: #468;
892 }
894 .wiki {
895 }
897 .wiki h1,
898 .wiki h2,
899 .wiki h3,
900 .wiki h4 {
901 margin-top: 1ex;
902 margin-bottom: 1ex;
903 }
905 .wiki h1 {
906 font-size: 150%;
907 }
909 .wiki h2 {
910 font-size: 125%;
911 }
913 .wiki p {
914 margin-top: 1ex;
915 margin-bottom: 1ex;
916 }
918 form .warning {
919 background-color: #ffd;
920 color: #000;
921 border: 1px solid #dda;
922 margin: 1ex;
923 margin-bottom: 2ex;
924 padding: 1ex;
925 }
927 a.not_voted {
928 display: block;
929 background-color: #fec;
930 color: #000;
931 }
933 .action_active {
934 background-color: #fec;
935 }
937 /*************************************************************************
938 * Voting
939 */
941 #voting {
942 position: relative;
943 }
944 #voting .approval, .abstention, .disapproval {
945 border: 2px black solid;
946 margin-top: 5ex;
947 margin-bottom: 5ex;
948 padding: 1ex;
949 padding-bottom: 2ex;
950 }
951 #voting .approval {
952 background-color: #9f9;
953 }
954 #voting .approval .movable {
955 background-color: #dfd;
956 }
957 #voting .abstention {
958 background-color: #ccc;
959 }
960 #voting .abstention .movable {
961 background-color: #eee;
962 }
963 #voting .disapproval {
964 background-color: #f88;
965 }
966 #voting .disapproval .movable {
967 background-color: #fbb;
968 }
969 #voting .cathead {
970 font-weight: bold;
971 }
972 #voting .movable {
973 position: relative;
974 border: 1px black solid;
975 margin: 1ex;
976 padding: 0.5ex;
977 cursor: pointer;
978 }
979 #voting .clickable {
980 cursor: auto;
981 }
982 #voting a.clickable {
983 cursor: pointer;
984 }
986 #voting .grabber {
987 vertical-align: middle;
988 cursor: move;
989 }