liquid_feedback_frontend

view app/main/_layout/lf2.html @ 211:4993b71b383f

find changesets by author, revision, files, or words in the commit message
First checkin of lf2 (frontend second generation) prototype
author bsw
date Wed Mar 02 20:06:26 2011 +0100 (2011-03-02)
parents
children 3e4ad069847a
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 }
93
94 .tab1 .right a {
95 margin-left: 0;
96 margin-right: 0.5em;
97 }
98
99 .tab1 a.active {
100 background-color: #7df;
101 }
102
103 /*
104 Default slot
105 */
106
107 .slot_default {
108 margin: 2ex 1% 2ex 32%;
109 position: relative;
110 width: 67%;
111 }
112
113 /*
114 Sidebar
115 */
116
117 .slot_sidebar {
118 margin: 2ex 1% 2ex 1%;
119 float: left;
120 width: 30%;
121 }
122
123 .slot_sidebar .box {
124 width: 100%;
125 }
126
127
128 /*
129 Boxes
130 */
131
132 .box a {
133 text-decoration: none;
134 color: #46a;
135 }
136
137 .boxhead,
138 a.boxhead {
139 /* position */
140 display: block;
141 margin-bottom: 0.5ex;
142 margin-top: 1ex;
143 margin-left: 0.5em;
144
145 /* color */
146 background-color: #7df;
147 color: #000;
148
149 /* text format */
150 font-weight: bold;
151 text-shadow: 2px 2px 2px #fff;
152 }
153
154 .box {
155 /* position */
156 position: relative;
157 width: 100%;
158 margin-bottom: 2ex;
159
160 /* border and shadow*/
161 border-radius: 1ex;
162 -moz-border-radius: 1ex;
163 -webkit-box-shadow: 2px 2px 3px 0px #444;
164 -moz-box-shadow: 2px 2px 3px 0px #444;
165
166 /* color */
167 background-color: #fff;
168 color: #000;
169
170 }
171
172 .box .row {
173 overflow: auto;
174 /* position */
175
176 /* border */
177 border-top: 1px solid #ccc;
178 }
179
180 .box .row .col {
181 /* position */
182 padding: 0.5ex 0.2em 0.5ex 0.2em;
183
184 /* text format */
185 line-height: 125%;
186 }
187
188 .box .row .col.left {
189 float: left;
190 }
191
192 .box .row .col.right {
193 float: right;
194 }
195
196 .box .row .col.clearleft {
197 clear: left;
198 }
199
200 .box .row .col.clearright {
201 clear: right;
202 }
203
204 .box .row .col.toggle {
205 float: left;
206 /* position */
207 padding-left: 0.4em;
208 }
209
210 .box .row .col.toggle:hover {
211 /* color */
212 background-color: #7cf;
213
214 /* cursor */
215 cursor: pointer;
216 }
217
218 .box .row.first .col.toggle {
219 /* border */
220 border-radius: 1ex 0 0 0;
221 }
222
223 .box .row.last .col.toggle {
224 /* border */
225 border-radius: 0 0 0 1ex;
226 }
227
228 .box .row.toggled .col.first {
229 /* position */
230 margin-left: 1.5em;
231 }
232
233 .box .row.first {
234 /* border */
235 border-top: none;
236 }
237
238 .box .row .col.first {
239 /* position */
240 padding-left: 0.5em;
241 }
242
243 .box .row.toggled .col.first {
244 /* position */
245 padding-left: 0.2em;
246 }
247
248 .box .row .col {
249 xborder: 1px solid red !important;
250 }
251
252 .box .row.head {
253 background-color: #e4e7f0;
254 color: #000;
255 border-radius: 1ex 1ex 0 0;
256 }
257
258 .box .row.head .col a {
259 background-color: #e4e7f0;
260 color: #3B6E7F;
261 }
262
263 .box .row.head2 {
264 background-color: #f2f3f7;
265 color: #000;
266 }
267
268 .box .row.head2 .col a {
269 background-color: #f2f3f7;
270 color: #3B6E7F;
271 }
272
273
274 .box .row .col a {
275 color: #3B6E7F;
276 }
277
278 /* Sidebar hover button */
279
280 .hoverbutton_container {
281 position: relative;
282 }
283
284
285 .hoverbutton {
286 /* position */
287 display: none;
288 position: absolute;
289 top: 0px;
290 left: 0px;
291 height: 100%;
292 width: 100%;
293
294 /* color */
295 background-color: #fff;
296
297 /* text format */
298 font-weight: bold;
299
300 /* cursor */
301 cursor: pointer;
302 }
303
304 .hoverbutton_container:hover .hoverbutton {
305 /* position */
306 display: block;
307 }
308
309 .hoverbutton_container:hover .hoverbutton img {
310 /* text format */
311 vertical-align: middle;
312 }
313
314 .hoverbutton_container:hover .hoverbutton.noaction {
315 /* color */
316 background-color: #ccc;
317
318 /* cursor */
319 cursor: default;
320 }
321
322 .hoverbutton_container:hover .hoverbutton.green {
323 background-color: #cfc;
324 }
325
326 .hoverbutton_container:hover .hoverbutton.red {
327 background-color: #fcc;
328 }
329
330 .hoverbutton .content {
331 /* position */
332 padding: 0.5ex 0.2em 0.5ex 0.5em;
333 }
334
335 /* Scrolled col */
336
337 .box .row .col.scrolled {
338 padding: 0;
339 max-height: 300px;
340 overflow: auto;
341 }
342
343 .box .row .col.scrolled .head {
344 font-weight: bold;
345 padding: 0.5ex 0.2em 0.5ex 0.5em;
346 }
347
348 /*
349 Bars
350 */
351
352 .bar {
353 float: right;
354 margin-left: 0.3em;
355 }
356
357 .bar div {
358 margin-top: 2px;
359 float: left;
360 height: 11px;
361 }
362 .bar .green {
363 background-color: #0a0;
364 }
365
366 .bar .grey {
367 background-color: #eee;
368 }
369
370 /*
371 Avatars
372 */
373
374 .avatars {
375 overflow: auto;
376 }
377
378 .avatars .avatar {
379 float: left;
380 margin-left: 2px;
381 margin-right: 2px;
382 }
383
384 .avatars.normal .avatar {
385 width: 100px;
386 -webkit-box-shadow: 1px 1px 1px #000;
387 background-color: #eee;
388 border-radius: 1ex;
389 -moz-border-radius: 1ex;
390 }
391
392 .avatars.small .avatar {
393 border: 2px solid #fff;
394 border-radius: 0.5ex;
395 -moz-border-radius: 0.5ex;
396 }
397
398 .avatars .arrow {
399 float: left;
400 margin-top: 0.3ex;
401 }
402
403 .avatars .avatar.myweight {
404 border-color: #f70;
405 background-color: #f70;
406 }
407
408 .avatars .avatar.autoreject {
409 border-color: #f00;
410 background-color: #f00;
411 }
412
413 .avatars.small .avatar img {
414 border-radius: 0.25ex;
415 -moz-border-radius: 0.25ex;
416 }
417
418 .avatars.normal .avatar img {
419 margin-left: 0.3em;
420 margin-top: 0.3ex;
421 border-radius: 1ex;
422 -moz-border-radius: 1ex;
423 }
424
425 .avatars.small .avatar img {
426 height: 24px;
427 width: 24px;
428 }
429
430 .avatars.normal .avatar img {
431 height: 48px;
432 width: 48px;
433 }
434
435 .avatars.normal .avatar .name {
436 margin-left: 0.3em;
437 margin-top: 0.3ex;
438 line-height: 100%;
439 font-size: 70%;
440 overflow: hidden;
441 height: 4ex;
442 }
443
444 .avatars .avatar .weight {
445 text-align: center;
446 font-size: 70%;
447 }
448
449 .avatars.small .avatar.participation {
450 border-color: #f70;
451 }
452
453 .avatars.small .avatar.overridden,
454 .avatars.small .arrow.overridden {
455 opacity: 0.3;
456 }
457
458 /*
459 Area
460 */
461
462 .area .name {
463 color: #444;
464 font-weight: bold;
465 }
466
467 .area .name a {
468 font-weight: normal;
469 }
470
471 .area .name .avatars {
472 float: right;
473 margin-top: -3px;
474 }
475
476 /* Issues */
477
478 .issue .issue_id {
479 font-weight: bold;
480 }
481
482 .issue .state_name {
483 font-style: italic;
484 }
485
486 .issue .time_left {
487 font-style: italic;
488 }
489
490 /* Initiatives */
491
492 .initiative .name,
493 .initiative a.name {
494 font-weight: bold;
495 }
496
497 .initiative .authors {
498 /* color */
499 color: #777;
500
501 /* text format */
502 font-size: 80%;
503 font-style: italic;
504 }
505
506 .initiative .authors a {
507 /* color */
508 }
509
510 .drafts .draft .created {
511 font-weight: bold;
512 }
513
514 .drafts .draft .author_name {
515 font-style: italic;
516 }
517
518 /* Draft */
519
520 .draft {
521 line-height: 135%;
522 }
523
524 .draft h2 {
525 font-size: 135%;
526 font-weight: bold;
527 margin-bottom: 0.5ex;
528 }
529
530 .draft h3 {
531 font-size: 135%;
532 margin-bottom: 0.5ex;
533 }
534
535 .draft p {
536 margin-bottom: 1ex;
537 }
538
539 .draft ul {
540 padding-left: 2em;
541 list-style: disc;
542 }
543
544 .draft ul li {
545 margin-bottom: 1ex;
546 }
547
548 xdiv { border: 1px dotted #c00 !important; }
549
550
551 </style>
552 </head>
553 </body>
554 <div class="tab1">
555 <!-- WEBMCP SLOT topnav -->
556 <br style="clear: both;" />
557 </div>
558
559 <!-- WEBMCP SLOT sidebar -->
560 <!-- WEBMCP SLOT default -->
561
562
563 <div class="layout_trace" id="layout_trace" style="xdisplay: none">
564 <div id="trace_show" onclick="document.getElementById('trace_content').style.display='block';this.style.display='none';">TRACE</div>
565 <div id="trace_content" style="display: none;">
566 <tt id="system_error"><!-- WEBMCP SLOT system_error --></tt>
567 <div id="trace">&nbsp;</div><hr />
568 <!-- WEBMCP SLOT trace -->
569 <div class="trace_close" onclick="document.getElementById('trace_show').style.display='block';document.getElementById('trace_content').style.display='none';">
570 close
571 </div>
572 </div>
573 </div>
574 </div>
575
576 </body>
577 </html>

Impressum / About Us