liquid_feedback_frontend

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

Impressum / About Us