website view slitaz.css @ rev 693

Style improvment: use CSS 3 new functions (transition, box-shadow, opacity)
author Christophe Lincoln <pankso@slitaz.org>
date Fri Dec 24 15:32:15 2010 +0100 (2010-12-24)
parents f105ba41dc02
children a1cd38534626
line source
1 /*
2 CSS style for SliTaz GNU/Linux website
3 www.slitaz.org - (c) 2007 Pankso
4 */
5
6 html {
7 height: 102%;
8 }
9
10 body {
11 background: #ffffff;
12 color: black;
13 font: 13px sans-serif, vernada, arial;
14 margin: 0;
15 }
16
17 /* Accessibility */
18
19 #access {
20 position: absolute;
21 top: 0px;
22 right: 0px;
23 text-align: right;
24 width: auto;
25 margin: 0;
26 padding: 4px 4px 4px 20px;
27 font-size: 11px;
28 font-weight: bold;
29 /* CSS3 transition */
30 -webkit-transition-property: background-color;
31 -webkit-transition-duration: 1s;
32 -moz-transition-property: background-color;
33 -moz-transition-duration: 1s;
34 transition-property: background-color;
35 transition-duration: 1s;
36 }
37
38 #access:hover {
39 background-color: #b64b22;
40 -moz-border-radius-bottomleft: 8px;
41 -webkit-border-radius-bottomleft: 8px;
42 border-bottom-left-radius: 8px;
43 -moz-box-shadow: 0 1px 3px #666;
44 -webkit-box-shadow: 0 1px 3px #666;
45 box-shadow: 0 1px 3px #666;
46 }
47
48 #access a {
49 background: inherit;
50 color: white;
51 text-decoration: none;
52 }
53
54 #access a:hover {
55 background: inherit;
56 color: #222222;
57 }
58
59 /* Header and title */
60
61 #header{
62 background: #f0ba08 url(pics/website/header.png) repeat-x top;
63 color: black;
64 width: 100%;
65 height: 50px;
66 border-top: 1px solid black;
67 border-bottom: 1px solid black;
68 margin-bottom: 30px;
69 }
70
71 #titre {
72 position: absolute;
73 font-size: 16px;
74 font-weight: bolder ;
75 margin-left: 200px;
76 margin-top: 28px;
77 }
78
79 #logo {
80 position: absolute;
81 float: left;
82 margin-left: 16px;
83 margin-top: 0px;
84 }
85
86 /* Navigation */
87
88 #nav {
89 position: absolute;
90 top: 76px;
91 right: 80px;
92 color: #555555;
93 float: right;
94 width: 250px;
95 line-height: 1.5em;
96 text-align: left;
97 font-size: 12px;
98 }
99
100 #nav .nav_box ul {
101 list-style-type: none;
102 margin: 0;
103 padding: 10px 24px 10px 0px;
104 }
105
106 #nav li {
107 display: inline;
108 }
109
110 #nav h4 {
111 font-size: 120%;
112 color: #666666;
113 font-weight: bold;
114 margin: 0;
115 padding: 0 0 1px 0;
116 border-bottom: 1px solid #cecece;
117 }
118
119 #nav a {
120 color: #0F314E;
121 background: inherit;
122 display: block;
123 text-decoration: none;
124 font-weight: bold;
125 }
126
127 #nav a:hover {
128 color: #DF8F06;
129 text-decoration: none;
130 display: block;
131 }
132
133 #nav hr {
134 margin: 2px 0px 1px 0px;
135 border: 0px;
136 border-top: 1px solid #BDBDBD;
137 }
138
139 .nav_box, #nav ul {
140 margin: 10px 0;
141 padding: 10px 24px 10px 24px;
142 background-color: #eaeaea;
143 text-align: justify;
144 -moz-border-radius: 8px;
145 -webkit-border-radius: 8px;
146 border-radius: 8px;
147 -moz-box-shadow: 0 1px 3px #666;
148 -webkit-box-shadow: 0 1px 3px #666;
149 box-shadow: 0 1px 3px #666;
150 /* CSS3 transition */
151 -webkit-transition-property: background-color;
152 -webkit-transition-duration: 2s;
153 -moz-transition-property: background-color;
154 -moz-transition-duration: 2s;
155 transition-property: background-color;
156 transition-duration: 2s;
157 }
158
159 .nav_box:hover, #nav ul:hover { background-color: #f8f8f8; }
160
161 #nav .nav_box p {
162 line-height: 1.3em;
163 }
164
165 #nav .nav_box p a {
166 display: inline;
167 font-weight: normal;
168 text-decoration: underline;
169 }
170
171 #nav .nav_box p a:hover {
172 text-decoration: none;
173 color: blue;
174 background: inherit;
175 }
176
177 #nav hr {
178 height: 0px;
179 border: 0px solid #eaeaea;
180 }
181
182 /* Page content */
183
184 #content {
185 background: white;
186 color: black;
187 text-align: justify;
188 height: auto;
189 margin: 6px 320px 0px 0px;
190 padding: 0px 40px 60px 80px;
191 }
192
193 #content-full {
194 background: white;
195 color: black;
196 text-align: justify;
197 height: auto;
198 margin: 6px 0px 0px 0px;
199 padding: 0px 80px 35% 80px;
200 }
201
202 #content li, #content-full li {
203 line-height: 1.5em;
204 text-align: left;
205 }
206
207 /* Legal informations */
208
209 #copy {
210 font-size: 11px ;
211 text-align: left ;
212 background: transparent;
213 color: #a8a8a8;
214 padding-top: 10px;
215 margin: 0 0 0 80px;
216 }
217
218 #copy a {
219 background: inherit;
220 color: #a8a8a8;
221 }
222
223 #copy a:hover {
224 background: inherit;
225 color: #666666;
226 }
227
228 /* Footer */
229
230 #bottom {
231 float: none;
232 background: inherit;
233 color: black;
234 width: auto;
235 clear: both;
236 padding: 0;
237 margin: 0 0 0 80px;
238 text-align: left;
239 vertical-align: middle;
240 }
241
242 #news li {
243 list-style-type: square;
244 border-bottom: 1px dotted #BEBEBE;
245 margin-left: -25px;
246 padding: 4px 0px 4px 0px;
247 }
248
249 #news a {
250 text-decoration: none;
251 }
252
253 #gallery {
254 text-align: center;
255 }
256
257 #gallery table {
258 margin: 30px 0px 30px 0px;
259 }
260
261 /* Clouds */
262
263 #cloud {
264 padding: 20px 0px 20px 0px;
265 line-height: 3em;
266 text-align: center;
267 }
268 #cloud a { padding: 4px; color: #956411; }
269 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
270 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
271 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
272 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
273 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
274 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
275 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
276 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
277 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
278 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
279
280 /* CSS class. */
281
282 .infobox {
283 margin: 10px;
284 padding: 12px;
285 background: #f8f8f8;
286 -moz-border-radius: 8px;
287 -webkit-border-radius: 8px;
288 border-radius: 8px;
289 -moz-box-shadow: 0 1px 3px #666;
290 -webkit-box-shadow: 0 1px 3px #666;
291 box-shadow: 0 1px 3px #666;
292 }
293
294 .block {
295 /*padding-bottom: 35%;*/
296 color: black;
297 }
298
299 .block h3 img {
300 padding: 2px;
301 }
302
303 .block_left {
304 width: 46%;
305 float: left;
306 background-color: #f5f5f5;
307 margin: 4px 2px;
308 padding: 0 6px;
309 }
310
311 .block_right {
312 width: 46%;
313 float: right;
314 background-color: #f5f5f5;
315 margin: 4px 2px;
316 padding: 0 6px;
317 }
318
319 .block_left, .block_right {
320 -moz-border-radius: 8px;
321 -webkit-border-radius: 8px;
322 border-radius: 8px;
323 -moz-box-shadow: 0 1px 3px #666;
324 -webkit-box-shadow: 0 1px 3px #666;
325 box-shadow: 0 1px 3px #666;
326 /* CSS3 transition */
327 -webkit-transition-property: background-color;
328 -webkit-transition-duration: 2s;
329 -moz-transition-property: background-color;
330 -moz-transition-duration: 2s;
331 transition-property: background-color;
332 transition-duration: 2s;
333 }
334
335 .block_left:hover, .block_right:hover {
336 background-color: #f2b21d;
337 }
338
339 /* HTML styles */
340
341 h1 {
342 color: blue;
343 background: inherit;
344 text-align: left;
345 margin: 0px 0px 10px 0px;
346 font-size: 140%;
347 font-weight: bold;
348 }
349
350 h2 {
351 color: #DF8F06;
352 /* border-top: 1px solid #f3f3f3; */
353 border-left: 8px solid #f3f3f3;
354 padding: 4px 0px 4px 4px;
355 margin: 0;
356 font-size: 140%;
357 font-weight: bold;
358 }
359
360 h3 {
361 font-weight: bold;
362 color: #6c0023;
363 background: inherit;
364 }
365
366 a {
367 text-decoration: underline;
368 color: #0F314E;
369 background: inherit;
370 }
371
372 a:hover {
373 text-decoration: none;
374 color: blue;
375 background: inherit;
376 }
377
378 code {
379 font-size: 12px;
380 color: #669900;
381 background: inherit;
382 }
383
384 tt {
385 color: #15EE15;
386 background: inherit;
387 }
388
389 img {
390 border: 0pt none;
391 }
392
393 fieldset {
394 background: #E2ECf6;
395 color: black;
396 margin-top: 25px;
397 border: 1px solid black;
398 }
399
400 legend {
401 border: 1px solid black;
402 color: #6c0023;
403 background: #eaeaea;
404 font-weight: bold;
405 }
406
407 pre {
408 padding: 5px;
409 color: black;
410 background: #E1E0B0;
411 }
412
413 pre.script {
414 padding: 10px;
415 color: black;
416 background: #E8E8E8;
417 border: 1px inset #606060;
418 }
419
420 textarea {
421 background: #E5E5E5;
422 margin-top: 12px;
423 }
424
425 /* Packages pages */
426
427 .pkg_nav {
428 border-top: 1px solid black;
429 margin-top: 10px;
430 padding-top: 10px;
431 }
432
433 pre.package {
434 padding: 0px;
435 color: black;
436 background: white;
437 }
438
439 p.get {
440 text-align: center;
441 padding: 10px;
442 color: black;
443 background: #F3F3F3;
444 border: 1px solid #DEDEDE;
445 }
446
447 .year:after {
448 /* content: "2007-2010"; */
449 content: "2010";
450 }