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