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