liquid_feedback_frontend

view static/lf2.css @ 218:7ea52c710503

Some little changes for next generation frontend
author bsw
date Sun Mar 13 16:53:33 2011 +0100 (2011-03-13)
parents 73dbc9e2bfd4
children
line source
1 /*
2 * CSS reset
3 */
5 html, body, div, span, applet, object, iframe,
6 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7 a, abbr, acronym, address, big, cite, code,
8 del, dfn, em, font, img, ins, kbd, q, s, samp,
9 small, strike, strong, sub, sup, tt, var,
10 dl, dt, dd, ol, ul, li,
11 fieldset, form, label, legend,
12 table, caption, tbody, tfoot, thead, tr, th, td {
13 margin: 0;
14 padding: 0;
15 border: 0;
16 outline: 0;
17 font-weight: inherit;
18 font-style: inherit;
19 font-size: 100%;
20 font-family: inherit;
21 vertical-align: baseline;
22 }
23 /* remember to define focus styles! */
24 :focus {
25 outline: 0;
26 }
27 body {
28 line-height: 1;
29 color: black;
30 background: white;
31 }
32 ol, ul {
33 list-style: none;
34 }
35 /* tables still need 'cellspacing="0"' in the markup */
36 table {
37 border-collapse: separate;
38 border-spacing: 0;
39 }
40 caption, th, td {
41 text-align: left;
42 font-weight: normal;
43 }
44 blockquote:before, blockquote:after,
45 q:before, q:after {
46 content: "";
47 }
48 blockquote, q {
49 quotes: "" "";
50 }
53 /*
54 * Positioning
55 */
57 .topbox .right
58 { float: right; }
60 .topbox a,
61 .topbox span,
62 .topbox select
63 { float: left; }
65 .slot_default
66 { position: relative; width: 67%; }
68 .slot_sidebar
69 { float: left; width: 30%; }
71 .sidebar_right .slot_sidebar
72 { float: right; width: 30%; }
74 .slot_sidebar .box
75 { width: 100%; }
77 .box
78 { position: relative; width: 100%; }
80 .box .row
81 { overflow: auto; }
83 .box .row .col.left
84 { float: left; }
86 .box .row .col.right
87 { float: right; }
89 /*
90 * Margins und paddings
91 */
93 .topbox { margin: 0 1% 0 1%; }
95 .topbox
96 { margin-bottom: 1ex; }
98 .topbox a
99 { margin: 0 0.5em 0 0; padding: 0.3ex 0.5em 0.3ex 0.5em; }
101 .topbox select
102 { margin: 0.5ex 0 0.5ex 0; padding: 0.3ex 0.2em 0.2ex 0.2em;}
104 .topbox .right a,
105 .topbox .right span
106 { margin: 0 0 0 0.5em; padding: 0.3ex 0.5em 0.3ex 0.3em; }
108 .slot_default
109 { margin: 0 1% 2ex 32%; }
111 .sidebar_right .slot_default
112 { margin: 0 32% 2ex 1%; }
114 .slot_sidebar
115 { margin: 0 1% 2ex 1%; }
117 .sidebar_right .slot_sidebar
118 { margin: 0 1% 2ex 1%; }
120 .box
121 { margin: 0 0 2ex 0; }
124 .box .row .col
125 { padding: 0.5ex 0.2em 0.5ex 0.2em; }
127 .box .row .col:first-child
128 { padding-left: 0.5em; }
130 .box .row.subhead .col
131 { margin-top: 2ex; }
133 /*
134 * Colors
135 */
137 body
138 { background-color: #27C9FF; color: #000; }
140 .topbox.line1
141 { background-color: #444; }
143 .topbox.line1,
144 .topbox.line1 a
145 { color: #fff; }
147 .topbox.line2 a
148 { background-color: #27C9FF; color: #000; }
149 .topbox.line2 span.inactive
150 { opacity: 0.2; }
151 .topbox a.active
152 /* { background-color: #B2ECFF; color: #000; }*/
153 { background-color: #e7f0ff; color: #000; }
156 .box { background-color: #fff; }
158 .box { color: #000; }
160 .box a { color: #068; }
162 .box .row.head,
163 .box .row.head2
164 { background-color: #e7f0ff; }
166 .box .row.active
167 { background-color: #f1F2F8; }
169 .box .row.head .col.head
170 { color: #444; }
172 .draft .authors,
173 .initiative .authors
174 { color: #777; }
176 .member_content
177 { background-color: #FFF4DC; }
179 /*
180 * Borders
181 */
183 .box .row
184 { border-bottom: 1px solid #ccc; }
185 .box .row.head
186 { border-bottom-color: #777; }
187 .box .row.subhead
188 { border-bottom-color: #777; }
189 .box .row:last-child
190 { border-bottom: none; }
192 .box.issue .row.unit_name
193 { border-bottom-color: #ccc; }
196 /*
197 * Rounded corners
198 */
200 .box { border-radius: 0.8ex; -moz-border-radius: 0.8ex;
201 -webkit-box-shadow: 1px 1px 2px #11576F; -moz-box-shadow: 0 0 2px 1px #444; }
203 .box .row:first-child.head,
204 .box .row:first-child.head2
205 { border-radius: 0.8ex 0.8ex 0 0 ; }
206 .box .row:last-child
207 { border-radius: 0 0 0.8ex 0.8ex; }
209 .box .row:first-child:last-child.head,
210 .box .row:first-child:last-child.head2
211 { border-radius: 0.8ex 0.8ex 0.8ex 0.8ex; }
213 .topbox.line1
214 { border-radius: 0 0 0.8ex 0.8ex;
215 -webkit-box-shadow: 1px 1px 2px #11576F; -moz-box-shadow: 1px 1px 2px #444; }
217 .topbox a
218 { border-radius: 0.8ex; }
220 .topbox a.active
221 { -webkit-box-shadow: 1px 1px 2px #11576F; -moz-box-shadow: 1px 1px 2px 0px #444;
222 }
224 /*
225 * Text Formatting
226 */
228 body, input, select {
229 font-family: sans-serif;
230 font-size: 100%;
231 }
233 .topbox {
234 line-height: 135%;
235 }
237 .topbox a,
238 .topbox span
239 { font-weight: bold;
240 text-decoration: none; }
242 .box a { text-decoration: none; }
244 .box .row .col
245 { line-height: 115%; }
247 .box .row.head .col.head,
248 .box .row.head2 .col.head
249 { font-weight: bold; }
251 .box .row.subhead .col
252 { font-weight: bold; }
256 .box .row.head .col.head select
257 { font-weight: bold; width: 100%; }
259 /*
260 * Scrolled col
261 */
263 .box .row .col.scrolled {
264 padding: 0;
265 max-height: 300px;
266 overflow: auto;
267 }
269 .box .row .col.scrolled .head {
270 font-weight: bold;
271 padding: 0.5ex 0.2em 0.5ex 0.5em;
272 }
274 /*
275 * Bars
276 */
278 .bar {
279 float: right;
280 margin-left: 0.3em;
281 }
283 .bar div {
284 margin-top: 2px;
285 float: left;
286 height: 11px;
287 }
288 .bar .green {
289 background-color: #0a0;
290 }
292 .bar .grey {
293 background-color: #eee;
294 }
296 /*
297 * Avatars
298 */
300 .avatar_image {
301 border-radius: 1ex;
302 }
304 .avatars {
305 overflow: auto;
306 }
308 .avatars .avatar {
309 float: left;
310 margin-left: 2px;
311 margin-right: 2px;
312 }
314 .avatars.normal .avatar {
315 width: 100px;
316 text-align: center;
317 }
319 .avatars.small .avatar {
320 border: 2px solid #fff;
321 border-radius: 0.5ex;
322 -moz-border-radius: 0.5ex;
323 }
325 .avatars .arrow {
326 float: left;
327 margin-top: 0.3ex;
328 }
330 .avatars.small .avatar img {
331 border-radius: 0.25ex;
332 -moz-border-radius: 0.25ex;
333 }
335 .avatars.normal .avatar img {
336 margin-left: 0.3em;
337 margin-top: 0.3ex;
338 border-radius: 1ex;
339 -moz-border-radius: 1ex;
340 }
342 .avatars.small .avatar img {
343 height: 24px;
344 width: 24px;
345 }
347 .avatars.normal .avatar img {
348 height: 48px;
349 width: 48px;
350 }
352 .avatars.normal .avatar .name {
353 margin-left: 0.3em;
354 margin-top: 0.3ex;
355 line-height: 100%;
356 font-size: 70%;
357 overflow: hidden;
358 height: 4ex;
359 }
361 .avatars .avatar .weight {
362 text-align: center;
363 font-size: 70%;
364 }
366 .avatars.small .avatar.participation {
367 border-color: #f70;
368 }
370 .avatars.small .avatar.overridden,
371 .avatars.small .arrow.overridden {
372 opacity: 0.3;
373 }
375 /*
376 * Area
377 */
379 .area .name {
380 color: #444;
381 }
383 .area .name a {
384 font-weight: normal;
385 }
387 .area .name .avatars {
388 float: right;
389 margin-top: -3px;
390 }
392 /*
393 * Initiative
394 */
396 .initiative .name,
397 .initiative a.name {
398 font-weight: bold;
399 }
401 .draft .authors,
402 .initiative .authors {
403 /* text format */
404 font-size: 80%;
405 font-style: italic;
406 }
408 .drafts .draft .created {
409 font-weight: bold;
410 }
412 /*
413 * Draft
414 */
416 .member_content .draft {
417 line-height: 135%;
418 }
420 .draft h1 {
421 font-size: 135%;
422 }
424 .draft h2 {
425 font-size: 135%;
426 font-weight: bold;
427 margin-bottom: 0.5ex;
428 }
430 .draft h3 {
431 font-size: 135%;
432 margin-bottom: 0.5ex;
433 }
435 .draft p {
436 margin-bottom: 1ex;
437 }
439 .draft ul {
440 padding-left: 2em;
441 list-style: disc;
442 }
444 .draft ul li {
445 margin-bottom: 1ex;
446 }

Impressum / About Us