liquid_feedback_frontend

view app/main/_layout/lf2.html @ 212:3e4ad069847a

find changesets by author, revision, files, or words in the commit message
Some more work at 2nd generation frontend code
author bsw
date Thu Mar 03 18:39:00 2011 +0100 (2011-03-03)
parents 4993b71b383f
children acf92c2d33f4
line source
1 <!-- <html> -->
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4 <style>
5
6 /* CSS reset */
7
8 html, body, div, span, applet, object, iframe,
9 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
10 a, abbr, acronym, address, big, cite, code,
11 del, dfn, em, font, img, ins, kbd, q, s, samp,
12 small, strike, strong, sub, sup, tt, var,
13 dl, dt, dd, ol, ul, li,
14 fieldset, form, label, legend,
15 table, caption, tbody, tfoot, thead, tr, th, td {
16 margin: 0;
17 padding: 0;
18 border: 0;
19 outline: 0;
20 font-weight: inherit;
21 font-style: inherit;
22 font-size: 100%;
23 font-family: inherit;
24 vertical-align: baseline;
25 }
26 /* remember to define focus styles! */
27 :focus {
28 outline: 0;
29 }
30 body {
31 line-height: 1;
32 color: black;
33 background: white;
34 }
35 ol, ul {
36 list-style: none;
37 }
38 /* tables still need 'cellspacing="0"' in the markup */
39 table {
40 border-collapse: separate;
41 border-spacing: 0;
42 }
43 caption, th, td {
44 text-align: left;
45 font-weight: normal;
46 }
47 blockquote:before, blockquote:after,
48 q:before, q:after {
49 content: "";
50 }
51 blockquote, q {
52 quotes: "" "";
53 }
54
55 /* end CSS reset */
56
57
58 /*
59 Global settings
60 */
61 body {
62 font-family: sans-serif;
63 background-color: #7df;
64 color: #000;
65 }
66
67 a {
68 background-color: #ffffff;
69 color: #000;
70 }
71
72 /*
73 Main top navigation
74 */
75
76 .tab1 {
77 background-color: #444;
78 color: #000;
79 }
80
81 .tab1 .right {
82 float: right;
83 }
84
85 .tab1 a {
86 float: left;
87 padding: 0.5ex 0.5em 0.5ex 0.5em;
88 margin-left: 0.5em;
89 background-color: #444;
90 color: #fff;
91 font-weight: bold;
92 text-decoration: none;
93 }
94
95 .tab1 .right a {
96 margin-left: 0;
97 margin-right: 0.5em;
98 }
99
100 .tab1 a.active {
101 background-color: #7df;
102 color: #000;
103 }
104
105 /*
106 Default slot
107 */
108
109 .slot_default {
110 margin: 2ex 1% 2ex 32%;
111 position: relative;
112 width: 67%;
113 }
114
115 /*
116 Sidebar
117 */
118
119 .slot_sidebar {
120 margin: 2ex 1% 2ex 1%;
121 float: left;
122 width: 30%;
123 }
124
125 .slot_sidebar .box {
126 width: 100%;
127 }
128
129
130 /*
131 Boxes
132 */
133
134 .box a {
135 text-decoration: none;
136 color: #46a;
137 }
138
139 .boxhead,
140 a.boxhead {
141 /* position */
142 display: block;
143 margin-bottom: 0.5ex;
144 margin-top: 1ex;
145 margin-left: 0.5em;
146
147 /* color */
148 background-color: #7df;
149 color: #000;
150
151 /* text format */
152 font-weight: bold;
153 text-shadow: 2px 2px 2px #fff;
154 }
155
156 .box {
157 /* position */
158 position: relative;
159 width: 100%;
160 margin-bottom: 2ex;
161
162 /* border and shadow*/
163 border-radius: 1ex;
164 -moz-border-radius: 1ex;
165 -webkit-box-shadow: 2px 2px 3px 0px #444;
166 -moz-box-shadow: 2px 2px 3px 0px #444;
167
168 /* color */
169 background-color: #fff;
170 color: #000;
171
172 }
173
174 .box .row {
175 overflow: auto;
176 /* position */
177
178 /* border */
179 border-top: 1px solid #ccc;
180 }
181
182 .box .row .col {
183 /* position */
184 padding: 0.5ex 0.2em 0.5ex 0.2em;
185
186 /* text format */
187 line-height: 125%;
188 }
189
190 .box .row .col.left {
191 float: left;
192 }
193
194 .box .row .col.right {
195 float: right;
196 }
197
198 .box .row .col.clearleft {
199 clear: left;
200 }
201
202 .box .row .col.clearright {
203 clear: right;
204 }
205
206 .box .row .col.toggle {
207 float: left;
208 /* position */
209 padding-left: 0.4em;
210 }
211
212 .box .row .col.toggle:hover {
213 /* color */
214 background-color: #7cf;
215
216 /* cursor */
217 cursor: pointer;
218 }
219
220 .box .row.first .col.toggle {
221 /* border */
222 border-radius: 1ex 0 0 0;
223 }
224
225 .box .row.last .col.toggle {
226 /* border */
227 border-radius: 0 0 0 1ex;
228 }
229
230 .box .row.toggled .col.first {
231 /* position */
232 margin-left: 1.5em;
233 }
234
235 .box .row.first {
236 /* border */
237 border-top: none;
238 }
239
240 .box .row .col.first {
241 /* position */
242 padding-left: 0.5em;
243 }
244
245 .box .row.toggled .col.first {
246 /* position */
247 padding-left: 0.2em;
248 }
249
250 .box .row.head {
251 background-color: #e4e7f0;
252 color: #000;
253 border-radius: 1ex 1ex 0 0;
254 }
255
256 .box .row.last {
257 border-radius: 0 0 1ex 1ex;
258 }
259
260 .box .row.head .col.head {
261 font-weight: bold;
262 color: #444;
263 }
264
265 .box .row.head .col a {
266 background-color: #e4e7f0;
267 color: #3B6E7F;
268 }
269
270 .box .row.head2 {
271 background-color: #f2f3f7;
272 color: #000;
273 }
274
275 .box .row.head2 .col a {
276 background-color: #f2f3f7;
277 color: #3B6E7F;
278 }
279
280
281 .box .row .col a {
282 color: #3B6E7F;
283 }
284
285 .box .row.active,
286 .box .row.active a {
287 background-color: #DDF7FF;
288 }
289
290 /* Sidebar hover button */
291
292 .hoverbutton_container {
293 position: relative;
294 }
295
296
297 .hoverbutton {
298 /* position */
299 display: none;
300 position: absolute;
301 top: 0px;
302 left: 0px;
303 height: 100%;
304 width: 100%;
305
306 /* color */
307 background-color: #fff;
308
309 /* text format */
310 font-weight: bold;
311
312 /* cursor */
313 cursor: pointer;
314 }
315
316 .hoverbutton_container:hover .hoverbutton {
317 /* position */
318 display: block;
319 }
320
321 .hoverbutton_container:hover .hoverbutton img {
322 /* text format */
323 vertical-align: middle;
324 }
325
326 .hoverbutton_container:hover .hoverbutton.noaction {
327 /* color */
328 background-color: #ccc;
329
330 /* cursor */
331 cursor: default;
332 }
333
334 .hoverbutton_container:hover .hoverbutton.green {
335 background-color: #cfc;
336 }
337
338 .hoverbutton_container:hover .hoverbutton.red {
339 background-color: #fcc;
340 }
341
342 .hoverbutton .content {
343 /* position */
344 padding: 0.5ex 0.2em 0.5ex 0.5em;
345 }
346
347 /* Scrolled col */
348
349 .box .row .col.scrolled {
350 padding: 0;
351 max-height: 300px;
352 overflow: auto;
353 }
354
355 .box .row .col.scrolled .head {
356 font-weight: bold;
357 padding: 0.5ex 0.2em 0.5ex 0.5em;
358 }
359
360 /*
361 Bars
362 */
363
364 .bar {
365 float: right;
366 margin-left: 0.3em;
367 }
368
369 .bar div {
370 margin-top: 2px;
371 float: left;
372 height: 11px;
373 }
374 .bar .green {
375 background-color: #0a0;
376 }
377
378 .bar .grey {
379 background-color: #eee;
380 }
381
382 /*
383 Avatars
384 */
385
386 .avatars {
387 overflow: auto;
388 }
389
390 .avatars .avatar {
391 float: left;
392 margin-left: 2px;
393 margin-right: 2px;
394 }
395
396 .avatars.normal .avatar {
397 width: 100px;
398 -webkit-box-shadow: 1px 1px 1px #000;
399 background-color: #eee;
400 border-radius: 1ex;
401 -moz-border-radius: 1ex;
402 }
403
404 .avatars.small .avatar {
405 border: 2px solid #fff;
406 border-radius: 0.5ex;
407 -moz-border-radius: 0.5ex;
408 }
409
410 .avatars .arrow {
411 float: left;
412 margin-top: 0.3ex;
413 }
414
415 .avatars .avatar.myweight {
416 border-color: #f70;
417 background-color: #f70;
418 }
419
420 .avatars .avatar.autoreject {
421 border-color: #f00;
422 background-color: #f00;
423 }
424
425 .avatars.small .avatar img {
426 border-radius: 0.25ex;
427 -moz-border-radius: 0.25ex;
428 }
429
430 .avatars.normal .avatar img {
431 margin-left: 0.3em;
432 margin-top: 0.3ex;
433 border-radius: 1ex;
434 -moz-border-radius: 1ex;
435 }
436
437 .avatars.small .avatar img {
438 height: 24px;
439 width: 24px;
440 }
441
442 .avatars.normal .avatar img {
443 height: 48px;
444 width: 48px;
445 }
446
447 .avatars.normal .avatar .name {
448 margin-left: 0.3em;
449 margin-top: 0.3ex;
450 line-height: 100%;
451 font-size: 70%;
452 overflow: hidden;
453 height: 4ex;
454 }
455
456 .avatars .avatar .weight {
457 text-align: center;
458 font-size: 70%;
459 }
460
461 .avatars.small .avatar.participation {
462 border-color: #f70;
463 }
464
465 .avatars.small .avatar.overridden,
466 .avatars.small .arrow.overridden {
467 opacity: 0.3;
468 }
469
470 /*
471 Area
472 */
473
474 .area .name {
475 color: #444;
476 }
477
478 .area .name a {
479 font-weight: normal;
480 }
481
482 .area .name .avatars {
483 float: right;
484 margin-top: -3px;
485 }
486
487 /* Initiatives */
488
489 .initiative .name,
490 .initiative a.name {
491 font-weight: bold;
492 }
493
494 .initiative .authors {
495 /* color */
496 color: #777;
497
498 /* text format */
499 font-size: 80%;
500 font-style: italic;
501 }
502
503 .initiative .authors a {
504 /* color */
505 }
506
507 .drafts .draft .created {
508 font-weight: bold;
509 }
510
511 .drafts .draft .author_name {
512 font-style: italic;
513 }
514
515 /* Draft */
516
517 .draft {
518 line-height: 135%;
519 }
520
521 .draft h2 {
522 font-size: 135%;
523 font-weight: bold;
524 margin-bottom: 0.5ex;
525 }
526
527 .draft h3 {
528 font-size: 135%;
529 margin-bottom: 0.5ex;
530 }
531
532 .draft p {
533 margin-bottom: 1ex;
534 }
535
536 .draft ul {
537 padding-left: 2em;
538 list-style: disc;
539 }
540
541 .draft ul li {
542 margin-bottom: 1ex;
543 }
544
545 xdiv { border: 1px dotted #c00 !important; }
546
547
548 </style>
549 </head>
550 </body>
551 <div class="tab1">
552 <!-- WEBMCP SLOT topnav -->
553 <br style="clear: both;" />
554 </div>
555
556 <!-- WEBMCP SLOT sidebar -->
557 <!-- WEBMCP SLOT default -->
558
559
560 <div class="layout_trace" id="layout_trace" style="xdisplay: none">
561 <div id="trace_show" onclick="document.getElementById('trace_content').style.display='block';this.style.display='none';">TRACE</div>
562 <div id="trace_content" style="display: none;">
563 <tt id="system_error"><!-- WEBMCP SLOT system_error --></tt>
564 <div id="trace">&nbsp;</div><hr />
565 <!-- WEBMCP SLOT trace -->
566 <div class="trace_close" onclick="document.getElementById('trace_show').style.display='block';document.getElementById('trace_content').style.display='none';">
567 close
568 </div>
569 </div>
570 </div>
571 </div>
572
573 </body>
574 </html>

Impressum / About Us