slitaz-forge diff pangolin/web/slitaz.css @ rev 434

Add pangolin web interface and update pangolin tool
author Christophe Lincoln <pankso@slitaz.org>
date Sun Jan 19 19:34:21 2014 +0100 (2014-01-19)
parents
children c1ac675db867
line diff
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/pangolin/web/slitaz.css	Sun Jan 19 19:34:21 2014 +0100
     1.3 @@ -0,0 +1,374 @@
     1.4 +/*
     1.5 +	CSS style for SliTaz Network - (C) 2014 SliTaz GNU/Linux
     1.6 +*/
     1.7 +
     1.8 +html {
     1.9 +	min-height:  102%;
    1.10 +}
    1.11 +
    1.12 +body {
    1.13 +	background: #ffffff;
    1.14 +	color: black;
    1.15 +	font: 13px sans-serif, vernada, arial;
    1.16 +	margin: 0;
    1.17 +	min-width: 780px;
    1.18 +	height: 100%;
    1.19 +}
    1.20 +
    1.21 +a { text-decoration: underline; color: #215090; }
    1.22 +a:hover { text-decoration: none; color: blue; }
    1.23 +img { border: 0pt none; vertical-align: middle; }
    1.24 +h2 { color: #444; }
    1.25 +h3 { color: #666; font-size: 140%; }
    1.26 +h4 { color: #888; font-size: 120%; }
    1.27 +pre { 
    1.28 +	background-color: #f8f8f8; 
    1.29 +	border: 1px solid #ddd; 
    1.30 +	padding: 10px;
    1.31 +}
    1.32 +
    1.33 +/* Header */
    1.34 +
    1.35 +#header { 
    1.36 +	height: 40px; 
    1.37 +	background: #222;
    1.38 +}
    1.39 +
    1.40 +#header h1 {
    1.41 +	margin: 0;
    1.42 +	padding: 8px 0 0 42px;
    1.43 +	width: 250px;
    1.44 +}
    1.45 +
    1.46 +#header h1 a { 
    1.47 +	color: white; 
    1.48 +	text-decoration: none;
    1.49 +	font-size: 20px;
    1.50 +	font-style: italic;
    1.51 +}
    1.52 +
    1.53 +#header h1 a:hover, #network a:hover, #network span { 
    1.54 +	color: #afafaf;
    1.55 +}
    1.56 +
    1.57 +/* Logo */
    1.58 +
    1.59 +#logo {
    1.60 +	background: url(images/logo.png) no-repeat left;
    1.61 +	position: absolute;
    1.62 +	float: left;
    1.63 +	left: 0px;
    1.64 +	top: 0px;
    1.65 +	width: 40px;
    1.66 +	height: 40px;
    1.67 +}
    1.68 +
    1.69 +/* SliTaz Network */
    1.70 +
    1.71 +#network { 
    1.72 +	float: right; 
    1.73 +	padding: 14px 5px 0; 
    1.74 +	font-size: 12px;
    1.75 +}
    1.76 +
    1.77 +#network a, #network span { padding: 0 4px; }
    1.78 +#network span { font-weight: bold; }
    1.79 +
    1.80 +/* Block */
    1.81 +
    1.82 +#block { 
    1.83 +	min-height: 180px; 
    1.84 +	background: #ccc; 
    1.85 +	padding: 20px 10% 0px;
    1.86 +	text-align: center;
    1.87 +	color: #222;
    1.88 +	border-bottom: 1px solid #afafaf;
    1.89 +}
    1.90 +
    1.91 +#block_info {
    1.92 +	text-align: justify; 
    1.93 +	width: 48%;
    1.94 +	padding: 10px 10px 0 0;
    1.95 +}
    1.96 +
    1.97 +#block a, #network a { 
    1.98 +	color: #fff;
    1.99 +	font-weight: bold;
   1.100 +	text-decoration: none;
   1.101 +}
   1.102 +
   1.103 +#block h4 {
   1.104 +	color: #222;
   1.105 +	margin: 0px;
   1.106 +	font-weight: bold;
   1.107 +	font-size: 110%;
   1.108 +}
   1.109 +
   1.110 +#block_info p { margin: 6px 0; padding: 0 12px 0 0; }
   1.111 +#block_info a { font-weight: normal; color: #215090; }
   1.112 +#block_info a:hover { text-decoration: underline; }
   1.113 +#block ul { list-style-type: square; }
   1.114 +#block_nav a:hover { color: #afafaf; }
   1.115 +
   1.116 +/* Navigation */
   1.117 +
   1.118 +#block_nav {
   1.119 +	background: #666;
   1.120 +	padding: 10px 10px 20px;
   1.121 +	text-align: justify;
   1.122 +	width: 48%;
   1.123 +	float: right;
   1.124 +}
   1.125 +
   1.126 +#block_nav ul { 
   1.127 +	list-style-type: none; 
   1.128 +	margin: 6px 0; 
   1.129 +	padding: 0;
   1.130 +}
   1.131 +
   1.132 +#block_nav h4 img { 
   1.133 +	margin: 0 4px 0 0; 
   1.134 +	padding: 0;
   1.135 +}
   1.136 +
   1.137 +/* Languages */
   1.138 +
   1.139 +#lang {
   1.140 +	padding: 6px;
   1.141 +	font-size: 11px;
   1.142 +	position: absolute;
   1.143 +	right: 0px;
   1.144 +}
   1.145 +
   1.146 +#lang a {
   1.147 +	text-decoration: none;
   1.148 +	padding: 0 2px;
   1.149 +}
   1.150 +
   1.151 +#lang a:hover {
   1.152 +	text-decoration: underline;
   1.153 +}
   1.154 +
   1.155 +.box #lang { text-align: center; position: relative; 
   1.156 +	font-size: 13px; }	 /* for /i18n page */
   1.157 +
   1.158 +/* Content */
   1.159 +
   1.160 +#content {
   1.161 +	padding: 30px 80px;
   1.162 +	text-align: justify;
   1.163 +}
   1.164 +
   1.165 +.news li {
   1.166 +	list-style-type: square;
   1.167 +	border-bottom: 1px dotted #BEBEBE;
   1.168 +	margin-left: -25px;
   1.169 +	padding: 4px 0px 4px 0px;
   1.170 +}
   1.171 +
   1.172 +.news a, .feed-grid a { text-decoration: none; }
   1.173 +.news p a { text-decoration: underline; }
   1.174 +.news p a:hover { text-decoration: none; }
   1.175 +#twitter { margin: 20px 0; text-align: center; }
   1.176 +#gallery { text-align: center; }
   1.177 +
   1.178 +#sponsor {
   1.179 +	font-size: 90%;
   1.180 +	background-color: #fbfbfb;
   1.181 +	border: 2px solid #ddd;
   1.182 +	width: 200px;
   1.183 +	height: 160px;
   1.184 +	float: right;
   1.185 +	text-align: center;
   1.186 +	margin: 10px 0px 20px 20px;
   1.187 +}
   1.188 +
   1.189 +/* Classes */
   1.190 +
   1.191 +.right_box { width: 48%; float: right; }
   1.192 +.left_box { width: 48%; float: left; }
   1.193 +
   1.194 +.box {
   1.195 +	margin: 20px 60px;
   1.196 +	padding: 12px;
   1.197 +	background: #efefef;
   1.198 +	border: 1px solid #ddd;
   1.199 +}
   1.200 +
   1.201 +.box-dl, .box-up {
   1.202 +	margin: 20px 60px;
   1.203 +	padding: 12px 12px 12px 66px;
   1.204 +	min-height: 48px;
   1.205 +	border: 1px solid #ddd;
   1.206 +	vertical-align: middle;
   1.207 +}
   1.208 +.box-dl {
   1.209 +	background: url("/images/download.png") no-repeat 12px 12px #efefef;
   1.210 +}
   1.211 +.box-up {
   1.212 +	background: url("/images/update.png") no-repeat  center left #efefef;
   1.213 +}
   1.214 +.box-dl p { color: #456; }
   1.215 +
   1.216 +.searchbox { 
   1.217 +	margin: 20px 80px; 
   1.218 +	padding: 12px; 
   1.219 +	background: #f8f8f8;
   1.220 +	text-align: center;
   1.221 +	border: 1px solid #ddd;
   1.222 +}
   1.223 +
   1.224 +/* Activity Box */
   1.225 +
   1.226 +.activity { 
   1.227 +	margin: 0 0 20px; 
   1.228 +	background: #efefef; 
   1.229 +	padding: 5px 2px 0; 
   1.230 +	border: 1px solid #ddd; 
   1.231 +}
   1.232 +.activity div { padding: 5px 10px; background: #fff; margin-top: 5px; }
   1.233 +.activity p { margin: 0; padding: 5px 10px; font-weight: bold; }
   1.234 +.activity a { text-decoration: none; }
   1.235 +.activity ul { list-style-type: none; 
   1.236 +	margin: 4px 0; padding: 0 4px; line-height: 150%; }
   1.237 +.activity_more { text-align: right;  }
   1.238 +.activity_more a { font-weight: normal; color: #000; padding: 0 4px; }
   1.239 +.activity_more a:hover { text-decoration: underline; }
   1.240 +
   1.241 +.activity span, .news span { 
   1.242 +	color: #666; 
   1.243 +	font-size: 11px; 
   1.244 +	font-weight: normal;
   1.245 +}
   1.246 +
   1.247 +/* Button */
   1.248 +
   1.249 +#block_info .button a { 
   1.250 +	background-color: #666;
   1.251 +	color: #ffffff;
   1.252 +	margin: 0px 4px;
   1.253 +	padding: 6px 10px;
   1.254 +	font-size: 12px;
   1.255 +	text-decoration: none;
   1.256 +	font-weight: bold;
   1.257 +}
   1.258 +#block_info .button a:hover, input[type=submit]:hover { 
   1.259 +	background-color: #444;
   1.260 +	color: #ffffff;
   1.261 +}
   1.262 +
   1.263 +/* Round corner */
   1.264 +
   1.265 +#block_nav, pre, .box, .box-dl, .box-up, .searchbox, .button a, #twitter, .activity,
   1.266 +.activity div, #sponsor {
   1.267 +	-moz-border-radius: 4px;
   1.268 +	-webkit-border-radius: 4px;
   1.269 +	border-radius: 4px;
   1.270 +}
   1.271 +
   1.272 +/* Form */
   1.273 +
   1.274 +input[type=submit] {
   1.275 +	border: 1px solid #666;
   1.276 +	background-color: #666;
   1.277 +	color: white;
   1.278 +	font-weight: bold;
   1.279 +	cursor: pointer;
   1.280 +	padding: 4px 10px;
   1.281 +	font-size: 14px;
   1.282 +	margin-left: -5px;
   1.283 +	-webkit-border-top-right-radius: 4px;
   1.284 +	-webkit-border-bottom-right-radius: 4px;
   1.285 +	-moz-border-radius-topright: 4px;
   1.286 +	-moz-border-radius-bottomright: 4px;
   1.287 +	border-top-right-radius: 4px;
   1.288 +	border-bottom-right-radius: 4px;
   1.289 +}
   1.290 +
   1.291 +input[type=submit]:hover { background-color: #444; }
   1.292 +
   1.293 +input[type=text] {
   1.294 +	border: 1px solid #333333;
   1.295 +	padding: 4px;
   1.296 +	height: 17px;
   1.297 +	width: 100%;
   1.298 +	-webkit-border-top-left-radius: 4px;
   1.299 +	-webkit-border-bottom-left-radius: 4px;
   1.300 +	-moz-border-radius-topleft: 4px;
   1.301 +	-moz-border-radius-bottomleft: 4px;
   1.302 +	border-top-left-radius: 4px;
   1.303 +	border-bottom-left-radius: 4px;
   1.304 +}
   1.305 +
   1.306 +/* Footer */
   1.307 +
   1.308 +#footer {
   1.309 +	background: #f1f1f1;
   1.310 +	text-align: center;
   1.311 +	border-top: 1px solid #ddd;
   1.312 +	padding: 40px;
   1.313 +	color: #666;
   1.314 +	clear: both;
   1.315 +	margin-bottom: -2%;
   1.316 +}
   1.317 +
   1.318 +#footer a { color: #666; padding: 0 2px; }
   1.319 +
   1.320 +.year:after {
   1.321 +	/* content: "2007-2014"; */
   1.322 +	content: "2014";
   1.323 +}
   1.324 +
   1.325 +p, li {
   1.326 +	-moz-hyphens: auto;
   1.327 +	-webkit-hyphens: auto;
   1.328 +	hyphens: auto;
   1.329 +}
   1.330 +
   1.331 +
   1.332 +/* --- SEARCH --- */
   1.333 +
   1.334 +input.gsc-search-button {
   1.335 +	border: 1px solid #b64b22;
   1.336 +	background-color: #b64b22;
   1.337 +	color: white;
   1.338 +	font-weight: bold;
   1.339 +	cursor: pointer;
   1.340 +	padding: 2px 10px;
   1.341 +	font-size: 14px;
   1.342 +	margin-left: -4px;
   1.343 +	-webkit-border-top-right-radius: 4px;
   1.344 +	-webkit-border-bottom-right-radius: 4px;
   1.345 +	-moz-border-radius-topright: 4px;
   1.346 +	-moz-border-radius-bottomright: 4px;
   1.347 +	border-top-right-radius: 4px;
   1.348 +	border-bottom-right-radius: 4px;
   1.349 +}
   1.350 +
   1.351 +.gs-webResult.gs-result a.gs-title:link,
   1.352 +.gs-webResult.gs-result a.gs-title:link b {
   1.353 +	color: #103a5e;
   1.354 +}
   1.355 +
   1.356 +#cse {
   1.357 +	margin-bottom: 120px;
   1.358 +	width:100%;
   1.359 +}
   1.360 +
   1.361 +
   1.362 +/* --- GALLERY --- */
   1.363 +
   1.364 +#gallery div {
   1.365 +	width: 496px;
   1.366 +	border: none;
   1.367 +	border-radius: 12px;
   1.368 +	padding-bottom: 8px;
   1.369 +	margin: 12px auto;
   1.370 +	webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.371 +	-moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.372 +	box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.373 +}
   1.374 +#gallery img {
   1.375 +	width: 480px;
   1.376 +	margin: 8px;
   1.377 +}