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