wok diff slitaz-mercurial-style/stuff/templates/static/style-slitaz.css @ rev 7937
slitaz-mercurial-style: Start moving to new CSS and layout
author | Christophe Lincoln <pankso@slitaz.org> |
---|---|
date | Tue Jan 11 21:53:28 2011 +0100 (2011-01-11) |
parents | c1315b822a63 |
children | 5e5a67e17e5a |
line diff
1.1 --- a/slitaz-mercurial-style/stuff/templates/static/style-slitaz.css Sun Nov 08 23:30:24 2009 +0100 1.2 +++ b/slitaz-mercurial-style/stuff/templates/static/style-slitaz.css Tue Jan 11 21:53:28 2011 +0100 1.3 @@ -1,5 +1,5 @@ 1.4 html { 1.5 - height: 102%; 1.6 + min-height: 102%; 1.7 } 1.8 1.9 body { 1.10 @@ -7,41 +7,73 @@ 1.11 color: black; 1.12 font: 13px sans-serif, vernada, arial; 1.13 margin: 0; 1.14 + border-top: 34px solid #f1f1f1; 1.15 +} 1.16 + 1.17 +/* Accessibility */ 1.18 + 1.19 +#access { 1.20 + position: absolute; 1.21 + top: 4px; 1.22 + right: 0px; 1.23 + text-align: right; 1.24 + width: auto; 1.25 + margin: 0; 1.26 + padding: 4px 4px 4px 20px; 1.27 + font-size: 11px; 1.28 + font-weight: bold; 1.29 +} 1.30 + 1.31 +#access a { 1.32 + background: transparent; 1.33 + color: #0F314E; 1.34 + text-decoration: none; 1.35 +} 1.36 + 1.37 +#access a:hover { 1.38 + background: inherit; 1.39 + color: #b64b22; 1.40 +} 1.41 + 1.42 +#access img { 1.43 + vertical-align: middle; 1.44 } 1.45 1.46 /* Header and title */ 1.47 1.48 -#header{ 1.49 - background: #f0ba08 url(header.png) repeat-x top; 1.50 +#header { 1.51 + background: #351a0a url(header-img.png) no-repeat top right; 1.52 color: black; 1.53 width: 100%; 1.54 - height: 50px; 1.55 + height: 42px; 1.56 border-top: 1px solid black; 1.57 - border-bottom: 1px solid black; 1.58 - margin-bottom: 30px; 1.59 + border-bottom: 1px solid #999; 1.60 + margin-bottom: 33px; 1.61 } 1.62 1.63 #titre { 1.64 position: absolute; 1.65 - font-size: 16px; 1.66 + font-size: 14px; 1.67 font-weight: bolder ; 1.68 - margin-left: 200px; 1.69 - margin-top: 28px; 1.70 + left: 180px; 1.71 + top: 4px; 1.72 } 1.73 1.74 #logo { 1.75 position: absolute; 1.76 float: left; 1.77 - margin-left: 16px; 1.78 - margin-top: 0px; 1.79 + left: 16px; 1.80 + top: -10px; 1.81 + width: 200px; 1.82 + height: 74px; 1.83 } 1.84 1.85 -/* Navigation */ 1.86 +/* Side bar Navigation */ 1.87 1.88 #nav { 1.89 position: absolute; 1.90 - top: 76px; 1.91 - right: 40px; 1.92 + top: 102px; 1.93 + right: 80px; 1.94 color: #555555; 1.95 float: right; 1.96 width: 250px; 1.97 @@ -50,15 +82,11 @@ 1.98 font-size: 12px; 1.99 } 1.100 1.101 -#nav ul { 1.102 - list-style-type: none; 1.103 - margin: 10px 0; 1.104 -} 1.105 - 1.106 #nav .nav_box ul { 1.107 list-style-type: none; 1.108 margin: 0; 1.109 padding: 10px 24px 10px 0px; 1.110 + background-color: inherit; 1.111 } 1.112 1.113 #nav li { 1.114 @@ -66,7 +94,7 @@ 1.115 } 1.116 1.117 #nav h4 { 1.118 - font-size: 110%; 1.119 + font-size: 120%; 1.120 color: #666666; 1.121 font-weight: bold; 1.122 margin: 0; 1.123 @@ -83,20 +111,43 @@ 1.124 } 1.125 1.126 #nav a:hover { 1.127 - color: #DF8F06; 1.128 + color: #b64b22; 1.129 text-decoration: none; 1.130 display: block; 1.131 } 1.132 1.133 -.nav_box { 1.134 +#nav ul { 1.135 -moz-border-radius: 8px; 1.136 -webkit-border-radius: 8px; 1.137 + border-radius: 8px; 1.138 + list-style-type: none; 1.139 + margin: 10px 0; 1.140 + padding: 10px 24px 10px 24px; 1.141 + background-color: #eaeaea; 1.142 +} 1.143 + 1.144 +.nav_box { 1.145 margin: 10px 0; 1.146 padding: 10px 24px 10px 24px; 1.147 background-color: #eaeaea; 1.148 text-align: justify; 1.149 + -moz-border-radius: 8px; 1.150 + -webkit-border-radius: 8px; 1.151 + border-radius: 8px; 1.152 + -moz-box-shadow: 0 1px 3px #666; 1.153 + -webkit-box-shadow: 0 1px 3px #666; 1.154 + box-shadow: 0 1px 3px #666; 1.155 + /* CSS3 transition */ 1.156 + -webkit-transition-property: background-color; 1.157 + -webkit-transition-duration: 2s; 1.158 + -moz-transition-property: background-color; 1.159 + -moz-transition-duration: 2s; 1.160 + transition-property: background-color; 1.161 + transition-duration: 2s; 1.162 } 1.163 1.164 +.nav_box:hover { background-color: #f8f8f8; } 1.165 + 1.166 #nav .nav_box p { 1.167 line-height: 1.3em; 1.168 } 1.169 @@ -113,21 +164,291 @@ 1.170 background: inherit; 1.171 } 1.172 1.173 -#footer { 1.174 - float: none; 1.175 - background: inherit; 1.176 +/* Page content */ 1.177 + 1.178 +#content { 1.179 + background: white; 1.180 color: black; 1.181 - width: auto; 1.182 - clear: both; 1.183 + text-align: justify; 1.184 + height: auto; 1.185 + margin: 6px 320px 0px 0px; 1.186 + padding: 0px 40px 60px 80px; 1.187 +} 1.188 + 1.189 +#content-full { 1.190 + background: white; 1.191 + color: black; 1.192 + text-align: justify; 1.193 + height: auto; 1.194 + margin: 0; 1.195 + padding: 0px 80px 40px 80px; 1.196 +} 1.197 + 1.198 +#content li, #content-full li { 1.199 + line-height: 1.5em; 1.200 + text-align: left; 1.201 +} 1.202 + 1.203 +#news li { 1.204 + list-style-type: square; 1.205 + border-bottom: 1px dotted #BEBEBE; 1.206 + margin-left: -25px; 1.207 + padding: 4px 0px 4px 0px; 1.208 +} 1.209 + 1.210 +#news a { 1.211 + text-decoration: none; 1.212 +} 1.213 + 1.214 +#gallery { 1.215 + text-align: center; 1.216 +} 1.217 + 1.218 +/* Box and block. */ 1.219 + 1.220 +.infobox { 1.221 + margin: 20px 60px; 1.222 + padding: 12px; 1.223 + background: #f8f8f8; 1.224 +} 1.225 + 1.226 +.infobox img { vertical-align: middle; } 1.227 +/* .infobox:hover { background-color: #f2b21d; } */ 1.228 +.infobox:hover { background-color: #FBFBFB; } 1.229 + 1.230 +.block { 1.231 + /*padding-bottom: 35%;*/ 1.232 + color: black; 1.233 + min-height: 200px; 1.234 + margin-bottom: 40px; 1.235 +} 1.236 + 1.237 +.block ul { 1.238 + list-style-type: none; 1.239 + margin: 0; 1.240 + padding: 0 20px; 1.241 +} 1.242 + 1.243 +.block_left { 1.244 + width: 46%; 1.245 + float: left; 1.246 + background-color: #eaeaea; 1.247 + margin: 4px 2px; 1.248 + padding: 0 10px 10px 10px; 1.249 +} 1.250 + 1.251 +.block_right { 1.252 + width: 46%; 1.253 + float: right; 1.254 + background-color: #eaeaea; 1.255 + margin: 4px 2px; 1.256 + padding: 0 10px 10px 10px; 1.257 +} 1.258 + 1.259 +#block_top { 1.260 + color: black; 1.261 + background-color: #eaeaea; 1.262 + min-height: 180px; 1.263 + margin-bottom: 40px; 1.264 + margin-right: 340px; 1.265 + padding: 0 10px; 1.266 +} 1.267 + 1.268 +#block_nav { 1.269 + width: 300px; 1.270 + min-height: 180px; 1.271 + float: right; 1.272 + background-color: #eaeaea; 1.273 + margin: 0; 1.274 + padding: 0 10px; 1.275 +} 1.276 + 1.277 +.infobox, .block_left, .block_right, #block_top, #block_nav, #footer { 1.278 + -moz-border-radius: 8px; 1.279 + -webkit-border-radius: 8px; 1.280 + border-radius: 8px; 1.281 + -moz-box-shadow: 0 1px 3px #666; 1.282 + -webkit-box-shadow: 0 1px 3px #666; 1.283 + box-shadow: 0 1px 3px #666; 1.284 + /* CSS3 transition */ 1.285 + -webkit-transition-property: background-color; 1.286 + -webkit-transition-duration: 2s; 1.287 + -moz-transition-property: background-color; 1.288 + -moz-transition-duration: 2s; 1.289 + transition-property: background-color; 1.290 + transition-duration: 2s; 1.291 +} 1.292 + 1.293 +#block_nav { 1.294 + font-weight: bold; 1.295 +} 1.296 + 1.297 +#block_nav a { 1.298 + text-decoration: none; 1.299 +} 1.300 + 1.301 +#block_nav li a:hover { 1.302 + color: #b64b22; 1.303 +} 1.304 + 1.305 +#block_nav ul { 1.306 + margin: 0; 1.307 + list-style-type: none; 1.308 +} 1.309 + 1.310 +#block_nav h3 { 1.311 + font-size: 110%; 1.312 +} 1.313 + 1.314 +.block_left:hover, .block_right:hover, #block_top:hover, 1.315 +#block_nav:hover, #footer:hover { 1.316 + background-color: #f8f8f8; 1.317 +} 1.318 + 1.319 +.right_box { 1.320 + width: 50%; 1.321 + float: right; 1.322 +} 1.323 + 1.324 +.floor { 1.325 + color: #999999; 1.326 + font-size: 20px; 1.327 + -webkit-transform: rotate(-45deg) skew(15deg, 15deg); 1.328 + -moz-transform: rotate(-45deg) skew(15deg, 15deg); 1.329 + -o-transform: rotate(-45deg) skew(15deg, 15deg); 1.330 + -ms-transform: rotate(-45deg) skew(15deg, 15deg); 1.331 + transform: rotate(-45deg) skew(15deg, 15deg); 1.332 +} 1.333 + 1.334 +/* Button */ 1.335 + 1.336 +.button { margin-left: 20px; } 1.337 + 1.338 +.button a { 1.339 + background-color: #b64b22; 1.340 + color: #ffffff; 1.341 + margin-right: 6px; 1.342 + padding: 6px 10px; 1.343 + font-size: 14px; 1.344 + -moz-border-radius: 4px; 1.345 + -webkit-border-radius: 4px; 1.346 + border-radius: 4px; 1.347 + -moz-box-shadow: 0 1px 3px #666; 1.348 + -webkit-box-shadow: 0 1px 3px #666; 1.349 + box-shadow: 0 1px 3px #666; 1.350 +} 1.351 + 1.352 +.button a:hover, input[type=submit]:hover { 1.353 + background-color: #a3431f; 1.354 + color: #ffffff; 1.355 +} 1.356 + 1.357 +input[type=submit] { 1.358 + border: 1px solid #b64b22; 1.359 + background-color: #b64b22; 1.360 + color: white; 1.361 + font-weight: bold; 1.362 + cursor: pointer; 1.363 + padding: 2px 10px; 1.364 + font-size: 14px; 1.365 + -moz-border-radius: 2px; 1.366 + -webkit-border-radius: 2px; 1.367 + border-radius: 2px; 1.368 + -moz-box-shadow: 0 0 5px #666; 1.369 + -webkit-box-shadow: 0 0 5px#666; 1.370 + box-shadow: 0 0 5px #666; 1.371 +} 1.372 + 1.373 +input[type=text] { 1.374 + border: 1px solid #333333; 1.375 + padding: 3px; 1.376 + width: 100%; 1.377 + max-width: 500px; 1.378 +} 1.379 + 1.380 +/* Clouds */ 1.381 + 1.382 +#cloud { 1.383 + padding: 10px 0px; 1.384 + line-height: 3em; 1.385 + text-align: center; 1.386 +} 1.387 +#cloud a { padding: 0 2px; color: #956411; } 1.388 +#cloud a.tag1 { font-size: 0.7em; font-weight: 100; } 1.389 +#cloud a.tag2 { font-size: 0.8em; font-weight: 200; } 1.390 +#cloud a.tag3 { font-size: 0.9em; font-weight: 300; } 1.391 +#cloud a.tag4 { font-size: 1.0em; font-weight: 400; } 1.392 +#cloud a.tag5 { font-size: 1.2em; font-weight: 500; } 1.393 +#cloud a.tag6 { font-size: 1.4em; font-weight: 600; } 1.394 +#cloud a.tag7 { font-size: 1.6em; font-weight: 700; } 1.395 +#cloud a.tag8 { font-size: 1.8em; font-weight: 800; } 1.396 +#cloud a.tag9 { font-size: 2.2em; font-weight: 900; } 1.397 +#cloud a.tag10 { font-size: 2.5em; font-weight: 900; } 1.398 + 1.399 +/* Slideshow. */ 1.400 + 1.401 +#slideshow 1.402 +{ 1.403 + overflow: hidden; 1.404 + margin: 10px auto 10px; 1.405 + position: relative; 1.406 + width: 260px; 1.407 + height: 163px; 1.408 +} 1.409 + 1.410 +#slideshow img 1.411 +{ 1.412 + border: 0; 1.413 + width: 260px; 1.414 + height: 163px; 1.415 +} 1.416 + 1.417 +#twitter { 1.418 + margin-top: 20px; 1.419 + -moz-border-radius: 8px; 1.420 + -webkit-border-radius: 8px; 1.421 + border-radius: 8px; 1.422 + -moz-box-shadow: 0 1px 3px #666; 1.423 + -webkit-box-shadow: 0 1px 3px #666; 1.424 + box-shadow: 0 1px 3px #666; 1.425 +} 1.426 + 1.427 +/* HTML styles */ 1.428 + 1.429 +h1 { 1.430 + color: #444444; 1.431 + background: transparent; 1.432 + text-align: left; 1.433 + margin: 0px 0px 4px 0px; 1.434 + font-size: 150%; 1.435 + font-weight: bold; 1.436 + padding: 5px 0 0 10px; 1.437 +} 1.438 + 1.439 +h2 { 1.440 + color: #b64b22; 1.441 padding: 0; 1.442 - margin: 0; 1.443 - text-align: center; 1.444 + margin: 20px 0 0 0; 1.445 + font-size: 130%; 1.446 + font-weight: bold; 1.447 +} 1.448 + 1.449 +h3 { 1.450 + font-weight: bold; 1.451 + color: #666666; 1.452 + background: transparent; 1.453 +} 1.454 + 1.455 +h3 img { 1.456 vertical-align: middle; 1.457 + width: 20px; 1.458 + height: 20px; 1.459 + padding-right: 4px; 1.460 } 1.461 1.462 a { 1.463 text-decoration: underline; 1.464 - color: #0F314E; 1.465 + color: #103A5E; 1.466 background: inherit; 1.467 } 1.468 1.469 @@ -137,10 +458,126 @@ 1.470 background: inherit; 1.471 } 1.472 1.473 -h3 { 1.474 +code { 1.475 + font-size: 12px; 1.476 + color: #669900; 1.477 + background: inherit; 1.478 +} 1.479 + 1.480 +tt { 1.481 + color: #15EE15; 1.482 + background: inherit; 1.483 +} 1.484 + 1.485 +img { 1.486 + border: 0pt none; 1.487 +} 1.488 + 1.489 +fieldset { 1.490 + background: #E2ECf6; 1.491 + color: black; 1.492 + margin-top: 25px; 1.493 + border: 1px solid black; 1.494 +} 1.495 + 1.496 +legend { 1.497 + border: 1px solid black; 1.498 + color: #6c0023; 1.499 + background: #eaeaea; 1.500 font-weight: bold; 1.501 - color: #6c0023; 1.502 +} 1.503 + 1.504 +pre { 1.505 + padding: 5px; 1.506 + color: black; 1.507 + background: #E1E0B0; 1.508 +} 1.509 + 1.510 +pre.script { 1.511 + padding: 10px; 1.512 + color: black; 1.513 + background: #E8E8E8; 1.514 + border: 1px inset #606060; 1.515 +} 1.516 + 1.517 +textarea { 1.518 + background: #E5E5E5; 1.519 + margin-top: 12px; 1.520 +} 1.521 + 1.522 +/* Packages pages */ 1.523 + 1.524 +.pkg_nav { 1.525 + border-top: 1px solid black; 1.526 + margin-top: 10px; 1.527 + padding-top: 10px; 1.528 +} 1.529 + 1.530 +pre.package { 1.531 + padding: 0px; 1.532 + color: black; 1.533 + background: white; 1.534 +} 1.535 + 1.536 +p.get { 1.537 + text-align: center; 1.538 + padding: 10px; 1.539 + color: black; 1.540 + background: #F3F3F3; 1.541 + border: 1px solid #DEDEDE; 1.542 + border-radius: 4px; 1.543 + -moz-border-radius: 4px; 1.544 + -webkit-border-radius: 4px; 1.545 +} 1.546 + 1.547 +p.get a { 1.548 + font-weight: bold; 1.549 + text-decoration: none; 1.550 +} 1.551 + 1.552 +.pkgs-search { 1.553 + text-align: center; 1.554 + padding: 40px 20px 80px 20px; 1.555 +} 1.556 + 1.557 +.year:after { 1.558 + /* content: "2007-2011"; */ 1.559 + content: "2011"; 1.560 +} 1.561 + 1.562 +/* Footer */ 1.563 + 1.564 +#footer { 1.565 + margin: 0px 80px 80px 80px; 1.566 + padding: 10px; 1.567 + background: #eaeaea; 1.568 + color: #666666; 1.569 + height: 180px; 1.570 + clear: both; 1.571 + border-radius: 8px; 1.572 + -moz-border-radius: 8px; 1.573 + -webkit-border-radius: 8px; 1.574 + -moz-box-shadow: 0 1px 3px #666; 1.575 + -webkit-box-shadow: 0 1px 3px #666; 1.576 + box-shadow: 0 1px 3px #666; 1.577 +} 1.578 +#footer a { 1.579 background: inherit; 1.580 + color: #666666; 1.581 +} 1.582 +#footer a:hover { 1.583 + background: inherit; 1.584 + color: #333333; 1.585 +} 1.586 +#footer ul { 1.587 + list-style-type: none; 1.588 +} 1.589 +#footer li { 1.590 + padding: 2px; 1.591 +} 1.592 +#footer h4 { 1.593 + margin: 0 20px; 1.594 + font-size: 125%; 1.595 } 1.596 1.597 .container { 1.598 @@ -232,12 +669,7 @@ 1.599 /* Common */ 1.600 pre { margin: 0; } 1.601 1.602 -h2 { font-size: 140%; color: black; } 1.603 -h2 a { color: #000; } 1.604 -h3 { 1.605 - margin-top: -.7em; 1.606 - font-size: 100%; 1.607 -} 1.608 +h2 a { color: #b64b22; } 1.609 1.610 /* log and tags tables */ 1.611 .bigtable {