rev |
line source |
pankso@1
|
1 /*
|
pascal@1243
|
2 CSS style for SliTaz Network - (C) 2015 SliTaz GNU/Linux
|
pankso@1
|
3 */
|
pankso@1
|
4
|
pankso@555
|
5 html {
|
pankso@710
|
6 min-height: 102%;
|
pankso@555
|
7 }
|
pankso@768
|
8
|
pankso@1
|
9 body {
|
pankso@555
|
10 background: #ffffff;
|
pankso@1
|
11 color: black;
|
pankso@1298
|
12 font: 100% sans-serif, vernada, arial;
|
pankso@1
|
13 margin: 0;
|
pankso@818
|
14 min-width: 780px;
|
pankso@815
|
15 height: 100%;
|
pankso@1
|
16 }
|
pankso@768
|
17
|
pankso@768
|
18 a { text-decoration: underline; color: #215090; }
|
pankso@1200
|
19 a:hover { text-decoration: none; }
|
pankso@768
|
20 img { border: 0pt none; vertical-align: middle; }
|
pankso@1299
|
21 h2 { color: #444; }
|
pankso@768
|
22 h3 { color: #666; font-size: 140%; }
|
pankso@768
|
23 h4 { color: #888; font-size: 120%; }
|
pankso@1200
|
24 h2, h3 { border-bottom: 1px dashed #afafaf; padding-bottom: 5px; }
|
pankso@1241
|
25 li { list-style-type: square; }
|
pankso@768
|
26 pre {
|
pankso@768
|
27 background-color: #f8f8f8;
|
pankso@768
|
28 border: 1px solid #ddd;
|
pankso@768
|
29 padding: 10px;
|
pankso@1
|
30 }
|
pankso@1
|
31
|
pankso@741
|
32 /* Header */
|
pankso@1
|
33
|
pankso@768
|
34 #header {
|
pankso@768
|
35 height: 40px;
|
pankso@1200
|
36 background: #111 url(images/logo.png) no-repeat left;
|
pankso@1
|
37 }
|
pankso@768
|
38
|
pankso@768
|
39 #header h1 {
|
pankso@768
|
40 margin: 0;
|
pankso@1200
|
41 padding: 8px 0 8px 42px;
|
pankso@1200
|
42 width: 280px;
|
pankso@1200
|
43 font-size: 20px;
|
pankso@1200
|
44 font-style: italic;
|
pankso@1
|
45 }
|
pankso@768
|
46
|
pankso@768
|
47 #header h1 a {
|
pankso@768
|
48 color: white;
|
pankso@768
|
49 text-decoration: none;
|
pankso@768
|
50 }
|
pankso@768
|
51
|
pankso@1175
|
52 #header h1 a:hover, #network a:hover, #network span {
|
pankso@1175
|
53 color: #afafaf;
|
pankso@768
|
54 }
|
pankso@768
|
55
|
pankso@1200
|
56 #searchbtn {
|
pankso@1200
|
57 position: absolute;
|
pankso@1200
|
58 right: 8px;
|
pankso@1200
|
59 top: 48px;
|
pankso@1200
|
60 }
|
pankso@1200
|
61
|
pankso@768
|
62 /* Logo */
|
pankso@768
|
63
|
pankso@1
|
64 #logo {
|
pankso@768
|
65 background: url(images/logo.png) no-repeat left;
|
pankso@1
|
66 position: absolute;
|
pankso@1
|
67 float: left;
|
pankso@768
|
68 left: 0px;
|
pankso@768
|
69 top: 0px;
|
pankso@768
|
70 width: 40px;
|
pankso@768
|
71 height: 40px;
|
pankso@1
|
72 }
|
pankso@1
|
73
|
pankso@768
|
74 /* SliTaz Network */
|
pankso@1
|
75
|
pankso@768
|
76 #network {
|
pankso@768
|
77 float: right;
|
pankso@1175
|
78 padding: 14px 5px 0;
|
pankso@555
|
79 font-size: 12px;
|
pankso@1
|
80 }
|
pankso@768
|
81
|
pankso@1175
|
82 #network a, #network span { padding: 0 4px; }
|
pankso@1175
|
83 #network span { font-weight: bold; }
|
pankso@768
|
84
|
pankso@768
|
85 /* Block */
|
pankso@768
|
86
|
pankso@768
|
87 #block {
|
pankso@1175
|
88 min-height: 180px;
|
pankso@1175
|
89 background: #ccc;
|
pankso@1175
|
90 padding: 20px 10% 0px;
|
pankso@768
|
91 text-align: center;
|
pankso@1044
|
92 color: #222;
|
pankso@1175
|
93 border-bottom: 1px solid #afafaf;
|
pankso@768
|
94 }
|
pankso@768
|
95
|
pankso@768
|
96 #block_info {
|
pankso@768
|
97 text-align: justify;
|
pankso@768
|
98 width: 48%;
|
pankso@768
|
99 padding: 10px 10px 0 0;
|
pankso@768
|
100 }
|
pankso@768
|
101
|
pankso@768
|
102 #block a, #network a {
|
pankso@1175
|
103 color: #fff;
|
pankso@555
|
104 font-weight: bold;
|
pankso@768
|
105 text-decoration: none;
|
pankso@555
|
106 }
|
pankso@768
|
107
|
pankso@768
|
108 #block h4 {
|
pankso@1175
|
109 color: #222;
|
pankso@768
|
110 margin: 0px;
|
pankso@768
|
111 font-weight: bold;
|
pankso@768
|
112 font-size: 110%;
|
pankso@768
|
113 }
|
pankso@768
|
114
|
pankso@768
|
115 #block_info p { margin: 6px 0; padding: 0 12px 0 0; }
|
pankso@1175
|
116 #block_info a { font-weight: normal; color: #215090; }
|
pankso@1175
|
117 #block_info a:hover { text-decoration: underline; }
|
pankso@768
|
118 #block ul { list-style-type: square; }
|
pankso@1175
|
119 #block_nav a:hover { color: #afafaf; }
|
pankso@768
|
120
|
pankso@768
|
121 /* Navigation */
|
pankso@768
|
122
|
pankso@768
|
123 #block_nav {
|
pankso@1175
|
124 background: #666;
|
pankso@1175
|
125 padding: 10px 10px 20px;
|
pankso@768
|
126 text-align: justify;
|
pankso@768
|
127 width: 48%;
|
pankso@768
|
128 float: right;
|
pankso@768
|
129 }
|
pankso@768
|
130
|
pankso@768
|
131 #block_nav ul {
|
pankso@768
|
132 list-style-type: none;
|
pankso@768
|
133 margin: 6px 0;
|
pankso@768
|
134 padding: 0;
|
pankso@768
|
135 }
|
pankso@768
|
136
|
pankso@784
|
137 #block_nav h4 img {
|
pankso@784
|
138 margin: 0 4px 0 0;
|
pankso@784
|
139 padding: 0;
|
pankso@784
|
140 }
|
pankso@784
|
141
|
pankso@1200
|
142 .dlbutton {
|
al@1279
|
143 display: inline-block;
|
al@1280
|
144 margin: 0.5ex;
|
pankso@1200
|
145 background: #333 url("/images/download-30.png") no-repeat 4px center;
|
pankso@1200
|
146 padding-left: 38px;
|
pankso@1200
|
147 -webkit-transition: background-color 0.6s;
|
pankso@1200
|
148 transition: background-color 0.5s;
|
pankso@1200
|
149 }
|
al@1280
|
150 .dldiv { margin: 30px 0; text-align: center; }
|
pankso@1200
|
151
|
pankso@1200
|
152 /*
|
pankso@1200
|
153 *
|
pankso@1200
|
154 *
|
pankso@1200
|
155 * Navigation NG
|
pankso@1200
|
156 *
|
pankso@1200
|
157 *
|
pankso@1200
|
158 * */
|
pankso@1200
|
159
|
pankso@1200
|
160 nav {
|
pankso@1200
|
161 min-height: 100px;
|
pankso@1200
|
162 background: #ddd;
|
pankso@1200
|
163 padding: 56px 6% 0;
|
pankso@1200
|
164 text-align: center;
|
pankso@1200
|
165 color: #222;
|
pankso@1200
|
166 border-bottom: 1px solid #afafaf;
|
pankso@1200
|
167 top: 40px;
|
pankso@1200
|
168 }
|
pankso@1200
|
169
|
pankso@1200
|
170 nav ul {
|
pankso@1200
|
171 margin: 0; padding: 0;
|
pankso@1200
|
172 list-style: none;
|
pankso@1200
|
173 }
|
pankso@1200
|
174 nav li { display: inline; }
|
pankso@1200
|
175
|
pankso@1200
|
176 nav a, .dlbutton {
|
pankso@1200
|
177 text-decoration: none;
|
pankso@1200
|
178 padding: 12px;
|
pankso@1200
|
179 color: #fff;
|
pankso@1200
|
180 font-weight: bold;
|
pankso@1200
|
181 vertical-align: middle;
|
pankso@1200
|
182 -webkit-transition: background-color 0.6s;
|
pankso@1200
|
183 transition: background-color 0.5s;
|
pankso@1200
|
184 }
|
pankso@1299
|
185 nav p { padding: 8px; color: #333; font-size: 90%; }
|
pankso@1200
|
186
|
pankso@1200
|
187 .nav1 { background-color: #333; }
|
pankso@1200
|
188 .nav1:hover { background-color: #128da9; }
|
pankso@1200
|
189 .nav2 { background-color: #ab3c00; }
|
pankso@1200
|
190 .nav2:hover { background-color: #ff9b00; }
|
pankso@1200
|
191 .navpi { background-color: #444; }
|
pankso@1200
|
192 .navpi:hover { background-color: #bc1142; }
|
pankso@1200
|
193
|
pankso@768
|
194 /* Languages */
|
pankso@768
|
195
|
pankso@768
|
196 #lang {
|
pankso@1200
|
197 padding: 8px;
|
pankso@1200
|
198 font-size: 12px;
|
pankso@1044
|
199 position: absolute;
|
pankso@1044
|
200 right: 0px;
|
pankso@1200
|
201 color: #666;
|
pankso@768
|
202 }
|
pankso@1200
|
203 #lang .flag { font-size: 14px; }
|
pankso@1200
|
204 #lang .flag:hover { text-decoration: none; }
|
pankso@768
|
205
|
pankso@1200
|
206 #lang a, #lang strong, #lang span {
|
pankso@1
|
207 text-decoration: none;
|
pankso@768
|
208 padding: 0 2px;
|
pankso@1
|
209 }
|
pankso@768
|
210
|
pankso@768
|
211 #lang a:hover {
|
pankso@768
|
212 text-decoration: underline;
|
pankso@1
|
213 }
|
pankso@768
|
214
|
pankso@1044
|
215 .box #lang { text-align: center; position: relative;
|
pankso@1044
|
216 font-size: 13px; } /* for /i18n page */
|
al@1033
|
217
|
pankso@768
|
218 /* Content */
|
pankso@768
|
219
|
pankso@768
|
220 #content {
|
pankso@768
|
221 padding: 30px 80px;
|
pankso@555
|
222 text-align: justify;
|
pankso@741
|
223 }
|
pankso@1241
|
224 #content li { line-height: 1.6em; }
|
pankso@741
|
225
|
pankso@809
|
226 .news li {
|
pankso@741
|
227 border-bottom: 1px dotted #BEBEBE;
|
pankso@741
|
228 margin-left: -25px;
|
pankso@741
|
229 padding: 4px 0px 4px 0px;
|
pankso@741
|
230 }
|
pankso@741
|
231
|
pankso@809
|
232 .news a, .feed-grid a { text-decoration: none; }
|
pankso@809
|
233 .news p a { text-decoration: underline; }
|
pankso@809
|
234 .news p a:hover { text-decoration: none; }
|
pankso@1171
|
235 #twitter { margin: 20px 0; text-align: center; }
|
pankso@768
|
236 #gallery { text-align: center; }
|
pankso@741
|
237
|
pankso@945
|
238 #sponsor {
|
pankso@945
|
239 font-size: 90%;
|
pankso@975
|
240 background-color: #fbfbfb;
|
pankso@975
|
241 border: 2px solid #ddd;
|
pankso@945
|
242 width: 200px;
|
pankso@1267
|
243 height: 140px;
|
pankso@945
|
244 float: right;
|
pankso@945
|
245 text-align: center;
|
pankso@1241
|
246 margin: 20px 0px 20px 20px;
|
pankso@945
|
247 }
|
pankso@945
|
248
|
pankso@768
|
249 /* Classes */
|
pankso@768
|
250
|
pankso@1200
|
251 .mobile { display: none !important; }
|
pankso@1200
|
252
|
pankso@768
|
253 .right_box { width: 48%; float: right; }
|
pankso@768
|
254 .left_box { width: 48%; float: left; }
|
pankso@768
|
255
|
pankso@768
|
256 .box {
|
pankso@741
|
257 margin: 20px 60px;
|
pankso@741
|
258 padding: 12px;
|
pankso@768
|
259 background: #efefef;
|
pankso@768
|
260 border: 1px solid #ddd;
|
pankso@768
|
261 }
|
pankso@768
|
262
|
al@1321
|
263 .box-dl, .box-up, .box-warning {
|
pankso@1200
|
264 margin: 20px 0;
|
al@1019
|
265 min-height: 48px;
|
al@1019
|
266 border: 1px solid #ddd;
|
al@1019
|
267 vertical-align: middle;
|
al@1019
|
268 }
|
al@1032
|
269 .box-dl {
|
pankso@1200
|
270 background: url("/images/download.png") no-repeat 12px center;
|
pankso@1200
|
271 padding: 16px 16px 16px 72px;
|
al@1032
|
272 }
|
al@1032
|
273 .box-up {
|
pankso@1200
|
274 background: url("/images/update.png") no-repeat 12px center;
|
pankso@1200
|
275 padding: 16px 16px 16px 62px;
|
al@1032
|
276 }
|
al@1321
|
277 .box-warning {
|
al@1321
|
278 background: url("/images/warning.png") no-repeat 12px center;
|
al@1321
|
279 padding: 16px 16px 16px 62px;
|
al@1321
|
280 }
|
pankso@1200
|
281 .box-dl a { font-weight: bold; text-decoration: none; }
|
pankso@1200
|
282 .dlbutton { padding-left: 38px; }
|
pankso@1200
|
283 pre, .box, .box-dl, .box-up, .box-share, .box-rpi {
|
pankso@1200
|
284 background-color: #efefef;
|
pankso@1200
|
285 border: 1px solid #ddd;
|
pankso@1200
|
286 }
|
al@1019
|
287
|
pankso@768
|
288 .searchbox {
|
pankso@768
|
289 margin: 20px 80px;
|
pankso@768
|
290 padding: 12px;
|
pankso@741
|
291 background: #f8f8f8;
|
pankso@768
|
292 text-align: center;
|
pankso@768
|
293 border: 1px solid #ddd;
|
pankso@741
|
294 }
|
pankso@768
|
295
|
pankso@796
|
296 /* Activity Box */
|
pankso@796
|
297
|
pankso@796
|
298 .activity {
|
pankso@796
|
299 margin: 0 0 20px;
|
pankso@945
|
300 background: #efefef;
|
pankso@807
|
301 padding: 5px 2px 0;
|
pankso@796
|
302 border: 1px solid #ddd;
|
pankso@796
|
303 }
|
pankso@807
|
304 .activity div { padding: 5px 10px; background: #fff; margin-top: 5px; }
|
pankso@796
|
305 .activity p { margin: 0; padding: 5px 10px; font-weight: bold; }
|
pankso@796
|
306 .activity a { text-decoration: none; }
|
pankso@1241
|
307 .activity ul { margin: 4px 0; padding: 0 4px; line-height: 150%; }
|
pankso@1241
|
308 .activity li { list-style-type: none; }
|
pankso@796
|
309 .activity_more { text-align: right; }
|
pankso@796
|
310 .activity_more a { font-weight: normal; color: #000; padding: 0 4px; }
|
pankso@796
|
311 .activity_more a:hover { text-decoration: underline; }
|
pankso@768
|
312
|
pankso@809
|
313 .activity span, .news span {
|
pankso@809
|
314 color: #666;
|
pankso@809
|
315 font-size: 11px;
|
pankso@809
|
316 font-weight: normal;
|
pankso@809
|
317 }
|
pankso@809
|
318
|
pankso@768
|
319 /* Button */
|
pankso@768
|
320
|
pankso@1175
|
321 #block_info .button a {
|
pankso@1175
|
322 background-color: #666;
|
pankso@768
|
323 color: #ffffff;
|
pankso@1175
|
324 margin: 0px 4px;
|
pankso@768
|
325 padding: 6px 10px;
|
pankso@768
|
326 font-size: 12px;
|
pankso@768
|
327 text-decoration: none;
|
pankso@768
|
328 font-weight: bold;
|
pankso@741
|
329 }
|
pankso@1175
|
330 #block_info .button a:hover, input[type=submit]:hover {
|
pankso@1175
|
331 background-color: #444;
|
pankso@768
|
332 color: #ffffff;
|
pankso@741
|
333 }
|
pankso@768
|
334
|
pankso@768
|
335 /* Round corner */
|
pankso@768
|
336
|
pankso@1200
|
337 #block_nav, pre, .box, .box-dl, .box-up, .searchbox, .button a,
|
pankso@1200
|
338 #twitter, .activity, .activity div, #sponsor, nav a, .dlbutton {
|
pankso@768
|
339 -moz-border-radius: 4px;
|
pankso@768
|
340 -webkit-border-radius: 4px;
|
pankso@768
|
341 border-radius: 4px;
|
pankso@741
|
342 }
|
pankso@768
|
343
|
pankso@768
|
344 /* Form */
|
pankso@768
|
345
|
pankso@715
|
346 input[type=submit] {
|
pankso@1175
|
347 border: 1px solid #666;
|
pankso@1175
|
348 background-color: #666;
|
pankso@715
|
349 color: white;
|
pankso@715
|
350 font-weight: bold;
|
pankso@715
|
351 cursor: pointer;
|
pankso@768
|
352 padding: 4px 10px;
|
pankso@715
|
353 font-size: 14px;
|
pankso@734
|
354 margin-left: -5px;
|
pankso@768
|
355 -webkit-border-top-right-radius: 4px;
|
pankso@768
|
356 -webkit-border-bottom-right-radius: 4px;
|
pankso@768
|
357 -moz-border-radius-topright: 4px;
|
pankso@768
|
358 -moz-border-radius-bottomright: 4px;
|
pankso@768
|
359 border-top-right-radius: 4px;
|
pankso@768
|
360 border-bottom-right-radius: 4px;
|
pankso@715
|
361 }
|
pankso@768
|
362
|
pankso@1175
|
363 input[type=submit]:hover { background-color: #444; }
|
pankso@768
|
364
|
pankso@715
|
365 input[type=text] {
|
pankso@715
|
366 border: 1px solid #333333;
|
pankso@768
|
367 padding: 4px;
|
pankso@768
|
368 height: 17px;
|
pankso@737
|
369 width: 100%;
|
pankso@768
|
370 -webkit-border-top-left-radius: 4px;
|
pankso@768
|
371 -webkit-border-bottom-left-radius: 4px;
|
pankso@768
|
372 -moz-border-radius-topleft: 4px;
|
pankso@768
|
373 -moz-border-radius-bottomleft: 4px;
|
pankso@768
|
374 border-top-left-radius: 4px;
|
pankso@768
|
375 border-bottom-left-radius: 4px;
|
pankso@715
|
376 }
|
pankso@715
|
377
|
pankso@710
|
378 /* Footer */
|
pankso@710
|
379
|
pankso@710
|
380 #footer {
|
pankso@768
|
381 background: #f1f1f1;
|
pankso@768
|
382 text-align: center;
|
pankso@768
|
383 border-top: 1px solid #ddd;
|
pankso@768
|
384 padding: 40px;
|
pankso@768
|
385 color: #666;
|
pankso@814
|
386 clear: both;
|
pankso@814
|
387 margin-bottom: -2%;
|
pankso@710
|
388 }
|
pankso@768
|
389
|
pankso@768
|
390 #footer a { color: #666; padding: 0 2px; }
|
pankso@741
|
391
|
pankso@741
|
392 .year:after {
|
pascal@1243
|
393 /* content: "2007-2015"; */
|
pankso@1323
|
394 content: "2018";
|
pankso@710
|
395 }
|
al@1019
|
396
|
al@1019
|
397 p, li {
|
al@1019
|
398 -moz-hyphens: auto;
|
al@1019
|
399 -webkit-hyphens: auto;
|
al@1019
|
400 hyphens: auto;
|
al@1019
|
401 }
|
al@1019
|
402
|
al@1019
|
403 /* --- SEARCH --- */
|
al@1019
|
404
|
al@1019
|
405 input.gsc-search-button {
|
al@1019
|
406 border: 1px solid #b64b22;
|
al@1019
|
407 background-color: #b64b22;
|
al@1019
|
408 color: white;
|
al@1019
|
409 font-weight: bold;
|
al@1019
|
410 cursor: pointer;
|
al@1019
|
411 padding: 2px 10px;
|
al@1019
|
412 font-size: 14px;
|
al@1019
|
413 margin-left: -4px;
|
al@1019
|
414 -webkit-border-top-right-radius: 4px;
|
al@1019
|
415 -webkit-border-bottom-right-radius: 4px;
|
al@1019
|
416 -moz-border-radius-topright: 4px;
|
al@1019
|
417 -moz-border-radius-bottomright: 4px;
|
al@1019
|
418 border-top-right-radius: 4px;
|
al@1019
|
419 border-bottom-right-radius: 4px;
|
al@1019
|
420 }
|
al@1019
|
421
|
al@1019
|
422 .gs-webResult.gs-result a.gs-title:link,
|
al@1019
|
423 .gs-webResult.gs-result a.gs-title:link b {
|
al@1019
|
424 color: #103a5e;
|
al@1019
|
425 }
|
al@1019
|
426
|
al@1023
|
427 #cse {
|
al@1023
|
428 margin-bottom: 120px;
|
al@1023
|
429 width:100%;
|
al@1023
|
430 }
|
al@1019
|
431
|
al@1019
|
432
|
al@1019
|
433 /* --- GALLERY --- */
|
al@1019
|
434
|
al@1019
|
435 #gallery div {
|
al@1019
|
436 width: 496px;
|
al@1019
|
437 border: none;
|
al@1019
|
438 border-radius: 12px;
|
al@1019
|
439 padding-bottom: 8px;
|
al@1019
|
440 margin: 12px auto;
|
pascal@1255
|
441 -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
|
al@1019
|
442 -moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
|
al@1019
|
443 box-shadow: 0 0 6px rgba(0,0,0,0.5);
|
al@1019
|
444 }
|
al@1019
|
445 #gallery img {
|
al@1019
|
446 width: 480px;
|
al@1019
|
447 margin: 8px;
|
al@1019
|
448 }
|