liquid_feedback_frontend

view static/lf3.less @ 1080:cb9e75ac968f

find changesets by author, revision, files, or words in the commit message
Better ordering of interested members
author bsw
date Wed Jul 23 20:47:57 2014 +0200 (2014-07-23)
parents 187127e290f9
children c2baf086cc8d
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 }
44
45 /* end reset */
46
47
48 /* color, fonts, gaps and border radius settings */
49
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;
81
82 @delegation-bg-color: #fff;
83 @delegation-color: #000;
84 @delegation-active-border-color: #f80;
85
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;
94
95 @implemented-bg-color: #0c0;
96 @implemented-color: #fff;
97 @notimplemented-bg-color: #c00;
98 @notimplemented-color: #fff;
99
100 @font: sans-serif;
101 @size-normal: 10pt;
102 @size-big: 12pt;
103 @line-height: 125%;
104
105
106
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;
111
112 @title-font: bold @size-big e('/') @line-height @font;
113
114 @main-font: normal @size-normal e('/') @line-height @font;
115 @event-font: bold @size-normal e('/') @line-height @font;
116
117 @tabs-font: normal @size-normal e('/') @line-height @font;
118 @tabs-active-font: bold @size-big e('/') @line-height @font;
119
120 @filter-font: normal @size-normal e('/') 150% @font;
121 @filter-active-font: bold @size-normal e('/') 150% @font;
122
123 @subfilter-font: @filter-font;
124 @subfilter-active-font: @filter-active-font;
125
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;
129
130 @btn-font: bold @size-normal e('/') @line-height @font;
131
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;
135
136
137
138 @main-width: 70%;
139
140 @pad: 9px;
141 @grid: 12pt;
142
143 @paragraph-margin: 1.5ex;
144
145 @border-radius: 2px;
146 @btn-border-radius: 5px;
147
148 .list-style {
149 list-style: disc;
150 padding-left: 20px;
151 }
152
153 @micro-avatar-size: 24px;
154
155 /*
156 * basic font settings
157 */
158
159 html {
160 overflow-y: scroll;
161 }
162
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 }
170
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 }
178
179 /*
180 * messages
181 */
182
183 .slot_notice,
184 .slot_warning,
185 .slot_error {
186 font: @head1-font;
187 padding: @grid;
188 }
189
190 .slot_motd {
191 background-color: #ccc;
192 padding: @grid;
193 }
194
195 .slot_notice {
196 background-color: #0c0;
197 color: #fff;
198 }
199
200 .slot_warning {
201 background-color: #f80;
202 color: #000;
203 }
204
205 .slot_error {
206 background-color: #c00;
207 color: #fff;
208 }
209
210 /*
211 * global styles
212 */
213
214 /* headlines */
215 h1 {
216 font: @head1-font;
217 margin-bottom: 1ex;
218 }
219
220 h1:last-child {
221 margin-bottom: 0;
222 }
223
224 h2 {
225 font: @head2-font;
226 }
227
228 h3 {
229 font: @head3-font;
230 }
231
232 h1:first-child,
233 h2:first-child,
234 h3:first-child {
235 margin-top: 0;
236 }
237
238 .right {
239 float: right;
240 }
241
242 .left {
243 float: left;
244 margin-right: @pad;
245 }
246
247 /* paragraphs */
248 p {
249 margin-bottom: @paragraph-margin;
250 }
251
252 p:last-child {
253 margin-bottom: 0;
254 }
255
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 }
264
265 li:last-child {
266 margin-bottom: 0;
267 }
268 }
269
270 ul.ul:last-child {
271 margin-bottom: 0;
272 }
273
274
275 /* tables */
276
277 table {
278
279 td {
280
281 padding: 0.3ex 0.3em;
282
283 }
284
285 }
286
287 /* links */
288
289 a {
290 color: @main-link-color;
291 }
292
293 a.disabled {
294 color: @disabled-color;
295 cursor: default;
296 }
297
298 /* formulars */
299 form.inline {
300 display: inline;
301 div {
302 display: inline;
303 }
304 }
305
306 img {
307 vertical-align: middle;
308 }
309
310
311
312 img.star {
313 width: 24px;
314 height: 24px;
315 }
316
317 img.icon16 {
318 width: 16px;
319 height: 16px;
320 }
321
322 img.icon24 {
323 width: 24px;
324 height: 24px;
325 }
326 img.icon32 {
327 width: 32px;
328 height: 32px;
329 }
330 img.icon48 {
331 width: 48px;
332 height: 48px;
333 }
334
335
336 /*
337 * Avatars
338 */
339
340 .microAvatar {
341 text-wrap: nowrap;
342 }
343
344 .microAvatar img,
345 img.micro_avatar {
346 vertical-align: middle;
347 border-radius: 2px;
348 width: @micro-avatar-size;
349 height: @micro-avatar-size;
350 }
351
352 img.micro_avatar.highlighted {
353 margin: 0;
354 border: 2px solid @delegation-active-border-color;
355 }
356
357
358 /*
359 * delegation info
360 */
361
362 .vote_info,
363 .delegation_info {
364 white-space: nowrap;
365 float: right;
366 text-decoration: none;
367 img {
368 vertical-align: middle;
369 }
370 margin: -2px;
371 }
372
373 .delegation_info img {
374 border-radius: @border-radius;
375 margin: 2px;
376 }
377
378 .delegation_info.suspended {
379 opacity: 0.3;
380 }
381
382 .slot_title .delegation_info.suspended {
383 opacity: 1;
384 }
385
386 /*
387 * generic attributes
388 */
389
390 .hide {
391 display: none;
392 }
393 .head_outer {
394 background-color: @head-bg-color;
395 color: @head-color;
396 overflow: auto;
397 margin: 0 auto;
398 max-width: 1240px;
399 }
400 .head {
401 padding: 0.3ex 0;
402 margin: 0 @grid;
403 a {
404 color: @head-link-color;
405 }
406
407 /*
408 * the logo and instance name
409 */
410 .logo {
411 display: block;
412 padding: @pad 0;
413 text-decoration: none;
414 font: @logo-font;
415
416 .liquid {
417 color: @head-color;
418 }
419
420 .feedback {
421 color: @head-second-color;
422 }
423 .instanceName {
424 font: @instance-font;
425 padding-top: @pad;
426 }
427 }
428 .logo:hover {
429 text-decoration: underline;
430 }
431
432
433
434 .notifications {
435 margin-left: 0.6em;
436 text-decoration: none;
437
438 .count {
439 background-color: #f00;
440 color: #000;
441 padding: 0.2ex 0.25em;
442 border-radius: 1ex;
443 vertical-align: top;
444 }
445
446 .icon {
447 width: 24px;
448 height: 24px;
449 }
450 }
451
452 /*
453 * navigation bar
454 */
455 .nav {
456 float: right;
457 padding-top: @pad - 3px;
458
459 ul, > ul > li:first-child {
460 display: inline;
461 }
462
463 input[name=q] {
464 width: 12em;
465 border-radius: @border-radius;
466 padding: 2px;
467 background-color: @head-bg-color;
468 color: @head-color;
469 border: 1px solid @body-bg-color;
470 margin-right: 0.6em;
471 }
472 input[name=q]:focus {
473 outline: 2px solid @body-bg-color;
474 }
475
476 #member_menu a span {
477 margin-left: 5px;
478 }
479
480 }
481
482 }
483
484 /*
485 * title
486 */
487 .slot_title {
488
489 padding-left: @grid;
490 padding-right: @grid;
491 font: @title-font;
492 color: @body-color;
493 padding-top: @grid;
494
495 a {
496 color: @body-color;
497 display: inline-block;
498 }
499
500 a.home {
501 margin-right: 4px;
502 }
503
504 a.delegation_info {
505 margin-right: 0;
506 }
507
508 .initiative,
509 a .label {
510 display: none;
511 }
512
513 .delegation_info {
514 background-color: @main-bg-color;
515 color: @main-color;
516 border-radius: @border-radius;
517 padding-right: 3px;
518 margin-bottom: @grid;
519 a {
520 color: @main-color;
521 }
522 }
523 }
524
525 .content {
526 clear: both;
527 margin: 0 @grid;
528 margin-top: @grid;
529 }
530
531 /*
532 * the sidebar
533 */
534
535 .sidebar {
536 float: right;
537 width: 100% - @main-width;
538 }
539
540 .sidebarSection {
541 background-color: @sidebar-bg-color;
542 border-radius: @border-radius;
543 color: @sidebar-color;
544 margin-bottom: @grid;
545 padding: 0;
546
547 .sidebarHead {
548 padding: @pad @pad @pad / 2 @pad;
549 background: @sidebar-head-bg-color;
550 color: @sidebar-head-color;
551
552 a {
553 color: @sidebar-head-color;
554 }
555 min-height: 20px;
556
557 .icon24 {
558 margin-top: -@pad/2.5;
559 }
560 }
561
562 .sidebarRow, .ui_filter_head, .ui_paginate_foot {
563 clear: right;
564 display: block;
565 padding: @pad/2 @pad;
566 min-height: 20px;
567 }
568
569 .sidebarRow {
570 border-top: 1px solid @main-seperator-color;
571 }
572
573 .sidebarRow.highlighted {
574 background-color: @main-highlight-bg-color;
575 }
576
577 .sidebarRow.sidebarRowNarrow, .ui_filter_head, .ui_paginate_foot{
578 padding: @pad / 4 @pad;
579 }
580
581 .sidebarRow.moreLink {
582 min-height: 0;
583 }
584
585 a.sidebarRow {
586 text-decoration: none;
587 color: @sidebar-color;
588 }
589
590 h1, h1 a,
591 h2, h2 a,
592 h3, h3 a {
593 color: @sidebar-head-color;
594 }
595
596 a {
597 color: @sidebar-link-color;
598 }
599
600 .areas {
601 .whenfolded {
602 display: none;
603 }
604 }
605
606 .areas.folded {
607 .whenunfolded {
608 display: none;
609 }
610 .whenfolded {
611 display: block;
612 }
613 .disabled {
614 display: none;
615 }
616 }
617
618
619 a.issue {
620 font: @head1-font;
621 color: @main-color;
622 }
623
624 ul.initiatives {
625 li {
626 padding: @pad/2 @pad;
627 .bargraph {
628 display: block;
629 }
630 .supporterCount {
631 white-space: nowrap;
632 }
633 border-top: 1px solid @main-seperator-color;
634 }
635 .revoked .initiative_name {
636 text-decoration: line-through;
637 }
638
639 .rank1 .initiative_name {
640 font-weight: bold;
641 }
642
643 li.highlighted {
644 background-color: @main-highlight-bg-color;
645 }
646 li.highlighted:last-child{
647 border-radius: 0 0 @border-radius @border-radius;
648 }
649 }
650
651 .supporters {
652 line-height: @micro-avatar-size * 1.2;
653 }
654
655 .supportCount {
656 color: #00c000;
657 font: @head1-font;
658 float: right;
659 }
660
661 .member_list {
662
663 .member_thumb {
664 white-space: nowrap;
665 overflow: hidden;
666 text-overflow: ellipsis;
667
668 img.member_image {
669 width: 24px;
670 height: 24px;
671 vertical-align: middle;
672 margin-right: 0.2em;
673 }
674
675 }
676
677 .member_thumb.in_delegation_chain {
678 font-weight: bold;
679 }
680 }
681
682
683 > div {
684 position: relative;
685 }
686
687 > div:first-child {
688 margin-top: 0;
689 border-radius: @border-radius @border-radius 0 0;
690 }
691
692 > div:last-child {
693 border-radius: 0 0 @border-radius @border-radius;
694 }
695
696 > div:last-child:first-child {
697 border-radius: @border-radius;
698 }
699
700
701 a.unit {
702 font: @head2-font;
703 }
704
705 a.area {
706 margin-left: 20px;
707 display: block;
708 }
709
710 .star {
711 float: left;
712 }
713
714 .delegation_info {
715 margin-top: -@pad/2.5;
716 margin-bottom: 1px;
717 }
718 }
719
720 .admitted_info h1 {
721 color: @admitted-color;
722 }
723
724 .not_admitted_info, .revoked_info {
725 h1 {
726 color: @not-admitted-color;
727 }
728 }
729
730 .admitted_info,
731 .not_admitted_info {
732
733 .initiative_pie {
734 float: right;
735 }
736
737 table {
738 tr {
739 th {
740 text-align: left;
741 }
742 td {
743 text-align: right;
744 padding: 0.3ex 0.4em;
745 }
746 }
747 }
748 }
749
750
751
752
753 /*
754 * main area
755 */
756
757 .main_outer {
758 width: @main-width;
759 }
760
761
762 .main {
763
764 clear: left;
765 margin-right: @grid;
766 border-radius: @border-radius;
767
768 .section {
769
770 .sectionHead, .sectionRow {
771 background-color: @main-bg-color;
772 overflow: auto;
773 padding: @pad;
774 }
775
776 .sectionHead {
777 background-color: @main-head-bg-color;
778 color: @main-head-color;
779 margin-top: @grid;
780 border-radius: @border-radius @border-radius 0 0;
781 }
782
783 .sectionHead:first-child {
784 margin-top: 0;
785 }
786
787 .sectionHead:last-child {
788 border-radius: @border-radius;
789 }
790
791
792 .sectionRow {
793 margin-top: 4px;
794 }
795
796 .sectionRow:last-child {
797 border-radius: 0 0 @border-radius @border-radius;
798 margin-bottom: @grid;
799 }
800
801
802 }
803
804 .ui_tabs_links {
805 }
806
807 > h1 {
808 border-bottom: 1px solid @main-seperator-color;
809 padding: @pad;
810 }
811
812 /*
813 * tabs und filter
814 */
815
816 .ui_filter {
817 .ui_filter_head {
818 background: @main-head-bg-color;
819 color: @main-head-color;
820 padding: 0 @pad @pad @pad;
821 vertical-align: middle;
822 a {
823 white-space: nowrap;
824 font: @filter-font;
825 margin-right: 0.5em;
826 }
827 a.active {
828 font: @filter-active-font;
829 text-decoration: none;
830 color: @main-head-color;
831 }
832 select {
833 background: @main-bg-color;
834 color: @main-second-color;
835 font: @filter-font;
836 border: none;
837 padding: 0;
838 margin: 0;
839
840 option {
841 color: @main-color;
842 }
843 option:first-child,
844 option[value="interest_direct"],
845 option[value="interest_delegated"],
846 option[value="support_direct"],
847 option[value="support_delegated"],
848 option[value="potential_support_direct"],
849 option[value="potential_support_delegated"] {
850 color: @main-second-color;
851 }
852 }
853 select.active {
854 color: @main-color;
855 }
856 }
857 .ui_filter_head:first-child {
858 border-radius: @border-radius @border-radius 0 0;
859 padding-top: @pad;
860 }
861 .ui_filter_head.filter_filter {
862 padding-top: @pad;
863 }
864
865 .ui_filter_head.filter_mode {
866 padding-top: @pad;
867 margin-bottom: 0;
868 padding-bottom: 0;
869 }
870 .ui_filter_head.subfilter {
871 a {
872 font: @subfilter-font;
873 }
874 a.active {
875 font: @subfilter-active-font;
876 }
877 }
878 }
879
880 .filter {
881 float: right;
882 }
883
884 .delegation_info.suspended {
885 margin: 1ex -2px -2px -2px;
886 }
887
888
889 .issues {
890 .state_info {
891 font: @event-font;
892 color: @main-event-color;
893 }
894 .state_info.negative {
895 color: @main-negative-event-color;
896 }
897 }
898
899 ul.initiatives {
900 li {
901 margin-top: 1ex;
902
903 .bargraph {
904 float: left;
905 margin-top: 5px;
906 margin-right: 0.5em;
907 }
908
909 .initiative_name {
910 display: block;
911 margin-left: 110px;
912 }
913
914 .rank1 .initiative_name {
915 margin-left: 0;
916 font-weight: bold;
917 }
918
919 .revoked .initiative_name {
920 text-decoration: line-through;
921 }
922
923 }
924
925 li:first-child {
926 margin-top: 0;
927 clear: none;
928 }
929
930 }
931
932 .events .event ul.initiatives li .initiative_name {
933 margin-left: 0;
934 }
935
936 .member_photo {
937 float: right;
938 }
939
940 .member_thumb.in_delegation_chain {
941 font-weight: bold;
942 }
943
944
945
946 /*
947 * initiative
948 */
949
950
951 .support {
952 color: #aaa;
953 line-height: 80%;
954 float: right;
955 width: 102px;
956 }
957
958 .initiativeInfo {
959 font-family: @main-font;
960 line-height: @micro-avatar-size;
961 overflow: auto;
962
963 .support {
964 margin-top: 1ex;
965 float: left;
966 width: auto;
967 }
968
969 .mySupport {
970 line-height: 125%;
971 min-width: 12em;
972 text-align: right;
973 }
974
975 .initiators {
976 margin-top: 1.5ex;
977 margin-bottom: -1ex;
978 float: left;
979 }
980
981 .links {
982 margin-top: 1.5ex;
983 margin-bottom: -1ex;
984 float: right;
985 clear: right;
986 }
987
988 .initiator_links {
989 clear: right;
990 }
991
992 }
993
994 .issueInfo {
995 .links {
996 margin-top: 1.5ex;
997 margin-bottom: -1ex;
998 float: right;
999 clear: both;
1000 }
1001 }
1002
1003 .draft_updated_info {
1004 color: @main-event-color;
1005
1006 .info {
1007 font: @head3-font;
1008 }
1009 }
1010
1011 /* the draft */
1012 .draft {
1013 font: @usertext-font;
1014
1015 ul {
1016 margin-left: 1em;
1017 margin-bottom: @paragraph-margin;
1018 list-style: square;
1019 padding-left: 1em;
1020 }
1021
1022 h1 {
1023 font: @usertext-italic-font;
1024 font-size: 125%;
1025 border-bottom: 1px solid @main-second-color;
1026 margin-bottom: 1ex;
1027 }
1028
1029 h2 {
1030 font: @usertext-bold-font;
1031 font-size: 125%;
1032 }
1033
1034 h3 {
1035 font: @usertext-font;
1036 font-size: 125%;
1037 }
1038
1039 h4 {
1040 font: @usertext-bold-font;
1041 }
1042
1043 hr {
1044 border: none;
1045 border-top: 1px solid @main-color;
1046 }
1047
1048 b, strong {
1049 font: @usertext-italic-font;
1050 }
1051
1052 i, em {
1053 //font-style: italic;
1054 font: @usertext-bold-font;
1055 }
1056 }
1057
1058 form, .form {
1059 margin: 0;
1060 padding: 0;
1061
1062 .ui_field_label {
1063 display: inline-block;
1064 width: 25%;
1065 margin: 0;
1066 padding: 0;
1067 text-align: right;
1068 margin-bottom: @pad;
1069 padding-right: 0.5%;
1070 vertical-align: top;
1071 color: @main-second-color;
1072 }
1073
1074 input[type=text],
1075 input[type=password],
1076 select,
1077 textarea {
1078 vertical-align: top;
1079 width: 73%;
1080 margin: 0;
1081 padding: 3px;
1082 border: 1px solid @main-second-color;
1083 font: @head3-font;
1084 margin-bottom: @pad;
1085 }
1086
1087 input:focus {
1088 outline: 2px solid @body-bg-color;
1089 }
1090
1091
1092
1093 .actions {
1094 margin-left: 26%;
1095 }
1096
1097 }
1098
1099 form.wide {
1100 input[type=text],
1101 input[type=password],
1102 select,
1103 textarea {
1104 width: 100%;
1105 }
1106
1107 }
1108
1109 }
1110
1111 .issues, .events {
1112
1113 .event {
1114
1115 .initiative_pie {
1116 clear: right;
1117 float: right;
1118 }
1119
1120 ul.initiatives {
1121
1122 .initiative_info_left {
1123 display: inline;
1124 margin-right: 0.5em;
1125 }
1126
1127 .initiative_info_right {
1128 float: right;
1129
1130 .bargraph {
1131 float: right;
1132 margin-left: 0.5em;
1133 }
1134 }
1135
1136 .result {
1137 color: @main-second-color;
1138 margin-top: 0.5ex;
1139 }
1140
1141 h3 {
1142 margin-top: 1ex;
1143 margin-bottom: 0;
1144 }
1145
1146 a.initiative {
1147 font: @head3-font;
1148 }
1149 }
1150
1151 .event_info {
1152 font: @event-font;
1153 color: @main-event-color;
1154 margin-top: 0.66ex;
1155 margin-bottom: 1ex;
1156 }
1157
1158 .event_info:last-child {
1159 margin-bottom: 0;
1160 }
1161
1162 .event_info.negative {
1163 color: @main-negative-event-color;
1164 }
1165
1166 .event_time {
1167 font: @main-font;
1168 color: @main-second-color;
1169 }
1170 }
1171
1172 .event:hover {
1173 .event_time {
1174 visibility: visible;
1175 }
1176 ul.initiatives {
1177 div {
1178 visibility: visible;
1179 }
1180 }
1181 }
1182 .issue_context {
1183 line-height: 24px;
1184 margin-bottom: 0.66ex;
1185 .unit {
1186 background-color: #777;
1187 color: #fff;
1188 padding: 1px 3px;
1189 border-radius: @border-radius;
1190 text-decoration: none;
1191 }
1192 .area {
1193 background-color: #ddd;
1194 color: #000;
1195 padding: 1px 3px;
1196 border-radius: @border-radius;
1197 text-decoration: none;
1198 }
1199 }
1200 .issue_info {
1201 .issue {
1202 font: @head3-font;
1203 color: @main-color;
1204 }
1205 }
1206 img.star {
1207 vertical-align: middle;
1208 float: right;
1209 margin-left: 0.5em;
1210 }
1211
1212 .draft_preview {
1213 }
1214
1215 .event.suggestion {
1216
1217 ul.initiatives li {
1218
1219 margin-top: 0;
1220 margin-bottom: 1ex;
1221
1222 a {
1223
1224 font: @main-font;
1225 }
1226
1227 }
1228
1229 .suggestion {
1230
1231 font: @head3-font;
1232 overflow: hidden;
1233 text-overflow: ellipsis;
1234 }
1235
1236 }
1237
1238 }
1239
1240 .suggestions {
1241
1242 .suggestion {
1243
1244 .opinion {
1245 float: right;
1246
1247 .must {
1248 background-color: @must-bg-color;
1249 color: @must-color
1250 }
1251 .should {
1252 background-color: @should-bg-color;
1253 color: @should-color
1254 }
1255 .shouldnot {
1256 background-color: @shouldnot-bg-color;
1257 color: @shouldnot-color
1258 }
1259 .mustnot {
1260 background-color: @mustnot-bg-color;
1261 color: @mustnot-color
1262 }
1263 .implemented {
1264 background-color: @implemented-bg-color;
1265 color: @implemented-color
1266 }
1267 .notimplemented {
1268 background-color: @notimplemented-bg-color;
1269 color: @notimplemented-color
1270 }
1271
1272 }
1273
1274 .suggestion-rating {
1275 float: right;
1276 }
1277 .suggestion-text {
1278 margin-top: @pad;
1279 font: @usertext-font;
1280 overflow: hidden;
1281 text-overflow: ellipsis;
1282 position: relative;
1283 z-index: 10;
1284 }
1285
1286
1287 .suggestion-details {
1288 float: right;
1289 }
1290
1291 .suggestion-more {
1292 display: none;
1293 }
1294
1295 .suggestion-less {
1296 display: none;
1297 }
1298
1299 .suggestionHead {
1300 overflow: hidden;
1301 text-overflow: ellipsis;
1302 }
1303
1304 .rating {
1305 display: none;
1306 padding: @pad/2 0;
1307 .active-plus2 {
1308 background-color: @must-bg-color;;
1309 color: @must-color;;
1310 }
1311 .active-plus1 {
1312 background-color: @should-bg-color;
1313 color: @should-color;
1314 }
1315 .active-minus1 {
1316 background-color: @shouldnot-bg-color;
1317 color: @shouldnot-color;
1318 }
1319 .active-minus2 {
1320 background-color: @mustnot-bg-color;
1321 color: @mustnot-color;
1322 }
1323 .active-notfulfilled {
1324 background-color: #faa;
1325 }
1326 .active-fulfilled {
1327 background-color: #afa;
1328 }
1329 }
1330 }
1331
1332 .suggestion.rateable {
1333 .suggestion-more {
1334 display: block;
1335 }
1336 }
1337
1338 .suggestion.rateable.unfolded {
1339 .rating {
1340 border-top: 3px solid @body-bg-color;
1341 }
1342 }
1343
1344 .suggestion.folded {
1345 .suggestion-text {
1346 height: 150px;
1347 overflow: hidden;
1348 }
1349
1350 .suggestion-more {
1351 display: block;
1352 position: absolute;
1353 bottom: 0;
1354 left: 0;
1355 width: 100%;
1356 box-shadow: inset 0 -12ex 10ex -5ex #fff;
1357 padding-top: 5ex;
1358 }
1359
1360 .suggestion-details {
1361 position: absolute;
1362 bottom: 0;
1363 right: 0;
1364 }
1365
1366 }
1367
1368 .suggestion.unfolded {
1369 .suggestion-more {
1370 display: none;
1371 }
1372 .rating {
1373 display: block;
1374 }
1375 .suggestion-less {
1376 margin-top: 1ex;
1377 display: block;
1378 }
1379 }
1380
1381 .suggestion.highlighted {
1382 background-color: @main-highlight-bg-color;
1383
1384 .suggestion-more {
1385 box-shadow: inset 0 -12ex 10ex -5ex @main-highlight-bg-color;
1386 }
1387
1388 }
1389
1390 }
1391
1392 li.raw {
1393 list-style: none;
1394 padding: 0;
1395 margin: 0 !important;
1396 }
1397
1398
1399 .satisfiedSupporterCount {
1400 color: #070;
1401 }
1402 .potentialSupporterCount {
1403 color: #960;
1404 }
1405
1406 .bargraph {
1407 display: inline-block;
1408 vertical-align: top;
1409 height: 9px;
1410
1411 div {
1412 margin: 0;
1413 padding: 0;
1414 display: inline-block;
1415 height: 9px;
1416 }
1417
1418 }
1419
1420 .diff {
1421 .diff_added {
1422 background-color: #cfc;
1423 }
1424
1425 .diff_removed {
1426 text-decoration: line-through;
1427 background-color: #fcc;
1428 }
1429 }
1430
1431 .btn, .ui_paginate_foot a {
1432 text-decoration: none;
1433 min-width: 2em;
1434 text-align: center;
1435 display: inline-block;
1436 border-radius: @btn-border-radius;
1437 border: none;
1438 font: @btn-font;
1439 background-color: #999;
1440 color: #fff !important;
1441 margin-bottom: 5px;
1442 }
1443
1444 .btn {
1445 padding: 1ex 1em;
1446 }
1447
1448
1449
1450 .ui_paginate_foot a {
1451 padding: 0.5ex 0.5em;
1452 background-color: #eee;
1453 color: 000 !important;
1454 }
1455
1456 .ui_paginate_foot a.active {
1457 background-color: #666;
1458 color: #fff !important;
1459 }
1460
1461 .btn-default {
1462 background-color: #47a;
1463 color: #fff !important;
1464 }
1465
1466 .btn:hover, .btn:focus, .ui_paginate_foot a:hover, .ui_paginate_foot a:focus {
1467 background-color: #0a0;
1468 color: #fff !important;
1469 cursor: pointer;
1470 }
1471
1472 .btn-dangerous:hover {
1473 background-color: #c00;
1474 color: #fff !important;
1475 }
1476
1477 .btn-link {
1478 font: @main-font;
1479 background-color: @main-bg-color;
1480 color: @main-link-color;
1481 border: none;
1482 padding: 0;
1483 margin: 0;
1484 text-decoration: underline;
1485 cursor: pointer;
1486 }
1487
1488 /*************************************************************************
1489 * Voting
1490 */
1491
1492 .main .section #voting_form .sectionRow:last-child {
1493 border-radius: 0;
1494 margin-bottom: 0;
1495 }
1496
1497 #voting {
1498 background: #ddd;
1499 padding: @pad;
1500 margin-top: 4px;
1501 position: relative;
1502 margin-bottom: 2ex;
1503
1504 .approval,
1505 .abstention,
1506 .disapproval {
1507 border: 2px black solid;
1508 margin-bottom: 2ex;
1509 padding: 1ex;
1510 padding-bottom: 2ex;
1511 border-radius: @border-radius;
1512 }
1513
1514 .disapproval {
1515 margin-bottom: 2ex;
1516 }
1517
1518 .approval {
1519 background-color: #9f9;
1520
1521 .movable {
1522 background-color: #dfd;
1523 }
1524 }
1525
1526 .abstention {
1527 background-color: #ccc;
1528
1529 .movable {
1530 background-color: #f2f2f2;
1531 }
1532 }
1533
1534 .disapproval {
1535 background-color: #f88;
1536
1537 .movable {
1538 background-color: #fbb;
1539 }
1540 }
1541
1542 .movable {
1543 position: relative;
1544 border: 1px black solid;
1545 margin-top: 1ex;
1546 padding: 0.5ex;
1547 border-radius: @border-radius;
1548 }
1549
1550 .voting_form_active {
1551 .movable {
1552 cursor: pointer;
1553 vertical-align: middle;
1554 cursor: move;
1555 }
1556
1557 .clickable {
1558 cursor: auto;
1559 }
1560
1561 a.clickable {
1562 cursor: pointer;
1563 }
1564 }
1565 }
1566
1567
1568 /*
1569 * footer
1570 */
1571
1572 .footer {
1573 text-align: center;
1574 color: @footer-color;
1575 background-color: @footer-bg-color;
1576 padding: @pad 0;
1577 border: 1px solid #000;
1578 border-top: none;
1579
1580 a {
1581 color: @body-color;
1582 }
1583 }
1584
1585
1586 .ui_paginate_head {
1587 display: none;
1588 }
1589
1590 .ui_paginate_foot {
1591 line-height: 180%;
1592 }
1593
1594
1595 .swiper_tabs {
1596 display: none;
1597 }
1598
1599 #swiper_info {
1600 display: none;
1601 }
1602
1603 .nav .searchLink {
1604 display: none;
1605 }
1606
1607
1608 @media (max-width: 767px) {
1609
1610 html {
1611
1612 body {
1613 margin: 0;
1614 background: @mobile-bg-color;
1615
1616 .head {
1617 margin: @grid/2;
1618 padding: 0;
1619
1620 .logo {
1621 display: block;
1622 padding: 0;
1623
1624 .liquid, .feedback {
1625 font: @mobile-logo-font;
1626 }
1627
1628 .instanceName {
1629 font: @mobile-instance-font;
1630 display: block;
1631 margin-left: 0;
1632 }
1633 }
1634 .nav {
1635 padding: 0;
1636 }
1637 }
1638
1639 .initiativeInfo h1 {
1640 display: none;
1641 }
1642
1643 .slot_title {
1644
1645 font: @head2-font;
1646 padding: 0;
1647 margin: 0 @grid/2;
1648
1649 .spacer {
1650 display: none;
1651 }
1652
1653 .unit, .area, .issue, .initiative, .member {
1654 display: block;
1655 margin-right: 0;
1656 padding: 4px 0;
1657 border-radius: @border-radius;
1658 overflow: auto;
1659 }
1660
1661 .unit:before, .area:before, .issue:before, .initiative:before, .member:before {
1662 content: "↳";
1663 position: relative;
1664 top: -2px;
1665 }
1666
1667 .area {
1668 margin-left: 10px;
1669 }
1670 .issue {
1671 margin-left: 10px * 2;
1672 }
1673 .initiative {
1674 margin-left: 10px * 3;
1675 }
1676
1677 a:last-child, .issue:last-child, .area:last-child, .unit:last-child, .initiative:last-child {
1678 margin-bottom: @grid/2;
1679 }
1680
1681 .unit, .initiative, .issue, .area {
1682 a {
1683 margin-bottom: 0;
1684 display: inline;
1685 }
1686 }
1687
1688 a.home {
1689 display: none;
1690 }
1691
1692 .weight {
1693 float: right;
1694 margin: 0;
1695 }
1696
1697 .delegation_info {
1698 float: right;
1699 display: block;
1700 margin-top: -10px;
1701 }
1702 a .label {
1703 display: inline;
1704 }
1705 .star {
1706 float: right;
1707 margin-left: 0.5em;
1708 margin-top: -@pad/2;
1709 margin-bottom: -@pad/2;
1710 }
1711 }
1712
1713 .slot_title > span > *:last-child {
1714 font: @head1-font;
1715 }
1716
1717
1718 .page {
1719 background: none;
1720 margin: 0;
1721 box-shadow: none;
1722 }
1723
1724 .nav #member_menu .text {
1725 display: none;
1726 }
1727
1728 .nav form.search {
1729 display: none;
1730 }
1731
1732 .nav .notifications,
1733 .nav .searchLink,
1734 .nav #member_menu a {
1735 vertical-align: middle;
1736 display: inline-block;
1737 height: 48px;
1738 min-width: 35px;
1739 text-align: center;
1740 background-color: #000;
1741 border: 1px solid #777;
1742 border-radius: @border-radius;
1743 img {
1744 margin: 0;
1745 width: 48px;
1746 height: 48px;
1747 }
1748 margin: 0;
1749 }
1750
1751 .nav .notifications {
1752 padding: 12px 2px;
1753 height: 24px;
1754 }
1755
1756 .nav #member_menu a :last-child {
1757 display: none;
1758 }
1759
1760 .notifications span {
1761 margin-left: -5px;
1762 }
1763
1764 .swiper_tabs {
1765 clear: both;
1766 display: block;
1767 overflow: auto;
1768 margin: @grid/2;
1769
1770 div {
1771 display: block;
1772 float: left;
1773 width: 33.333%;
1774
1775 a {
1776 padding: 8px 0;
1777 display: block;
1778 text-align: center;
1779 background-color: #eee;
1780 }
1781
1782 a.active {
1783 background-color: #abe;
1784 }
1785 }
1786 div:first-child a {
1787 border-radius: @border-radius 0 0 @border-radius;
1788 }
1789
1790 div:last-child a {
1791 border-radius: 0 @border-radius @border-radius 0;
1792 }
1793 }
1794
1795 #swiper_info.active {
1796 display: block;
1797 font: @head3-font;
1798 z-index: 1;
1799 text-align: center;
1800 width: 100%;
1801 background-color: @mobile-bg-color;
1802 color: @body-color;
1803 }
1804
1805 .sidebarSection {
1806 margin: 0 @grid/2 @grid/2 @grid/2;
1807 }
1808
1809 .main, .extra > .section {
1810 clear: none;
1811 float: none;
1812 width: auto;
1813 margin: 0 @grid/2 @grid/2 @grid/2;
1814 .section .sectionRow:last-child {
1815 margin-bottom: @grid/2;
1816 }
1817
1818 }
1819
1820 .ui_filter_head.filter_mode {
1821 float: none !important;
1822 background: @main-bg-color !important;
1823 text-align: left !important;
1824 border-radius: @border-radius;
1825 margin-bottom: @grid/2 !important;
1826 }
1827
1828 .member_photo {
1829 text-align: center;
1830 margin-bottom: 2ex;
1831 .member_image_photo {
1832 max-width: 600px;
1833 }
1834 }
1835
1836 #trace_content {
1837 margin: @grid/2 0;
1838 border-radius: 0;
1839
1840 ul {
1841 li {
1842 .trace_head {
1843 padding: 6px 5px;
1844 }
1845 }
1846 ul {
1847 padding: 5px 2px;
1848 }
1849 }
1850 }
1851
1852 }
1853 } }
1854
1855 .textCenter {
1856 text-align: center;
1857 }
1858
1859 a.initiative {
1860 text-decoration: none;
1861 border-bottom: 1px solid #66c;
1862 }
1863
1864 a.initiative:hover {
1865 border-bottom: 1px solid #007;
1866 }
1867
1868
1869
1870 #trace_content {
1871 margin: @grid;
1872 padding: @pad;
1873 border-radius: @border-radius;
1874 background-color: @main-bg-color;
1875
1876 #system_error {
1877 font-family: monospace;
1878 }
1879
1880 ul {
1881 li {
1882 margin-top: 10px;
1883 .trace_head {
1884 padding: 3px 5px;
1885 border-radius: @border-radius @border-radius 0 0;
1886 }
1887 .trace_head:last-child {
1888 border-radius: @border-radius;
1889 }
1890 ul {
1891 border-radius: 0 0 @border-radius @border-radius;
1892 }
1893 }
1894 li:first-child {
1895 margin-top: 0;
1896 }
1897 ul {
1898 padding: 10px;
1899 }
1900 }
1901
1902 .trace_config > ul {
1903 background-color: #eee;
1904 border: 1px solid #ccc;
1905 }
1906 .trace_config > .trace_head {
1907 background-color: #ccc;
1908 color: #000;
1909 }
1910 .trace_request > ul {
1911 background-color: #afa;
1912 }
1913 .trace_request > .trace_head {
1914 background-color: #0c0;
1915 }
1916 .trace_filter > ul {
1917 background-color: #ccf;
1918 border: 1px solid #00c;
1919 border-top: none;
1920 }
1921 .trace_filter > .trace_head {
1922 background-color: #00c;
1923 color: #fff;
1924 }
1925 .trace_view > ul {
1926 background-color: #cfc;
1927 border: 1px solid #0c0;
1928 border-top: none;
1929 }
1930 .trace_view > .trace_head {
1931 background-color: #0c0;
1932 color: #000;
1933 }
1934 .trace_action_neutral > ul {
1935 background-color: #ffa;
1936 border: 1px solid #fe0;
1937 }
1938 .trace_action_neutral > .trace_head {
1939 background-color: #fe0;
1940 color: #000;
1941 }
1942 .trace_sql {
1943 background-color: #fff;
1944 padding: 2px 4px;
1945 margin-top: 8px;
1946 }
1947 .trace_error {
1948 background-color: #faa;
1949 color: #000;
1950 font-weight: bold;
1951 border: 1px solid #c00;
1952 }
1953 .trace_exectime {
1954 background-color: #ccc;
1955 font-weight: bold;
1956 border-radius: @border-radius;
1957 }
1958
1959 .time {
1960 float: right;
1961 }
1962
1963 .total_duration {
1964 font-weight: bold;
1965 }
1966
1967 }

Impressum / About Us