slitaz-forge view mirror/root/static/slitaz.css @ rev 603
Update to the current state of "mirror" and "pkgs"
| author | Aleksej Bobylev <al.bobylev@gmail.com> |
|---|---|
| date | Sun Oct 25 06:47:13 2015 +0200 (2015-10-25) |
| parents | 8f7ddeaffa3b |
| children | fd79a2207aed |
line source
1 /*
2 CSS style for SliTaz Network - (C) 2015 SliTaz GNU/Linux
3 */
5 html {
6 min-height: 102%;
7 }
8 body {
9 height: 100%;
10 margin: 0;
11 box-sizing: border-box;
12 color: #222;
13 background: #FFF;
14 font-size: 90%;
15 font-family: Arimo, Ubuntu, "Droid Sans", "DejaVu Sans", FreeSans, "Liberation Sans", sans-serif;
16 -moz-hyphens: auto; -epub-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
17 }
18 code, pre, samp, kbd {
19 color: #000;
20 background-color: rgba(0, 0, 0, .05);
21 }
22 a {
23 text-decoration: none;
24 color: #215090;
25 }
26 a:hover {
27 text-decoration: underline;
28 }
29 img {
30 border: 0 none;
31 vertical-align: middle;
32 }
33 .large {
34 overflow-x: auto;
35 }
36 h2 {
37 color: #444;
38 font-size: 22px;
39 font-weight: 300;
40 margin: 18px auto 6px;
41 border-bottom: 1px solid #CCC;
42 }
43 h3 {
44 color: #16A;
45 font-size: 19px;
46 font-weight: 300;
47 margin: 12px auto 0;
48 line-height: 1;
49 }
50 pre {
51 background-color: #F8F8F8;
52 border: 1px solid #DDD;
53 padding: 10px;
54 white-space: pre-wrap;
55 overflow-x: auto;
56 line-height: 1;
57 }
58 .hard {
59 white-space: pre;
60 resize: both;
61 }
62 .scroll {
63 max-height: 40ex;
64 }
69 /* Page header */
71 body > header {
72 display: block;
73 background: #444;
74 text-align: justify;
75 line-height: 0;
76 box-shadow: 0 -8px 8px #333 inset;
77 }
78 h1 {
79 display: inline-block;
80 margin: auto 0;
81 height: 40px;
82 white-space: nowrap;
83 vertical-align: middle;
84 }
85 h1::before {
86 display: inline-block;
87 content: url(logo.png);
88 vertical-align: middle;
89 }
90 h1 a {
91 color: #FFF;
92 font-size: 20px;
93 font-style: italic;
94 }
95 body > header::before, body > header::after, .block > div::before, .block > div::after {
96 display: inline-block;
97 width: 100%;
98 height: 0;
99 visibility: hidden;
100 overflow: hidden;
101 content: '';
102 }
103 .network {
104 display: inline-block;
105 text-align: left;
106 vertical-align: middle;
107 font-size: 12px;
108 line-height: normal;
109 }
110 .network a {
111 display: inline-block;
112 padding: 0 6px;
113 vertical-align: middle;
114 color: #FFF;
115 }
116 .home::before {
117 content: url(home.png);
118 }
123 /* Info block and navigation */
125 .block {
126 padding: 6px;
127 background: #CCC;
128 border-bottom: 1px solid #AAA;
129 }
130 .block > div {
131 max-width: 700px;
132 margin: 0 auto;
133 text-align: justify;
134 line-height: 0;
135 }
136 .block_info {
137 padding: 6px 12px 0 0;
138 line-height: normal;
139 width: 60%;
140 }
141 .block_info input {
142 width: 100%;
143 }
144 .block header {
145 font-weight: 400;
146 font-size: 18px;
147 line-height: 18px;
148 }
149 .block_info p {
150 margin: 7px 0;
151 padding: 0;
152 text-align: justify;
153 }
154 nav {
155 background: #666;
156 color: #FFF;
157 padding: 6px;
158 line-height: normal;
159 }
160 nav a {
161 white-space: nowrap;
162 color: #FFF;
163 }
164 nav header img {
165 margin: 0 4px 0 0;
166 padding: 0;
167 }
168 nav, .block_info {
169 display: inline-block;
170 vertical-align: top;
171 }
176 /* Languages selector */
178 .lang {
179 margin: 0;
180 text-align: right;
181 padding: 6px;
182 font-size: 0.9rem;
183 }
184 .lang a {
185 padding: 0 2px;
186 }
191 /* Main content block */
193 main {
194 display: block;
195 max-width: 700px;
196 margin: 6px auto;
197 padding: 0 6px;
198 text-align: justify;
199 line-height: 1.5rem;
200 }
201 p, ul, ol, h2, h3, pre, table {
202 max-width: 700px;
203 }
204 p, ul, ol, pre, table {
205 margin: 6px auto;
206 }
207 p, ul, ol {
208 display: block;
209 }
210 ul, ol, dd {
211 padding: 0 2ex 0 4ex;
212 }
213 ul ul, ol ol, ul ol, ol ul {
214 margin: 0;
215 }
220 /* Countries flags */
222 .br::before { content: url(BR.png); }
223 .ch::before { content: url(CH.png); }
224 .cn::before { content: url(CN.png); }
225 .de::before { content: url(DE.png); }
226 .es::before { content: url(ES.png); }
227 .fr::before { content: url(FR.png); }
228 .it::before { content: url(IT.png); }
229 .pl::before { content: url(PL.png); }
230 .ru::before { content: url(RU.png); }
231 .se::before { content: url(SE.png); }
232 .tw::before { content: url(TW.png); }
233 .ua::before { content: url(UA.png); }
234 .us::before { content: url(US.png); }
239 /* SliTaz mirrors list */
241 .mirrors {
242 padding: 6px;
243 text-align: center;
244 background: #F1F1F1;
245 border-bottom: 1px solid #DDD;
246 }
247 .mirrors a, .mirrors a::before {
248 display: inline-block;
249 padding: 0 3px;
250 }
251 .mirrors a::before {
252 vertical-align: -4px;
253 }
258 /* Table */
260 table {
261 background-color: #F8F8F8;
262 border: 1px solid #DDD;
263 width: 100%;
264 margin-bottom: 20px;
265 padding: 0;
266 border-spacing: 0;
267 line-height: 1;
268 }
269 caption {
270 caption-side: bottom;
271 text-align: left;
272 padding: 6px 0;
273 }
274 thead tr{
275 background-color: #DDD;
276 }
277 td {
278 text-align: left;
279 }
280 td, th {
281 padding: 4px;
282 }
283 /* Zebra stripes */
284 tbody tr:nth-child(odd) {
285 background-color: #FFF;
286 }
287 tbody tr:nth-child(even) {
288 background-color: #EEE;
289 }
290 /* Mirror file list table */
291 .list td:nth-child(1) {
292 vertical-align: middle;
293 }
294 .list td:nth-child(1)::before {
295 display: inline-block;
296 vertical-align: middle;
297 padding-right: 3px;
298 }
299 .list th:nth-child(3), .list td:nth-child(3) {
300 text-align: right;
301 }
306 /* Misc blocks */
308 .news li {
309 list-style-type: square;
310 border-bottom: 1px dotted #BEBEBE;
311 margin-left: -25px;
312 padding: 4px 0;
313 }
314 .twitter {
315 margin: 20px 0;
316 }
317 .gallery {
318 text-align: center;
319 }
320 .sponsor {
321 font-size: 90%;
322 background-color: #FBFBFB;
323 border: 2px solid #DDD;
324 width: 200px;
325 height: 160px;
326 float: right;
327 text-align: center;
328 margin: 10px 0 20px 20px;
329 }
330 .right_box {
331 width: 48%;
332 float: right;
333 }
334 .left_box {
335 width: 48%;
336 float: left;
337 }
338 .box {
339 margin: 20px 60px;
340 padding: 12px;
341 background: #EFEFEF;
342 border: 1px solid #DDD;
343 }
344 .searchbox {
345 margin: 20px 80px;
346 padding: 12px;
347 background: #F8F8F8;
348 text-align: center;
349 border: 1px solid #DDD;
350 }
351 .activity {
352 margin: 0 0 20px;
353 background: #EFEFEF;
354 padding: 5px 2px 0;
355 border: 1px solid #DDD;
356 }
357 .activity div {
358 padding: 5px 10px;
359 background: #FFF;
360 margin-top: 5px;
361 }
362 .activity p {
363 margin: 0;
364 padding: 5px 10px;
365 font-weight: 700;
366 }
367 .activity ul {
368 list-style-type: none;
369 margin: 4px 0;
370 padding: 0 4px;
371 line-height: 150%;
372 }
373 .activity_more {
374 text-align: right;
375 }
376 .activity_more a {
377 font-weight: 400;
378 color: #000;
379 padding: 0 4px;
380 }
381 .activity span, .news span {
382 color: #666;
383 font-size: 11px;
384 font-weight: 400;
385 }
390 /* Round corner */
392 nav, pre, textarea, select, .box, .searchbox, .activity, .activity div, .twitter, .sponsor {
393 -moz-border-radius: 4px;
394 -webkit-border-radius: 4px;
395 border-radius: 4px;
396 }
401 /* Page footer */
403 body > footer {
404 background: #F1F1F1;
405 text-align: center;
406 border-top: 1px solid #CCC;
407 padding: 6px;
408 color: #666;
409 clear: both;
410 box-shadow: 0 4px 8px #CCC inset;
411 }
412 body > footer div {
413 margin: 12px;
414 }
415 .year:after {
416 content: "2015";
417 }
422 /* Mimetype icons */
424 .x-bzip::before { content: url(application-x-bzip.png); }
425 .x-gzip::before { content: url(application-x-gzip.png); }
426 .plain::before { content: url(text-plain.png); }
427 .x-bittorrent::before { content: url(application-x-bittorrent.png); }
428 .octet-stream::before { content: url(application-octet-stream.png); }
429 .jpeg::before { content: url(image-jpeg.png); }
430 .png::before { content: url(image-png.png); }
431 .javascript::before { content: url(text-x-javascript.png); }
432 .css::before { content: url(text-css.png); }
433 .dir::before { content: url(folder.png); }
434 .up::before { content: url(go-up.png); }
435 .zip::before { content: url(application-zip.png); }
436 .iso::before { content: url(application-x-cd-image.png); }
437 .krn::before { content: url(application-x-executable.png); }
438 .exe::before { content: url(application-x-ms-dos-executable.png); }
439 .rme::before { content: url(text-x-readme.png); }
440 .log::before { content: url(text-x-changelog.png); }
441 .x-flavor,
442 .pkg::before { content: url(package-x-generic.png); }
443 .server::before { content: url(network-server.png); }
444 .locale::before { content: url(preferences-desktop-locale.png); display: inline-block; vertical-align: middle; }
445 .locale2::before { content: url(preferences-desktop-locale2.png); display: inline-block; vertical-align: middle; }
450 /* Responsive rules */
452 /* More space for touchscreen links */
454 .touch td, .touch th {
455 padding: 6px;
456 }
457 .touch .network a, .touch nav a, .touch .mirrors a, .touch footer a,
458 .touch .info a {
459 display: inline-block;
460 padding: 0 12px 12px 0;
461 }
463 /* Full width for block_info and navigation */
465 @media (max-width: 510px) {
466 .block_info, nav {
467 display: block;
468 width: inherit;
469 max-width: 100%;
470 }
471 .block_info {
472 padding: 6px;
473 }
474 }