liquid_feedback_frontend

view static/lf3.less @ 1063:187127e290f9

find changesets by author, revision, files, or words in the commit message
Style updates for suggestions and inline help for phases
author bsw
date Wed Jul 16 21:53:12 2014 +0200 (2014-07-16)
parents 701a5cf6b067
children cb9e75ac968f
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 {
563 clear: right;
564 display: block;
565 border-top: 1px solid @main-seperator-color;
566 padding: @pad/2 @pad;
567 min-height: 20px;
568 }
569 .sidebarRow.highlighted {
570 background-color: @main-highlight-bg-color;
571 }
572
573 .sidebarRow.sidebarRowNarrow {
574 padding: @pad / 4 @pad;
575 }
576
577 .sidebarRow.moreLink {
578 min-height: 0;
579 }
580
581 a.sidebarRow {
582 text-decoration: none;
583 color: @sidebar-color;
584 }
585
586 h1, h1 a,
587 h2, h2 a,
588 h3, h3 a {
589 color: @sidebar-head-color;
590 }
591
592 a {
593 color: @sidebar-link-color;
594 }
595
596 .areas {
597 .whenfolded {
598 display: none;
599 }
600 }
601
602 .areas.folded {
603 .whenunfolded {
604 display: none;
605 }
606 .whenfolded {
607 display: block;
608 }
609 .disabled {
610 display: none;
611 }
612 }
613
614
615 a.issue {
616 font: @head1-font;
617 color: @main-color;
618 }
619
620 ul.initiatives {
621 li {
622 padding: @pad/2 @pad;
623 .bargraph {
624 display: block;
625 }
626 .supporterCount {
627 white-space: nowrap;
628 }
629 border-top: 1px solid @main-seperator-color;
630 }
631 .revoked .initiative_name {
632 text-decoration: line-through;
633 }
634
635 .rank1 .initiative_name {
636 font-weight: bold;
637 }
638
639 li.highlighted {
640 background-color: @main-highlight-bg-color;
641 }
642 li.highlighted:last-child{
643 border-radius: 0 0 @border-radius @border-radius;
644 }
645 }
646
647 .supporters {
648 line-height: @micro-avatar-size * 1.2;
649 }
650
651 .supportCount {
652 color: #00c000;
653 font: @head1-font;
654 float: right;
655 }
656
657 .member_list {
658
659 .member_thumb {
660 white-space: nowrap;
661 overflow: hidden;
662 text-overflow: ellipsis;
663
664 img.member_image {
665 width: 24px;
666 height: 24px;
667 vertical-align: middle;
668 margin-right: 0.2em;
669 }
670
671 }
672
673 .member_thumb.in_delegation_chain {
674 font-weight: bold;
675 }
676 }
677
678
679 > div {
680 position: relative;
681 }
682
683 > div:first-child {
684 margin-top: 0;
685 border-radius: @border-radius @border-radius 0 0;
686 }
687
688 > div:last-child {
689 border-radius: 0 0 @border-radius @border-radius;
690 }
691
692 > div:last-child:first-child {
693 border-radius: @border-radius;
694 }
695
696
697 a.unit {
698 font: @head2-font;
699 }
700
701 a.area {
702 margin-left: 20px;
703 display: block;
704 }
705
706 .star {
707 float: left;
708 }
709
710 .delegation_info {
711 margin-top: -@pad/2.5;
712 margin-bottom: 1px;
713 }
714 }
715
716 .admitted_info h1 {
717 color: @admitted-color;
718 }
719
720 .not_admitted_info, .revoked_info {
721 h1 {
722 color: @not-admitted-color;
723 }
724 }
725
726 .admitted_info,
727 .not_admitted_info {
728
729 .initiative_pie {
730 float: right;
731 }
732
733 table {
734 tr {
735 th {
736 text-align: left;
737 }
738 td {
739 text-align: right;
740 padding: 0.3ex 0.4em;
741 }
742 }
743 }
744 }
745
746
747
748
749 /*
750 * main area
751 */
752
753 .main_outer {
754 width: @main-width;
755 }
756
757
758 .main {
759
760 clear: left;
761 margin-right: @grid;
762 border-radius: @border-radius;
763
764 .section {
765
766 .sectionHead, .sectionRow {
767 background-color: @main-bg-color;
768 overflow: auto;
769 padding: @pad;
770 }
771
772 .sectionHead {
773 background-color: @main-head-bg-color;
774 color: @main-head-color;
775 margin-top: @grid;
776 border-radius: @border-radius @border-radius 0 0;
777 }
778
779 .sectionHead:first-child {
780 margin-top: 0;
781 }
782
783 .sectionHead:last-child {
784 border-radius: @border-radius;
785 }
786
787
788 .sectionRow {
789 margin-top: 4px;
790 }
791
792 .sectionRow:last-child {
793 border-radius: 0 0 @border-radius @border-radius;
794 margin-bottom: @grid;
795 }
796
797
798 }
799
800 .ui_tabs_links {
801 }
802
803 > h1 {
804 border-bottom: 1px solid @main-seperator-color;
805 padding: @pad;
806 }
807
808 /*
809 * tabs und filter
810 */
811
812 .ui_filter {
813 .ui_filter_head {
814 background: @main-head-bg-color;
815 color: @main-head-color;
816 padding: 0 @pad @pad @pad;
817 vertical-align: middle;
818 a {
819 white-space: nowrap;
820 font: @filter-font;
821 margin-right: 0.5em;
822 }
823 a.active {
824 font: @filter-active-font;
825 text-decoration: none;
826 color: @main-head-color;
827 }
828 select {
829 background: @main-bg-color;
830 color: @main-second-color;
831 font: @filter-font;
832 border: none;
833 padding: 0;
834 margin: 0;
835
836 option {
837 color: @main-color;
838 }
839 option:first-child,
840 option[value="interest_direct"],
841 option[value="interest_delegated"],
842 option[value="support_direct"],
843 option[value="support_delegated"],
844 option[value="potential_support_direct"],
845 option[value="potential_support_delegated"] {
846 color: @main-second-color;
847 }
848 }
849 select.active {
850 color: @main-color;
851 }
852 }
853 .ui_filter_head:first-child {
854 border-radius: @border-radius @border-radius 0 0;
855 padding-top: @pad;
856 }
857 .ui_filter_head.filter_filter {
858 padding-top: @pad;
859 }
860
861 .ui_filter_head.filter_mode {
862 padding-top: @pad;
863 margin-bottom: 0;
864 padding-bottom: 0;
865 }
866 .ui_filter_head.subfilter {
867 a {
868 font: @subfilter-font;
869 }
870 a.active {
871 font: @subfilter-active-font;
872 }
873 }
874 }
875
876 .filter {
877 float: right;
878 }
879
880 .delegation_info.suspended {
881 margin: 1ex -2px -2px -2px;
882 }
883
884
885 .issues {
886 .state_info {
887 font: @event-font;
888 color: @main-event-color;
889 }
890 .state_info.negative {
891 color: @main-negative-event-color;
892 }
893 }
894
895 ul.initiatives {
896 li {
897 margin-top: 1ex;
898
899 .bargraph {
900 float: left;
901 margin-top: 5px;
902 margin-right: 0.5em;
903 }
904
905 .initiative_name {
906 display: block;
907 margin-left: 110px;
908 }
909
910 .rank1 .initiative_name {
911 margin-left: 0;
912 font-weight: bold;
913 }
914
915 .revoked .initiative_name {
916 text-decoration: line-through;
917 }
918
919 }
920
921 li:first-child {
922 margin-top: 0;
923 clear: none;
924 }
925
926 }
927
928 .events .event ul.initiatives li .initiative_name {
929 margin-left: 0;
930 }
931
932 .member_photo {
933 float: right;
934 }
935
936 .member_thumb.in_delegation_chain {
937 font-weight: bold;
938 }
939
940
941
942 /*
943 * initiative
944 */
945
946
947 .support {
948 color: #aaa;
949 line-height: 80%;
950 float: right;
951 width: 102px;
952 }
953
954 .initiativeInfo {
955 font-family: @main-font;
956 line-height: @micro-avatar-size;
957 overflow: auto;
958
959 .support {
960 margin-top: 1ex;
961 float: left;
962 width: auto;
963 }
964
965 .mySupport {
966 line-height: 125%;
967 min-width: 12em;
968 text-align: right;
969 }
970
971 .initiators {
972 margin-top: 1.5ex;
973 margin-bottom: -1ex;
974 float: left;
975 }
976
977 .links {
978 margin-top: 1.5ex;
979 margin-bottom: -1ex;
980 float: right;
981 clear: right;
982 }
983
984 .initiator_links {
985 clear: right;
986 }
987
988 }
989
990 .issueInfo {
991 .links {
992 margin-top: 1.5ex;
993 margin-bottom: -1ex;
994 float: right;
995 clear: both;
996 }
997 }
998
999 .draft_updated_info {
1000 color: @main-event-color;
1001
1002 .info {
1003 font: @head3-font;
1004 }
1005 }
1006
1007 /* the draft */
1008 .draft {
1009 font: @usertext-font;
1010
1011 ul {
1012 margin-left: 1em;
1013 margin-bottom: @paragraph-margin;
1014 list-style: square;
1015 padding-left: 1em;
1016 }
1017
1018 h1 {
1019 font: @usertext-italic-font;
1020 font-size: 125%;
1021 border-bottom: 1px solid @main-second-color;
1022 margin-bottom: 1ex;
1023 }
1024
1025 h2 {
1026 font: @usertext-bold-font;
1027 font-size: 125%;
1028 }
1029
1030 h3 {
1031 font: @usertext-font;
1032 font-size: 125%;
1033 }
1034
1035 h4 {
1036 font: @usertext-bold-font;
1037 }
1038
1039 hr {
1040 border: none;
1041 border-top: 1px solid @main-color;
1042 }
1043
1044 b, strong {
1045 font: @usertext-italic-font;
1046 }
1047
1048 i, em {
1049 //font-style: italic;
1050 font: @usertext-bold-font;
1051 }
1052 }
1053
1054 form, .form {
1055 margin: 0;
1056 padding: 0;
1057
1058 .ui_field_label {
1059 display: inline-block;
1060 width: 25%;
1061 margin: 0;
1062 padding: 0;
1063 text-align: right;
1064 margin-bottom: @pad;
1065 padding-right: 0.5%;
1066 vertical-align: top;
1067 color: @main-second-color;
1068 }
1069
1070 input[type=text],
1071 input[type=password],
1072 select,
1073 textarea {
1074 vertical-align: top;
1075 width: 73%;
1076 margin: 0;
1077 padding: 3px;
1078 border: 1px solid @main-second-color;
1079 font: @head3-font;
1080 margin-bottom: @pad;
1081 }
1082
1083 input:focus {
1084 outline: 2px solid @body-bg-color;
1085 }
1086
1087
1088
1089 .actions {
1090 margin-left: 26%;
1091 }
1092
1093 }
1094
1095 form.wide {
1096 input[type=text],
1097 input[type=password],
1098 select,
1099 textarea {
1100 width: 100%;
1101 }
1102
1103 }
1104
1105 }
1106
1107 .issues, .events {
1108
1109 .event {
1110
1111 .initiative_pie {
1112 clear: right;
1113 float: right;
1114 }
1115
1116 ul.initiatives {
1117
1118 .initiative_info_left {
1119 display: inline;
1120 margin-right: 0.5em;
1121 }
1122
1123 .initiative_info_right {
1124 float: right;
1125
1126 .bargraph {
1127 float: right;
1128 margin-left: 0.5em;
1129 }
1130 }
1131
1132 .result {
1133 color: @main-second-color;
1134 margin-top: 0.5ex;
1135 }
1136
1137 h3 {
1138 margin-top: 1ex;
1139 margin-bottom: 0;
1140 }
1141
1142 a.initiative {
1143 font: @head3-font;
1144 }
1145 }
1146
1147 .event_info {
1148 font: @event-font;
1149 color: @main-event-color;
1150 margin-top: 0.66ex;
1151 margin-bottom: 1ex;
1152 }
1153
1154 .event_info:last-child {
1155 margin-bottom: 0;
1156 }
1157
1158 .event_info.negative {
1159 color: @main-negative-event-color;
1160 }
1161
1162 .event_time {
1163 font: @main-font;
1164 color: @main-second-color;
1165 }
1166 }
1167
1168 .event:hover {
1169 .event_time {
1170 visibility: visible;
1171 }
1172 ul.initiatives {
1173 div {
1174 visibility: visible;
1175 }
1176 }
1177 }
1178 .issue_context {
1179 line-height: 24px;
1180 margin-bottom: 0.66ex;
1181 .unit {
1182 background-color: #777;
1183 color: #fff;
1184 padding: 1px 3px;
1185 border-radius: @border-radius;
1186 text-decoration: none;
1187 }
1188 .area {
1189 background-color: #ddd;
1190 color: #000;
1191 padding: 1px 3px;
1192 border-radius: @border-radius;
1193 text-decoration: none;
1194 }
1195 }
1196 .issue_info {
1197 .issue {
1198 font: @head3-font;
1199 color: @main-color;
1200 }
1201 }
1202 img.star {
1203 vertical-align: middle;
1204 float: right;
1205 margin-left: 0.5em;
1206 }
1207
1208 .draft_preview {
1209 }
1210
1211 .event.suggestion {
1212
1213 ul.initiatives li {
1214
1215 margin-top: 0;
1216 margin-bottom: 1ex;
1217
1218 a {
1219
1220 font: @main-font;
1221 }
1222
1223 }
1224
1225 .suggestion {
1226
1227 font: @head3-font;
1228 overflow: hidden;
1229 text-overflow: ellipsis;
1230 }
1231
1232 }
1233
1234 }
1235
1236 .suggestions {
1237
1238 .suggestion {
1239
1240 .opinion {
1241 float: right;
1242
1243 .must {
1244 background-color: @must-bg-color;
1245 color: @must-color
1246 }
1247 .should {
1248 background-color: @should-bg-color;
1249 color: @should-color
1250 }
1251 .shouldnot {
1252 background-color: @shouldnot-bg-color;
1253 color: @shouldnot-color
1254 }
1255 .mustnot {
1256 background-color: @mustnot-bg-color;
1257 color: @mustnot-color
1258 }
1259 .implemented {
1260 background-color: @implemented-bg-color;
1261 color: @implemented-color
1262 }
1263 .notimplemented {
1264 background-color: @notimplemented-bg-color;
1265 color: @notimplemented-color
1266 }
1267
1268 }
1269
1270 .suggestion-rating {
1271 float: right;
1272 }
1273 .suggestion-text {
1274 margin-top: @pad;
1275 font: @usertext-font;
1276 overflow: hidden;
1277 text-overflow: ellipsis;
1278 position: relative;
1279 z-index: 10;
1280 }
1281
1282
1283 .suggestion-details {
1284 float: right;
1285 }
1286
1287 .suggestion-more {
1288 display: none;
1289 }
1290
1291 .suggestion-less {
1292 display: none;
1293 }
1294
1295 .suggestionHead {
1296 overflow: hidden;
1297 text-overflow: ellipsis;
1298 }
1299
1300 .rating {
1301 display: none;
1302 padding: @pad/2 0;
1303 .active-plus2 {
1304 background-color: @must-bg-color;;
1305 color: @must-color;;
1306 }
1307 .active-plus1 {
1308 background-color: @should-bg-color;
1309 color: @should-color;
1310 }
1311 .active-minus1 {
1312 background-color: @shouldnot-bg-color;
1313 color: @shouldnot-color;
1314 }
1315 .active-minus2 {
1316 background-color: @mustnot-bg-color;
1317 color: @mustnot-color;
1318 }
1319 .active-notfulfilled {
1320 background-color: #faa;
1321 }
1322 .active-fulfilled {
1323 background-color: #afa;
1324 }
1325 }
1326 }
1327
1328 .suggestion.rateable {
1329 .suggestion-more {
1330 display: block;
1331 }
1332 }
1333
1334 .suggestion.rateable.unfolded {
1335 .rating {
1336 border-top: 3px solid @body-bg-color;
1337 }
1338 }
1339
1340 .suggestion.folded {
1341 .suggestion-text {
1342 height: 150px;
1343 overflow: hidden;
1344 }
1345
1346 .suggestion-more {
1347 display: block;
1348 position: absolute;
1349 bottom: 0;
1350 left: 0;
1351 width: 100%;
1352 box-shadow: inset 0 -12ex 10ex -5ex #fff;
1353 padding-top: 5ex;
1354 }
1355
1356 .suggestion-details {
1357 position: absolute;
1358 bottom: 0;
1359 right: 0;
1360 }
1361
1362 }
1363
1364 .suggestion.unfolded {
1365 .suggestion-more {
1366 display: none;
1367 }
1368 .rating {
1369 display: block;
1370 }
1371 .suggestion-less {
1372 margin-top: 1ex;
1373 display: block;
1374 }
1375 }
1376
1377 .suggestion.highlighted {
1378 background-color: @main-highlight-bg-color;
1379
1380 .suggestion-more {
1381 box-shadow: inset 0 -12ex 10ex -5ex @main-highlight-bg-color;
1382 }
1383
1384 }
1385
1386 }
1387
1388 li.raw {
1389 list-style: none;
1390 padding: 0;
1391 margin: 0 !important;
1392 }
1393
1394
1395 .satisfiedSupporterCount {
1396 color: #070;
1397 }
1398 .potentialSupporterCount {
1399 color: #960;
1400 }
1401
1402 .bargraph {
1403 display: inline-block;
1404 vertical-align: top;
1405 height: 9px;
1406
1407 div {
1408 margin: 0;
1409 padding: 0;
1410 display: inline-block;
1411 height: 9px;
1412 }
1413
1414 }
1415
1416 .diff {
1417 .diff_added {
1418 background-color: #cfc;
1419 }
1420
1421 .diff_removed {
1422 text-decoration: line-through;
1423 background-color: #fcc;
1424 }
1425 }
1426
1427 .btn, .ui_paginate_foot a {
1428 text-decoration: none;
1429 min-width: 2em;
1430 text-align: center;
1431 display: inline-block;
1432 border-radius: @btn-border-radius;
1433 border: none;
1434 font: @btn-font;
1435 background-color: #999;
1436 color: #fff !important;
1437 margin-bottom: 5px;
1438 }
1439
1440 .btn {
1441 padding: 1ex 1em;
1442 }
1443
1444
1445
1446 .ui_paginate_foot a {
1447 padding: 0.5ex 0.5em;
1448 background-color: #eee;
1449 color: 000 !important;
1450 }
1451
1452 .ui_paginate_foot a.active {
1453 background-color: #666;
1454 color: #fff !important;
1455 }
1456
1457 .btn-default {
1458 background-color: #47a;
1459 color: #fff !important;
1460 }
1461
1462 .btn:hover, .btn:focus, .ui_paginate_foot a:hover, .ui_paginate_foot a:focus {
1463 background-color: #0a0;
1464 color: #fff !important;
1465 cursor: pointer;
1466 }
1467
1468 .btn-dangerous:hover {
1469 background-color: #c00;
1470 color: #fff !important;
1471 }
1472
1473 .btn-link {
1474 font: @main-font;
1475 background-color: @main-bg-color;
1476 color: @main-link-color;
1477 border: none;
1478 padding: 0;
1479 margin: 0;
1480 text-decoration: underline;
1481 cursor: pointer;
1482 }
1483
1484 /*************************************************************************
1485 * Voting
1486 */
1487
1488 .main .section #voting_form .sectionRow:last-child {
1489 border-radius: 0;
1490 margin-bottom: 0;
1491 }
1492
1493 #voting {
1494 background: #ddd;
1495 padding: @pad;
1496 margin-top: 4px;
1497 position: relative;
1498 margin-bottom: 2ex;
1499
1500 .approval,
1501 .abstention,
1502 .disapproval {
1503 border: 2px black solid;
1504 margin-bottom: 2ex;
1505 padding: 1ex;
1506 padding-bottom: 2ex;
1507 border-radius: @border-radius;
1508 }
1509
1510 .disapproval {
1511 margin-bottom: 2ex;
1512 }
1513
1514 .approval {
1515 background-color: #9f9;
1516
1517 .movable {
1518 background-color: #dfd;
1519 }
1520 }
1521
1522 .abstention {
1523 background-color: #ccc;
1524
1525 .movable {
1526 background-color: #f2f2f2;
1527 }
1528 }
1529
1530 .disapproval {
1531 background-color: #f88;
1532
1533 .movable {
1534 background-color: #fbb;
1535 }
1536 }
1537
1538 .movable {
1539 position: relative;
1540 border: 1px black solid;
1541 margin-top: 1ex;
1542 padding: 0.5ex;
1543 border-radius: @border-radius;
1544 }
1545
1546 .voting_form_active {
1547 .movable {
1548 cursor: pointer;
1549 vertical-align: middle;
1550 cursor: move;
1551 }
1552
1553 .clickable {
1554 cursor: auto;
1555 }
1556
1557 a.clickable {
1558 cursor: pointer;
1559 }
1560 }
1561 }
1562
1563
1564 /*
1565 * footer
1566 */
1567
1568 .footer {
1569 text-align: center;
1570 color: @footer-color;
1571 background-color: @footer-bg-color;
1572 padding: @pad 0;
1573 border: 1px solid #000;
1574 border-top: none;
1575
1576 a {
1577 color: @body-color;
1578 }
1579 }
1580
1581
1582 .ui_paginate_head {
1583 display: none;
1584 }
1585
1586 .ui_paginate_foot {
1587 line-height: 180%;
1588 }
1589
1590
1591 .swiper_tabs {
1592 display: none;
1593 }
1594
1595 #swiper_info {
1596 display: none;
1597 }
1598
1599 .nav .searchLink {
1600 display: none;
1601 }
1602
1603
1604 @media (max-width: 767px) {
1605
1606 html {
1607
1608 body {
1609 margin: 0;
1610 background: @mobile-bg-color;
1611
1612 .head {
1613 margin: @grid/2;
1614 padding: 0;
1615
1616 .logo {
1617 display: block;
1618 padding: 0;
1619
1620 .liquid, .feedback {
1621 font: @mobile-logo-font;
1622 }
1623
1624 .instanceName {
1625 font: @mobile-instance-font;
1626 display: block;
1627 margin-left: 0;
1628 }
1629 }
1630 .nav {
1631 padding: 0;
1632 }
1633 }
1634
1635 .initiativeInfo h1 {
1636 display: none;
1637 }
1638
1639 .slot_title {
1640
1641 font: @head2-font;
1642 padding: 0;
1643 margin: 0 @grid/2;
1644
1645 .spacer {
1646 display: none;
1647 }
1648
1649 .unit, .area, .issue, .initiative, .member {
1650 display: block;
1651 margin-right: 0;
1652 padding: 4px 0;
1653 border-radius: @border-radius;
1654 overflow: auto;
1655 }
1656
1657 .unit:before, .area:before, .issue:before, .initiative:before, .member:before {
1658 content: "↳";
1659 position: relative;
1660 top: -2px;
1661 }
1662
1663 .area {
1664 margin-left: 10px;
1665 }
1666 .issue {
1667 margin-left: 10px * 2;
1668 }
1669 .initiative {
1670 margin-left: 10px * 3;
1671 }
1672
1673 a:last-child, .issue:last-child, .area:last-child, .unit:last-child, .initiative:last-child {
1674 margin-bottom: @grid/2;
1675 }
1676
1677 .unit, .initiative, .issue, .area {
1678 a {
1679 margin-bottom: 0;
1680 display: inline;
1681 }
1682 }
1683
1684 a.home {
1685 display: none;
1686 }
1687
1688 .weight {
1689 float: right;
1690 margin: 0;
1691 }
1692
1693 .delegation_info {
1694 float: right;
1695 display: block;
1696 margin-top: -10px;
1697 }
1698 a .label {
1699 display: inline;
1700 }
1701 .star {
1702 float: right;
1703 margin-left: 0.5em;
1704 margin-top: -@pad/2;
1705 margin-bottom: -@pad/2;
1706 }
1707 }
1708
1709 .slot_title > span > *:last-child {
1710 font: @head1-font;
1711 }
1712
1713
1714 .page {
1715 background: none;
1716 margin: 0;
1717 box-shadow: none;
1718 }
1719
1720 .nav #member_menu .text {
1721 display: none;
1722 }
1723
1724 .nav form.search {
1725 display: none;
1726 }
1727
1728 .nav .notifications,
1729 .nav .searchLink,
1730 .nav #member_menu a {
1731 vertical-align: middle;
1732 display: inline-block;
1733 height: 48px;
1734 min-width: 35px;
1735 text-align: center;
1736 background-color: #000;
1737 border: 1px solid #777;
1738 border-radius: @border-radius;
1739 img {
1740 margin: 0;
1741 width: 48px;
1742 height: 48px;
1743 }
1744 margin: 0;
1745 }
1746
1747 .nav .notifications {
1748 padding: 12px 2px;
1749 height: 24px;
1750 }
1751
1752 .nav #member_menu a :last-child {
1753 display: none;
1754 }
1755
1756 .notifications span {
1757 margin-left: -5px;
1758 }
1759
1760 .swiper_tabs {
1761 clear: both;
1762 display: block;
1763 overflow: auto;
1764 margin: @grid/2;
1765
1766 div {
1767 display: block;
1768 float: left;
1769 width: 33.333%;
1770
1771 a {
1772 padding: 8px 0;
1773 display: block;
1774 text-align: center;
1775 background-color: #eee;
1776 }
1777
1778 a.active {
1779 background-color: #abe;
1780 }
1781 }
1782 div:first-child a {
1783 border-radius: @border-radius 0 0 @border-radius;
1784 }
1785
1786 div:last-child a {
1787 border-radius: 0 @border-radius @border-radius 0;
1788 }
1789 }
1790
1791 #swiper_info.active {
1792 display: block;
1793 font: @head3-font;
1794 z-index: 1;
1795 text-align: center;
1796 width: 100%;
1797 background-color: @mobile-bg-color;
1798 color: @body-color;
1799 }
1800
1801 .sidebarSection {
1802 margin: 0 @grid/2 @grid/2 @grid/2;
1803 }
1804
1805 .main, .extra > .section {
1806 clear: none;
1807 float: none;
1808 width: auto;
1809 margin: 0 @grid/2 @grid/2 @grid/2;
1810 .section .sectionRow:last-child {
1811 margin-bottom: @grid/2;
1812 }
1813
1814 }
1815
1816 .ui_filter_head.filter_mode {
1817 float: none !important;
1818 background: @main-bg-color !important;
1819 text-align: left !important;
1820 border-radius: @border-radius;
1821 margin-bottom: @grid/2 !important;
1822 }
1823
1824 .member_photo {
1825 text-align: center;
1826 margin-bottom: 2ex;
1827 .member_image_photo {
1828 max-width: 600px;
1829 }
1830 }
1831
1832 #trace_content {
1833 margin: @grid/2 0;
1834 border-radius: 0;
1835
1836 ul {
1837 li {
1838 .trace_head {
1839 padding: 6px 5px;
1840 }
1841 }
1842 ul {
1843 padding: 5px 2px;
1844 }
1845 }
1846 }
1847
1848 }
1849 } }
1850
1851 .textCenter {
1852 text-align: center;
1853 }
1854
1855 a.initiative {
1856 text-decoration: none;
1857 border-bottom: 1px solid #66c;
1858 }
1859
1860 a.initiative:hover {
1861 border-bottom: 1px solid #007;
1862 }
1863
1864
1865
1866 #trace_content {
1867 margin: @grid;
1868 padding: @pad;
1869 border-radius: @border-radius;
1870 background-color: @main-bg-color;
1871
1872 #system_error {
1873 font-family: monospace;
1874 }
1875
1876 ul {
1877 li {
1878 margin-top: 10px;
1879 .trace_head {
1880 padding: 3px 5px;
1881 border-radius: @border-radius @border-radius 0 0;
1882 }
1883 .trace_head:last-child {
1884 border-radius: @border-radius;
1885 }
1886 ul {
1887 border-radius: 0 0 @border-radius @border-radius;
1888 }
1889 }
1890 li:first-child {
1891 margin-top: 0;
1892 }
1893 ul {
1894 padding: 10px;
1895 }
1896 }
1897
1898 .trace_config > ul {
1899 background-color: #eee;
1900 border: 1px solid #ccc;
1901 }
1902 .trace_config > .trace_head {
1903 background-color: #ccc;
1904 color: #000;
1905 }
1906 .trace_request > ul {
1907 background-color: #afa;
1908 }
1909 .trace_request > .trace_head {
1910 background-color: #0c0;
1911 }
1912 .trace_filter > ul {
1913 background-color: #ccf;
1914 border: 1px solid #00c;
1915 border-top: none;
1916 }
1917 .trace_filter > .trace_head {
1918 background-color: #00c;
1919 color: #fff;
1920 }
1921 .trace_view > ul {
1922 background-color: #cfc;
1923 border: 1px solid #0c0;
1924 border-top: none;
1925 }
1926 .trace_view > .trace_head {
1927 background-color: #0c0;
1928 color: #000;
1929 }
1930 .trace_action_neutral > ul {
1931 background-color: #ffa;
1932 border: 1px solid #fe0;
1933 }
1934 .trace_action_neutral > .trace_head {
1935 background-color: #fe0;
1936 color: #000;
1937 }
1938 .trace_sql {
1939 background-color: #fff;
1940 padding: 2px 4px;
1941 margin-top: 8px;
1942 }
1943 .trace_error {
1944 background-color: #faa;
1945 color: #000;
1946 font-weight: bold;
1947 border: 1px solid #c00;
1948 }
1949 .trace_exectime {
1950 background-color: #ccc;
1951 font-weight: bold;
1952 border-radius: @border-radius;
1953 }
1954
1955 .time {
1956 float: right;
1957 }
1958
1959 .total_duration {
1960 font-weight: bold;
1961 }
1962
1963 }

Impressum / About Us