liquid_feedback_frontend
view static/lf2.css @ 216:4f6e6b213fb8
Cleanup on second generation frontend code and stylesheet
| author | bsw |
|---|---|
| date | Mon Mar 07 12:15:22 2011 +0100 (2011-03-07) |
| parents | 1dab81353eb1 |
| children | 73dbc9e2bfd4 |
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 .tab1 .right
58 { float: right; }
60 .tab1 a { float: left; }
62 .slot_default
63 { position: relative; width: 67%; }
65 .slot_sidebar
66 { float: left; width: 30%; }
68 .sidebar_right .slot_sidebar
69 { float: right; width: 30%; }
71 .slot_sidebar .box
72 { width: 100%; }
74 .box
75 { position: relative; width: 100%; }
77 .box .row
78 { overflow: auto; }
80 .box .row .col.left
81 { float: left; }
83 .box .row .col.right
84 { float: right; }
87 /*
88 * Margins und paddings
89 */
91 .tab1 a
92 { margin: 0 0 0 0.5em; padding: 0.5ex 0.5em 0.5ex 0.5em; }
93 .tab1 .right a
94 { margin: 0 0.5em 0 0; }
96 .slot_default
97 { margin: 2ex 1% 2ex 32%; }
99 .sidebar_right .slot_default
100 { margin: 2ex 32% 2ex 1%; }
102 .slot_sidebar
103 { margin: 2ex 1% 2ex 1%; }
105 .sidebar_right .slot_sidebar
106 { margin: 0 1% 2ex 1%; }
108 .box
109 { margin: 0 0 2ex 0; }
112 .box .row .col
113 { padding: 0.5ex 0.2em 0.5ex 0.2em; }
115 .box .row .col:first-child
116 { padding-left: 0.5em; }
118 .box .row.subhead .col
119 { margin-top: 2ex; }
122 /*
123 * Colors
124 */
126 body,
127 .tab1 a.active
128 /* { background-color: #7df; color: #000 }*/
129 { background-color: #27C9FF; color: #000 }
131 .tab1,
132 .tab1 a { background-color: #444; color: #fff; }
135 .box { background-color: #fff; }
137 .box { color: #000; }
139 .box a { color: #068; }
141 .box .row.head,
142 .box .row.head2,
143 .box .row.active
144 { background-color: #D7F5FF;}
146 .box .row.head .col.head
147 { color: #444; }
149 .draft .authors,
150 .initiative .authors
151 { color: #777; }
153 .member_content
154 { background-color: #fec; }
156 /*
157 * Borders
158 */
160 .box .row
161 { border-bottom: 1px solid #ccc; }
162 .box .row.head
163 { border-bottom-color: #777; }
164 .box .row.subhead
165 { border-bottom-color: #777; }
166 .box .row:last-child
167 { border-bottom: none; }
169 .box.issue .row.unit_name
170 { border-bottom-color: #ccc; }
172 /*
173 * Rounded corners
174 */
176 .box { border-radius: 1ex; -moz-border-radius: 1ex;
177 -webkit-box-shadow: 2px 2px 3px 0px #444; -moz-box-shadow: 2px 2px 3px 0px #444; }
179 .box .row:first-child.head,
180 .box .row:first-child.head2
181 { border-radius: 1ex 1ex 0 0 ; }
182 .box .row:last-child
183 { border-radius: 0 0 1ex 1ex; }
185 /*
186 * Text Formatting
187 */
189 body, input, select {
190 font-family: sans-serif;
191 font-size: 100%;
192 }
194 .tab1 a {
195 font-weight: bold;
196 text-decoration: none;
197 }
199 .box a { text-decoration: none; }
201 .box .row .col
202 { line-height: 115%; }
204 .box .row.head .col.head,
205 .box .row.head2 .col.head
206 { font-weight: bold; }
208 .box .row.subhead .col
209 { font-weight: bold; }
213 /*
214 * Sidebar hover button
215 */
217 .hoverbutton_container {
218 position: relative;
219 }
222 .hoverbutton {
223 /* position */
224 display: none;
225 position: absolute;
226 top: 0px;
227 left: 0px;
228 height: 100%;
229 width: 100%;
231 /* color */
232 background-color: #fff;
234 /* text format */
235 font-weight: bold;
237 /* cursor */
238 cursor: pointer;
239 }
241 .hoverbutton_container:hover .hoverbutton {
242 /* position */
243 display: block;
244 }
246 .hoverbutton_container:hover .hoverbutton img {
247 /* text format */
248 vertical-align: middle;
249 }
251 .hoverbutton_container:hover .hoverbutton.noaction {
252 /* color */
253 background-color: #ccc;
255 /* cursor */
256 cursor: default;
257 }
259 .hoverbutton_container:hover .hoverbutton.green {
260 background-color: #cfc;
261 }
263 .hoverbutton_container:hover .hoverbutton.red {
264 background-color: #fcc;
265 }
267 .hoverbutton .content {
268 /* position */
269 padding: 0.5ex 0.2em 0.5ex 0.5em;
270 }
272 .box .row.last-child .hoverbutton {
273 border-radius: 0 0 1ex 1ex;
274 }
277 /*
278 * Scrolled col
279 */
281 .box .row .col.scrolled {
282 padding: 0;
283 max-height: 300px;
284 overflow: auto;
285 }
287 .box .row .col.scrolled .head {
288 font-weight: bold;
289 padding: 0.5ex 0.2em 0.5ex 0.5em;
290 }
292 /*
293 * Bars
294 */
296 .bar {
297 float: right;
298 margin-left: 0.3em;
299 }
301 .bar div {
302 margin-top: 2px;
303 float: left;
304 height: 11px;
305 }
306 .bar .green {
307 background-color: #0a0;
308 }
310 .bar .grey {
311 background-color: #eee;
312 }
314 /*
315 * Avatars
316 */
318 .avatar_image {
319 border-radius: 1ex;
320 }
322 .avatars {
323 overflow: auto;
324 }
326 .avatars .avatar {
327 float: left;
328 margin-left: 2px;
329 margin-right: 2px;
330 }
332 .avatars.normal .avatar {
333 width: 100px;
334 -webkit-box-shadow: 1px 1px 1px #000;
335 background-color: #eee;
336 border-radius: 1ex;
337 -moz-border-radius: 1ex;
338 }
340 .avatars.small .avatar {
341 border: 2px solid #fff;
342 border-radius: 0.5ex;
343 -moz-border-radius: 0.5ex;
344 }
346 .avatars .arrow {
347 float: left;
348 margin-top: 0.3ex;
349 }
351 .avatars.small .avatar img {
352 border-radius: 0.25ex;
353 -moz-border-radius: 0.25ex;
354 }
356 .avatars.normal .avatar img {
357 margin-left: 0.3em;
358 margin-top: 0.3ex;
359 border-radius: 1ex;
360 -moz-border-radius: 1ex;
361 }
363 .avatars.small .avatar img {
364 height: 24px;
365 width: 24px;
366 }
368 .avatars.normal .avatar img {
369 height: 48px;
370 width: 48px;
371 }
373 .avatars.normal .avatar .name {
374 margin-left: 0.3em;
375 margin-top: 0.3ex;
376 line-height: 100%;
377 font-size: 70%;
378 overflow: hidden;
379 height: 4ex;
380 }
382 .avatars .avatar .weight {
383 text-align: center;
384 font-size: 70%;
385 }
387 .avatars.small .avatar.participation {
388 border-color: #f70;
389 }
391 .avatars.small .avatar.overridden,
392 .avatars.small .arrow.overridden {
393 opacity: 0.3;
394 }
396 /*
397 * Area
398 */
400 .area .name {
401 color: #444;
402 }
404 .area .name a {
405 font-weight: normal;
406 }
408 .area .name .avatars {
409 float: right;
410 margin-top: -3px;
411 }
413 /*
414 * Initiative
415 */
417 .initiative .name,
418 .initiative a.name {
419 font-weight: bold;
420 }
422 .draft .authors,
423 .initiative .authors {
424 /* text format */
425 font-size: 80%;
426 font-style: italic;
427 }
429 .drafts .draft .created {
430 font-weight: bold;
431 }
433 /*
434 * Draft
435 */
437 .initiative .draft {
438 line-height: 135%;
439 }
441 .draft h2 {
442 font-size: 135%;
443 font-weight: bold;
444 margin-bottom: 0.5ex;
445 }
447 .draft h3 {
448 font-size: 135%;
449 margin-bottom: 0.5ex;
450 }
452 .draft p {
453 margin-bottom: 1ex;
454 }
456 .draft ul {
457 padding-left: 2em;
458 list-style: disc;
459 }
461 .draft ul li {
462 margin-bottom: 1ex;
463 }