liquid_feedback_frontend
view static/style.css @ 11:77d58efe99fd
Version beta7
Important security fixes:
- Added missing HTML encoding to postal address of member
- Link to discussion URL only if it starts with http(s)://
Other bugfixes:
- Fixed wrong display of 2nd level delegating voters for an initiative
- Do not display invited initiators as initiators while voting
- Added missing translation
New features:
- Public message of the day
- Both direct and indirect supporter count is shown in tab heads
- Support shown in initiative lists
Language chooser at the login page has been added (again)
Important security fixes:
- Added missing HTML encoding to postal address of member
- Link to discussion URL only if it starts with http(s)://
Other bugfixes:
- Fixed wrong display of 2nd level delegating voters for an initiative
- Do not display invited initiators as initiators while voting
- Added missing translation
New features:
- Public message of the day
- Both direct and indirect supporter count is shown in tab heads
- Support shown in initiative lists
Language chooser at the login page has been added (again)
| author | bsw |
|---|---|
| date | Fri Jan 22 12:00:00 2010 +0100 (2010-01-22) |
| parents | 72c5e0ee7c98 |
| children | 559c6be0e1e9 |
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 float: left;
265 position: relative;
266 }
268 .interest img,
269 .slot_support img,
270 .delegation img {
271 padding-left: 0.2em;
272 padding-right: 0.2em;
273 }
274 .vote_info .head {
275 float: left;
276 margin-right: 1em;
277 }
279 .interest .head_active,
280 .slot_support .head_potential_supporter{
281 background-color: #fec;
282 border: 1px solid #b96;
283 }
285 .slot_support .head_supporter {
286 background-color: #dfc;
287 border: 1px solid #8b8;
288 }
290 .slot_support .head_initiator {
291 background-color: #eee;
292 border: 1px solid #999;
293 }
295 .delegation .head_active {
296 background-color: #ddf;
297 border: 1px solid #88b;
298 }
300 .vote_info .close {
301 position: absolute;
302 top: 0;
303 right: 0;
304 padding: 1ex;
305 display: block;
306 }
308 .vote_info .content {
309 font-size: 133%;
310 line-height: 100%;
311 top: 3ex;
312 display: none;
313 position: absolute;
314 z-index: 10;
315 background-color: #fff;
316 border: 1px solid #999;
317 padding: 1em;
318 width: 25em;
319 }
321 .vote_info .delegation_arrow {
322 margin-top: 1ex;
323 margin-bottom: 1ex;
324 vertical-align: middle;
325 }
327 .vote_info .delegation_arrow_overridden {
328 opacity: 0.4;
329 }
331 .vote_info .delegation_scope_overridden {
332 color: #777;
333 }
335 .vote_info .delegation_scope {
336 display: inline;
337 }
339 .vote_info .delegation_info {
340 }
342 .vote_info .member_thumb {
343 clear: left;
344 }
346 .delegation_overridden .member_thumb {
347 opacity: 0.4;
348 }
350 .delegation .revoke {
351 margin: 0.5ex;
352 float: right;
353 }
355 .delegation .revoke img {
356 vertical-align: middle;
357 }
360 .sub_title div {
361 border-top: 1px solid #444;
362 padding-top: 1ex;
363 margin-top: 1ex;
364 font-weight: bold;
365 font-size: 135%;
366 line-height: 110%;
367 }
369 /*************************************************************************
370 * Main content
371 */
373 .main {
374 margin-left: 1em;
375 margin-right: 1em;
376 }
379 /*************************************************************************
380 * ui.tab
381 */
383 .ui_tabs_links {
384 margin-top: 4ex;
385 font-size: 75%;
386 }
388 .ui_tabs_links a {
389 padding: 1ex;
390 line-height: 200%;
391 background-color: #e7e7e7;
392 white-space: nowrap;
393 }
395 .ui_tabs_links a:hover {
396 background-color: #d7d7d7;
397 }
399 .ui_tabs_links a.selected {
400 background-color: #444;
401 color: #fff;
402 text-decoration: none;
403 padding: 1ex;
404 }
406 .ui_tabs_content {
407 border: 1px solid #444;
408 padding: 1ex 1ex 1ex 1ex;
409 }
411 /*************************************************************************
412 * ui.filter
413 * ui.order
414 */
416 .ui_filter_head,
417 .ui_order_head {
418 color: #777;
419 margin-top: 1ex;
420 margin-bottom: 1.5ex;
421 font-size: 75%;
422 }
424 .ui_filter_head a,
425 .ui_order_head a {
426 color: #777;
427 padding: 0.5ex;
428 }
430 .ui_filter_head a.active,
431 .ui_order_head a.active {
432 color: #fff;
433 background-color: #777;
434 padding: 0.5ex;
435 }
437 /*************************************************************************
438 * ui.paginate
439 */
441 .ui_paginate_head {
442 margin-bottom: 1ex;
443 }
445 .ui_paginate_foot {
446 margin-top: 1ex;
447 }
449 .ui_paginate_select a {
450 padding: 0.5ex;
451 }
453 /*************************************************************************
454 * ui.bargraph
455 */
457 .bargraph {
458 width: 101px;
459 }
461 .bargraph div {
462 float: left;
463 margin-top: 0.5ex;
464 height: 1.3ex;
465 }
467 .bargraph_legend {
468 margin-top: 2ex;
469 }
471 .bargraph_legend .bargraph {
472 width: 26px;
473 }
475 .bargraph_legend div,
476 .bargraph_legend div div,
477 .bargraph_legend div div div {
478 float: left;
479 }
481 .bargraph_legend_label {
482 margin-left: 0.5em;
483 margin-right: 1em;
484 }
486 /*************************************************************************
487 * vertical ui.form
488 */
490 .login input[type=text],
491 .vertical input[type=text],
492 .login input[type=password],
493 .vertical input[type=password],
494 .vertical textarea,
495 .vertical select {
496 font-family: sans-serif;
497 font-size: 100%;
498 width: 50em;
499 border: 1px solid #444;
500 padding: 0.2ex 0.2em 0.2ex 0.2em;
501 margin-bottom: 1ex;
502 }
504 .login input[type=password],
505 .vertical input[type=password] {
506 width: 16em;
507 }
509 .vertical select {
510 padding-right: 0;
511 }
513 .login .ui_field_label,
514 .vertical .ui_field_label {
515 text-transform: uppercase;
516 font-size: 70%;
517 line-height: 120%;
518 font-weight: bold;
519 color: #777;
520 width: 15em;
521 display: block;
522 float: left;
523 clear: left;
524 text-align: right;
525 padding-right: 0.5em;
526 }
528 .ui_field_label.label_right {
529 text-align: left;
530 width: auto;
531 }
533 .login input[type=text],
534 .login input[type=password] {
535 width: 10em;
536 }
538 .login div,
539 .vertical div {
540 clear: left;
541 }
543 .vertical span {
544 display: block;
545 margin-bottom: 0.5ex;
546 }
548 .vertical span:after {
549 content: " ";
550 }
552 .vertical span span {
553 display: inline;
554 margin-bottom: 0;
555 }
557 .login input[type=submit],
558 .vertical input[type=submit] {
559 font-size: 100%;
560 margin-left: 11em;
561 background-color: #444444;
562 color: #fff;
563 border: none;
564 padding: 0.75ex;
565 }
567 .login input[type=submit]:hover,
568 .vertical input[type=submit]:hover {
569 background-color: #444444;
570 }
572 /*************************************************************************
573 * Tables
574 */
577 table a.action {
578 font-size: 70%;
579 line-height: 190%;
580 padding: 0.5ex;
581 color: #777;
582 }
584 table a.active {
585 color: #fff;
586 }
588 th {
589 text-align: left;
590 border-bottom: 1px solid #000;
591 }
593 tr:hover td {
594 background-color: #ddd;
595 }
597 .nohover tr:hover td {
598 background-color: #fff;
599 }
601 .nohover table tr:hover td {
602 background-color: #ddd;
603 }
606 tr table tr:hover td {
607 background-color: #fff;
608 }
611 /*************************************************************************
612 * Hidden inline form
613 */
615 .hidden_inline_form {
616 display: none;
617 border: 1px solid #444;
618 width: 42em;
619 position: fixed;
620 background-color: #fff;
621 left: 5em;
622 top: 5ex;
623 }
625 .hidden_inline_form a {
626 padding: 0.5ex;
627 color: #fff;
628 }
631 .hidden_inline_form .head {
632 background-color: #444;
633 color: #fff;
634 display: block;
635 padding: 0.5ex;
636 }
638 .hidden_inline_form input[type=text],
639 .hidden_inline_form textarea,
640 .hidden_inline_form select {
641 width: 30em;
642 }
644 /*************************************************************************
645 * Positive / Negtive votes
646 */
649 .positive_votes span {
650 display: inline;
651 }
653 .positive_votes {
654 display: inline;
655 background-color: #cfc;
656 padding: 0.3ex 0.5em 0.3ex 0.5em;
657 }
659 .negative_votes span {
660 display: inline;
661 }
663 .negative_votes {
664 display: inline;
665 background-color: #fcc;
666 padding: 0.3ex 0.5em 0.3ex 0.5em;
667 }
669 .suggestion_my_opinion a {
670 white-space: nowrap;
671 padding-left: 0.2ex !important;
672 padding-right: 0.2ex !important;
673 }
675 .active {
676 background-color: #444;
677 color: #fff;
678 }
680 .active_red2 { background-color: #a00; color: #fff !important; }
681 .active_red1 { background-color: #f88; color: #000 !important; }
682 .active_green1 { background-color: #8f8; color: #000 !important; }
683 .active_green2 { background-color: #0a0; color: #000 !important; }
688 /*************************************************************************
689 * Issues
690 */
692 .issues tr {
693 border: 1px solid #ccc;
694 }
696 .issues tr tr {
697 border: none;
698 }
700 .lang_chooser {
701 float: right;
702 margin-right: 0.5em;
703 }
705 .delegation_list_entry {
706 margin-right: 2em;
707 margin-bottom: 2ex;
708 float: left;
709 clear: left;
710 }
712 .delegation_list_entry .delegation_arrow {
713 float: left;
714 }
716 .delegation_list_entry .delegation_scope {
717 float: left;
718 width: 25em;
719 }
721 .delegation_list_entry .delegation_scope a {
722 display: block;
723 }
725 .member_list .member_thumb {
726 float: left;
727 margin-right: 1em;
728 margin-bottom: 2ex;
729 }
731 .member_thumb {
732 text-decoration: none;
733 width: 18em;
734 height: 48px;
735 display: block;
736 float: left;
737 border: 1px solid #999;
738 overflow: hidden;
739 xwhite-space: nowrap;
740 position: relative;
741 }
743 .member_thumb a{
744 position: absolute;
745 top: 0;
746 left: 0;
747 padding: 0;
748 margin: 0;
749 }
751 .member_thumb a:hover div {
752 background-color: #444;
753 color: #fff;
754 }
756 .member_thumb img {
757 padding: 0;
758 margin: 0;
759 vertical-align: bottom;
760 }
762 .member_thumb div {
763 }
765 .member_thumb .member_image {
766 }
768 .member_thumb .member_name {
769 position: absolute;
770 left: 48px;
771 top: 2ex;
772 font-size: 100%;
773 width: 14em;
774 }
776 .member_thumb .flags {
777 float: right;
778 font-size: 75%;
779 }
781 .member_thumb .flags a{
782 position: static;
783 float: right;
784 }
787 .member .right {
788 float: right;
789 }
791 .member_thumb.not_accepted {
792 opacity: 0.5;
793 }
795 .draft_content,
796 .member_statement {
797 background-color: #eee;
798 border: 1px solid #ccc;
799 padding-left: 1ex;
800 padding-right: 1ex;
801 }
803 .diff {
804 background-color: #eee;
805 border: 1px solid #ccc;
806 padding: 1ex;
807 }
809 .diff .added {
810 background-color: #cfc;
811 }
813 .diff .removed {
814 background-color: #fcc;
815 }
817 .slot_issue_info {
818 background-color: #eee;
819 border: 1px solid #ccc;
820 float: right;
821 padding: 0.5ex;
822 line-height: 130%;
823 margin-right: 1em;
824 }
826 .issue_info label {
827 float: left;
828 width: 8em;
829 text-transform: uppercase;
830 font-size: 70%;
831 color: #777;
832 font-weight: bold;
833 clear: left;
834 text-align: right;
835 margin-right: 0.7em;
836 }
838 .draft_updated_info,
839 .voting_active_info,
840 .revoked_info,
841 .initiator_invite_info,
842 .motd {
843 background-color: #fec;
844 border: 2px solid #b96;
845 padding: 1ex;
846 }
848 .suggestion_fulfilled {
849 width: 15em;
850 }
851 .suggestion_fulfilled a.action {
852 padding-left: 0;
853 line-height: 120%;
854 }
856 .help,
857 .use_terms {
858 border: 1px solid #bcd;
859 background-color: #def;
860 color: #000;
861 padding: 1ex;
862 }
864 .help_visible {
865 margin-bottom: 1ex;
866 }
868 .help_visible .help_icon {
869 float: right;
870 }
872 .slot_help_hidden {
873 float: right;
874 margin-right: 1em;
875 }
877 .help_actions {
878 font-size: 75%;
879 float: right;
880 }
882 .help_actions a {
883 margin-right: 1em;
884 color: #468;
885 }
887 .wiki {
888 }
890 .wiki h1,
891 .wiki h2,
892 .wiki h3,
893 .wiki h4 {
894 margin-top: 1ex;
895 margin-bottom: 1ex;
896 }
898 .wiki h1 {
899 font-size: 150%;
900 }
902 .wiki h2 {
903 font-size: 125%;
904 }
906 .wiki p {
907 margin-top: 1ex;
908 margin-bottom: 1ex;
909 }
911 form .warning {
912 background-color: #ffd;
913 color: #000;
914 border: 1px solid #dda;
915 margin: 1ex;
916 margin-bottom: 2ex;
917 padding: 1ex;
918 }
920 a.not_voted {
921 display: block;
922 background-color: #fec;
923 color: #000;
924 }
926 .action_active {
927 background-color: #fec;
928 }
930 /*************************************************************************
931 * Voting
932 */
934 #voting {
935 position: relative;
936 }
937 #voting .approval, .abstention, .disapproval {
938 border: 2px black solid;
939 margin-top: 5ex;
940 margin-bottom: 5ex;
941 padding: 1ex;
942 padding-bottom: 2ex;
943 }
944 #voting .approval {
945 background-color: #9f9;
946 }
947 #voting .approval .movable {
948 background-color: #dfd;
949 }
950 #voting .abstention {
951 background-color: #ccc;
952 }
953 #voting .abstention .movable {
954 background-color: #eee;
955 }
956 #voting .disapproval {
957 background-color: #f88;
958 }
959 #voting .disapproval .movable {
960 background-color: #fbb;
961 }
962 #voting .cathead {
963 font-weight: bold;
964 }
965 #voting .movable {
966 position: relative;
967 border: 1px black solid;
968 margin: 1ex;
969 padding: 0.5ex;
970 cursor: pointer;
971 }
972 #voting .clickable {
973 cursor: auto;
974 }
975 #voting a.clickable {
976 cursor: pointer;
977 }
979 #voting .grabber {
980 vertical-align: middle;
981 cursor: move;
982 }