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 {