liquid_feedback_frontend
view static/lf4.css @ 1826:8d36c14128d4
Fixed display of attachments in initiative listing
| author | bsw |
|---|---|
| date | Thu Feb 03 12:01:59 2022 +0100 (2022-02-03) |
| parents | dd966ebdfa04 |
| children | 71916d0badca |
line source
1 @font-face {
2 font-family: "Roboto";
3 src: url("font/Roboto-Regular.ttf");
4 }
5 @font-face {
6 font-family: "Roboto Bold";
7 src: url("font/Roboto-Bold.ttf");
8 }
9 @font-face {
10 font-family: "Roboto Slab";
11 src: url("font/RobotoSlab-Regular.ttf");
12 }
13 @font-face {
14 font-family: 'Material Icons';
15 font-style: normal;
16 font-weight: 400;
17 src: url("font/MaterialIcons-Regular.ttf");
18 }
20 .material-icons {
21 font-family: 'Material Icons';
22 font-weight: normal;
23 font-style: normal;
24 font-size: 24px;
25 line-height: 1;
26 letter-spacing: normal;
27 text-transform: none;
28 display: inline-block;
29 white-space: nowrap;
30 word-wrap: normal;
31 direction: ltr;
32 -webkit-font-feature-settings: 'liga';
33 -webkit-font-smoothing: antialiased;
34 }
35 .material-icons.icon-green {
36 color: #4CAF50;
37 }
38 .material-icons.icon-yellow {
39 color: #FFEB3B;
40 }
41 .material-icons.icon-red {
42 color: #F44336;
43 }
45 .mapboxgl-popup-content {
46 max-width: 200px;
47 }
48 body {
49 font-family: "Roboto";
50 background: #fff;
51 }
52 strong {
53 font-family: "Roboto Bold";
54 }
55 .slot_error {
56 margin: 20px 20px 0 20px;
57 background: #fed;
58 padding: 20px;
59 }
60 .slot_notice {
61 margin: 20px 20px 0 20px;
62 background: #efd;
63 padding: 20px;
64 }
65 h1 {
66 font-size: 24px;
67 margin-bottom: 0px;
68 }
70 .mdl-layout__container {
71 max-width: 1600px;
72 height: auto;
73 background: #f7f7f7;
74 }
75 .mdl-layout__header-row {
76 padding-left: 20px !important;
77 padding-right: 10px !important;
78 }
79 .mdl-layout__content {
80 flex-shrink: 0;
81 width: 100%;
82 }
83 #lf-member-menu {
84 cursor: pointer;
85 }
86 .notifications {
87 display: block;
88 text-align: center;
89 }
90 .page-content {
91 xdisplay: flex;
92 width: 100%;
93 }
94 .map, .ui_field_location {
95 border: none;
96 width: 100%;
97 height: auto;
98 max-height: 80vh;
99 position: relative;
100 border-radius: 2px;
101 }
102 .map:before {
103 content: "";
104 display: block;
105 padding-top: 100%;
106 }
107 .map iframe {
108 position: absolute;
109 top: 0;
110 left: 0;
111 right: 0;
112 bottom: 0;
113 height: 100%;
114 }
115 .axto-logo {
116 width: 100%;
117 }
118 .mdl-card__title-text a.issue {
119 font-size: 18px;
120 line-height: 20px;
121 }
122 .mdl-list__item .initiative_name {
123 font-size: 18px;
124 line-height: normal;
125 }
126 .mdl-list__item .revoked .initiative_name {
127 text-decoration: line-through;
128 }
130 .initiatives.mdl-list {
131 margin-top: 5px;
132 margin-bottom: 5px;
133 padding-bottom: 0px;
134 }
135 .initiatives .mdl-list__item--three-line {
136 min-height: 0;
137 padding-top: 0;
138 padding-bottom: 0;
139 }
140 .mdl-data-table__fullwidth {
141 width: 100%;
142 }
143 .mdl-textfield__fullwidth {
144 width: 100%;
145 }
147 .mdl-card {
148 min-height: 20px;
149 overflow: visible;
150 display: block;
151 margin-bottom: 16px;
152 border-radius: 5px;
153 }
155 .mdl-card__title {
156 border-radius: 5px 5px 0 0;
157 }
159 .mdl-card__fullwidth {
160 width: 100%;
161 }
162 .mdl-card__title {
163 display: block;
164 }
165 .mdl-card__title > h2,
166 .mdl-card__title > a {
167 display: inline-block;
168 vertical-align: top;
169 }
170 .mdl-card__subtitle-text {
171 display: block;
172 }
173 .mdl-card__content {
174 font-size: 1rem;
175 padding: 16px;
176 }
177 .mdl-card__content.mdl-card--no-bottom-pad {
178 padding-bottom: 0;
179 }
180 .mdl-card__actions {
181 min-height: 52px;
182 }
183 .mdl-card__actions.mdl-card--action-border,
184 .mdl-card__content.mdl-card--border {
185 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
186 }
187 .mdl-card__actions.mdl-card--notice,
188 .mdl-card__content.mdl-card--notice {
189 background: #fff9c4;
190 }
191 .mdl-card--has-fab {
192 position: relative;
193 }
194 .mdl-special-card {
195 background: #fff;
196 margin-bottom: 16px;
197 border-radius: 5px;
198 }
200 .mdl-navigation__head {
201 font-family: "Roboto Bold";
202 }
203 .mdl-list__item--three-line {
204 height: auto;
205 min-height: 88px;
206 }
207 .mdl-list__item--three-line .mdl-list__item-primary-content {
208 height: auto;
209 min-height: 52px;
210 }
211 .mdl-chip {
212 vertical-align: middle;
213 }
214 .mdl-chip.clickable {
215 cursor: pointer;
216 }
217 .mdl-menu {
218 z-index: -9999;
219 }
220 .mdl-card {
221 z-index: auto !important;
222 }
223 .mdl-menu__item {
224 padding: 0;
225 }
226 .mdl-menu__link {
227 display: block;
228 padding: 0 16px;
229 min-height: 48px;
230 text-decoration: none;
231 color: #444;
232 }
233 .mdl-tabs__tab-bar {
234 justify-content: flex-start;
235 }
236 .mdl-tabs__tab.is-active {
237 color: rgba(0,0,0, 0.87);
238 }
239 .mdl-data-table--condensed tbody tr {
240 height: 24px;
241 }
242 .mdl-data-table--condensed td {
243 padding-top: 0;
244 padding-bottom: 0;
245 height: 24px;
246 }
248 .mdl-button--feature-off i {
249 color: #777;
250 }
252 @keyframes feature-on {
253 0% {
254 transform: scale(0);
255 }
256 40% {
257 transform: scale(3);
258 }
259 100% {
260 transform: scale(1);
261 }}
263 .mdl-button--feature-on {
264 animation: feature-on 0.5s;
265 }
267 .mdl-button--underlined {
268 text-decoration: underline;
269 }
270 .right {
271 text-align: right;
272 }
273 .mdl-tabs__left {
274 display: inline-block;
275 width: auto;
276 }
277 .float-left {
278 float: left;
279 }
280 .float-right {
281 float: right;
282 }
283 .clear-left {
284 clear: left;
285 }
286 .clear-right {
287 clear: right;
288 }
289 .float-right .mdl-menu__container {
290 margin-right: 20px;
291 }
292 .inline {
293 display: inline-block;
294 }
295 .warning {
296 background-color: #fff9c4;
297 color: #212121;
298 padding: 16px;
299 border-radius: 2px;
300 }
301 .toolbar a {
302 color: #000;
303 display: inline-block;
304 border: 1px solid #ccc;
305 position: relative;
306 }
308 .toolbar a.wysihtml-command-active {
309 background: #000;
310 color: #fff;
312 }
314 .toolbar a span.crossed {
315 position: absolute;
316 top: 0;
317 left: 8px;
318 font-weight: bold;
319 font-size: 200%;
320 line-height: 80%;
321 }
322 .toolbar a span.head_level {
323 position: absolute;
324 right: 0;
325 bottom: 0;
326 }
328 textarea {
329 font-family: sans-serif;
330 font-weight: normal !important;
331 width: 100%;
332 height: 40ex;
333 }
334 .bargraph {
335 display: inline-block;
336 vertical-align: top;
337 height: 9px;
338 }
340 .bargraph div {
341 margin: 0;
342 padding: 0;
343 display: inline-block;
344 height: 9px;
345 }
346 .draft {
347 font-family: 'Roboto Slab';
348 font-weight: 300;
349 overflow: auto;
350 clear: left;
351 }
352 .draft img {
353 float: right;
354 margin-left: 1em;
355 }
357 .draft .landscape img {
358 width: 50%;
359 }
361 .draft .portrait img {
362 width: 33.333%;
363 }
364 .member_weight {
365 background: #070;
366 color: #fff;
367 border-radius: 8px;
368 padding: 0 3px;
369 }
370 .card-issue {
371 background: rgb(76,175,80);
372 }
373 .card-issue a {
374 color: #fff;
375 }
376 @media (max-width: 960px) {
377 .draft img {
378 float: none;
379 margin-left: 0;
380 }
381 .draft a.portrait,
382 .draft a.landscape {
383 width: 100%;
384 display: block;
385 text-align: center;
386 margin-bottom: 2ex;
387 }
388 .draft .landscape img {
389 width: 100%;
390 }
391 .draft .portrait img {
392 width: 66.666%;
393 }
394 }
396 .draft h1 {
397 font-size: 150%;
398 margin-bottom: 0;
399 }
400 .draft h2 {
401 font-size: 133%;
402 margin-bottom: 0;
403 }
404 .draft h3 {
405 font-size: 125%;
406 margin-bottom: 0;
407 }
408 .draft > a:first-child + h1,
409 .draft > h1:first-child,
410 .draft > h2:first-child,
411 .draft > h3:first-child {
412 margin-top: 0;
413 }
414 @media (max-width: 960px) {
415 .draft > a:first-child + h1 {
416 margin-top: 20px;
417 }
418 }
421 .suggestion-content {
422 position: relative;
423 }
425 .folded {
426 position: relative;
427 }
428 .folded .suggestion-content {
429 max-height: 250px;
430 overflow: hidden;
431 }
432 .folded .suggestion-content:before {
433 content: "";
434 width: 100%;
435 height: 25%;
436 position: absolute;
437 left: 0;
438 bottom: 0;
439 background: linear-gradient(rgba(0,0,0,0), #fff);
440 }
441 .suggestion-less,
442 .suggestion-more {
443 display: none;
444 position: absolute;
445 bottom: 5px;
446 right: 5px;
447 }
448 .folded .suggestion-more,
449 .unfolded .suggestion-less {
450 display: inline-block;
451 }
453 .suggestion_rating_info {
454 float: right;
455 line-height: 200%;
456 }
458 .diff .diff_removed {
459 text-decoration: line-through;
460 background: #f00;
461 }
463 .diff .diff_added {
464 text-decoration: underline;
465 background: #0f0;
466 }
468 .material-icons {
469 vertical-align: middle;
470 }
471 .material-icons-small {
472 font-size: 18px;
473 }
475 a.mdl-layout-title {
476 color: #fff;
477 text-decoration: none;
478 }
480 .what-can-i-do-here .mdl-card__content {
481 font-size: 18px;
482 }
484 .what-can-i-do-here .mdl-card__content ul {
485 font-size: 1rem;
486 }
488 .what-can-i-do-here ul {
489 margin-top: 0.5em;
490 margin-bottom: 0;
491 padding-left: 1.5em
492 }
496 .lf-filter .mdl-button {
497 padding-right: 4px;
498 }
500 .phase-current {
501 font-family: "Roboto Bold";
502 }
504 .phase-info {
505 padding-left: 27px;
506 margin-bottom: 1ex;
507 }
509 .clickable {
510 cursor: pointer;
511 }
513 .slot_title {
514 margin-left: 16px;
515 margin-top: 16px;
516 font-size: 18px;
517 }
519 .slot_title > a,
520 .slot_title > span {
521 display: inline-block;
522 padding: 0 4px 0 0;
524 }
526 .slot_title a.home {
527 margin: 0;
528 }
530 .home i {
531 font-size: 32px;
532 }
534 /* fix missing contrast */
535 .mdl-list__item--three-line .mdl-list__item-text-body,
536 .mdl-card__supporting-text,
537 .mdl-card__subtitle-text {
538 color: rgba(0,0,0, 0.75);
539 }
541 .mdl-textfield__label {
542 color: rgba(0,0,0, 0.5);
543 }
545 .mdl-list__item--three-line .mdl-list__item-text-body {
546 height: auto;
547 padding-bottom: 10px;
548 }
550 select {
551 font-family: 'Roboto','Helvetica','Arial',sans-serif;
552 background-color: transparent;
553 padding: 5px 0;
554 border: none;
555 border-bottom: 1px solid rgba(0,0,0, 0.12);
556 font-size: 1rem;
557 }
560 .initiative_list .mdl-list__item {
561 display: block;
562 }
563 .initiative_list .mdl-list__item-avatar {
564 float: left;
565 margin-right: 8px;
566 }
567 .initiative_list .mdl-list__item-avatar i {
568 padding-left: 8px;
569 }
570 .initiative_list .mdl-list__item-avatar.positive {
571 background: #4caf50;
572 }
573 .initiative_list .mdl-list__item-avatar.positive i {
574 padding-top: 8px;
575 vertical-align: top;
576 }
577 .initiative_list .mdl-list__item-avatar.negative {
578 background: #f44336;
579 }
580 .initiative_list .mdl-list__item-avatar.negative i {
581 padding-top: 10px;
582 vertical-align: top;
583 }
585 .initiatives .mdl-list__item {
586 display: grid;
587 grid-template-columns: 1fr min-content;
588 grid-gap: 1em;
589 align-items: start;
590 }
592 .initiatives .attachment {
593 max-width: 180px;
594 max-height: 80px;
595 margin-bottom: 10px;
596 }
598 .competing_initiatives .initiatives .attachment {
599 max-width: 80px;
600 max-height: 80px;
601 }
604 @media (max-width: 960px) {
605 .initiatives .mdl-list__item {
606 display: block;
607 }
608 .competing_initiatives .initiatives .mdl-list__item {
609 display: grid;
610 }
611 .initiatives .attachment {
612 max-width: 100%;
613 max-height: 120px;
614 margin-bottom: 2ex;
615 }
617 }
620 .initiative_pie {
621 float: left;
622 margin-right: 15px;
623 margin-bottom: 15px;
624 }
626 .initiative .result {
627 font-family: "Roboto Bold";
628 }
630 .admitted_info h1,
631 .not_admitted_info h1 {
632 margin-top: 0;
633 }
635 .admitted_info table th,
636 .not_admitted_info table th {
637 text-align: left;
638 padding-right: 10px;
639 }
641 .admitted_info table td,
642 .not_admitted_info table td {
643 text-align: right;
644 padding-right: 5px;
645 }
647 .attachments img {
648 max-width: 100%;
649 }
651 .ui_list_row label.mdl-radio {
652 display: inline;
653 }
655 .member_image_photo {
656 margin-top: 2ex;
657 margin-bottom: 2ex;
658 }
660 .contextlinks {
661 color: #fff;
662 }
664 /*************************************************************************
665 * Voting
666 */
667 .main .section #voting_form .sectionRow:last-child {
668 border-radius: 0;
669 margin-bottom: 0;
670 }
671 #voting {
672 margin-top: 3ex;
673 position: relative;
674 margin-bottom: 2ex;
675 }
676 #voting .approval,
677 #voting .abstention,
678 #voting .disapproval {
679 border: 1px #ccc solid;
680 margin-bottom: 3ex;
681 padding: 1ex;
682 padding-bottom: 1ex;
683 border-radius: 2px;
684 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
685 }
686 #voting .movable {
687 cursor: pointer;
688 }
689 #voting .disapproval {
690 margin-bottom: 2ex;
691 }
692 #voting .approval {
693 background-color: #9f9;
694 }
695 #voting .approval .movable {
696 background-color: #dfd;
697 }
698 #voting .abstention {
699 background-color: #eee;
700 }
701 #voting .abstention .movable {
702 background-color: #fff;
703 }
704 #voting .disapproval {
705 background-color: #f88;
706 }
707 #voting .disapproval .movable {
708 background-color: #fbb;
709 }
710 #voting .movable {
711 position: relative;
712 border: 1px black solid;
713 margin-top: 1ex;
714 padding: 0;
715 border-radius: 2px;
716 min-height: 64px;
717 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
718 }
719 #voting .initiative_name {
720 display: inline-block;
721 margin: 5px;
722 font-family: "Roboto Bold";
723 }
725 #voting .voting_form_active .movable {
726 cursor: pointer;
727 vertical-align: middle;
728 cursor: move;
729 }
730 #voting .voting_form_active .clickable {
731 cursor: auto;
732 }
733 #voting .voting_form_active a.clickable {
734 cursor: pointer;
735 }
737 div.form .ui_field_label {
738 text-transform: uppercase;
739 font-size: 80%;
740 }
741 div.form .member_photo .member_image.member_image_photo {
742 margin-top: 0;
743 }
745 #rating_dialog {
746 position: fixed;
747 top: 0px;
748 bottom: 0px;
749 max-width: calc((100% - 6px) - 2em);
750 max-height: calc((100% - 6px) - 2em);
751 overflow: auto;
752 display: block;
753 left: 0px;
754 right: 0px;
755 width: fit-content;
756 width: -moz-fit-content;
757 height: fit-content;
758 height: -moz-fit-content;
759 color: #000;
760 margin: auto;
761 border-width: initial;
762 border-style: solid;
763 border-color: initial;
764 border-image: initial;
765 padding: 1em;
766 background: #fff;
767 z-index: 1;
768 }
770 .survey h2 {
771 display: block;
772 }
774 .survey_counter {
775 float: right;
776 margin-left: 1em;
777 }
779 .survey form > div {
780 margin-bottom: 0.75ex;
781 }
783 .survey .mdl-checkbox {
784 height: unset;
785 }
787 .survey .mdl-checkbox__label {
788 line-height: 22px;
789 }
791 .ui_paginate_select .mdl-button {
792 min-width: unset;
793 margin-right: 0.3em;
794 }
796 .trace_list {
797 margin-left: 10px;
798 list-style-type: none;
799 padding: 0;
800 line-height: 120%;
801 }
803 .trace_list .trace_list {
804 padding-left: 10px;
805 border-left: 1px solid #999;
806 }
808 .trace_list .trace_head {
809 margin-top: 10px;
810 padding: 3px 5px 3px 5px;
811 font-weight: 700;
812 }
814 .trace_list li {
815 margin-top: 5px;
816 margin-bottom: 5px;
817 }
819 .trace_list .trace_filter .trace_head {
820 background: #acf;
821 color: #000;
822 }
824 .trace_list .trace_request .trace_head,
825 .trace_list .trace_view .trace_head {
826 background: #000;
827 color: #fff;
828 }
830 .trace_list .trace_config .trace_head,
831 .trace_list .trace_view .trace_view .trace_head {
832 background: #ccc;
833 color: #000;
834 }
836 .trace_list .trace_head .time {
837 float: right;
838 font-weight: 500;
839 font-size: 90%;
840 line-height: 100%;
841 margin-top: 5px;
842 }
844 .trace_list .trace_sql {
845 color: #050;
846 }
848 .trace_list .trace_sql_time {
849 background: #070;
850 color: #fff;
851 padding: 0px 3px;
852 border-radius: 5px;
853 }