liquid_feedback_frontend
diff 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 diff
1.1 --- a/static/lf2.css Sat Mar 05 15:34:17 2011 +0100 1.2 +++ b/static/lf2.css Mon Mar 07 12:15:22 2011 +0100 1.3 @@ -1,4 +1,6 @@ 1.4 -/* CSS reset */ 1.5 +/* 1.6 + * CSS reset 1.7 + */ 1.8 1.9 html, body, div, span, applet, object, iframe, 1.10 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 1.11 @@ -47,210 +49,170 @@ 1.12 quotes: "" ""; 1.13 } 1.14 1.15 -/* end CSS reset */ 1.16 + 1.17 +/* 1.18 + * Positioning 1.19 + */ 1.20 + 1.21 +.tab1 .right 1.22 + { float: right; } 1.23 + 1.24 +.tab1 a { float: left; } 1.25 + 1.26 +.slot_default 1.27 + { position: relative; width: 67%; } 1.28 + 1.29 +.slot_sidebar 1.30 + { float: left; width: 30%; } 1.31 + 1.32 +.sidebar_right .slot_sidebar 1.33 + { float: right; width: 30%; } 1.34 + 1.35 +.slot_sidebar .box 1.36 + { width: 100%; } 1.37 + 1.38 +.box 1.39 + { position: relative; width: 100%; } 1.40 + 1.41 +.box .row 1.42 + { overflow: auto; } 1.43 + 1.44 +.box .row .col.left 1.45 + { float: left; } 1.46 + 1.47 +.box .row .col.right 1.48 + { float: right; } 1.49 1.50 1.51 /* 1.52 - Global settings 1.53 -*/ 1.54 -body { 1.55 - font-family: sans-serif; 1.56 - background-color: #7df; 1.57 - xbackground-image: url('lf2/back.jpg'); 1.58 - color: #000; 1.59 -} 1.60 + * Margins und paddings 1.61 + */ 1.62 + 1.63 +.tab1 a 1.64 + { margin: 0 0 0 0.5em; padding: 0.5ex 0.5em 0.5ex 0.5em; } 1.65 +.tab1 .right a 1.66 + { margin: 0 0.5em 0 0; } 1.67 + 1.68 +.slot_default 1.69 + { margin: 2ex 1% 2ex 32%; } 1.70 + 1.71 +.sidebar_right .slot_default 1.72 + { margin: 2ex 32% 2ex 1%; } 1.73 + 1.74 +.slot_sidebar 1.75 + { margin: 2ex 1% 2ex 1%; } 1.76 + 1.77 +.sidebar_right .slot_sidebar 1.78 + { margin: 0 1% 2ex 1%; } 1.79 + 1.80 +.box 1.81 + { margin: 0 0 2ex 0; } 1.82 + 1.83 + 1.84 +.box .row .col 1.85 + { padding: 0.5ex 0.2em 0.5ex 0.2em; } 1.86 + 1.87 +.box .row .col:first-child 1.88 + { padding-left: 0.5em; } 1.89 + 1.90 +.box .row.subhead .col 1.91 + { margin-top: 2ex; } 1.92 + 1.93 1.94 -a { 1.95 - color: #000; 1.96 -} 1.97 +/* 1.98 + * Colors 1.99 + */ 1.100 + 1.101 +body, 1.102 +.tab1 a.active 1.103 +/* { background-color: #7df; color: #000 }*/ 1.104 + { background-color: #27C9FF; color: #000 } 1.105 + 1.106 +.tab1, 1.107 +.tab1 a { background-color: #444; color: #fff; } 1.108 + 1.109 + 1.110 +.box { background-color: #fff; } 1.111 + 1.112 +.box { color: #000; } 1.113 + 1.114 +.box a { color: #068; } 1.115 + 1.116 +.box .row.head, 1.117 +.box .row.head2, 1.118 +.box .row.active 1.119 + { background-color: #D7F5FF;} 1.120 + 1.121 +.box .row.head .col.head 1.122 + { color: #444; } 1.123 + 1.124 +.draft .authors, 1.125 +.initiative .authors 1.126 + { color: #777; } 1.127 + 1.128 +.member_content 1.129 + { background-color: #fec; } 1.130 1.131 /* 1.132 - Main top navigation 1.133 -*/ 1.134 + * Borders 1.135 + */ 1.136 + 1.137 +.box .row 1.138 + { border-bottom: 1px solid #ccc; } 1.139 +.box .row.head 1.140 + { border-bottom-color: #777; } 1.141 +.box .row.subhead 1.142 + { border-bottom-color: #777; } 1.143 +.box .row:last-child 1.144 + { border-bottom: none; } 1.145 + 1.146 +.box.issue .row.unit_name 1.147 + { border-bottom-color: #ccc; } 1.148 1.149 -.tab1 { 1.150 - background-color: #444; 1.151 - color: #000; 1.152 -} 1.153 +/* 1.154 + * Rounded corners 1.155 + */ 1.156 + 1.157 +.box { border-radius: 1ex; -moz-border-radius: 1ex; 1.158 + -webkit-box-shadow: 2px 2px 3px 0px #444; -moz-box-shadow: 2px 2px 3px 0px #444; } 1.159 1.160 -.tab1 .right { 1.161 - float: right; 1.162 +.box .row:first-child.head, 1.163 +.box .row:first-child.head2 1.164 + { border-radius: 1ex 1ex 0 0 ; } 1.165 +.box .row:last-child 1.166 + { border-radius: 0 0 1ex 1ex; } 1.167 + 1.168 +/* 1.169 + * Text Formatting 1.170 + */ 1.171 + 1.172 +body, input, select { 1.173 + font-family: sans-serif; 1.174 + font-size: 100%; 1.175 } 1.176 1.177 .tab1 a { 1.178 - float: left; 1.179 - padding: 0.5ex 0.5em 0.5ex 0.5em; 1.180 - margin-left: 0.5em; 1.181 - background-color: #444; 1.182 - color: #fff; 1.183 font-weight: bold; 1.184 text-decoration: none; 1.185 } 1.186 1.187 -.tab1 .right a { 1.188 - margin-left: 0; 1.189 - margin-right: 0.5em; 1.190 -} 1.191 - 1.192 -.tab1 a.active { 1.193 - background-color: #7df; 1.194 - color: #000; 1.195 -} 1.196 +.box a { text-decoration: none; } 1.197 1.198 -/* 1.199 - Default slot 1.200 -*/ 1.201 - 1.202 -.slot_default { 1.203 - margin: 2ex 1% 2ex 32%; 1.204 - position: relative; 1.205 - width: 67%; 1.206 -} 1.207 +.box .row .col 1.208 + { line-height: 115%; } 1.209 1.210 -.sidebar_right .slot_default { 1.211 - margin: 2ex 32% 2ex 1%; 1.212 -} 1.213 - 1.214 -/* 1.215 -Sidebar 1.216 -*/ 1.217 +.box .row.head .col.head, 1.218 +.box .row.head2 .col.head 1.219 + { font-weight: bold; } 1.220 1.221 -.slot_sidebar { 1.222 - margin: 2ex 1% 2ex 1%; 1.223 - float: left; 1.224 - width: 30%; 1.225 -} 1.226 +.box .row.subhead .col 1.227 + { font-weight: bold; } 1.228 1.229 -.sidebar_right .slot_sidebar { 1.230 - margin: 0 1% 2ex 1%; 1.231 - float: right; 1.232 - width: 30%; 1.233 -} 1.234 - 1.235 -.slot_sidebar .box { 1.236 - width: 100%; 1.237 -} 1.238 1.239 1.240 /* 1.241 - Boxes 1.242 -*/ 1.243 - 1.244 -.box a { 1.245 - text-decoration: none; 1.246 - color: #46a; 1.247 -} 1.248 - 1.249 -.box { 1.250 - /* position */ 1.251 - position: relative; 1.252 - width: 100%; 1.253 - margin-bottom: 2ex; 1.254 - 1.255 - /* border and shadow*/ 1.256 - border-radius: 1ex; 1.257 - -moz-border-radius: 1ex; 1.258 - -webkit-box-shadow: 2px 2px 3px 0px #444; 1.259 - -moz-box-shadow: 2px 2px 3px 0px #444; 1.260 - 1.261 - /* color */ 1.262 - background-color: #fff; 1.263 - color: #000; 1.264 - 1.265 -} 1.266 - 1.267 -.box .row { 1.268 - overflow: auto; 1.269 - /* position */ 1.270 - 1.271 - /* border */ 1.272 - border-bottom: 1px solid #ccc; 1.273 -} 1.274 - 1.275 -.box .row .col { 1.276 - /* position */ 1.277 - padding: 0.5ex 0.2em 0.5ex 0.2em; 1.278 - 1.279 - /* text format */ 1.280 - line-height: 115%; 1.281 -} 1.282 - 1.283 -.box .row .col.left { 1.284 - float: left; 1.285 -} 1.286 - 1.287 -.box .row .col.right { 1.288 - float: right; 1.289 -} 1.290 - 1.291 -.box .row:last-child { 1.292 - /* border */ 1.293 - border-bottom: none; 1.294 -} 1.295 - 1.296 -.box .row .col:first-child { 1.297 - /* position */ 1.298 - padding-left: 0.5em; 1.299 -} 1.300 - 1.301 -.box .row:first-child.head, 1.302 -.box .row:first-child.head2 { 1.303 - border-radius: 1ex 1ex 0 0; 1.304 -} 1.305 - 1.306 -.box .row.head { 1.307 - background-color: #fafcff; 1.308 - color: #000; 1.309 - border-bottom-color: #777; 1.310 -} 1.311 - 1.312 -.box .row:last-child { 1.313 - border-radius: 0 0 1ex 1ex; 1.314 -} 1.315 - 1.316 -.box .row.head .col.head { 1.317 - font-weight: bold; 1.318 - color: #444; 1.319 -} 1.320 - 1.321 -.box .row.head .col a { 1.322 - background-color: #fafcff; 1.323 - color: #3B6E7F; 1.324 -} 1.325 - 1.326 -.box .row.head2 { 1.327 - background-color: #fafcff; 1.328 - color: #000; 1.329 -} 1.330 - 1.331 -.box .row.head2 .col.head { 1.332 - font-weight: bold; 1.333 -} 1.334 - 1.335 -.box .row.head2 .col a { 1.336 - background-color: #fafcff; 1.337 - color: #3B6E7F; 1.338 -} 1.339 - 1.340 -.box .row.subhead .col { 1.341 - margin-top: 2ex; 1.342 - font-weight: bold; 1.343 -} 1.344 - 1.345 -.box .row.subhead { 1.346 - border-bottom-color: #777; 1.347 -} 1.348 - 1.349 -.box .row .col a { 1.350 - color: #3B6E7F; 1.351 -} 1.352 - 1.353 -.box .row.active, 1.354 -.box .row.active a { 1.355 - background-color: #DDF7FF; 1.356 -} 1.357 - 1.358 -/* Sidebar hover button */ 1.359 + * Sidebar hover button 1.360 + */ 1.361 1.362 .hoverbutton_container { 1.363 position: relative; 1.364 @@ -312,7 +274,9 @@ 1.365 } 1.366 1.367 1.368 -/* Scrolled col */ 1.369 +/* 1.370 + * Scrolled col 1.371 + */ 1.372 1.373 .box .row .col.scrolled { 1.374 padding: 0; 1.375 @@ -326,8 +290,8 @@ 1.376 } 1.377 1.378 /* 1.379 - Bars 1.380 -*/ 1.381 + * Bars 1.382 + */ 1.383 1.384 .bar { 1.385 float: right; 1.386 @@ -348,8 +312,12 @@ 1.387 } 1.388 1.389 /* 1.390 - Avatars 1.391 -*/ 1.392 + * Avatars 1.393 + */ 1.394 + 1.395 +.avatar_image { 1.396 + border-radius: 1ex; 1.397 +} 1.398 1.399 .avatars { 1.400 overflow: auto; 1.401 @@ -380,16 +348,6 @@ 1.402 margin-top: 0.3ex; 1.403 } 1.404 1.405 -.avatars .avatar.myweight { 1.406 - border-color: #f70; 1.407 - background-color: #f70; 1.408 -} 1.409 - 1.410 -.avatars .avatar.autoreject { 1.411 - border-color: #f00; 1.412 - background-color: #f00; 1.413 -} 1.414 - 1.415 .avatars.small .avatar img { 1.416 border-radius: 0.25ex; 1.417 -moz-border-radius: 0.25ex; 1.418 @@ -436,8 +394,8 @@ 1.419 } 1.420 1.421 /* 1.422 - Area 1.423 -*/ 1.424 + * Area 1.425 + */ 1.426 1.427 .area .name { 1.428 color: #444; 1.429 @@ -452,7 +410,9 @@ 1.430 margin-top: -3px; 1.431 } 1.432 1.433 -/* Initiatives */ 1.434 +/* 1.435 + * Initiative 1.436 + */ 1.437 1.438 .initiative .name, 1.439 .initiative a.name { 1.440 @@ -461,29 +421,20 @@ 1.441 1.442 .draft .authors, 1.443 .initiative .authors { 1.444 - /* color */ 1.445 - color: #777; 1.446 - 1.447 /* text format */ 1.448 font-size: 80%; 1.449 font-style: italic; 1.450 } 1.451 1.452 -.draft .authors a, 1.453 -.initiative .authors a { 1.454 - /* color */ 1.455 -} 1.456 - 1.457 .drafts .draft .created { 1.458 font-weight: bold; 1.459 } 1.460 1.461 -.box.issue .row.unit_name { 1.462 - border-bottom-color: #ccc; 1.463 -} 1.464 -/* Draft */ 1.465 +/* 1.466 + * Draft 1.467 + */ 1.468 1.469 -.draft { 1.470 +.initiative .draft { 1.471 line-height: 135%; 1.472 } 1.473