slitaz-forge view mirror/root/static/slitaz.css @ rev 591

mirror/root/dir-generator.php: ISO-8859-1 -> UTF-8; white here already implemented link to the WebArchive (remove line breaks); remove unwanted letters from regexp. mirror/root/static/slitaz.css: white links on light-grey background -> brown links; searchbox with type="search" (it adds "clean" button on the right side when typing).
author Aleksej Bobylev <al.bobylev@gmail.com>
date Sat Jan 17 15:20:34 2015 +0200 (2015-01-17)
parents c1ac675db867
children d3a31a897d56
line source
1 /*
2 CSS style for SliTaz Network - (C) 2015 SliTaz GNU/Linux
3 */
4
5 html {
6 min-height: 102%;
7 }
8
9 body {
10 background: #ffffff;
11 color: black;
12 font: 13px sans-serif, vernada, arial;
13 margin: 0;
14 min-width: 780px;
15 height: 100%;
16 }
17
18 a { text-decoration: underline; color: #215090; }
19 a:hover { text-decoration: none; color: blue; }
20 img { border: 0pt none; vertical-align: middle; }
21 h2 { color: #444; }
22 h3 { color: #666; font-size: 140%; }
23 h4 { color: #888; font-size: 120%; }
24 pre {
25 background-color: #f8f8f8;
26 border: 1px solid #ddd;
27 padding: 10px;
28 }
29 table {
30 background-color: #f8f8f8;
31 border: 1px solid #ddd;
32 width: 100%;
33 margin: 0px 0px 20px 0px;
34 padding: 10px;
35 }
36
37 /* Header */
38
39 #header {
40 height: 40px;
41 background: #222;
42 color: #ffffff;
43 }
44
45 #header h1 {
46 margin: 0;
47 padding: 8px 0 0 42px;
48 width: 250px;
49 }
50
51 #header h1 a {
52 color: white;
53 text-decoration: none;
54 font-size: 20px;
55 font-style: italic;
56 }
57
58 #header h1 a:hover, #network a:hover {
59 color: #ccc;
60 }
61
62 /* Logo */
63
64 #logo {
65 background: url(logo.png) no-repeat left;
66 position: absolute;
67 float: left;
68 left: 0px;
69 top: 0px;
70 width: 40px;
71 height: 40px;
72 }
73
74 /* SliTaz Network */
75
76 #network {
77 float: right;
78 padding: 10px 5px 0;
79 font-size: 12px;
80 }
81
82 #network a { padding: 0 6px; }
83
84 /* Block */
85
86 #block {
87 min-height: 200px;
88 background: #ccc;
89 padding: 26px 10% 0px;
90 text-align: center;
91 color: #333;
92 border-bottom: 1px solid #f5f5f5;
93 }
94
95 #block_info {
96 text-align: justify;
97 width: 48%;
98 padding: 10px 10px 0 0;
99 }
100
101 #block a, #network a {
102 color: #fff;
103 font-weight: bold;
104 text-decoration: none;
105 }
106
107 #block h4 {
108 color: #222;
109 margin: 0px;
110 font-weight: bold;
111 font-size: 110%;
112 }
113
114 #block_info p { margin: 6px 0; padding: 0 12px 0 0; }
115 #block_info a { font-weight: normal; color: #B51; }
116 #block_info a:hover { color: #000; }
117
118 #block ul { list-style-type: square; }
119 #block a:hover { color: #afafaf; }
120
121 /* Navigation */
122
123 #block_nav {
124 background: #666;
125 padding: 10px 10px 40px;
126 text-align: justify;
127 width: 48%;
128 float: right;
129 }
130
131 #block_nav ul {
132 list-style-type: none;
133 margin: 6px 0;
134 padding: 0;
135 }
136
137 #block_nav h4 img {
138 margin: 0 4px 0 0;
139 padding: 0;
140 }
141
142 /* Languages */
143
144 #lang {
145 position: absolute;
146 right: 0;
147 padding: 6px;
148 font-size: 11px;
149 }
150
151 #lang a {
152 text-decoration: none;
153 padding: 0 2px;
154 }
155
156 #lang a:hover {
157 text-decoration: underline;
158 }
159
160 /* Content */
161
162 #content {
163 padding: 30px 80px;
164 text-align: justify;
165 }
166
167 .news li {
168 list-style-type: square;
169 border-bottom: 1px dotted #BEBEBE;
170 margin-left: -25px;
171 padding: 4px 0px 4px 0px;
172 }
173
174 .news a, .feed-grid a { text-decoration: none; }
175 .news p a { text-decoration: underline; }
176 .news p a:hover { text-decoration: none; }
177 #twitter { margin: 20px 0; }
178 #gallery { text-align: center; }
179
180 #sponsor {
181 font-size: 90%;
182 background-color: #fbfbfb;
183 border: 2px solid #ddd;
184 width: 200px;
185 height: 160px;
186 float: right;
187 text-align: center;
188 margin: 10px 0px 20px 20px;
189 }
190
191 #mirrors {
192 padding: 10px;
193 margin: 10px 0px 20px;
194 text-align: center;
195 background: #f1f1f1;
196 border: 2px solid #ddd;
197 }
198
199 /* Classes */
200
201 .right_box { width: 48%; float: right; }
202 .left_box { width: 48%; float: left; }
203
204 .box {
205 margin: 20px 60px;
206 padding: 12px;
207 background: #efefef;
208 border: 1px solid #ddd;
209 }
210
211 .searchbox {
212 margin: 20px 80px;
213 padding: 12px;
214 background: #f8f8f8;
215 text-align: center;
216 border: 1px solid #ddd;
217 }
218
219 /* Activity Box */
220
221 .activity {
222 margin: 0 0 20px;
223 background: #efefef;
224 padding: 5px 2px 0;
225 border: 1px solid #ddd;
226 }
227 .activity div { padding: 5px 10px; background: #fff; margin-top: 5px; }
228 .activity p { margin: 0; padding: 5px 10px; font-weight: bold; }
229 .activity a { text-decoration: none; }
230 .activity ul { list-style-type: none;
231 margin: 4px 0; padding: 0 4px; line-height: 150%; }
232 .activity_more { text-align: right; }
233 .activity_more a { font-weight: normal; color: #000; padding: 0 4px; }
234 .activity_more a:hover { text-decoration: underline; }
235
236 .activity span, .news span {
237 color: #666;
238 font-size: 11px;
239 font-weight: normal;
240 }
241
242 /* Button */
243
244 .button a {
245 background-color: #666;
246 color: #ffffff;
247 margin-right: 6px;
248 padding: 6px 10px;
249 font-size: 12px;
250 text-decoration: none;
251 font-weight: bold;
252 }
253 .button a:hover, input[type=submit]:hover {
254 background-color: #444;
255 color: #ffffff;
256 }
257
258 /* Round corner */
259
260 #block_nav, pre, .box, .searchbox, .button a, #twitter, .activity,
261 .activity div, #sponsor, #mirrors, table, input, textarea, select {
262 -moz-border-radius: 4px;
263 -webkit-border-radius: 4px;
264 border-radius: 4px;
265 }
266
267 /* Form */
268
269 form { display: inline; }
270 input[type="submit"], input[type="text"], input[type="search"], textarea, select {
271 color: #444444;
272 border: 1px solid #cccccc;
273 padding: 4px;
274 margin: 4px 0px;
275 font-size: 14px;
276 line-height: 1.2em;
277 background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
278 background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
279 -webkit-appearance: none;
280 -webkit-padding-end: 6px;
281 -webkit-padding-start: 6px;
282 }
283
284 input[type="text"], input[type="search"], textarea { background: #fefefe; border: 2px solid #ccc;
285 width: 460px; }
286 /*input[type="file"] { border: 2px solid #ddd; }*/
287 /*input[type="checkbox"] { background: #fefefe; }*/
288
289 /* Be compatible with old FF and Webkit version. */
290 input[type="submit"] {
291 -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
292 -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
293 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
294 }
295
296 input[type="submit"]:hover {
297 cursor: pointer;
298 color: black;
299 }
300
301 select {
302 background-image: url(images/down.png),
303 -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
304 background-position: center right;
305 background-repeat: no-repeat;
306 }
307
308 .searchbox input[type=submit] {
309 border: 1px solid #666;
310 background-color: #666;
311 color: white;
312 font-weight: bold;
313 cursor: pointer;
314 padding: 4px 10px;
315 font-size: 14px;
316 margin-left: -5px;
317 -webkit-border-top-right-radius: 4px;
318 -webkit-border-bottom-right-radius: 4px;
319 -moz-border-radius-topright: 4px;
320 -moz-border-radius-bottomright: 4px;
321 border-top-right-radius: 4px;
322 border-bottom-right-radius: 4px;
323 }
324
325 .searchbox input[type=submit]:hover { background-color: #444; }
326
327 .searchbox input[type=text], input[type=search] {
328 border: 1px solid #333333;
329 padding: 4px;
330 height: 17px;
331 width: 100%;
332 -webkit-border-top-left-radius: 4px;
333 -webkit-border-bottom-left-radius: 4px;
334 -moz-border-radius-topleft: 4px;
335 -moz-border-radius-bottomleft: 4px;
336 border-top-left-radius: 4px;
337 border-bottom-left-radius: 4px;
338 }
339
340 /* Footer */
341
342 #footer {
343 background: #f1f1f1;
344 text-align: center;
345 border-top: 1px solid #ddd;
346 padding: 40px;
347 color: #666;
348 clear: both;
349 margin-bottom: -2%;
350 }
351
352 #footer a { color: #666; padding: 0 2px; }
353
354 .year:after {
355 /* content: "2007-2015"; */
356 content: "2015";
357 }