liquid_feedback_frontend
view static/lf3.less @ 1062:f03fbffc1800
New layout for suggestion details view
| author | bsw |
|---|---|
| date | Wed Jul 16 21:52:17 2014 +0200 (2014-07-16) |
| parents | 701a5cf6b067 |
| children | 187127e290f9 |
line source
1 html, body, div, span, applet, object, iframe,
2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3 a, abbr, acronym, address, big, cite, code,
4 del, dfn, em, img, ins, kbd, q, s, samp,
5 small, strike, strong, sub, sup, tt, var,
6 b, u, i, center,
7 dl, dt, dd, ol, ul, li,
8 fieldset, form, label, legend,
9 table, caption, tbody, tfoot, thead, tr, th, td,
10 article, aside, canvas, details, embed,
11 figure, figcaption, footer, header, hgroup,
12 menu, nav, output, ruby, section, summary,
13 time, mark, audio, video {
14 margin: 0;
15 padding: 0;
16 border: 0;
17 font-size: 100%;
18 font: inherit;
19 vertical-align: baseline;
20 }
21 /* HTML5 display-role reset for older browsers */
22 article, aside, details, figcaption, figure,
23 footer, header, hgroup, menu, nav, section {
24 display: block;
25 }
26 body {
27 line-height: 1;
28 }
29 ol, ul {
30 list-style: none;
31 }
32 blockquote, q {
33 quotes: none;
34 }
35 blockquote:before, blockquote:after,
36 q:before, q:after {
37 content: '';
38 content: none;
39 }
40 table {
41 border-collapse: collapse;
42 border-spacing: 0;
43 }
45 /* end reset */
48 /* color, fonts, gaps and border radius settings */
50 @body-bg-color: #397ab6;
51 @body-color: #fff;
52 @footer-bg-color: #000;
53 @footer-color: #fff;
54 @page-bg-color: #ddd;
55 @mobile-bg-color: #255078;
56 @head-bg-color: #000;
57 @head-color: #fff;
58 @head-second-color: #0e0;
59 @head-link-color: #fff;
60 @main-bg-color: #fff;
61 @main-color: #000;
62 @main-second-color: #444;
63 @main-event-color: #070;
64 @main-negative-event-color: #a00;
65 @main-head-bg-color: #fff;
66 @main-head-color: #000;
67 @main-link-color: #227;
68 @main-seperator-color: #aaa;
69 @main-highlight-bg-color: #e7f0ff;
70 @main-supported-bg-color: #fa2;
71 @main-satisfied-bg-color: #282;
72 @sidebar-bg-color: #fff;
73 @sidebar-color: #000;
74 @sidebar-head-bg-color: @main-head-bg-color;
75 @sidebar-head-color: @main-head-color;
76 @sidebar-link-color: #227;
77 @sidebar-hr-color: #777;
78 @disabled-color: #777;
79 @admitted-color: #0a0;
80 @not-admitted-color: #a00;
82 @delegation-bg-color: #fff;
83 @delegation-color: #000;
84 @delegation-active-border-color: #f80;
86 @must-bg-color: #0c0;
87 @must-color: #fff;
88 @should-bg-color: #4a4;
89 @should-color: #fff;
90 @shouldnot-bg-color: #a44;
91 @shouldnot-color: #fff;
92 @mustnot-bg-color: #c00;
93 @mustnot-color: #fff;
95 @implemented-bg-color: #0c0;
96 @implemented-color: #fff;
97 @notimplemented-bg-color: #c00;
98 @notimplemented-color: #fff;
100 @font: sans-serif;
101 @size-normal: 10pt;
102 @size-big: 12pt;
103 @line-height: 125%;
107 @logo-font: bold @size-normal e('/') 100% @font;
108 @instance-font: normal @size-normal e('/') 100% @font;
109 @mobile-logo-font: bold @size-big e('/') @line-height @font;
110 @mobile-instance-font: normal @size-normal e('/') 100% @font;
112 @title-font: bold @size-big e('/') @line-height @font;
114 @main-font: normal @size-normal e('/') @line-height @font;
115 @event-font: bold @size-normal e('/') @line-height @font;
117 @tabs-font: normal @size-normal e('/') @line-height @font;
118 @tabs-active-font: bold @size-big e('/') @line-height @font;
120 @filter-font: normal @size-normal e('/') 150% @font;
121 @filter-active-font: bold @size-normal e('/') 150% @font;
123 @subfilter-font: @filter-font;
124 @subfilter-active-font: @filter-active-font;
126 @head1-font: bold @size-big e('/') @line-height @font;
127 @head2-font: normal @size-big e('/') @line-height @font;
128 @head3-font: bold @size-normal e('/') @line-height @font;
130 @btn-font: bold @size-normal e('/') @line-height @font;
132 @usertext-font: normal @size-normal e('/') @line-height @font;
133 @usertext-italic-font: italic @size-normal e('/') @line-height @font;
134 @usertext-bold-font: normal @size-normal e('/') @line-height @font;
138 @main-width: 70%;
140 @pad: 9px;
141 @grid: 12pt;
143 @paragraph-margin: 1.5ex;
145 @border-radius: 2px;
146 @btn-border-radius: 5px;
148 .list-style {
149 list-style: disc;
150 padding-left: 20px;
151 }
153 @micro-avatar-size: 24px;
155 /*
156 * basic font settings
157 */
159 html {
160 overflow-y: scroll;
161 }
163 body {
164 font: @main-font;
165 background-color: @body-bg-color;
166 //background-image: url( "back2.png" );
167 color: @main-color;
168 background-attachment: fixed;
169 }
171 .page {
172 background-image: url( "back50.png" );
173 max-width: 1240px;
174 border-radius: 0 0 @border-radius @border-radius;
175 margin: 0 auto;
176 margin-bottom: 40px;
177 }
179 /*
180 * messages
181 */
183 .slot_notice,
184 .slot_warning,
185 .slot_error {
186 font: @head1-font;
187 padding: @grid;
188 }
190 .slot_motd {
191 background-color: #ccc;
192 padding: @grid;
193 }
195 .slot_notice {
196 background-color: #0c0;
197 color: #fff;
198 }
200 .slot_warning {
201 background-color: #f80;
202 color: #000;
203 }
205 .slot_error {
206 background-color: #c00;
207 color: #fff;
208 }
210 /*
211 * global styles
212 */
214 /* headlines */
215 h1 {
216 font: @head1-font;
217 margin-bottom: 1ex;
218 }
220 h1:last-child {
221 margin-bottom: 0;
222 }
224 h2 {
225 font: @head2-font;
226 }
228 h3 {
229 font: @head3-font;
230 }
232 h1:first-child,
233 h2:first-child,
234 h3:first-child {
235 margin-top: 0;
236 }
238 .right {
239 float: right;
240 }
242 .left {
243 float: left;
244 margin-right: @pad;
245 }
247 /* paragraphs */
248 p {
249 margin-bottom: @paragraph-margin;
250 }
252 p:last-child {
253 margin-bottom: 0;
254 }
256 /* lists */
257 ul.ul {
258 margin-left: @pad;
259 margin-bottom: @paragraph-margin;
260 .list-style;
261 li {
262 margin: @pad/3 0;
263 }
265 li:last-child {
266 margin-bottom: 0;
267 }
268 }
270 ul.ul:last-child {
271 margin-bottom: 0;
272 }
275 /* tables */
277 table {
279 td {
281 padding: 0.3ex 0.3em;
283 }
285 }
287 /* links */
289 a {
290 color: @main-link-color;
291 }
293 a.disabled {
294 color: @disabled-color;
295 cursor: default;
296 }
298 /* formulars */
299 form.inline {
300 display: inline;
301 div {
302 display: inline;
303 }
304 }
306 img {
307 vertical-align: middle;
308 }
311 .icon16 {
312 width: 16px;
313 height: 16px;
314 }
316 .icon24 {
317 width: 24px;
318 height: 24px;
319 }
320 .icon32 {
321 width: 32px;
322 height: 32px;
323 }
324 .icon48 {
325 width: 48px;
326 height: 48px;
327 }
330 img.star {
331 width: 24px;
332 height: 24px;
333 }
335 /*
336 * Avatars
337 */
339 .microAvatar {
340 text-wrap: nowrap;
341 }
343 .microAvatar img,
344 img.micro_avatar {
345 vertical-align: middle;
346 border-radius: 2px;
347 width: @micro-avatar-size;
348 height: @micro-avatar-size;
349 }
351 img.micro_avatar.highlighted {
352 margin: 0;
353 border: 2px solid @delegation-active-border-color;
354 }
357 /*
358 * delegation info
359 */
361 .vote_info,
362 .delegation_info {
363 white-space: nowrap;
364 float: right;
365 text-decoration: none;
366 img {
367 vertical-align: middle;
368 }
369 margin: -2px;
370 }
372 .delegation_info img {
373 border-radius: @border-radius;
374 margin: 2px;
375 }
377 .delegation_info.suspended {
378 opacity: 0.3;
379 }
381 .slot_title .delegation_info.suspended {
382 opacity: 1;
383 }
385 /*
386 * generic attributes
387 */
389 .hide {
390 display: none;
391 }
392 .head_outer {
393 background-color: @head-bg-color;
394 color: @head-color;
395 overflow: auto;
396 margin: 0 auto;
397 max-width: 1240px;
398 }
399 .head {
400 padding: 0.3ex 0;
401 margin: 0 @grid;
402 a {
403 color: @head-link-color;
404 }
406 /*
407 * the logo and instance name
408 */
409 .logo {
410 display: block;
411 padding: @pad 0;
412 text-decoration: none;
413 font: @logo-font;
415 .liquid {
416 color: @head-color;
417 }
419 .feedback {
420 color: @head-second-color;
421 }
422 .instanceName {
423 font: @instance-font;
424 padding-top: @pad;
425 }
426 }
427 .logo:hover {
428 text-decoration: underline;
429 }
433 .notifications {
434 margin-left: 0.6em;
435 text-decoration: none;
437 .count {
438 background-color: #f00;
439 color: #000;
440 padding: 0.2ex 0.25em;
441 border-radius: 1ex;
442 vertical-align: top;
443 }
445 .icon {
446 width: 24px;
447 height: 24px;
448 }
449 }
451 /*
452 * navigation bar
453 */
454 .nav {
455 float: right;
456 padding-top: @pad - 3px;
458 ul, > ul > li:first-child {
459 display: inline;
460 }
462 input[name=q] {
463 width: 12em;
464 border-radius: @border-radius;
465 padding: 2px;
466 background-color: @head-bg-color;
467 color: @head-color;
468 border: 1px solid @body-bg-color;
469 margin-right: 0.6em;
470 }
471 input[name=q]:focus {
472 outline: 2px solid @body-bg-color;
473 }
475 #member_menu a span {
476 margin-left: 5px;
477 }
479 }
481 }
483 /*
484 * title
485 */
486 .slot_title {
488 padding-left: @grid;
489 padding-right: @grid;
490 font: @title-font;
491 color: @body-color;
492 padding-top: @grid;
494 a {
495 color: @body-color;
496 display: inline-block;
497 }
499 a.home {
500 margin-right: 4px;
501 }
503 a.delegation_info {
504 margin-right: 0;
505 }
507 .initiative,
508 a .label {
509 display: none;
510 }
512 .delegation_info {
513 background-color: @main-bg-color;
514 color: @main-color;
515 border-radius: @border-radius;
516 padding-right: 3px;
517 margin-bottom: @grid;
518 a {
519 color: @main-color;
520 }
521 }
522 }
524 .content {
525 clear: both;
526 margin: 0 @grid;
527 margin-top: @grid;
528 }
530 /*
531 * the sidebar
532 */
534 .sidebar {
535 float: right;
536 width: 100% - @main-width;
537 }
539 .sidebarSection {
540 background-color: @sidebar-bg-color;
541 border-radius: @border-radius;
542 color: @sidebar-color;
543 margin-bottom: @grid;
544 padding: 0;
546 .sidebarHead {
547 padding: @pad @pad @pad / 2 @pad;
548 background: @sidebar-head-bg-color;
549 color: @sidebar-head-color;
551 a {
552 color: @sidebar-head-color;
553 }
554 min-height: 20px;
556 .icon24 {
557 margin-top: -@pad/2.5;
558 }
559 }
561 .sidebarRow {
562 clear: right;
563 display: block;
564 border-top: 1px solid @main-seperator-color;
565 padding: @pad/2 @pad;
566 min-height: 20px;
567 }
568 .sidebarRow.highlighted {
569 background-color: @main-highlight-bg-color;
570 }
572 .sidebarRow.sidebarRowNarrow {
573 padding: @pad / 4 @pad;
574 }
576 .sidebarRow.moreLink {
577 min-height: 0;
578 }
580 h1, h1 a,
581 h2, h2 a,
582 h3, h3 a {
583 color: @sidebar-head-color;
584 }
586 a {
587 color: @sidebar-link-color;
588 }
590 .areas {
591 .whenfolded {
592 display: none;
593 }
594 }
596 .areas.folded {
597 .whenunfolded {
598 display: none;
599 }
600 .whenfolded {
601 display: block;
602 }
603 .disabled {
604 display: none;
605 }
606 }
609 a.issue {
610 font: @head1-font;
611 color: @main-color;
612 }
614 ul.initiatives {
615 li {
616 padding: @pad/2 @pad;
617 .bargraph {
618 display: block;
619 }
620 .supporterCount {
621 white-space: nowrap;
622 }
623 border-top: 1px solid @main-seperator-color;
624 }
625 .revoked .initiative_name {
626 text-decoration: line-through;
627 }
629 li.highlighted {
630 background-color: @main-highlight-bg-color;
631 }
632 li.highlighted:last-child{
633 border-radius: 0 0 @border-radius @border-radius;
634 }
635 }
637 .supporters {
638 line-height: @micro-avatar-size * 1.2;
639 }
641 .supportCount {
642 color: #00c000;
643 font: @head1-font;
644 float: right;
645 }
647 .member_list {
649 .member_thumb {
650 white-space: nowrap;
651 overflow: hidden;
652 text-overflow: ellipsis;
654 img.member_image {
655 width: 24px;
656 height: 24px;
657 vertical-align: middle;
658 margin-right: 0.2em;
659 }
661 }
663 .member_thumb.in_delegation_chain {
664 font-weight: bold;
665 }
666 }
669 > div {
670 position: relative;
671 }
673 > div:first-child {
674 margin-top: 0;
675 border-radius: @border-radius @border-radius 0 0;
676 }
678 > div:last-child {
679 border-radius: 0 0 @border-radius @border-radius;
680 }
682 > div:last-child:first-child {
683 border-radius: @border-radius;
684 }
687 a.unit {
688 font: @head2-font;
689 }
691 a.area {
692 margin-left: 25px;
693 display: block;
694 }
696 .star {
697 float: left;
698 }
700 .delegation_info {
701 margin-top: -@pad/2.5;
702 margin-bottom: 1px;
703 }
704 }
706 .admitted_info h1 {
707 color: @admitted-color;
708 }
710 .not_admitted_info, .revoked_info {
711 h1 {
712 color: @not-admitted-color;
713 }
714 }
716 .admitted_info,
717 .not_admitted_info {
719 .initiative_pie {
720 float: right;
721 }
723 table {
724 tr {
725 th {
726 text-align: left;
727 }
728 td {
729 text-align: right;
730 padding: 0.3ex 0.4em;
731 }
732 }
733 }
734 }
739 /*
740 * main area
741 */
743 .main_outer {
744 width: @main-width;
745 }
748 .main {
750 clear: left;
751 margin-right: @grid;
752 border-radius: @border-radius;
754 .section {
756 .sectionHead, .sectionRow {
757 background-color: @main-bg-color;
758 overflow: auto;
759 padding: @pad;
760 }
762 .sectionHead {
763 background-color: @main-head-bg-color;
764 color: @main-head-color;
765 margin-top: @grid;
766 border-radius: @border-radius @border-radius 0 0;
767 }
769 .sectionHead:first-child {
770 margin-top: 0;
771 }
773 .sectionHead:last-child {
774 border-radius: @border-radius;
775 }
778 .sectionRow {
779 margin-top: 4px;
780 }
782 .sectionRow:last-child {
783 border-radius: 0 0 @border-radius @border-radius;
784 margin-bottom: @grid;
785 }
788 }
790 .ui_tabs_links {
791 }
793 > h1 {
794 border-bottom: 1px solid @main-seperator-color;
795 padding: @pad;
796 }
798 /*
799 * tabs und filter
800 */
802 .ui_filter {
803 .ui_filter_head {
804 background: @main-head-bg-color;
805 color: @main-head-color;
806 padding: 0 @pad @pad @pad;
807 vertical-align: middle;
808 a {
809 white-space: nowrap;
810 font: @filter-font;
811 margin-right: 0.5em;
812 }
813 a.active {
814 font: @filter-active-font;
815 text-decoration: none;
816 color: @main-head-color;
817 }
818 select {
819 background: @main-bg-color;
820 color: @main-second-color;
821 font: @filter-font;
822 border: none;
823 padding: 0;
824 margin: 0;
826 option {
827 color: @main-color;
828 }
829 option:first-child,
830 option[value="interest_direct"],
831 option[value="interest_delegated"],
832 option[value="support_direct"],
833 option[value="support_delegated"],
834 option[value="potential_support_direct"],
835 option[value="potential_support_delegated"] {
836 color: @main-second-color;
837 }
838 }
839 select.active {
840 color: @main-color;
841 }
842 }
843 .ui_filter_head:first-child {
844 border-radius: @border-radius @border-radius 0 0;
845 padding-top: @pad;
846 }
847 .ui_filter_head.filter_filter {
848 padding-top: @pad;
849 }
851 .ui_filter_head.filter_mode {
852 padding-top: @pad;
853 margin-bottom: 0;
854 padding-bottom: 0;
855 }
856 .ui_filter_head.subfilter {
857 a {
858 font: @subfilter-font;
859 }
860 a.active {
861 font: @subfilter-active-font;
862 }
863 }
864 }
866 .filter {
867 float: right;
868 }
870 .delegation_info.suspended {
871 margin: 1ex -2px -2px -2px;
872 }
875 .issues {
876 .state_info {
877 font: @event-font;
878 color: @main-event-color;
879 }
880 .state_info.negative {
881 color: @main-negative-event-color;
882 }
883 }
885 ul.initiatives {
886 li {
887 margin-top: 1ex;
889 .bargraph {
890 float: left;
891 margin-top: 5px;
892 margin-right: 0.5em;
893 }
895 .initiative_name {
896 display: block;
897 margin-left: 110px;
898 }
900 .rank1 .initiative_name {
901 margin-left: 0;
902 }
904 .revoked .initiative_name {
905 text-decoration: line-through;
906 }
908 }
910 li:first-child {
911 margin-top: 0;
912 clear: none;
913 }
915 }
917 .events .event ul.initiatives li .initiative_name {
918 margin-left: 0;
919 }
921 .member_photo {
922 float: right;
923 }
925 .member_thumb.in_delegation_chain {
926 font-weight: bold;
927 }
931 /*
932 * initiative
933 */
936 .support {
937 color: #aaa;
938 line-height: 80%;
939 float: right;
940 width: 102px;
941 }
943 .initiativeInfo {
944 font-family: @main-font;
945 line-height: @micro-avatar-size;
946 overflow: auto;
948 .support {
949 margin-top: 1ex;
950 float: left;
951 width: auto;
952 }
954 .mySupport {
955 line-height: 125%;
956 min-width: 12em;
957 text-align: right;
958 }
960 .initiators {
961 margin-top: 1.5ex;
962 margin-bottom: -1ex;
963 float: left;
964 }
966 .links {
967 margin-top: 1.5ex;
968 margin-bottom: -1ex;
969 float: right;
970 clear: right;
971 }
973 .initiator_links {
974 clear: right;
975 }
977 }
979 .issueInfo {
980 .links {
981 margin-top: 1.5ex;
982 margin-bottom: -1ex;
983 float: right;
984 clear: both;
985 }
986 }
988 .draft_updated_info {
989 color: @main-event-color;
991 .info {
992 font: @head3-font;
993 }
994 }
996 /* the draft */
997 .draft {
998 font: @usertext-font;
1000 ul {
1001 margin-left: 1em;
1002 margin-bottom: @paragraph-margin;
1003 list-style: square;
1004 padding-left: 1em;
1005 }
1007 h1 {
1008 font: @usertext-italic-font;
1009 font-size: 125%;
1010 border-bottom: 1px solid @main-second-color;
1011 margin-bottom: 1ex;
1012 }
1014 h2 {
1015 font: @usertext-bold-font;
1016 font-size: 125%;
1017 }
1019 h3 {
1020 font: @usertext-font;
1021 font-size: 125%;
1022 }
1024 h4 {
1025 font: @usertext-bold-font;
1026 }
1028 hr {
1029 border: none;
1030 border-top: 1px solid @main-color;
1031 }
1033 b, strong {
1034 font: @usertext-italic-font;
1035 }
1037 i, em {
1038 //font-style: italic;
1039 font: @usertext-bold-font;
1040 }
1041 }
1043 form, .form {
1044 margin: 0;
1045 padding: 0;
1047 .ui_field_label {
1048 display: inline-block;
1049 width: 25%;
1050 margin: 0;
1051 padding: 0;
1052 text-align: right;
1053 margin-bottom: @pad;
1054 padding-right: 0.5%;
1055 vertical-align: top;
1056 color: @main-second-color;
1057 }
1059 input[type=text],
1060 input[type=password],
1061 select,
1062 textarea {
1063 vertical-align: top;
1064 width: 73%;
1065 margin: 0;
1066 padding: 3px;
1067 border: 1px solid @main-second-color;
1068 font: @head3-font;
1069 margin-bottom: @pad;
1070 }
1072 input:focus {
1073 outline: 2px solid @body-bg-color;
1074 }
1078 .actions {
1079 margin-left: 26%;
1080 }
1082 }
1084 form.wide {
1085 input[type=text],
1086 input[type=password],
1087 select,
1088 textarea {
1089 width: 100%;
1090 }
1092 }
1094 }
1096 .issues, .events {
1098 .event {
1100 .initiative_pie {
1101 clear: right;
1102 float: right;
1103 }
1105 ul.initiatives {
1107 .initiative_info_left {
1108 display: inline;
1109 margin-right: 0.5em;
1110 }
1112 .initiative_info_right {
1113 float: right;
1115 .bargraph {
1116 float: right;
1117 margin-left: 0.5em;
1118 }
1119 }
1121 .result {
1122 color: @main-second-color;
1123 margin-top: 0.5ex;
1124 }
1126 h3 {
1127 margin-top: 1ex;
1128 margin-bottom: 0;
1129 }
1131 a.initiative {
1132 font: @head3-font;
1133 }
1134 }
1136 .event_info {
1137 font: @event-font;
1138 color: @main-event-color;
1139 margin-top: 0.66ex;
1140 margin-bottom: 1ex;
1141 }
1143 .event_info:last-child {
1144 margin-bottom: 0;
1145 }
1147 .event_info.negative {
1148 color: @main-negative-event-color;
1149 }
1151 .event_time {
1152 font: @main-font;
1153 color: @main-second-color;
1154 }
1155 }
1157 .event:hover {
1158 .event_time {
1159 visibility: visible;
1160 }
1161 ul.initiatives {
1162 div {
1163 visibility: visible;
1164 }
1165 }
1166 }
1167 .issue_context {
1168 line-height: 24px;
1169 margin-bottom: 0.66ex;
1170 .unit {
1171 background-color: #777;
1172 color: #fff;
1173 padding: 1px 3px;
1174 border-radius: @border-radius;
1175 text-decoration: none;
1176 }
1177 .area {
1178 background-color: #ddd;
1179 color: #000;
1180 padding: 1px 3px;
1181 border-radius: @border-radius;
1182 text-decoration: none;
1183 }
1184 }
1185 .issue_info {
1186 .issue {
1187 font: @head3-font;
1188 color: @main-color;
1189 }
1190 }
1191 img.star {
1192 vertical-align: middle;
1193 float: right;
1194 margin-left: 0.5em;
1195 }
1197 .draft_preview {
1198 }
1200 .event.suggestion {
1202 ul.initiatives li {
1204 margin-top: 0;
1205 margin-bottom: 1ex;
1207 a {
1209 font: @main-font;
1210 }
1212 }
1214 .suggestion {
1216 font: @head3-font;
1217 overflow: hidden;
1218 text-overflow: ellipsis;
1219 }
1221 }
1223 }
1225 .suggestions {
1227 .suggestion {
1229 .opinion {
1230 float: right;
1232 .must {
1233 background-color: @must-bg-color;
1234 color: @must-color
1235 }
1236 .should {
1237 background-color: @should-bg-color;
1238 color: @should-color
1239 }
1240 .shouldnot {
1241 background-color: @shouldnot-bg-color;
1242 color: @shouldnot-color
1243 }
1244 .mustnot {
1245 background-color: @mustnot-bg-color;
1246 color: @mustnot-color
1247 }
1248 .implemented {
1249 background-color: @implemented-bg-color;
1250 color: @implemented-color
1251 }
1252 .notimplemented {
1253 background-color: @notimplemented-bg-color;
1254 color: @notimplemented-color
1255 }
1257 }
1259 .suggestion-rating {
1260 float: right;
1261 }
1262 .suggestion-text {
1263 margin-top: @pad;
1264 font: @usertext-font;
1265 overflow: hidden;
1266 text-overflow: ellipsis;
1267 position: relative;
1268 z-index: 10;
1269 }
1271 .suggestion-more {
1272 display: none;
1273 }
1275 .suggestion-less {
1276 display: none;
1277 }
1279 .suggestionHead {
1280 overflow: hidden;
1281 text-overflow: ellipsis;
1282 }
1284 .rating {
1285 display: none;
1286 padding: @pad/2 0;
1287 .active-plus2 {
1288 background-color: @must-bg-color;;
1289 color: @must-color;;
1290 }
1291 .active-plus1 {
1292 background-color: @should-bg-color;
1293 color: @should-color;
1294 }
1295 .active-minus1 {
1296 background-color: @shouldnot-bg-color;
1297 color: @shouldnot-color;
1298 }
1299 .active-minus2 {
1300 background-color: @mustnot-bg-color;
1301 color: @mustnot-color;
1302 }
1303 .active-notfulfilled {
1304 background-color: #faa;
1305 }
1306 .active-fulfilled {
1307 background-color: #afa;
1308 }
1309 }
1310 }
1312 .suggestion.rateable {
1313 .suggestion-more {
1314 display: block;
1315 }
1316 }
1318 .suggestion.rateable.unfolded {
1319 .rating {
1320 border-top: 3px solid @body-bg-color;
1321 }
1322 }
1324 .suggestion.folded {
1325 .suggestion-more {
1326 display: block;
1327 position: absolute;
1328 bottom: 0;
1329 left: 0;
1330 width: 100%;
1331 box-shadow: inset 0 -12ex 10ex -5ex #fff;
1332 padding-top: 5ex;
1333 }
1334 }
1336 .suggestion.unfolded {
1337 .suggestion-more {
1338 display: none;
1339 }
1340 .rating {
1341 display: block;
1342 }
1343 .suggestion-less {
1344 margin-top: 1ex;
1345 display: block;
1346 }
1347 }
1349 .suggestion.highlighted {
1350 background-color: @main-highlight-bg-color;
1352 .suggestion-more {
1353 box-shadow: inset 0 -12ex 10ex -5ex @main-highlight-bg-color;
1354 }
1356 }
1358 }
1360 li.raw {
1361 list-style: none;
1362 padding: 0;
1363 margin: 0 !important;
1364 }
1367 .satisfiedSupporterCount {
1368 color: #070;
1369 }
1370 .potentialSupporterCount {
1371 color: #960;
1372 }
1374 .bargraph {
1375 display: inline-block;
1376 vertical-align: top;
1377 height: 9px;
1379 div {
1380 margin: 0;
1381 padding: 0;
1382 display: inline-block;
1383 height: 9px;
1384 }
1386 }
1388 .diff {
1389 .diff_added {
1390 background-color: #cfc;
1391 }
1393 .diff_removed {
1394 text-decoration: line-through;
1395 background-color: #fcc;
1396 }
1397 }
1399 .btn, .ui_paginate_foot a {
1400 text-decoration: none;
1401 min-width: 2em;
1402 text-align: center;
1403 display: inline-block;
1404 border-radius: @btn-border-radius;
1405 border: none;
1406 font: @btn-font;
1407 background-color: #999;
1408 color: #fff !important;
1409 margin-bottom: 5px;
1410 }
1412 .btn {
1413 padding: 1ex 1em;
1414 }
1418 .ui_paginate_foot a {
1419 padding: 0.5ex 0.5em;
1420 background-color: #eee;
1421 color: 000 !important;
1422 }
1424 .ui_paginate_foot a.active {
1425 background-color: #666;
1426 color: #fff !important;
1427 }
1429 .btn-default {
1430 background-color: #47a;
1431 color: #fff !important;
1432 }
1434 .btn:hover, .btn:focus, .ui_paginate_foot a:hover, .ui_paginate_foot a:focus {
1435 background-color: #0a0;
1436 color: #fff !important;
1437 cursor: pointer;
1438 }
1440 .btn-dangerous:hover {
1441 background-color: #c00;
1442 color: #fff !important;
1443 }
1445 .btn-link {
1446 font: @main-font;
1447 background-color: @main-bg-color;
1448 color: @main-link-color;
1449 border: none;
1450 padding: 0;
1451 margin: 0;
1452 text-decoration: underline;
1453 cursor: pointer;
1454 }
1456 /*************************************************************************
1457 * Voting
1458 */
1460 .main .section #voting_form .sectionRow:last-child {
1461 border-radius: 0;
1462 margin-bottom: 0;
1463 }
1465 #voting {
1466 background: #ddd;
1467 padding: @pad;
1468 margin-top: 4px;
1469 position: relative;
1470 margin-bottom: 2ex;
1472 .approval,
1473 .abstention,
1474 .disapproval {
1475 border: 2px black solid;
1476 margin-bottom: 2ex;
1477 padding: 1ex;
1478 padding-bottom: 2ex;
1479 border-radius: @border-radius;
1480 }
1482 .disapproval {
1483 margin-bottom: 2ex;
1484 }
1486 .approval {
1487 background-color: #9f9;
1489 .movable {
1490 background-color: #dfd;
1491 }
1492 }
1494 .abstention {
1495 background-color: #ccc;
1497 .movable {
1498 background-color: #f2f2f2;
1499 }
1500 }
1502 .disapproval {
1503 background-color: #f88;
1505 .movable {
1506 background-color: #fbb;
1507 }
1508 }
1510 .movable {
1511 position: relative;
1512 border: 1px black solid;
1513 margin-top: 1ex;
1514 padding: 0.5ex;
1515 border-radius: @border-radius;
1516 }
1518 .voting_form_active {
1519 .movable {
1520 cursor: pointer;
1521 vertical-align: middle;
1522 cursor: move;
1523 }
1525 .clickable {
1526 cursor: auto;
1527 }
1529 a.clickable {
1530 cursor: pointer;
1531 }
1532 }
1533 }
1536 /*
1537 * footer
1538 */
1540 .footer {
1541 text-align: center;
1542 color: @footer-color;
1543 background-color: @footer-bg-color;
1544 padding: @pad 0;
1545 border: 1px solid #000;
1546 border-top: none;
1548 a {
1549 color: @body-color;
1550 }
1551 }
1554 .ui_paginate_head {
1555 display: none;
1556 }
1558 .ui_paginate_foot {
1559 line-height: 180%;
1560 }
1563 .swiper_tabs {
1564 display: none;
1565 }
1567 #swiper_info {
1568 display: none;
1569 }
1571 .nav .searchLink {
1572 display: none;
1573 }
1576 @media (max-width: 767px) {
1578 html {
1580 body {
1581 margin: 0;
1582 background: @mobile-bg-color;
1584 .head {
1585 margin: @grid/2;
1586 padding: 0;
1588 .logo {
1589 display: block;
1590 padding: 0;
1592 .liquid, .feedback {
1593 font: @mobile-logo-font;
1594 }
1596 .instanceName {
1597 font: @mobile-instance-font;
1598 display: block;
1599 margin-left: 0;
1600 }
1601 }
1602 .nav {
1603 padding: 0;
1604 }
1605 }
1607 .initiativeInfo h1 {
1608 display: none;
1609 }
1611 .slot_title {
1613 font: @head2-font;
1614 padding: 0;
1615 margin: 0 @grid/2;
1617 .spacer {
1618 display: none;
1619 }
1621 .unit, .area, .issue, .initiative, .member {
1622 display: block;
1623 margin-right: 0;
1624 padding: 4px 0;
1625 border-radius: @border-radius;
1626 overflow: auto;
1627 }
1629 .unit:before, .area:before, .issue:before, .initiative:before, .member:before {
1630 content: "↳";
1631 position: relative;
1632 top: -2px;
1633 }
1635 .area {
1636 margin-left: 10px;
1637 }
1638 .issue {
1639 margin-left: 10px * 2;
1640 }
1641 .initiative {
1642 margin-left: 10px * 3;
1643 }
1645 a:last-child, .issue:last-child, .area:last-child, .unit:last-child, .initiative:last-child {
1646 margin-bottom: @grid/2;
1647 }
1649 .unit, .initiative, .issue, .area {
1650 a {
1651 margin-bottom: 0;
1652 display: inline;
1653 }
1654 }
1656 a.home {
1657 display: none;
1658 }
1660 .weight {
1661 float: right;
1662 margin: 0;
1663 }
1665 .delegation_info {
1666 float: right;
1667 display: block;
1668 margin-top: -10px;
1669 }
1670 a .label {
1671 display: inline;
1672 }
1673 .star {
1674 float: right;
1675 margin-left: 0.5em;
1676 margin-top: -@pad/2;
1677 margin-bottom: -@pad/2;
1678 }
1679 }
1681 .slot_title > span > *:last-child {
1682 font: @head1-font;
1683 }
1686 .page {
1687 background: none;
1688 margin: 0;
1689 box-shadow: none;
1690 }
1692 .nav #member_menu .text {
1693 display: none;
1694 }
1696 .nav form.search {
1697 display: none;
1698 }
1700 .nav .notifications,
1701 .nav .searchLink,
1702 .nav #member_menu a {
1703 vertical-align: middle;
1704 display: inline-block;
1705 height: 48px;
1706 min-width: 35px;
1707 text-align: center;
1708 background-color: #000;
1709 border: 1px solid #777;
1710 border-radius: @border-radius;
1711 img {
1712 margin: 0;
1713 width: 48px;
1714 height: 48px;
1715 }
1716 margin: 0;
1717 }
1719 .nav .notifications {
1720 padding: 12px 2px;
1721 height: 24px;
1722 }
1724 .nav #member_menu a :last-child {
1725 display: none;
1726 }
1728 .notifications span {
1729 margin-left: -5px;
1730 }
1732 .swiper_tabs {
1733 clear: both;
1734 display: block;
1735 overflow: auto;
1736 margin: @grid/2;
1738 div {
1739 display: block;
1740 float: left;
1741 width: 33.333%;
1743 a {
1744 padding: 8px 0;
1745 display: block;
1746 text-align: center;
1747 background-color: #eee;
1748 }
1750 a.active {
1751 background-color: #abe;
1752 }
1753 }
1754 div:first-child a {
1755 border-radius: @border-radius 0 0 @border-radius;
1756 }
1758 div:last-child a {
1759 border-radius: 0 @border-radius @border-radius 0;
1760 }
1761 }
1763 #swiper_info.active {
1764 display: block;
1765 font: @head3-font;
1766 z-index: 1;
1767 text-align: center;
1768 width: 100%;
1769 background-color: @mobile-bg-color;
1770 color: @body-color;
1771 }
1773 .sidebarSection {
1774 margin: 0 @grid/2 @grid/2 @grid/2;
1775 }
1777 .main, .extra > .section {
1778 clear: none;
1779 float: none;
1780 width: auto;
1781 margin: 0 @grid/2 @grid/2 @grid/2;
1782 .section .sectionRow:last-child {
1783 margin-bottom: @grid/2;
1784 }
1786 }
1788 .ui_filter_head.filter_mode {
1789 float: none !important;
1790 background: @main-bg-color !important;
1791 text-align: left !important;
1792 border-radius: @border-radius;
1793 margin-bottom: @grid/2 !important;
1794 }
1796 .member_photo {
1797 text-align: center;
1798 margin-bottom: 2ex;
1799 .member_image_photo {
1800 max-width: 600px;
1801 }
1802 }
1804 #trace_content {
1805 margin: @grid/2 0;
1806 border-radius: 0;
1808 ul {
1809 li {
1810 .trace_head {
1811 padding: 6px 5px;
1812 }
1813 }
1814 ul {
1815 padding: 5px 2px;
1816 }
1817 }
1818 }
1820 }
1821 } }
1823 .textCenter {
1824 text-align: center;
1825 }
1827 a.initiative {
1828 text-decoration: none;
1829 border-bottom: 1px solid #66c;
1830 }
1832 a.initiative:hover {
1833 border-bottom: 1px solid #007;
1834 }
1838 #trace_content {
1839 margin: @grid;
1840 padding: @pad;
1841 border-radius: @border-radius;
1842 background-color: @main-bg-color;
1844 #system_error {
1845 font-family: monospace;
1846 }
1848 ul {
1849 li {
1850 margin-top: 10px;
1851 .trace_head {
1852 padding: 3px 5px;
1853 border-radius: @border-radius @border-radius 0 0;
1854 }
1855 .trace_head:last-child {
1856 border-radius: @border-radius;
1857 }
1858 ul {
1859 border-radius: 0 0 @border-radius @border-radius;
1860 }
1861 }
1862 li:first-child {
1863 margin-top: 0;
1864 }
1865 ul {
1866 padding: 10px;
1867 }
1868 }
1870 .trace_config > ul {
1871 background-color: #eee;
1872 border: 1px solid #ccc;
1873 }
1874 .trace_config > .trace_head {
1875 background-color: #ccc;
1876 color: #000;
1877 }
1878 .trace_request > ul {
1879 background-color: #afa;
1880 }
1881 .trace_request > .trace_head {
1882 background-color: #0c0;
1883 }
1884 .trace_filter > ul {
1885 background-color: #ccf;
1886 border: 1px solid #00c;
1887 border-top: none;
1888 }
1889 .trace_filter > .trace_head {
1890 background-color: #00c;
1891 color: #fff;
1892 }
1893 .trace_view > ul {
1894 background-color: #cfc;
1895 border: 1px solid #0c0;
1896 border-top: none;
1897 }
1898 .trace_view > .trace_head {
1899 background-color: #0c0;
1900 color: #000;
1901 }
1902 .trace_action_neutral > ul {
1903 background-color: #ffa;
1904 border: 1px solid #fe0;
1905 }
1906 .trace_action_neutral > .trace_head {
1907 background-color: #fe0;
1908 color: #000;
1909 }
1910 .trace_sql {
1911 background-color: #fff;
1912 padding: 2px 4px;
1913 margin-top: 8px;
1914 }
1915 .trace_error {
1916 background-color: #faa;
1917 color: #000;
1918 font-weight: bold;
1919 border: 1px solid #c00;
1920 }
1921 .trace_exectime {
1922 background-color: #ccc;
1923 font-weight: bold;
1924 border-radius: @border-radius;
1925 }
1927 .time {
1928 float: right;
1929 }
1931 .total_duration {
1932 font-weight: bold;
1933 }
1935 }