liquid_feedback_frontend

view static/lf3.less @ 1587:d5c5bf6bfda5

find changesets by author, revision, files, or words in the commit message
Show action element in issues only if necessary
author bsw
date Wed Jan 27 09:57:10 2021 +0100 (2021-01-27)
parents 91089defc3ea
children
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: bold @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-color: #255078;
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 ol {
1023 margin-left: 1em;
1024 margin-bottom: @paragraph-margin;
1025 list-style: decimal;
1026 padding-left: 1em;
1027 }
1028
1029 h1 {
1030 font: @usertext-italic-font;
1031 font-size: 125%;
1032 border-bottom: 1px solid @main-second-color;
1033 margin-bottom: 1ex;
1034 }
1035
1036 h2 {
1037 font: @usertext-bold-font;
1038 font-size: 125%;
1039 }
1040
1041 h3 {
1042 font: @usertext-font;
1043 font-size: 125%;
1044 }
1045
1046 h4 {
1047 font: @usertext-bold-font;
1048 }
1049
1050 hr {
1051 border: none;
1052 border-top: 1px solid @main-color;
1053 }
1054
1055 b, strong {
1056 font: @usertext-italic-font;
1057 }
1058
1059 i, em {
1060 //font-style: italic;
1061 font: @usertext-bold-font;
1062 }
1063 }
1064
1065 form, .form {
1066 margin: 0;
1067 padding: 0;
1068
1069 .ui_field_label {
1070 display: inline-block;
1071 width: 25%;
1072 margin: 0;
1073 padding: 0;
1074 text-align: right;
1075 margin-bottom: @pad;
1076 padding-right: 0.5%;
1077 vertical-align: top;
1078 color: @main-second-color;
1079 }
1080
1081 input[type=text],
1082 input[type=password],
1083 select,
1084 textarea {
1085 vertical-align: top;
1086 width: 73%;
1087 margin: 0;
1088 padding: 3px;
1089 border: 1px solid @main-second-color;
1090 font: @head3-font;
1091 margin-bottom: @pad;
1092 }
1093
1094 input:focus {
1095 outline: 2px solid @body-bg-color;
1096 }
1097
1098
1099
1100 .actions {
1101 margin-left: 26%;
1102 }
1103
1104 }
1105
1106 form.wide {
1107 input[type=text],
1108 input[type=password],
1109 select,
1110 textarea {
1111 width: 100%;
1112 }
1113
1114 }
1115
1116 }
1117
1118 .issues, .events {
1119
1120 .event {
1121
1122 .initiative_pie {
1123 clear: right;
1124 float: right;
1125 }
1126
1127 ul.initiatives {
1128
1129 .initiative_info_left {
1130 display: inline;
1131 margin-right: 0.5em;
1132 }
1133
1134 .initiative_info_right {
1135 float: right;
1136
1137 .bargraph {
1138 float: right;
1139 margin-left: 0.5em;
1140 }
1141 }
1142
1143 .result {
1144 color: @main-second-color;
1145 margin-top: 0.5ex;
1146 }
1147
1148 h3 {
1149 margin-top: 1ex;
1150 margin-bottom: 0;
1151 }
1152
1153 a.initiative {
1154 font: @head3-font;
1155 }
1156 }
1157
1158 .event_info {
1159 font: @event-font;
1160 color: @main-event-color;
1161 margin-top: 0.66ex;
1162 margin-bottom: 1ex;
1163 }
1164
1165 .event_info:last-child {
1166 margin-bottom: 0;
1167 }
1168
1169 .event_info.negative {
1170 color: @main-negative-event-color;
1171 }
1172
1173 .event_time {
1174 font: @main-font;
1175 color: @main-second-color;
1176 }
1177 }
1178
1179 .event:hover {
1180 .event_time {
1181 visibility: visible;
1182 }
1183 ul.initiatives {
1184 div {
1185 visibility: visible;
1186 }
1187 }
1188 }
1189 .issue_context {
1190 line-height: 24px;
1191 margin-bottom: 0.66ex;
1192 .unit {
1193 background-color: #777;
1194 color: #fff;
1195 padding: 1px 3px;
1196 border-radius: @border-radius;
1197 text-decoration: none;
1198 }
1199 .area {
1200 background-color: #ddd;
1201 color: #000;
1202 padding: 1px 3px;
1203 border-radius: @border-radius;
1204 text-decoration: none;
1205 }
1206 }
1207 .issue_info {
1208 .issue {
1209 font: @head3-font;
1210 color: @main-color;
1211 }
1212 }
1213 img.star {
1214 vertical-align: middle;
1215 float: right;
1216 margin-left: 0.5em;
1217 }
1218
1219 .draft_preview {
1220 }
1221
1222 .event.suggestion {
1223
1224 ul.initiatives li {
1225
1226 margin-top: 0;
1227 margin-bottom: 1ex;
1228
1229 a {
1230
1231 font: @main-font;
1232 }
1233
1234 }
1235
1236 .suggestion {
1237
1238 font: @head3-font;
1239 overflow: hidden;
1240 text-overflow: ellipsis;
1241 }
1242
1243 }
1244
1245 }
1246
1247 .suggestions {
1248
1249 .suggestion {
1250
1251 .opinion {
1252 float: right;
1253
1254 .must {
1255 background-color: @must-bg-color;
1256 color: @must-color
1257 }
1258 .should {
1259 background-color: @should-bg-color;
1260 color: @should-color
1261 }
1262 .shouldnot {
1263 background-color: @shouldnot-bg-color;
1264 color: @shouldnot-color
1265 }
1266 .mustnot {
1267 background-color: @mustnot-bg-color;
1268 color: @mustnot-color
1269 }
1270 .implemented {
1271 background-color: @implemented-bg-color;
1272 color: @implemented-color
1273 }
1274 .notimplemented {
1275 background-color: @notimplemented-bg-color;
1276 color: @notimplemented-color
1277 }
1278
1279 }
1280
1281 .suggestion-rating {
1282 float: right;
1283 }
1284 .suggestion-text {
1285 margin-top: @pad;
1286 font: @usertext-font;
1287 overflow: hidden;
1288 text-overflow: ellipsis;
1289 position: relative;
1290 z-index: 10;
1291 }
1292
1293
1294 .suggestion-details {
1295 float: right;
1296 }
1297
1298 .suggestion-more {
1299 display: none;
1300 }
1301
1302 .suggestion-less {
1303 display: none;
1304 }
1305
1306 .suggestionHead {
1307 overflow: hidden;
1308 text-overflow: ellipsis;
1309 }
1310
1311 .rating {
1312 display: none;
1313 padding: @pad/2 0;
1314 .active-plus2 {
1315 background-color: @must-bg-color;;
1316 color: @must-color;;
1317 }
1318 .active-plus1 {
1319 background-color: @should-bg-color;
1320 color: @should-color;
1321 }
1322 .active-minus1 {
1323 background-color: @shouldnot-bg-color;
1324 color: @shouldnot-color;
1325 }
1326 .active-minus2 {
1327 background-color: @mustnot-bg-color;
1328 color: @mustnot-color;
1329 }
1330 .active-notfulfilled {
1331 background-color: #faa;
1332 }
1333 .active-fulfilled {
1334 background-color: #afa;
1335 }
1336 }
1337 }
1338
1339 .suggestion.rateable {
1340 .suggestion-more {
1341 display: block;
1342 }
1343 }
1344
1345 .suggestion.rateable.unfolded {
1346 .rating {
1347 border-top: 3px solid @body-bg-color;
1348 }
1349 }
1350
1351 .suggestion.folded {
1352 .suggestion-text {
1353 height: 150px;
1354 overflow: hidden;
1355 }
1356
1357 .suggestion-more {
1358 display: block;
1359 position: absolute;
1360 bottom: 0;
1361 left: 0;
1362 width: 100%;
1363 box-shadow: inset 0 -12ex 10ex -5ex #fff;
1364 padding-top: 5ex;
1365 }
1366
1367 .suggestion-details {
1368 position: absolute;
1369 bottom: 0;
1370 right: 0;
1371 }
1372
1373 }
1374
1375 .suggestion.unfolded {
1376 .suggestion-more {
1377 display: none;
1378 }
1379 .rating {
1380 display: block;
1381 }
1382 .suggestion-less {
1383 margin-top: 1ex;
1384 display: block;
1385 }
1386 }
1387
1388 .suggestion.highlighted {
1389 background-color: @main-highlight-bg-color;
1390
1391 .suggestion-more {
1392 box-shadow: inset 0 -12ex 10ex -5ex @main-highlight-bg-color;
1393 }
1394
1395 }
1396
1397 }
1398
1399 li.raw {
1400 list-style: none;
1401 padding: 0;
1402 margin: 0 !important;
1403 }
1404
1405
1406 .satisfiedSupporterCount {
1407 color: #070;
1408 }
1409 .potentialSupporterCount {
1410 color: #960;
1411 }
1412
1413 .bargraph {
1414 display: inline-block;
1415 vertical-align: top;
1416 height: 9px;
1417
1418 div {
1419 margin: 0;
1420 padding: 0;
1421 display: inline-block;
1422 height: 9px;
1423 }
1424
1425 }
1426
1427 .diff {
1428 .diff_added {
1429 background-color: #cfc;
1430 }
1431
1432 .diff_removed {
1433 text-decoration: line-through;
1434 background-color: #fcc;
1435 }
1436 }
1437
1438 .btn, .ui_paginate_foot a {
1439 text-decoration: none;
1440 min-width: 2em;
1441 text-align: center;
1442 display: inline-block;
1443 border-radius: @btn-border-radius;
1444 border: none;
1445 font: @btn-font;
1446 background-color: #999;
1447 color: #fff !important;
1448 margin-bottom: 5px;
1449 }
1450
1451 .btn {
1452 padding: 1ex 1em;
1453 }
1454
1455
1456
1457 .ui_paginate_foot a {
1458 padding: 0.5ex 0.5em;
1459 background-color: #eee;
1460 color: 000 !important;
1461 }
1462
1463 .ui_paginate_foot a.active {
1464 background-color: #666;
1465 color: #fff !important;
1466 }
1467
1468 .btn-default {
1469 background-color: #47a;
1470 color: #fff !important;
1471 }
1472
1473 .btn:hover, .btn:focus, .ui_paginate_foot a:hover, .ui_paginate_foot a:focus {
1474 background-color: #0a0;
1475 color: #fff !important;
1476 cursor: pointer;
1477 }
1478
1479 .btn-dangerous:hover {
1480 background-color: #c00;
1481 color: #fff !important;
1482 }
1483
1484 .btn-link {
1485 font: @main-font;
1486 background-color: @main-bg-color;
1487 color: @main-link-color;
1488 border: none;
1489 padding: 0;
1490 margin: 0;
1491 text-decoration: underline;
1492 cursor: pointer;
1493 }
1494
1495 /*************************************************************************
1496 * Voting
1497 */
1498
1499 .main .section #voting_form .sectionRow:last-child {
1500 border-radius: 0;
1501 margin-bottom: 0;
1502 }
1503
1504 #voting {
1505 background: #ddd;
1506 padding: @pad;
1507 margin-top: 4px;
1508 position: relative;
1509 margin-bottom: 2ex;
1510
1511 .approval,
1512 .abstention,
1513 .disapproval {
1514 border: 2px black solid;
1515 margin-bottom: 2ex;
1516 padding: 1ex;
1517 padding-bottom: 2ex;
1518 border-radius: @border-radius;
1519 }
1520
1521 .disapproval {
1522 margin-bottom: 2ex;
1523 }
1524
1525 .approval {
1526 background-color: #9f9;
1527
1528 .movable {
1529 background-color: #dfd;
1530 }
1531 }
1532
1533 .abstention {
1534 background-color: #ccc;
1535
1536 .movable {
1537 background-color: #f2f2f2;
1538 }
1539 }
1540
1541 .disapproval {
1542 background-color: #f88;
1543
1544 .movable {
1545 background-color: #fbb;
1546 }
1547 }
1548
1549 .movable {
1550 position: relative;
1551 border: 1px black solid;
1552 margin-top: 1ex;
1553 padding: 0.5ex;
1554 border-radius: @border-radius;
1555 }
1556
1557 .voting_form_active {
1558 .movable {
1559 cursor: pointer;
1560 vertical-align: middle;
1561 cursor: move;
1562 }
1563
1564 .clickable {
1565 cursor: auto;
1566 }
1567
1568 a.clickable {
1569 cursor: pointer;
1570 }
1571 }
1572 }
1573
1574
1575 /*
1576 * footer
1577 */
1578
1579 .footer {
1580 text-align: center;
1581 color: @footer-color;
1582 background-color: @footer-bg-color;
1583 padding: @pad 0;
1584 border: 1px solid #000;
1585 border-top: none;
1586
1587 a {
1588 color: @body-color;
1589 }
1590 }
1591
1592
1593 .ui_paginate_head {
1594 display: none;
1595 }
1596
1597 .ui_paginate_foot {
1598 line-height: 180%;
1599 }
1600
1601
1602 .swiper_tabs {
1603 display: none;
1604 }
1605
1606 #swiper_info {
1607 display: none;
1608 }
1609
1610 .nav .searchLink {
1611 display: none;
1612 }
1613
1614
1615 @media (max-width: 767px) {
1616
1617 html {
1618
1619 body {
1620 margin: 0;
1621 background: @mobile-bg-color;
1622
1623 .head {
1624 margin: @grid/2;
1625 padding: 0;
1626
1627 .logo {
1628 display: block;
1629 padding: 0;
1630
1631 .liquid, .feedback {
1632 font: @mobile-logo-font;
1633 }
1634
1635 .instanceName {
1636 font: @mobile-instance-font;
1637 display: block;
1638 margin-left: 0;
1639 }
1640 }
1641 .nav {
1642 padding: 0;
1643 }
1644 }
1645
1646 .initiativeInfo h1 {
1647 display: none;
1648 }
1649
1650 .slot_title {
1651
1652 font: @head2-font;
1653 padding: 0;
1654 margin: 0 @grid/2;
1655
1656 .spacer {
1657 display: none;
1658 }
1659
1660 .unit, .area, .issue, .initiative, .member {
1661 display: block;
1662 margin-right: 0;
1663 padding: 4px 0;
1664 border-radius: @border-radius;
1665 overflow: auto;
1666 }
1667
1668 .unit:before, .area:before, .issue:before, .initiative:before, .member:before {
1669 content: "↳";
1670 position: relative;
1671 top: -2px;
1672 }
1673
1674 .area {
1675 margin-left: 10px;
1676 }
1677 .issue {
1678 margin-left: 10px * 2;
1679 }
1680 .initiative {
1681 margin-left: 10px * 3;
1682 }
1683
1684 a:last-child, .issue:last-child, .area:last-child, .unit:last-child, .initiative:last-child {
1685 margin-bottom: @grid/2;
1686 }
1687
1688 .unit, .initiative, .issue, .area {
1689 a {
1690 margin-bottom: 0;
1691 display: inline;
1692 }
1693 }
1694
1695 a.home {
1696 display: none;
1697 }
1698
1699 .weight {
1700 float: right;
1701 margin: 0;
1702 }
1703
1704 .delegation_info {
1705 float: right;
1706 display: block;
1707 margin-top: -10px;
1708 }
1709 a .label {
1710 display: inline;
1711 }
1712 .star {
1713 float: right;
1714 margin-left: 0.5em;
1715 margin-top: -@pad/2;
1716 margin-bottom: -@pad/2;
1717 }
1718 }
1719
1720 .slot_title > span > *:last-child {
1721 font: @head1-font;
1722 }
1723
1724
1725 .page {
1726 background: none;
1727 margin: 0;
1728 box-shadow: none;
1729 }
1730
1731 .nav #member_menu .text {
1732 display: none;
1733 }
1734
1735 .nav form.search {
1736 display: none;
1737 }
1738
1739 .nav .notifications,
1740 .nav .searchLink,
1741 .nav #member_menu a {
1742 vertical-align: middle;
1743 display: inline-block;
1744 height: 48px;
1745 min-width: 35px;
1746 text-align: center;
1747 background-color: #000;
1748 border: 1px solid #777;
1749 border-radius: @border-radius;
1750 img {
1751 margin: 0;
1752 width: 48px;
1753 height: 48px;
1754 }
1755 margin: 0;
1756 }
1757
1758 .nav .notifications {
1759 padding: 12px 2px;
1760 height: 24px;
1761 }
1762
1763 .nav #member_menu a :last-child {
1764 display: none;
1765 }
1766
1767 .notifications span {
1768 margin-left: -5px;
1769 }
1770
1771 .swiper_tabs {
1772 clear: both;
1773 display: block;
1774 overflow: auto;
1775 margin: @grid/2;
1776
1777 div {
1778 display: block;
1779 float: left;
1780 width: 33.333%;
1781
1782 a {
1783 padding: 8px 0;
1784 display: block;
1785 text-align: center;
1786 background-color: #eee;
1787 }
1788
1789 a.active {
1790 background-color: #abe;
1791 }
1792 }
1793 div:first-child a {
1794 border-radius: @border-radius 0 0 @border-radius;
1795 }
1796
1797 div:last-child a {
1798 border-radius: 0 @border-radius @border-radius 0;
1799 }
1800 }
1801
1802 #swiper_info.active {
1803 display: block;
1804 font: @head3-font;
1805 z-index: 1;
1806 text-align: center;
1807 width: 100%;
1808 background-color: @mobile-bg-color;
1809 color: @body-color;
1810 }
1811
1812 .sidebarSection {
1813 margin: 0 @grid/2 @grid/2 @grid/2;
1814 }
1815
1816 .main, .extra > .section {
1817 clear: none;
1818 float: none;
1819 width: auto;
1820 margin: 0 @grid/2 @grid/2 @grid/2;
1821 .section .sectionRow:last-child {
1822 margin-bottom: @grid/2;
1823 }
1824
1825 }
1826
1827 .ui_filter_head.filter_mode {
1828 float: none !important;
1829 background: @main-bg-color !important;
1830 text-align: left !important;
1831 border-radius: @border-radius;
1832 margin-bottom: @grid/2 !important;
1833 }
1834
1835 .member_photo {
1836 text-align: center;
1837 margin-bottom: 2ex;
1838 .member_image_photo {
1839 max-width: 600px;
1840 }
1841 }
1842
1843 #trace_content {
1844 margin: @grid/2 0;
1845 border-radius: 0;
1846
1847 ul {
1848 li {
1849 .trace_head {
1850 padding: 6px 5px;
1851 }
1852 }
1853 ul {
1854 padding: 5px 2px;
1855 }
1856 }
1857 }
1858
1859 }
1860 } }
1861
1862 .textCenter {
1863 text-align: center;
1864 }
1865
1866 a.initiative {
1867 text-decoration: none;
1868 border-bottom: 1px solid #66c;
1869 }
1870
1871 a.initiative:hover {
1872 border-bottom: 1px solid #007;
1873 }
1874
1875
1876
1877 #trace_content {
1878 margin: @grid;
1879 padding: @pad;
1880 border-radius: @border-radius;
1881 background-color: @main-bg-color;
1882
1883 #system_error {
1884 font-family: monospace;
1885 }
1886
1887 ul {
1888 li {
1889 margin-top: 10px;
1890 .trace_head {
1891 padding: 3px 5px;
1892 border-radius: @border-radius @border-radius 0 0;
1893 }
1894 .trace_head:last-child {
1895 border-radius: @border-radius;
1896 }
1897 ul {
1898 border-radius: 0 0 @border-radius @border-radius;
1899 }
1900 }
1901 li:first-child {
1902 margin-top: 0;
1903 }
1904 ul {
1905 padding: 10px;
1906 }
1907 }
1908
1909 .trace_config > ul {
1910 background-color: #eee;
1911 border: 1px solid #ccc;
1912 }
1913 .trace_config > .trace_head {
1914 background-color: #ccc;
1915 color: #000;
1916 }
1917 .trace_request > ul {
1918 background-color: #afa;
1919 }
1920 .trace_request > .trace_head {
1921 background-color: #0c0;
1922 }
1923 .trace_filter > ul {
1924 background-color: #ccf;
1925 border: 1px solid #00c;
1926 border-top: none;
1927 }
1928 .trace_filter > .trace_head {
1929 background-color: #00c;
1930 color: #fff;
1931 }
1932 .trace_view > ul {
1933 background-color: #cfc;
1934 border: 1px solid #0c0;
1935 border-top: none;
1936 }
1937 .trace_view > .trace_head {
1938 background-color: #0c0;
1939 color: #000;
1940 }
1941 .trace_action_neutral > ul {
1942 background-color: #ffa;
1943 border: 1px solid #fe0;
1944 }
1945 .trace_action_neutral > .trace_head {
1946 background-color: #fe0;
1947 color: #000;
1948 }
1949 .trace_action_success > ul {
1950 background-color: #afa;
1951 border: 1px solid #fe0;
1952 }
1953 .trace_action_success > .trace_head {
1954 background-color: #fe0;
1955 color: #000;
1956 }
1957 .trace_action_softfail > ul {
1958 background-color: #faa;
1959 border: 1px solid #fe0;
1960 }
1961 .trace_action_softfail > .trace_head {
1962 background-color: #fe0;
1963 color: #000;
1964 }
1965 .trace_sql {
1966 background-color: #fff;
1967 padding: 2px 4px;
1968 margin-top: 8px;
1969 }
1970 .trace_sql_time {
1971 float: right;
1972 font-weight: bold;
1973 }
1974 .trace_error {
1975 background-color: #faa;
1976 color: #000;
1977 font-weight: bold;
1978 border: 1px solid #c00;
1979 }
1980 .trace_exectime {
1981 background-color: #ccc;
1982 font-weight: bold;
1983 border-radius: @border-radius;
1984 }
1985
1986 .time {
1987 float: right;
1988 }
1989
1990 .total_duration {
1991 font-weight: bold;
1992 }
1993
1994 }

Impressum / About Us