liquid_feedback_frontend

view static/lf2.css @ 215:1dab81353eb1

More enhancements for second generation frontend
author bsw
date Sat Mar 05 15:34:17 2011 +0100 (2011-03-05)
parents acf92c2d33f4
children 4f6e6b213fb8
line source
1 /* CSS reset */
3 html, body, div, span, applet, object, iframe,
4 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5 a, abbr, acronym, address, big, cite, code,
6 del, dfn, em, font, img, ins, kbd, q, s, samp,
7 small, strike, strong, sub, sup, tt, var,
8 dl, dt, dd, ol, ul, li,
9 fieldset, form, label, legend,
10 table, caption, tbody, tfoot, thead, tr, th, td {
11 margin: 0;
12 padding: 0;
13 border: 0;
14 outline: 0;
15 font-weight: inherit;
16 font-style: inherit;
17 font-size: 100%;
18 font-family: inherit;
19 vertical-align: baseline;
20 }
21 /* remember to define focus styles! */
22 :focus {
23 outline: 0;
24 }
25 body {
26 line-height: 1;
27 color: black;
28 background: white;
29 }
30 ol, ul {
31 list-style: none;
32 }
33 /* tables still need 'cellspacing="0"' in the markup */
34 table {
35 border-collapse: separate;
36 border-spacing: 0;
37 }
38 caption, th, td {
39 text-align: left;
40 font-weight: normal;
41 }
42 blockquote:before, blockquote:after,
43 q:before, q:after {
44 content: "";
45 }
46 blockquote, q {
47 quotes: "" "";
48 }
50 /* end CSS reset */
53 /*
54 Global settings
55 */
56 body {
57 font-family: sans-serif;
58 background-color: #7df;
59 xbackground-image: url('lf2/back.jpg');
60 color: #000;
61 }
63 a {
64 color: #000;
65 }
67 /*
68 Main top navigation
69 */
71 .tab1 {
72 background-color: #444;
73 color: #000;
74 }
76 .tab1 .right {
77 float: right;
78 }
80 .tab1 a {
81 float: left;
82 padding: 0.5ex 0.5em 0.5ex 0.5em;
83 margin-left: 0.5em;
84 background-color: #444;
85 color: #fff;
86 font-weight: bold;
87 text-decoration: none;
88 }
90 .tab1 .right a {
91 margin-left: 0;
92 margin-right: 0.5em;
93 }
95 .tab1 a.active {
96 background-color: #7df;
97 color: #000;
98 }
100 /*
101 Default slot
102 */
104 .slot_default {
105 margin: 2ex 1% 2ex 32%;
106 position: relative;
107 width: 67%;
108 }
110 .sidebar_right .slot_default {
111 margin: 2ex 32% 2ex 1%;
112 }
114 /*
115 Sidebar
116 */
118 .slot_sidebar {
119 margin: 2ex 1% 2ex 1%;
120 float: left;
121 width: 30%;
122 }
124 .sidebar_right .slot_sidebar {
125 margin: 0 1% 2ex 1%;
126 float: right;
127 width: 30%;
128 }
130 .slot_sidebar .box {
131 width: 100%;
132 }
135 /*
136 Boxes
137 */
139 .box a {
140 text-decoration: none;
141 color: #46a;
142 }
144 .box {
145 /* position */
146 position: relative;
147 width: 100%;
148 margin-bottom: 2ex;
150 /* border and shadow*/
151 border-radius: 1ex;
152 -moz-border-radius: 1ex;
153 -webkit-box-shadow: 2px 2px 3px 0px #444;
154 -moz-box-shadow: 2px 2px 3px 0px #444;
156 /* color */
157 background-color: #fff;
158 color: #000;
160 }
162 .box .row {
163 overflow: auto;
164 /* position */
166 /* border */
167 border-bottom: 1px solid #ccc;
168 }
170 .box .row .col {
171 /* position */
172 padding: 0.5ex 0.2em 0.5ex 0.2em;
174 /* text format */
175 line-height: 115%;
176 }
178 .box .row .col.left {
179 float: left;
180 }
182 .box .row .col.right {
183 float: right;
184 }
186 .box .row:last-child {
187 /* border */
188 border-bottom: none;
189 }
191 .box .row .col:first-child {
192 /* position */
193 padding-left: 0.5em;
194 }
196 .box .row:first-child.head,
197 .box .row:first-child.head2 {
198 border-radius: 1ex 1ex 0 0;
199 }
201 .box .row.head {
202 background-color: #fafcff;
203 color: #000;
204 border-bottom-color: #777;
205 }
207 .box .row:last-child {
208 border-radius: 0 0 1ex 1ex;
209 }
211 .box .row.head .col.head {
212 font-weight: bold;
213 color: #444;
214 }
216 .box .row.head .col a {
217 background-color: #fafcff;
218 color: #3B6E7F;
219 }
221 .box .row.head2 {
222 background-color: #fafcff;
223 color: #000;
224 }
226 .box .row.head2 .col.head {
227 font-weight: bold;
228 }
230 .box .row.head2 .col a {
231 background-color: #fafcff;
232 color: #3B6E7F;
233 }
235 .box .row.subhead .col {
236 margin-top: 2ex;
237 font-weight: bold;
238 }
240 .box .row.subhead {
241 border-bottom-color: #777;
242 }
244 .box .row .col a {
245 color: #3B6E7F;
246 }
248 .box .row.active,
249 .box .row.active a {
250 background-color: #DDF7FF;
251 }
253 /* Sidebar hover button */
255 .hoverbutton_container {
256 position: relative;
257 }
260 .hoverbutton {
261 /* position */
262 display: none;
263 position: absolute;
264 top: 0px;
265 left: 0px;
266 height: 100%;
267 width: 100%;
269 /* color */
270 background-color: #fff;
272 /* text format */
273 font-weight: bold;
275 /* cursor */
276 cursor: pointer;
277 }
279 .hoverbutton_container:hover .hoverbutton {
280 /* position */
281 display: block;
282 }
284 .hoverbutton_container:hover .hoverbutton img {
285 /* text format */
286 vertical-align: middle;
287 }
289 .hoverbutton_container:hover .hoverbutton.noaction {
290 /* color */
291 background-color: #ccc;
293 /* cursor */
294 cursor: default;
295 }
297 .hoverbutton_container:hover .hoverbutton.green {
298 background-color: #cfc;
299 }
301 .hoverbutton_container:hover .hoverbutton.red {
302 background-color: #fcc;
303 }
305 .hoverbutton .content {
306 /* position */
307 padding: 0.5ex 0.2em 0.5ex 0.5em;
308 }
310 .box .row.last-child .hoverbutton {
311 border-radius: 0 0 1ex 1ex;
312 }
315 /* Scrolled col */
317 .box .row .col.scrolled {
318 padding: 0;
319 max-height: 300px;
320 overflow: auto;
321 }
323 .box .row .col.scrolled .head {
324 font-weight: bold;
325 padding: 0.5ex 0.2em 0.5ex 0.5em;
326 }
328 /*
329 Bars
330 */
332 .bar {
333 float: right;
334 margin-left: 0.3em;
335 }
337 .bar div {
338 margin-top: 2px;
339 float: left;
340 height: 11px;
341 }
342 .bar .green {
343 background-color: #0a0;
344 }
346 .bar .grey {
347 background-color: #eee;
348 }
350 /*
351 Avatars
352 */
354 .avatars {
355 overflow: auto;
356 }
358 .avatars .avatar {
359 float: left;
360 margin-left: 2px;
361 margin-right: 2px;
362 }
364 .avatars.normal .avatar {
365 width: 100px;
366 -webkit-box-shadow: 1px 1px 1px #000;
367 background-color: #eee;
368 border-radius: 1ex;
369 -moz-border-radius: 1ex;
370 }
372 .avatars.small .avatar {
373 border: 2px solid #fff;
374 border-radius: 0.5ex;
375 -moz-border-radius: 0.5ex;
376 }
378 .avatars .arrow {
379 float: left;
380 margin-top: 0.3ex;
381 }
383 .avatars .avatar.myweight {
384 border-color: #f70;
385 background-color: #f70;
386 }
388 .avatars .avatar.autoreject {
389 border-color: #f00;
390 background-color: #f00;
391 }
393 .avatars.small .avatar img {
394 border-radius: 0.25ex;
395 -moz-border-radius: 0.25ex;
396 }
398 .avatars.normal .avatar img {
399 margin-left: 0.3em;
400 margin-top: 0.3ex;
401 border-radius: 1ex;
402 -moz-border-radius: 1ex;
403 }
405 .avatars.small .avatar img {
406 height: 24px;
407 width: 24px;
408 }
410 .avatars.normal .avatar img {
411 height: 48px;
412 width: 48px;
413 }
415 .avatars.normal .avatar .name {
416 margin-left: 0.3em;
417 margin-top: 0.3ex;
418 line-height: 100%;
419 font-size: 70%;
420 overflow: hidden;
421 height: 4ex;
422 }
424 .avatars .avatar .weight {
425 text-align: center;
426 font-size: 70%;
427 }
429 .avatars.small .avatar.participation {
430 border-color: #f70;
431 }
433 .avatars.small .avatar.overridden,
434 .avatars.small .arrow.overridden {
435 opacity: 0.3;
436 }
438 /*
439 Area
440 */
442 .area .name {
443 color: #444;
444 }
446 .area .name a {
447 font-weight: normal;
448 }
450 .area .name .avatars {
451 float: right;
452 margin-top: -3px;
453 }
455 /* Initiatives */
457 .initiative .name,
458 .initiative a.name {
459 font-weight: bold;
460 }
462 .draft .authors,
463 .initiative .authors {
464 /* color */
465 color: #777;
467 /* text format */
468 font-size: 80%;
469 font-style: italic;
470 }
472 .draft .authors a,
473 .initiative .authors a {
474 /* color */
475 }
477 .drafts .draft .created {
478 font-weight: bold;
479 }
481 .box.issue .row.unit_name {
482 border-bottom-color: #ccc;
483 }
484 /* Draft */
486 .draft {
487 line-height: 135%;
488 }
490 .draft h2 {
491 font-size: 135%;
492 font-weight: bold;
493 margin-bottom: 0.5ex;
494 }
496 .draft h3 {
497 font-size: 135%;
498 margin-bottom: 0.5ex;
499 }
501 .draft p {
502 margin-bottom: 1ex;
503 }
505 .draft ul {
506 padding-left: 2em;
507 list-style: disc;
508 }
510 .draft ul li {
511 margin-bottom: 1ex;
512 }

Impressum / About Us