liquid_feedback_frontend

annotate static/lf2.css @ 216:4f6e6b213fb8

find changesets by author, revision, files, or words in the commit message
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
rev   line source
bsw@216 1 /*
bsw@216 2 * CSS reset
bsw@216 3 */
bsw@213 4
bsw@213 5 html, body, div, span, applet, object, iframe,
bsw@213 6 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
bsw@213 7 a, abbr, acronym, address, big, cite, code,
bsw@213 8 del, dfn, em, font, img, ins, kbd, q, s, samp,
bsw@213 9 small, strike, strong, sub, sup, tt, var,
bsw@213 10 dl, dt, dd, ol, ul, li,
bsw@213 11 fieldset, form, label, legend,
bsw@213 12 table, caption, tbody, tfoot, thead, tr, th, td {
bsw@213 13 margin: 0;
bsw@213 14 padding: 0;
bsw@213 15 border: 0;
bsw@213 16 outline: 0;
bsw@213 17 font-weight: inherit;
bsw@213 18 font-style: inherit;
bsw@213 19 font-size: 100%;
bsw@213 20 font-family: inherit;
bsw@213 21 vertical-align: baseline;
bsw@213 22 }
bsw@213 23 /* remember to define focus styles! */
bsw@213 24 :focus {
bsw@213 25 outline: 0;
bsw@213 26 }
bsw@213 27 body {
bsw@213 28 line-height: 1;
bsw@213 29 color: black;
bsw@213 30 background: white;
bsw@213 31 }
bsw@213 32 ol, ul {
bsw@213 33 list-style: none;
bsw@213 34 }
bsw@213 35 /* tables still need 'cellspacing="0"' in the markup */
bsw@213 36 table {
bsw@213 37 border-collapse: separate;
bsw@213 38 border-spacing: 0;
bsw@213 39 }
bsw@213 40 caption, th, td {
bsw@213 41 text-align: left;
bsw@213 42 font-weight: normal;
bsw@213 43 }
bsw@213 44 blockquote:before, blockquote:after,
bsw@213 45 q:before, q:after {
bsw@213 46 content: "";
bsw@213 47 }
bsw@213 48 blockquote, q {
bsw@213 49 quotes: "" "";
bsw@213 50 }
bsw@213 51
bsw@216 52
bsw@216 53 /*
bsw@216 54 * Positioning
bsw@216 55 */
bsw@216 56
bsw@216 57 .tab1 .right
bsw@216 58 { float: right; }
bsw@216 59
bsw@216 60 .tab1 a { float: left; }
bsw@216 61
bsw@216 62 .slot_default
bsw@216 63 { position: relative; width: 67%; }
bsw@216 64
bsw@216 65 .slot_sidebar
bsw@216 66 { float: left; width: 30%; }
bsw@216 67
bsw@216 68 .sidebar_right .slot_sidebar
bsw@216 69 { float: right; width: 30%; }
bsw@216 70
bsw@216 71 .slot_sidebar .box
bsw@216 72 { width: 100%; }
bsw@216 73
bsw@216 74 .box
bsw@216 75 { position: relative; width: 100%; }
bsw@216 76
bsw@216 77 .box .row
bsw@216 78 { overflow: auto; }
bsw@216 79
bsw@216 80 .box .row .col.left
bsw@216 81 { float: left; }
bsw@216 82
bsw@216 83 .box .row .col.right
bsw@216 84 { float: right; }
bsw@213 85
bsw@213 86
bsw@213 87 /*
bsw@216 88 * Margins und paddings
bsw@216 89 */
bsw@216 90
bsw@216 91 .tab1 a
bsw@216 92 { margin: 0 0 0 0.5em; padding: 0.5ex 0.5em 0.5ex 0.5em; }
bsw@216 93 .tab1 .right a
bsw@216 94 { margin: 0 0.5em 0 0; }
bsw@216 95
bsw@216 96 .slot_default
bsw@216 97 { margin: 2ex 1% 2ex 32%; }
bsw@216 98
bsw@216 99 .sidebar_right .slot_default
bsw@216 100 { margin: 2ex 32% 2ex 1%; }
bsw@216 101
bsw@216 102 .slot_sidebar
bsw@216 103 { margin: 2ex 1% 2ex 1%; }
bsw@216 104
bsw@216 105 .sidebar_right .slot_sidebar
bsw@216 106 { margin: 0 1% 2ex 1%; }
bsw@216 107
bsw@216 108 .box
bsw@216 109 { margin: 0 0 2ex 0; }
bsw@216 110
bsw@216 111
bsw@216 112 .box .row .col
bsw@216 113 { padding: 0.5ex 0.2em 0.5ex 0.2em; }
bsw@216 114
bsw@216 115 .box .row .col:first-child
bsw@216 116 { padding-left: 0.5em; }
bsw@216 117
bsw@216 118 .box .row.subhead .col
bsw@216 119 { margin-top: 2ex; }
bsw@216 120
bsw@213 121
bsw@216 122 /*
bsw@216 123 * Colors
bsw@216 124 */
bsw@216 125
bsw@216 126 body,
bsw@216 127 .tab1 a.active
bsw@216 128 /* { background-color: #7df; color: #000 }*/
bsw@216 129 { background-color: #27C9FF; color: #000 }
bsw@216 130
bsw@216 131 .tab1,
bsw@216 132 .tab1 a { background-color: #444; color: #fff; }
bsw@216 133
bsw@216 134
bsw@216 135 .box { background-color: #fff; }
bsw@216 136
bsw@216 137 .box { color: #000; }
bsw@216 138
bsw@216 139 .box a { color: #068; }
bsw@216 140
bsw@216 141 .box .row.head,
bsw@216 142 .box .row.head2,
bsw@216 143 .box .row.active
bsw@216 144 { background-color: #D7F5FF;}
bsw@216 145
bsw@216 146 .box .row.head .col.head
bsw@216 147 { color: #444; }
bsw@216 148
bsw@216 149 .draft .authors,
bsw@216 150 .initiative .authors
bsw@216 151 { color: #777; }
bsw@216 152
bsw@216 153 .member_content
bsw@216 154 { background-color: #fec; }
bsw@213 155
bsw@213 156 /*
bsw@216 157 * Borders
bsw@216 158 */
bsw@216 159
bsw@216 160 .box .row
bsw@216 161 { border-bottom: 1px solid #ccc; }
bsw@216 162 .box .row.head
bsw@216 163 { border-bottom-color: #777; }
bsw@216 164 .box .row.subhead
bsw@216 165 { border-bottom-color: #777; }
bsw@216 166 .box .row:last-child
bsw@216 167 { border-bottom: none; }
bsw@216 168
bsw@216 169 .box.issue .row.unit_name
bsw@216 170 { border-bottom-color: #ccc; }
bsw@213 171
bsw@216 172 /*
bsw@216 173 * Rounded corners
bsw@216 174 */
bsw@216 175
bsw@216 176 .box { border-radius: 1ex; -moz-border-radius: 1ex;
bsw@216 177 -webkit-box-shadow: 2px 2px 3px 0px #444; -moz-box-shadow: 2px 2px 3px 0px #444; }
bsw@213 178
bsw@216 179 .box .row:first-child.head,
bsw@216 180 .box .row:first-child.head2
bsw@216 181 { border-radius: 1ex 1ex 0 0 ; }
bsw@216 182 .box .row:last-child
bsw@216 183 { border-radius: 0 0 1ex 1ex; }
bsw@216 184
bsw@216 185 /*
bsw@216 186 * Text Formatting
bsw@216 187 */
bsw@216 188
bsw@216 189 body, input, select {
bsw@216 190 font-family: sans-serif;
bsw@216 191 font-size: 100%;
bsw@213 192 }
bsw@213 193
bsw@213 194 .tab1 a {
bsw@213 195 font-weight: bold;
bsw@213 196 text-decoration: none;
bsw@213 197 }
bsw@213 198
bsw@216 199 .box a { text-decoration: none; }
bsw@213 200
bsw@216 201 .box .row .col
bsw@216 202 { line-height: 115%; }
bsw@213 203
bsw@216 204 .box .row.head .col.head,
bsw@216 205 .box .row.head2 .col.head
bsw@216 206 { font-weight: bold; }
bsw@213 207
bsw@216 208 .box .row.subhead .col
bsw@216 209 { font-weight: bold; }
bsw@213 210
bsw@213 211
bsw@213 212
bsw@213 213 /*
bsw@216 214 * Sidebar hover button
bsw@216 215 */
bsw@213 216
bsw@213 217 .hoverbutton_container {
bsw@213 218 position: relative;
bsw@213 219 }
bsw@213 220
bsw@213 221
bsw@213 222 .hoverbutton {
bsw@213 223 /* position */
bsw@213 224 display: none;
bsw@213 225 position: absolute;
bsw@213 226 top: 0px;
bsw@213 227 left: 0px;
bsw@213 228 height: 100%;
bsw@213 229 width: 100%;
bsw@213 230
bsw@213 231 /* color */
bsw@213 232 background-color: #fff;
bsw@213 233
bsw@213 234 /* text format */
bsw@213 235 font-weight: bold;
bsw@213 236
bsw@213 237 /* cursor */
bsw@213 238 cursor: pointer;
bsw@213 239 }
bsw@213 240
bsw@213 241 .hoverbutton_container:hover .hoverbutton {
bsw@213 242 /* position */
bsw@213 243 display: block;
bsw@213 244 }
bsw@213 245
bsw@213 246 .hoverbutton_container:hover .hoverbutton img {
bsw@213 247 /* text format */
bsw@213 248 vertical-align: middle;
bsw@213 249 }
bsw@213 250
bsw@213 251 .hoverbutton_container:hover .hoverbutton.noaction {
bsw@213 252 /* color */
bsw@213 253 background-color: #ccc;
bsw@213 254
bsw@213 255 /* cursor */
bsw@213 256 cursor: default;
bsw@213 257 }
bsw@213 258
bsw@213 259 .hoverbutton_container:hover .hoverbutton.green {
bsw@213 260 background-color: #cfc;
bsw@213 261 }
bsw@213 262
bsw@213 263 .hoverbutton_container:hover .hoverbutton.red {
bsw@213 264 background-color: #fcc;
bsw@213 265 }
bsw@213 266
bsw@213 267 .hoverbutton .content {
bsw@213 268 /* position */
bsw@213 269 padding: 0.5ex 0.2em 0.5ex 0.5em;
bsw@213 270 }
bsw@213 271
bsw@215 272 .box .row.last-child .hoverbutton {
bsw@215 273 border-radius: 0 0 1ex 1ex;
bsw@215 274 }
bsw@215 275
bsw@215 276
bsw@216 277 /*
bsw@216 278 * Scrolled col
bsw@216 279 */
bsw@213 280
bsw@213 281 .box .row .col.scrolled {
bsw@213 282 padding: 0;
bsw@213 283 max-height: 300px;
bsw@213 284 overflow: auto;
bsw@213 285 }
bsw@213 286
bsw@213 287 .box .row .col.scrolled .head {
bsw@213 288 font-weight: bold;
bsw@213 289 padding: 0.5ex 0.2em 0.5ex 0.5em;
bsw@213 290 }
bsw@213 291
bsw@213 292 /*
bsw@216 293 * Bars
bsw@216 294 */
bsw@213 295
bsw@213 296 .bar {
bsw@213 297 float: right;
bsw@213 298 margin-left: 0.3em;
bsw@213 299 }
bsw@213 300
bsw@213 301 .bar div {
bsw@213 302 margin-top: 2px;
bsw@213 303 float: left;
bsw@213 304 height: 11px;
bsw@213 305 }
bsw@213 306 .bar .green {
bsw@213 307 background-color: #0a0;
bsw@213 308 }
bsw@213 309
bsw@213 310 .bar .grey {
bsw@213 311 background-color: #eee;
bsw@213 312 }
bsw@213 313
bsw@213 314 /*
bsw@216 315 * Avatars
bsw@216 316 */
bsw@216 317
bsw@216 318 .avatar_image {
bsw@216 319 border-radius: 1ex;
bsw@216 320 }
bsw@213 321
bsw@213 322 .avatars {
bsw@213 323 overflow: auto;
bsw@213 324 }
bsw@213 325
bsw@213 326 .avatars .avatar {
bsw@213 327 float: left;
bsw@213 328 margin-left: 2px;
bsw@213 329 margin-right: 2px;
bsw@213 330 }
bsw@213 331
bsw@213 332 .avatars.normal .avatar {
bsw@213 333 width: 100px;
bsw@213 334 -webkit-box-shadow: 1px 1px 1px #000;
bsw@213 335 background-color: #eee;
bsw@213 336 border-radius: 1ex;
bsw@213 337 -moz-border-radius: 1ex;
bsw@213 338 }
bsw@213 339
bsw@213 340 .avatars.small .avatar {
bsw@213 341 border: 2px solid #fff;
bsw@213 342 border-radius: 0.5ex;
bsw@213 343 -moz-border-radius: 0.5ex;
bsw@213 344 }
bsw@213 345
bsw@213 346 .avatars .arrow {
bsw@213 347 float: left;
bsw@213 348 margin-top: 0.3ex;
bsw@213 349 }
bsw@213 350
bsw@213 351 .avatars.small .avatar img {
bsw@213 352 border-radius: 0.25ex;
bsw@213 353 -moz-border-radius: 0.25ex;
bsw@213 354 }
bsw@213 355
bsw@213 356 .avatars.normal .avatar img {
bsw@213 357 margin-left: 0.3em;
bsw@213 358 margin-top: 0.3ex;
bsw@213 359 border-radius: 1ex;
bsw@213 360 -moz-border-radius: 1ex;
bsw@213 361 }
bsw@213 362
bsw@213 363 .avatars.small .avatar img {
bsw@213 364 height: 24px;
bsw@213 365 width: 24px;
bsw@213 366 }
bsw@213 367
bsw@213 368 .avatars.normal .avatar img {
bsw@213 369 height: 48px;
bsw@213 370 width: 48px;
bsw@213 371 }
bsw@213 372
bsw@213 373 .avatars.normal .avatar .name {
bsw@213 374 margin-left: 0.3em;
bsw@213 375 margin-top: 0.3ex;
bsw@213 376 line-height: 100%;
bsw@213 377 font-size: 70%;
bsw@213 378 overflow: hidden;
bsw@213 379 height: 4ex;
bsw@213 380 }
bsw@213 381
bsw@213 382 .avatars .avatar .weight {
bsw@213 383 text-align: center;
bsw@213 384 font-size: 70%;
bsw@213 385 }
bsw@213 386
bsw@213 387 .avatars.small .avatar.participation {
bsw@213 388 border-color: #f70;
bsw@213 389 }
bsw@213 390
bsw@213 391 .avatars.small .avatar.overridden,
bsw@213 392 .avatars.small .arrow.overridden {
bsw@213 393 opacity: 0.3;
bsw@213 394 }
bsw@213 395
bsw@213 396 /*
bsw@216 397 * Area
bsw@216 398 */
bsw@213 399
bsw@213 400 .area .name {
bsw@213 401 color: #444;
bsw@213 402 }
bsw@213 403
bsw@213 404 .area .name a {
bsw@213 405 font-weight: normal;
bsw@213 406 }
bsw@213 407
bsw@213 408 .area .name .avatars {
bsw@213 409 float: right;
bsw@213 410 margin-top: -3px;
bsw@213 411 }
bsw@213 412
bsw@216 413 /*
bsw@216 414 * Initiative
bsw@216 415 */
bsw@213 416
bsw@213 417 .initiative .name,
bsw@213 418 .initiative a.name {
bsw@213 419 font-weight: bold;
bsw@213 420 }
bsw@213 421
bsw@215 422 .draft .authors,
bsw@213 423 .initiative .authors {
bsw@213 424 /* text format */
bsw@213 425 font-size: 80%;
bsw@213 426 font-style: italic;
bsw@213 427 }
bsw@213 428
bsw@213 429 .drafts .draft .created {
bsw@213 430 font-weight: bold;
bsw@213 431 }
bsw@213 432
bsw@216 433 /*
bsw@216 434 * Draft
bsw@216 435 */
bsw@213 436
bsw@216 437 .initiative .draft {
bsw@213 438 line-height: 135%;
bsw@213 439 }
bsw@213 440
bsw@213 441 .draft h2 {
bsw@213 442 font-size: 135%;
bsw@213 443 font-weight: bold;
bsw@213 444 margin-bottom: 0.5ex;
bsw@213 445 }
bsw@213 446
bsw@213 447 .draft h3 {
bsw@213 448 font-size: 135%;
bsw@213 449 margin-bottom: 0.5ex;
bsw@213 450 }
bsw@213 451
bsw@213 452 .draft p {
bsw@213 453 margin-bottom: 1ex;
bsw@213 454 }
bsw@213 455
bsw@213 456 .draft ul {
bsw@213 457 padding-left: 2em;
bsw@213 458 list-style: disc;
bsw@213 459 }
bsw@213 460
bsw@213 461 .draft ul li {
bsw@213 462 margin-bottom: 1ex;
bsw@213 463 }

Impressum / About Us