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