liquid_feedback_frontend

view static/style.css @ 2:5c601807d397

find changesets by author, revision, files, or words in the commit message
Version alpha3

Dark green part of issue supporter bargraph represents all satisfied supporters, regardless of having seen the latest draft

Wiki formatting for drafts

Showing differences between two drafts of the same initiative

Display of outgoing delegation chains

Many other improvements
author bsw
date Mon Nov 23 12:00:00 2009 +0100 (2009-11-23)
parents 3bfb2fcf7ab9
children 768faea1096d
line source
1 /*************************************************************************
2 * Some global definitions
3 */
4
5 body, th, td {
6 font-family: sans-serif;
7 font-size: 14px;
8 padding: 0;
9 margin: 0;
10 }
11
12 body, a {
13 color: #000;
14 }
15
16 img {
17 border: none;
18 }
19
20 table {
21 border-collapse: collapse;
22 border: none;
23 }
24
25 td, th {
26 padding: 0.5ex 0.5em 0.5ex 0.5em;
27 }
28
29 td {
30 vertical-align: top;
31 }
32
33 th {
34 vertical-align: bottom;
35 font-size: 75%;
36 font-weight: bold;
37 }
38
39 a.active {
40 color: #fff;
41 }
42
43 .highlighted {
44 background-color: #fa7;
45 color: #000;
46 }
47
48 .admin_only {
49 font-style: italic;
50 }
51
52 a {
53 vertical-align: middle;
54 }
55
56 /*************************************************************************
57 * Notices, warnings and errors
58 */
59
60 .layout_notice, .layout_error, .layout_warning {
61 background: #fff;
62 font-weight: bold;
63 right: 2ex;
64 line-height: 1.7em;
65 position: absolute;
66 top: 6ex;
67 width: 60ex;
68 -moz-opacity:0.7;
69 }
70
71 .slot_notice, .slot_warning, .slot_error {
72 padding: 2ex;
73 }
74
75 .slot_notice {
76 color: green;
77 border: 2px solid green;
78 }
79
80 .slot_warning {
81 color: orange;
82 border: 2px solid orange;
83 }
84
85 .slot_error {
86 color: red;
87 border: 2px solid red;
88 }
89
90 /*************************************************************************
91 * Navigation, search and language chooser bar
92 */
93
94 .topbar {
95 margin-bottom: 1em;
96 background-color: #444;
97 color: #fff;
98 font-size: 75%;
99 }
100
101 .topbar a {
102 color: #fff;
103 }
104
105 .topbar a:hover {
106 background-color: #fff;
107 color: #000;
108 }
109
110 .navigation,
111 .logout_button {
112 line-height: 250%;
113 }
114
115 .navigation img,
116 .logout_button img {
117 margin-right: 0.5em;
118 vertical-align: middle;
119 }
120
121 .navigation a,
122 .logout_button a {
123 padding: 1ex;
124 }
125
126 .logout_button {
127 float: right;
128 }
129
130 .searchbox {
131 padding: 0.5ex 1em 0ex 1em;
132 float: right;
133 line-height: 250%;
134 }
135
136 .searchbox div {
137 display: inline;
138 }
139
140 .searchbox select {
141 margin-left: 0.3em;
142 margin-right: 0.4em;
143 font-size: 100%;
144 width: 8em;
145 }
146
147 .searchbox input[type=text] {
148 width: 8em;
149 padding: 0.25ex 0.25em 0.25ex 0.25em;
150 margin-right: 0.5em;
151 font-size: 100%;
152 }
153
154 .searchbox input[type=submit] {
155 font-size: 100%;
156 width: 2.5em;
157 }
158
159 /*************************************************************************
160 * Title of current page including path and actions
161 */
162
163 .title_bar {
164 border-bottom: 1px solid #000;
165 margin-bottom: 2ex;
166 }
167
168 .path {
169 color: #444;
170 xbackground-color: #ddd;
171 }
172
173 .path div {
174 margin-left: 1em;
175 font-size: 100%;
176 line-height: 180%;
177 }
178
179 .path a {
180 color: #444;
181 }
182
183 .slot_path div {
184 display: inline;
185 margin-left: 1em;
186 margin-right: 1em;
187 }
188
189 .title {
190 color: #000;
191 margin-bottom: 0.5ex;
192 }
193
194 .slot_title {
195 }
196
197 .title div {
198 margin-left: 0.66em;
199 font-weight: bold;
200 font-size: 135%;
201 line-height: 110%;
202 }
203
204 .title a {
205 color: #fff;
206 }
207
208 .avatar {
209 float: left;
210 margin-right: 0.5em;
211 width: 48px;
212 height: 48px;
213 }
214
215 .actions {
216 display: inline;
217 font-size: 75%;
218 line-height: 200%;
219 }
220
221 .slot_actions {
222 margin-left: 1em;
223 display: inline;
224 }
225
226 .actions a {
227 padding: 0.5ex 0.5em 0.5ex 0.0em;
228 margin-right: 1em;
229 vertical-align: middle;
230 }
231
232 .actions a:hover {
233 background-color: #d7d7d7;
234 }
235
236 .actions img {
237 padding-left: 0.2em;
238 padding-right: 0.2em;
239 }
240
241 /*************************************************************************
242 * vote info / delegation
243 */
244
245 .slot_interest,
246 .slot_support,
247 .slot_delegation {
248 float: left;
249 font-size: 75%;
250 margin-right: 1em;
251 }
252
253 .vote_info .head {
254 line-height: 200%;
255 }
256
257 .vote_info .close {
258 background-color: #f44;
259 float: right;
260 padding: 1ex;
261 }
262
263 .vote_info .content {
264 display: none;
265 position: absolute;
266 z-index: 10;
267 background-color: #fff;
268 border: 2px solid #444;
269 padding: 1em;
270 }
271
272 .vote_info .delegation_arrow {
273 margin-top: 1ex;
274 margin-bottom: 1ex;
275 vertical-align: middle;
276 }
277
278 .vote_info .delegation_scope {
279 display: inline;
280 }
281
282 .vote_info .delegation_info {
283 }
284
285 .vote_info .member_thumb {
286 clear: left;
287 }
288
289 .delegation .revoke {
290 margin: 0.5ex;
291 }
292
293 .delegation .revoke img {
294 vertical-align: middle;
295 }
296
297 /*************************************************************************
298 * Main content
299 */
300
301 .main {
302 margin-left: 1em;
303 margin-right: 1em;
304 }
305
306
307 /*************************************************************************
308 * ui.tab
309 */
310
311 .ui_tabs_links {
312 margin-top: 4ex;
313 font-size: 75%;
314 }
315
316 .ui_tabs_links a {
317 padding: 1ex;
318 margin-left: 0.5em;
319 background-color: #e7e7e7;
320 }
321
322 .ui_tabs_links a:hover {
323 background-color: #d7d7d7;
324 }
325
326 .ui_tabs_links a.selected {
327 background-color: #444;
328 color: #fff;
329 text-decoration: none;
330 padding: 1ex;
331 }
332
333 .ui_tabs_content {
334 border: 1px solid #444;
335 padding: 1ex 1ex 1ex 1ex;
336 }
337
338 /*************************************************************************
339 * ui.order
340 */
341
342 .ui_filter_head {
343 color: #777;
344 float: left;
345 margin-bottom: 1ex;
346 font-size: 75%;
347 }
348
349 .ui_filter_head a {
350 color: #777;
351 padding: 0.5ex;
352 }
353
354 .ui_filter_head a.active{
355 color: #fff;
356 background-color: #777;
357 padding: 0.5ex;
358 }
359
360 /*************************************************************************
361 * ui.order
362 */
363
364 .ui_order_head {
365 color: #777;
366 text-align: right;
367 margin-bottom: 1ex;
368 font-size: 75%;
369 }
370
371 .ui_order_head a {
372 color: #777;
373 padding: 0.5ex;
374 }
375
376 .ui_order_head a.active{
377 color: #fff;
378 background-color: #777;
379 padding: 0.5ex;
380 }
381
382 /*************************************************************************
383 * ui.paginate
384 */
385
386 .ui_paginate_select a {
387 padding: 0.5ex;
388 }
389
390 /*************************************************************************
391 * ui.bargraph
392 */
393
394 .bargraph {
395 width: 101px;
396 }
397
398 .bargraph div {
399 float: left;
400 margin-top: 0.5ex;
401 height: 1.3ex;
402 }
403
404 /*************************************************************************
405 * vertical ui.form
406 */
407
408 .login input[type=text],
409 .vertical input[type=text],
410 .login input[type=password],
411 .vertical input[type=password],
412 .vertical textarea,
413 .vertical select {
414 font-family: sans-serif;
415 font-size: 100%;
416 width: 50em;
417 border: 1px solid #444;
418 padding: 0.2ex 0.2em 0.2ex 0.2em;
419 margin-bottom: 1ex;
420 }
421
422 .login input[type=password],
423 .vertical input[type=password] {
424 width: 16em;
425 }
426
427 .vertical select {
428 padding-right: 0;
429 }
430
431 .login .ui_field_label,
432 .vertical .ui_field_label {
433 text-transform: uppercase;
434 font-size: 70%;
435 line-height: 190%;
436 font-weight: bold;
437 color: #777;
438 width: 15em;
439 display: block;
440 float: left;
441 clear: left;
442 text-align: right;
443 padding-right: 0.5em;
444 }
445
446 .login input[type=text],
447 .login input[type=password] {
448 width: 10em;
449 }
450
451 .login div,
452 .vertical div {
453 clear: left;
454 }
455
456 .vertical span {
457 display: block;
458 margin-bottom: 0.5ex;
459 }
460
461 .vertical span:after {
462 content: " ";
463 }
464
465 .vertical span span {
466 display: inline;
467 margin-bottom: 0;
468 }
469
470 .login input[type=submit],
471 .vertical input[type=submit] {
472 font-size: 100%;
473 margin-left: 11em;
474 background-color: #444444;
475 color: #fff;
476 border: none;
477 padding: 0.75ex;
478 }
479
480 .login input[type=submit]:hover,
481 .vertical input[type=submit]:hover {
482 background-color: #444444;
483 }
484
485 /*************************************************************************
486 * Tables
487 */
488
489
490 table a.action {
491 font-size: 70%;
492 line-height: 190%;
493 padding: 0.5ex;
494 color: #777;
495 }
496
497 table a.active {
498 color: #fff;
499 }
500
501 th {
502 text-align: left;
503 border-bottom: 1px solid #000;
504 }
505
506 tr:hover td {
507 background-color: #ddd;
508 }
509
510
511 tr table tr:hover td {
512 background-color: #fff;
513 }
514
515
516 /*************************************************************************
517 * Hidden inline form
518 */
519
520 .hidden_inline_form {
521 display: none;
522 border: 1px solid #444;
523 width: 42em;
524 position: absolute;
525 background-color: #fff;
526 left: 5em;
527 top: 20ex;
528 }
529
530 .hidden_inline_form a {
531 padding: 0.5ex;
532 color: #fff;
533 }
534
535
536 .hidden_inline_form .head {
537 background-color: #444;
538 color: #fff;
539 display: block;
540 padding: 0.5ex;
541 }
542
543 .hidden_inline_form input[type=text],
544 .hidden_inline_form textarea,
545 .hidden_inline_form select {
546 width: 30em;
547 }
548
549 /*************************************************************************
550 * Positive / Negtive votes
551 */
552
553
554 .positive_votes span {
555 display: inline;
556 }
557
558 .positive_votes {
559 display: inline;
560 background-color: #cfc;
561 padding: 0.3ex 0.5em 0.3ex 0.5em;
562 }
563
564 .negative_votes span {
565 display: inline;
566 }
567
568 .negative_votes {
569 display: inline;
570 background-color: #fcc;
571 padding: 0.3ex 0.5em 0.3ex 0.5em;
572 }
573
574
575
576 .active {
577 background-color: #444;
578 color: #fff;
579 }
580
581 .active_red2 { background-color: #a00; color: #fff !important; }
582 .active_red1 { background-color: #f88; color: #000 !important; }
583 .active_green1 { background-color: #8f8; color: #000 !important; }
584 .active_green2 { background-color: #0a0; color: #000 !important; }
585
586
587
588
589 /*************************************************************************
590 * Issues
591 */
592
593 .issues tr {
594 border: 1px solid #ccc;
595 }
596
597 .issues tr tr {
598 border: none;
599 }
600
601 .lang_chooser {
602 float: right;
603 margin-right: 0.5em;
604 }
605
606 .delegation_list_entry {
607 margin-right: 2em;
608 margin-bottom: 2ex;
609 float: left;
610 clear: left;
611 }
612
613 .delegation_list_entry .delegation_arrow {
614 float: left;
615 }
616
617 .delegation_list_entry .delegation_scope {
618 float: left;
619 width: 25em;
620 }
621
622 .delegation_list_entry .delegation_scope a {
623 display: block;
624 }
625
626 .member_list .member_thumb {
627 float: left;
628 margin-right: 1em;
629 margin-bottom: 2ex;
630 }
631
632 .member_thumb {
633 text-decoration: none;
634 min-width: 150px;
635 display: block;
636 float: left;
637 border: 1px solid #ccc;
638 }
639
640 .member_thumb:hover {
641 border: 1px solid #000;
642 }
643
644 .member_thumb img {
645 margin-right: 0.5em;
646 vertical-align: bottom;
647 }
648
649 .member_thumb div {
650 display: inline;
651 margin-right: 0.5em;
652 }
653
654 .draft_content {
655 background-color: #eee;
656 border: 1px solid #ccc;
657 padding: 1ex;
658 }
659
660 .diff {
661 background-color: #eee;
662 border: 1px solid #ccc;
663 padding: 1ex;
664 }
665
666 .diff .added {
667 background-color: #cfc;
668 }
669
670 .diff .removed {
671 background-color: #fcc;
672 }
673
674 .slot_issue_info {
675 background-color: #eee;
676 border: 1px solid #ccc;
677 float: right;
678 padding: 0.5ex;
679 line-height: 130%;
680 margin-right: 1em;
681 }
682
683 .issue_info label {
684 float: left;
685 width: 8em;
686 text-transform: uppercase;
687 font-size: 70%;
688 color: #777;
689 font-weight: bold;
690 clear: left;
691 text-align: right;
692 margin-right: 0.7em;
693 }
694
695 .draft_updated_info {
696 border: 2px solid #faa;
697 background-color: #fee;
698 padding: 1ex;
699 }

Impressum / About Us