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  

Impressum / About Us