liquid_feedback_frontend
diff static/style.css @ 4:80c215dbf076
Version alpha5
Many optical changes and improved usability
Support for different wiki-formatting-engines
Help system
Many optical changes and improved usability
Support for different wiki-formatting-engines
Help system
author | bsw/jbe |
---|---|
date | Thu Dec 10 12:00:00 2009 +0100 (2009-12-10) |
parents | 768faea1096d |
children | afd9f769c7ae |
line diff
1.1 --- a/static/style.css Mon Nov 30 12:00:00 2009 +0100 1.2 +++ b/static/style.css Thu Dec 10 12:00:00 2009 +0100 1.3 @@ -60,31 +60,27 @@ 1.4 .layout_notice, .layout_error, .layout_warning { 1.5 background: #fff; 1.6 font-weight: bold; 1.7 - right: 2ex; 1.8 line-height: 1.7em; 1.9 - position: absolute; 1.10 - top: 6ex; 1.11 - width: 60ex; 1.12 -moz-opacity:0.7; 1.13 } 1.14 1.15 .slot_notice, .slot_warning, .slot_error { 1.16 - padding: 2ex; 1.17 + padding-left: 1em; 1.18 } 1.19 1.20 .slot_notice { 1.21 - color: green; 1.22 - border: 2px solid green; 1.23 + background-color: #cfc; 1.24 + color: #040; 1.25 } 1.26 1.27 .slot_warning { 1.28 - color: orange; 1.29 - border: 2px solid orange; 1.30 + background-color: #fec; 1.31 + color: #420; 1.32 } 1.33 1.34 .slot_error { 1.35 - color: red; 1.36 - border: 2px solid red; 1.37 + background-color: #fcc; 1.38 + color: #400; 1.39 } 1.40 1.41 /************************************************************************* 1.42 @@ -92,7 +88,6 @@ 1.43 */ 1.44 1.45 .topbar { 1.46 - margin-bottom: 1em; 1.47 background-color: #444; 1.48 color: #fff; 1.49 font-size: 75%; 1.50 @@ -161,17 +156,21 @@ 1.51 */ 1.52 1.53 .title_bar { 1.54 - border-bottom: 1px solid #000; 1.55 + border-bottom: 1px solid #777; 1.56 margin-bottom: 2ex; 1.57 + padding-top: 1ex; 1.58 + padding-bottom: 0.5ex; 1.59 +} 1.60 + 1.61 +.title_bar_content { 1.62 + margin-left: 1em; 1.63 } 1.64 1.65 .path { 1.66 color: #444; 1.67 - xbackground-color: #ddd; 1.68 } 1.69 1.70 .path div { 1.71 - margin-left: 1em; 1.72 font-size: 100%; 1.73 line-height: 180%; 1.74 } 1.75 @@ -195,7 +194,6 @@ 1.76 } 1.77 1.78 .title div { 1.79 - margin-left: 0.66em; 1.80 font-weight: bold; 1.81 font-size: 135%; 1.82 line-height: 110%; 1.83 @@ -205,25 +203,23 @@ 1.84 color: #fff; 1.85 } 1.86 1.87 -.avatar { 1.88 +.member_image_avatar { 1.89 float: left; 1.90 margin-right: 0.5em; 1.91 - width: 48px; 1.92 - height: 48px; 1.93 } 1.94 1.95 .actions { 1.96 - display: inline; 1.97 font-size: 75%; 1.98 - line-height: 200%; 1.99 + line-height: 220%; 1.100 } 1.101 1.102 .slot_actions { 1.103 - margin-left: 1em; 1.104 display: inline; 1.105 } 1.106 1.107 .actions a { 1.108 + float: left; 1.109 + display: block; 1.110 padding: 0.5ex 0.5em 0.5ex 0.0em; 1.111 margin-right: 1em; 1.112 vertical-align: middle; 1.113 @@ -236,37 +232,70 @@ 1.114 .actions img { 1.115 padding-left: 0.2em; 1.116 padding-right: 0.2em; 1.117 + vertical-align: middle; 1.118 +} 1.119 + 1.120 +.logo { 1.121 + float: right; 1.122 + margin-right: 1em; 1.123 } 1.124 1.125 /************************************************************************* 1.126 * vote info / delegation 1.127 */ 1.128 1.129 -.slot_interest, 1.130 +.interest, 1.131 .slot_support, 1.132 -.slot_delegation { 1.133 +.delegation { 1.134 float: left; 1.135 - font-size: 75%; 1.136 + position: relative; 1.137 +} 1.138 + 1.139 +.interest img, 1.140 +.slot_support img, 1.141 +.delegation img { 1.142 + padding-left: 0.2em; 1.143 + padding-right: 0.2em; 1.144 +} 1.145 +.vote_info .head { 1.146 + float: left; 1.147 margin-right: 1em; 1.148 } 1.149 1.150 -.vote_info .head { 1.151 - line-height: 200%; 1.152 +.interest .head_active { 1.153 + background-color: #dfd; 1.154 + border: 1px solid #8b8; 1.155 +} 1.156 + 1.157 +.slot_support .head_active { 1.158 + background-color: #dfd; 1.159 + border: 1px solid #8b8; 1.160 +} 1.161 + 1.162 +.delegation .head_active { 1.163 + background-color: #ffd; 1.164 + border: 1px solid #bb8; 1.165 } 1.166 1.167 .vote_info .close { 1.168 - background-color: #f44; 1.169 - float: right; 1.170 + position: absolute; 1.171 + top: 0; 1.172 + right: 0; 1.173 padding: 1ex; 1.174 + display: block; 1.175 } 1.176 1.177 .vote_info .content { 1.178 + font-size: 133%; 1.179 + line-height: 100%; 1.180 + top: 3ex; 1.181 display: none; 1.182 position: absolute; 1.183 z-index: 10; 1.184 background-color: #fff; 1.185 - border: 2px solid #444; 1.186 + border: 1px solid #999; 1.187 padding: 1em; 1.188 + width: 25em; 1.189 } 1.190 1.191 .vote_info .delegation_arrow { 1.192 @@ -275,6 +304,14 @@ 1.193 vertical-align: middle; 1.194 } 1.195 1.196 +.vote_info .delegation_arrow_overridden { 1.197 + opacity: 0.4; 1.198 +} 1.199 + 1.200 +.vote_info .delegation_scope_overridden { 1.201 + color: #777; 1.202 +} 1.203 + 1.204 .vote_info .delegation_scope { 1.205 display: inline; 1.206 } 1.207 @@ -286,14 +323,29 @@ 1.208 clear: left; 1.209 } 1.210 1.211 +.delegation_overridden .member_thumb { 1.212 + opacity: 0.4; 1.213 +} 1.214 + 1.215 .delegation .revoke { 1.216 margin: 0.5ex; 1.217 + float: right; 1.218 } 1.219 1.220 .delegation .revoke img { 1.221 vertical-align: middle; 1.222 } 1.223 1.224 + 1.225 +.sub_title div { 1.226 + border-top: 1px solid #444; 1.227 + padding-top: 1ex; 1.228 + margin-top: 1ex; 1.229 + font-weight: bold; 1.230 + font-size: 135%; 1.231 + line-height: 110%; 1.232 +} 1.233 + 1.234 /************************************************************************* 1.235 * Main content 1.236 */ 1.237 @@ -315,8 +367,9 @@ 1.238 1.239 .ui_tabs_links a { 1.240 padding: 1ex; 1.241 - margin-left: 0.5em; 1.242 + line-height: 200%; 1.243 background-color: #e7e7e7; 1.244 + white-space: nowrap; 1.245 } 1.246 1.247 .ui_tabs_links a:hover { 1.248 @@ -401,6 +454,25 @@ 1.249 height: 1.3ex; 1.250 } 1.251 1.252 +.bargraph_legend { 1.253 + margin-top: 2ex; 1.254 +} 1.255 + 1.256 +.bargraph_legend .bargraph { 1.257 + width: 26px; 1.258 +} 1.259 + 1.260 +.bargraph_legend div, 1.261 +.bargraph_legend div div, 1.262 +.bargraph_legend div div div { 1.263 + float: left; 1.264 +} 1.265 + 1.266 +.bargraph_legend_label { 1.267 + margin-left: 0.5em; 1.268 + margin-right: 1em; 1.269 +} 1.270 + 1.271 /************************************************************************* 1.272 * vertical ui.form 1.273 */ 1.274 @@ -432,7 +504,7 @@ 1.275 .vertical .ui_field_label { 1.276 text-transform: uppercase; 1.277 font-size: 70%; 1.278 - line-height: 190%; 1.279 + line-height: 120%; 1.280 font-weight: bold; 1.281 color: #777; 1.282 width: 15em; 1.283 @@ -631,10 +703,22 @@ 1.284 1.285 .member_thumb { 1.286 text-decoration: none; 1.287 - min-width: 150px; 1.288 + width: 18em; 1.289 + height: 48px; 1.290 display: block; 1.291 float: left; 1.292 - border: 1px solid #ccc; 1.293 + border: 1px solid #999; 1.294 + overflow: hidden; 1.295 + xwhite-space: nowrap; 1.296 + position: relative; 1.297 +} 1.298 + 1.299 +.member_thumb a{ 1.300 + position: absolute; 1.301 + top: 0; 1.302 + left: 0; 1.303 + padding: 0; 1.304 + margin: 0; 1.305 } 1.306 1.307 .member_thumb a:hover div { 1.308 @@ -642,25 +726,24 @@ 1.309 color: #fff; 1.310 } 1.311 1.312 -.member_thumb .flags a:hover { 1.313 - background-color: #444; 1.314 - color: #fff; 1.315 -} 1.316 - 1.317 .member_thumb img { 1.318 - margin-right: 0.5em; 1.319 + padding: 0; 1.320 + margin: 0; 1.321 vertical-align: bottom; 1.322 - float: left; 1.323 } 1.324 1.325 .member_thumb div { 1.326 - display: inline; 1.327 +} 1.328 + 1.329 +.member_thumb .member_image { 1.330 } 1.331 1.332 .member_thumb .member_name { 1.333 - display: block; 1.334 - margin-top: 3ex; 1.335 - margin-right: 0.5em; 1.336 + position: absolute; 1.337 + left: 48px; 1.338 + top: 2ex; 1.339 + font-size: 100%; 1.340 + width: 14em; 1.341 } 1.342 1.343 .member_thumb .flags { 1.344 @@ -668,10 +751,22 @@ 1.345 font-size: 75%; 1.346 } 1.347 1.348 -.draft_content { 1.349 +.member_thumb .flags a{ 1.350 + position: static; 1.351 + float: right; 1.352 +} 1.353 + 1.354 + 1.355 +.member .right { 1.356 + float: right; 1.357 +} 1.358 + 1.359 +.draft_content, 1.360 +.member_statement { 1.361 background-color: #eee; 1.362 border: 1px solid #ccc; 1.363 - padding: 1ex; 1.364 + padding-left: 1ex; 1.365 + padding-right: 1ex; 1.366 } 1.367 1.368 .diff { 1.369 @@ -715,3 +810,73 @@ 1.370 padding: 1ex; 1.371 } 1.372 1.373 +.suggestion_fulfilled { 1.374 + width: 15em; 1.375 +} 1.376 +.suggestion_fulfilled a.action { 1.377 + padding-left: 0; 1.378 + line-height: 120%; 1.379 +} 1.380 + 1.381 +.help { 1.382 + border: 1px solid #bcd; 1.383 + background-color: #def; 1.384 + color: #000; 1.385 + padding: 1ex; 1.386 +} 1.387 + 1.388 +.help_visible { 1.389 + margin-bottom: 1ex; 1.390 +} 1.391 + 1.392 +.help_visible .help_icon { 1.393 + float: right; 1.394 +} 1.395 + 1.396 +.slot_help_hidden { 1.397 + float: right; 1.398 + margin-right: 1em; 1.399 +} 1.400 + 1.401 +.help_actions { 1.402 + font-size: 75%; 1.403 + float: right; 1.404 +} 1.405 + 1.406 +.help_actions a { 1.407 + margin-right: 1em; 1.408 + color: #468; 1.409 +} 1.410 + 1.411 +.wiki { 1.412 +} 1.413 + 1.414 +.wiki h1, 1.415 +.wiki h2, 1.416 +.wiki h3, 1.417 +.wiki h4 { 1.418 + margin-top: 1ex; 1.419 + margin-bottom: 1ex; 1.420 +} 1.421 + 1.422 +.wiki h1 { 1.423 + font-size: 150%; 1.424 +} 1.425 + 1.426 +.wiki h2 { 1.427 + font-size: 125%; 1.428 +} 1.429 + 1.430 +.wiki p { 1.431 + margin-top: 1ex; 1.432 + margin-bottom: 1ex; 1.433 +} 1.434 + 1.435 +form .warning { 1.436 + background-color: #ffd; 1.437 + color: #000; 1.438 + border: 1px solid #dda; 1.439 + margin: 1ex; 1.440 + margin-bottom: 2ex; 1.441 + padding: 1ex; 1.442 +}