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