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 +}