liquid_feedback_frontend

view static/style.css @ 32:4ae09a588103

find changesets by author, revision, files, or words in the commit message
Changed style.css: Member thumb a bit smaller
author bsw
date Tue Feb 23 21:10:23 2010 +0100 (2010-02-23)
parents b195682957dc
children 4f39f0a0d5b5
line source
1 /*************************************************************************
2 * Some global definitions
3 */
4
5 body, th, td {
6 font-family: sans-serif;
7 font-size: 15px;
8 font-size: 14px;
9 padding: 0;
10 margin: 0;
11 }
12
13 .area_list {
14 line-height: 170%;
15 }
16
17 body, a {
18 color: #000;
19 }
20
21 img {
22 border: none;
23 }
24
25 table {
26 border-collapse: collapse;
27 border: none;
28 }
29
30 td, th {
31 padding: 0.5ex 0.5em 0.5ex 0.5em;
32 }
33
34 td {
35 vertical-align: top;
36 }
37
38 th {
39 vertical-align: bottom;
40 font-size: 75%;
41 font-weight: bold;
42 }
43
44 a.active {
45 color: #fff;
46 }
47
48 .revoked {
49 text-decoration: line-through;
50 }
51
52 .highlighted {
53 background-color: #fa7;
54 color: #000;
55 }
56
57 .admin_only {
58 font-style: italic;
59 }
60
61 a {
62 xvertical-align: middle;
63 }
64
65 h1 {
66 font-size: 150%;
67 }
68
69 h2 {
70 font-size: 125%;
71 }
72
73
74 /*************************************************************************
75 * Notices, warnings and errors
76 */
77
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 }
84
85 .slot_notice, .slot_warning, .slot_error {
86 padding-left: 1em;
87 }
88
89 .slot_notice {
90 background-color: #cfc;
91 color: #040;
92 }
93
94 .slot_warning {
95 background-color: #fec;
96 color: #420;
97 }
98
99 .slot_error {
100 background-color: #fcc;
101 color: #400;
102 }
103
104 /*************************************************************************
105 * Navigation, search and language chooser bar
106 */
107
108 .topbar {
109 background-color: #444;
110 color: #fff;
111 font-size: 75%;
112 line-height: 140%;
113 margin-bottom: 1.8ex;
114 }
115
116 .topbar a {
117 background-color: #444;
118 color: #fff;
119 }
120
121 .topbar a:hover {
122 background-color: #fff;
123 color: #000;
124 }
125
126 .navigation,
127 .logout_button {
128 line-height: 250%;
129 }
130
131 .navigation img,
132 .logout_button img {
133 margin-right: 0.5em;
134 vertical-align: middle;
135 }
136
137 .navigation a,
138 .logout_button a {
139 padding: 1ex;
140 }
141
142 .logout_button {
143 float: right;
144 }
145
146 .searchbox {
147 margin: 0;
148 padding: 0.1ex 1em 0ex 1em;
149 float: right;
150 line-height: 250%;
151 }
152
153 .searchbox form {
154 float: left;
155 }
156
157 .searchbox div {
158 display: inline;
159 }
160
161 .searchbox select {
162 margin-left: 0.3em;
163 margin-right: 0.4em;
164 font-size: 100%;
165 width: 8em;
166 }
167
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 }
174
175 .searchbox input[type=submit] {
176 font-size: 100%;
177 }
178
179 /*************************************************************************
180 * Title of current page including path and actions
181 */
182
183 .title_bar {
184 border-bottom: 1px solid #777;
185 margin-bottom: 2ex;
186 padding-top: 1ex;
187 padding-bottom: 0.5ex;
188 }
189
190 .title_bar_content {
191 margin-left: 1em;
192 }
193
194 .path {
195 color: #444;
196 }
197
198 .path div {
199 font-size: 100%;
200 line-height: 180%;
201 }
202
203 .path a {
204 color: #444;
205 }
206
207 .slot_path div {
208 display: inline;
209 margin-left: 1em;
210 margin-right: 1em;
211 }
212
213 .title {
214 color: #000;
215 margin-bottom: 0.5ex;
216 }
217
218 .slot_title {
219 }
220
221 .title div {
222 font-weight: bold;
223 font-size: 135%;
224 line-height: 110%;
225 }
226
227 .title a {
228 color: #000;
229 }
230
231 .member_image_avatar {
232 float: left;
233 margin-right: 0.5em;
234 }
235
236 .actions {
237 font-size: 75%;
238 line-height: 220%;
239 }
240
241 .slot_actions {
242 display: inline;
243 }
244
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 }
252
253 .actions a:hover {
254 background-color: #d7d7d7;
255 }
256
257 .actions img {
258 padding-left: 0.2em;
259 padding-right: 0.2em;
260 vertical-align: middle;
261 }
262
263 .logo {
264 float: right;
265 margin-right: 1em;
266 }
267
268 /*************************************************************************
269 * vote info / delegation
270 */
271
272 .interest,
273 .slot_support,
274 .delegation,
275 .voting_requested {
276 float: left;
277 position: relative;
278 z-index: 1;
279 }
280
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 }
292
293 .interest .head_active,
294 .slot_support .head_potential_supporter{
295 background-color: #fec;
296 border: 1px solid #b96;
297 }
298
299 .interest .head_autoreject {
300 background-color: #fdd;
301 border: 1px solid #b77;
302 }
303
304 .slot_support .head_supporter {
305 background-color: #dfc;
306 border: 1px solid #8b8;
307 }
308
309 .slot_support .head_initiator {
310 background-color: #eee;
311 border: 1px solid #999;
312 }
313
314 .delegation .head_active {
315 background-color: #ddf;
316 border: 1px solid #88b;
317 }
318
319 .delegation .change_delegation {
320 margin-bottom: 2ex;
321 }
322
323 .delegation .change_delegation a {
324 display: inline;
325 float: none;
326 padding: 1ex;
327 }
328
329 .delegation .delegation_participation {
330 margin-left: 20.5em;
331 margin-top: 3ex;
332 font-style: italic;
333 font-size: 80%;
334 }
335
336 .voting_requested .head_active {
337 background-color: #fdd;
338 border: 1px solid #b77;
339 }
340
341 .vote_info .close {
342 position: absolute;
343 top: 0;
344 right: 0;
345 padding: 1ex;
346 display: block;
347 }
348
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 }
361
362 .vote_info .delegation_arrow {
363 margin-top: 1ex;
364 margin-bottom: 1ex;
365 vertical-align: middle;
366 }
367
368 .vote_info .delegation_arrow_overridden {
369 opacity: 0.4;
370 }
371
372 .vote_info .delegation_scope_overridden {
373 color: #777;
374 }
375
376 .vote_info .delegation_scope {
377 display: inline;
378 }
379
380 .vote_info .delegation_info {
381 }
382
383 .vote_info .member_thumb {
384 clear: left;
385 }
386
387 .delegation_overridden .member_thumb {
388 opacity: 0.4;
389 }
390
391 .delegation .revoke {
392 margin: 0.5ex;
393 float: right;
394 }
395
396 .delegation .revoke img {
397 vertical-align: middle;
398 }
399
400
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 }
408
409 /*************************************************************************
410 * Main content
411 */
412
413 .main {
414 margin-left: 1em;
415 margin-right: 1em;
416 }
417
418
419 /*************************************************************************
420 * ui.tab
421 */
422
423 .ui_tabs_links {
424 margin-top: 4ex;
425 font-size: 75%;
426 }
427
428 .ui_tabs_links a {
429 padding: 1ex;
430 line-height: 200%;
431 background-color: #e7e7e7;
432 white-space: nowrap;
433 }
434
435 .ui_tabs_links a:hover {
436 background-color: #d7d7d7;
437 }
438
439 .ui_tabs_links a.selected {
440 background-color: #444;
441 color: #fff;
442 text-decoration: none;
443 padding: 1ex;
444 }
445
446 .ui_tabs_content {
447 border: 1px solid #444;
448 padding: 1ex 1ex 1ex 1ex;
449 }
450
451 .web10 .ui_tabs_accordeon_head {
452 margin-bottom: 1ex;
453 }
454
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 }
466
467 .web20 .ui_tabs_accordeon_head img {
468 vertical-align: middle;
469 margin-right: 0.5em;
470 }
471
472 .web20 .ui_tabs_accordeon_head .bargraph {
473 margin-right: 0.5em;
474 }
475
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 }
482
483 .web20 .issue_initiative_list .ui_tabs_accordeon_head {
484 background-color: #e5e5ff;
485 }
486
487 .web20 .issue_initiative_list .ui_tabs_accordeon_head,
488 .web20 .issue_initiative_list .ui_tabs_accordeon_content {
489 border-color: #aad;
490 }
491
492 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_content {
493 border-color: #bbb;
494 border-width: 1px;
495 }
496
497 .web20 .issue_initiative_list .ui_tabs_accordeon_content .ui_tabs_accordeon_head {
498 background-color: #eee;
499 border: 1px solid #bbb;
500 }
501
502 .web20 .issue_initiative_list .ui_tabs_accordeon_head a {
503 font-size: 120%;
504 }
505
506
507
508 /*************************************************************************
509 * ui.filters
510 */
511
512 .ui_filter_closed_head,
513 .ui_filter_head {
514 color: #777;
515 margin-top: 1ex;
516 margin-bottom: 1.5ex;
517 font-size: 75%;
518 }
519
520 .ui_filter_head a {
521 color: #777;
522 padding: 0.5ex;
523 }
524
525 .ui_filter_head a.active {
526 color: #fff;
527 background-color: #777;
528 padding: 0.5ex;
529 }
530
531 /*************************************************************************
532 * ui.paginate
533 */
534
535 .ui_paginate_head {
536 margin-bottom: 1ex;
537 }
538
539 .ui_paginate_foot {
540 margin-top: 1ex;
541 }
542
543 .ui_paginate_select a {
544 padding: 0.5ex;
545 }
546
547 /*************************************************************************
548 * ui.bargraph
549 */
550
551 .bargraph {
552 width: 103px;
553 }
554
555 .bargraph50 {
556 width: 52px;
557 }
558
559 .bargraph div {
560 float: left;
561 margin-top: 0.5ex;
562 height: 1.3ex;
563 }
564
565 .bargraph_legend {
566 margin-top: 2ex;
567 }
568
569 .bargraph_legend .bargraph {
570 width: 26px;
571 }
572
573 .bargraph_legend div,
574 .bargraph_legend div div,
575 .bargraph_legend div div div {
576 float: left;
577 }
578
579 .bargraph_legend_label {
580 margin-left: 0.5em;
581 margin-right: 1em;
582 }
583
584 /*************************************************************************
585 * vertical ui.form
586 */
587
588 .login input[type=text],
589 .vertical input[type=text],
590 .login input[type=password],
591 .vertical input[type=password],
592 .vertical textarea,
593 .vertical select {
594 font-family: sans-serif;
595 font-size: 100%;
596 width: 50em;
597 border: 1px solid #444;
598 padding: 0.2ex 0.2em 0.2ex 0.2em;
599 margin-bottom: 1ex;
600 }
601
602 .login input[type=password],
603 .vertical input[type=password] {
604 width: 16em;
605 }
606
607 .vertical select {
608 padding-right: 0;
609 }
610
611 .login .ui_field_label,
612 .vertical .ui_field_label {
613 text-transform: uppercase;
614 font-size: 70%;
615 line-height: 120%;
616 font-weight: bold;
617 color: #777;
618 width: 15em;
619 display: block;
620 float: left;
621 clear: left;
622 text-align: right;
623 padding-right: 0.5em;
624 }
625
626 .ui_field_label.label_right {
627 text-align: left;
628 width: auto;
629 }
630
631 .login input[type=text],
632 .login input[type=password] {
633 width: 10em;
634 }
635
636 .login div,
637 .vertical div {
638 clear: left;
639 }
640
641 .vertical span {
642 display: block;
643 margin-bottom: 0.5ex;
644 }
645
646 .vertical span:after {
647 content: " ";
648 }
649
650 .vertical span span {
651 display: inline;
652 margin-bottom: 0;
653 }
654
655 .login input[type=submit],
656 .vertical input[type=submit] {
657 font-size: 100%;
658 margin-left: 11em;
659 background-color: #444444;
660 color: #fff;
661 border: none;
662 padding: 0.75ex;
663 }
664
665 .login input[type=submit]:hover,
666 .vertical input[type=submit]:hover {
667 background-color: #444444;
668 }
669
670 /*************************************************************************
671 * Tables
672 */
673
674
675 table a.action {
676 font-size: 70%;
677 line-height: 190%;
678 padding: 0.5ex;
679 color: #777;
680 }
681
682 table a.active {
683 color: #fff;
684 }
685
686 th {
687 text-align: left;
688 border-bottom: 1px solid #000;
689 }
690
691 tr:hover td {
692 background-color: #ddd;
693 }
694
695 .nohover tr:hover td {
696 background-color: #fff;
697 }
698
699 .nohover table tr:hover td {
700 background-color: #ddd;
701 }
702
703
704 tr table tr:hover td {
705 background-color: #fff;
706 }
707
708
709 /*************************************************************************
710 * Hidden inline form
711 */
712
713 .hidden_inline_form {
714 display: none;
715 border: 1px solid #444;
716 width: 42em;
717 position: fixed;
718 background-color: #fff;
719 left: 5em;
720 top: 5ex;
721 z-index: 2;
722 }
723
724 .hidden_inline_form a {
725 padding: 0.5ex;
726 color: #fff;
727 }
728
729
730 .hidden_inline_form .head {
731 background-color: #444;
732 color: #fff;
733 display: block;
734 padding: 0.5ex;
735 }
736
737 .hidden_inline_form input[type=text],
738 .hidden_inline_form textarea,
739 .hidden_inline_form select {
740 width: 30em;
741 }
742
743 /*************************************************************************
744 * Positive / Negtive votes
745 */
746
747
748 .positive_votes span {
749 display: inline;
750 }
751
752 .positive_votes {
753 display: inline;
754 background-color: #cfc;
755 padding: 0.3ex 0.5em 0.3ex 0.5em;
756 }
757
758 .negative_votes span {
759 display: inline;
760 }
761
762 .negative_votes {
763 display: inline;
764 background-color: #fcc;
765 padding: 0.3ex 0.5em 0.3ex 0.5em;
766 }
767
768 .suggestion_my_opinion a,
769 .suggestion_my_opinion span {
770 white-space: nowrap;
771 padding-left: 0.2ex !important;
772 padding-right: 0.2ex !important;
773 }
774
775 .active {
776 background-color: #444;
777 color: #fff;
778 }
779
780 .active_red2 { background-color: #a00; color: #fff !important; }
781 .active_red1 { background-color: #f88; color: #000 !important; }
782 .active_green1 { background-color: #8f8; color: #000 !important; }
783 .active_green2 { background-color: #0a0; color: #000 !important; }
784
785
786
787
788 /*************************************************************************
789 * Issues
790 */
791
792 .issues tr {
793 border: 1px solid #ccc;
794 }
795
796 .issues tr tr {
797 border: none;
798 }
799
800 .lang_chooser {
801 float: right;
802 margin-right: 0.5em;
803 }
804
805 .delegation_list_entry {
806 margin-right: 2em;
807 margin-bottom: 2ex;
808 float: left;
809 clear: left;
810 }
811
812 .delegation_list_entry .delegation_arrow {
813 float: left;
814 }
815
816 .delegation_list_entry .delegation_scope {
817 float: left;
818 width: 25em;
819 }
820
821 .delegation_list_entry .delegation_scope a {
822 display: block;
823 }
824
825 .member_list .member_thumb {
826 float: left;
827 margin-right: 1em;
828 margin-bottom: 2ex;
829 }
830
831 .member_thumb {
832 text-decoration: none;
833 width: 14.5em;
834 height: 48px;
835 display: block;
836 float: left;
837 border: 1px solid #999;
838 overflow: hidden;
839 xwhite-space: nowrap;
840 position: relative;
841 }
842
843 .member_thumb a{
844 position: absolute;
845 top: 0;
846 left: 0;
847 padding: 0;
848 margin: 0;
849 }
850
851 .member_thumb a:hover div {
852 background-color: #444;
853 color: #fff;
854 }
855
856 .member_thumb img {
857 padding: 0;
858 margin: 0;
859 vertical-align: bottom;
860 }
861
862 .member_thumb div {
863 }
864
865 .member_thumb .member_image {
866 }
867
868 .member_thumb .member_name {
869 position: absolute;
870 left: 48px;
871 top: 2ex;
872 font-size: 100%;
873 width: 14em;
874 }
875
876 .member_thumb .flags {
877 text-align: right;
878 font-size: 75%;
879 }
880
881 .member_thumb .flags a,
882 .member_thumb .flags img {
883 position: static;
884 float: right;
885 margin-left: 0.5em;
886 }
887
888
889 .member .right {
890 float: right;
891 }
892
893 .member_thumb.not_accepted,
894 .member_thumb.not_informed {
895 opacity: 0.5;
896 }
897
898 .member_statement,
899 .draft_content,
900 .suggestion_content {
901 background-color: #eee;
902 border: 1px solid #ccc;
903 padding-left: 1ex;
904 padding-right: 1ex;
905 }
906
907 .diff {
908 background-color: #eee;
909 border: 1px solid #ccc;
910 padding: 1ex;
911 }
912
913 .diff .added {
914 background-color: #cfc;
915 }
916
917 .diff .removed {
918 background-color: #fcc;
919 }
920
921 .slot_issue_info {
922 background-color: #eee;
923 border: 1px solid #ccc;
924 float: right;
925 padding: 0.5ex;
926 line-height: 130%;
927 margin-right: 1em;
928 }
929
930 .issue_info label {
931 float: left;
932 width: 8em;
933 text-transform: uppercase;
934 font-size: 70%;
935 color: #777;
936 font-weight: bold;
937 clear: left;
938 text-align: right;
939 margin-right: 0.7em;
940 }
941
942 .admitted_info {
943 background-color: #dfd;
944 padding: 1ex;
945 margin-bottom: 2ex;
946 }
947
948 .not_admitted_info,
949 .revoked_info {
950 background-color: #fdd;
951 padding: 1ex;
952 margin-bottom: 2ex;
953 }
954
955 .draft_updated_info,
956 .voting_active_info,
957 .initiator_invite_info,
958 .motd {
959 background-color: #fec;
960 border: 1px solid #b96;
961 padding: 1ex;
962 margin-bottom: 2ex;
963 }
964
965 .suggestion_fulfilled {
966 width: 15em;
967 }
968 .suggestion_fulfilled a.action {
969 padding-left: 0;
970 line-height: 120%;
971 }
972
973 .help,
974 .use_terms {
975 border: 1px solid #bcd;
976 background-color: #def;
977 color: #000;
978 padding: 1ex;
979 }
980
981 .help_visible {
982 margin-bottom: 1ex;
983 }
984
985 .help_visible .help_icon {
986 float: right;
987 }
988
989 .slot_help_hidden {
990 float: right;
991 margin-right: 1em;
992 }
993
994 .help_actions {
995 font-size: 75%;
996 float: right;
997 }
998
999 .help_actions a {
1000 margin-right: 1em;
1001 color: #468;
1002 }
1003
1004 .wiki {
1005 }
1006
1007 .wiki h1,
1008 .wiki h2,
1009 .wiki h3,
1010 .wiki h4 {
1011 margin-top: 1ex;
1012 margin-bottom: 1ex;
1013 }
1014
1015 .wiki h1 {
1016 font-size: 150%;
1017 }
1018
1019 .wiki h2 {
1020 font-size: 125%;
1021 }
1022
1023 .wiki p {
1024 margin-top: 1ex;
1025 margin-bottom: 1ex;
1026 }
1027
1028 form .warning {
1029 background-color: #ffd;
1030 color: #000;
1031 border: 1px solid #dda;
1032 margin: 1ex;
1033 margin-bottom: 2ex;
1034 padding: 1ex;
1035 }
1036
1037 a.not_voted {
1038 display: block;
1039 background-color: #fec;
1040 color: #000;
1041 }
1042
1043 .action_active {
1044 background-color: #fec;
1045 }
1046
1047 .heading {
1048 font-size: 120%;
1049 font-weight: bold;
1050 margin-top: 2ex;
1051 margin-bottom: 1ex;
1052 }
1053
1054 .heading.first {
1055 margin-top: 0;
1056 }
1057
1058 /*************************************************************************
1059 * Voting
1060 */
1061
1062 #voting {
1063 position: relative;
1064 }
1065 #voting .approval, .abstention, .disapproval {
1066 border: 2px black solid;
1067 margin-top: 5ex;
1068 margin-bottom: 5ex;
1069 padding: 1ex;
1070 padding-bottom: 2ex;
1071 }
1072 #voting .approval {
1073 background-color: #9f9;
1074 }
1075 #voting .approval .movable {
1076 background-color: #dfd;
1077 }
1078 #voting .abstention {
1079 background-color: #ccc;
1080 }
1081 #voting .abstention .movable {
1082 background-color: #eee;
1083 }
1084 #voting .disapproval {
1085 background-color: #f88;
1086 }
1087 #voting .disapproval .movable {
1088 background-color: #fbb;
1089 }
1090 #voting .cathead {
1091 font-weight: bold;
1092 }
1093 #voting .movable {
1094 position: relative;
1095 border: 1px black solid;
1096 margin: 1ex;
1097 padding: 0.5ex;
1098 }
1099 #voting .voting_form_active .movable {
1100 cursor: pointer;
1101 }
1102 #voting .voting_form_active .clickable {
1103 cursor: auto;
1104 }
1105 #voting .voting_form_active a.clickable {
1106 cursor: pointer;
1107 }
1108
1109 #voting .grabber {
1110 vertical-align: middle;
1111 cursor: move;
1112 }
1113
1114

Impressum / About Us