slitaz-forge view bugs/templates/slitaz/html/style.css @ rev 357

2013
author Pascal Bellard <pascal.bellard@slitaz.org>
date Tue Mar 26 09:07:46 2013 +0100 (2013-03-26)
parents 38815f7d58ac
children 433472bb831d
line source
1 /*
2 CSS style for SliTaz Network - (C) 2012 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; margin: 2px 0;}
22 h3 { color: #666; font-size: 140%; }
23 h4 { color: #888; font-size: 120%; }
24
25 /* Header */
26
27 #header {
28 height: 40px;
29 background: #351a0a;
30 }
31
32 #header h1 {
33 margin: 0;
34 padding: 8px 0 0 42px;
35 width: 250px;
36 }
37
38 #header h1 a {
39 color: white;
40 text-decoration: none;
41 font-size: 20px;
42 font-style: italic;
43 }
44
45 #header h1 a:hover, #network a:hover {
46 color: #d66018;
47 }
48
49 /* Logo */
50
51 #logo {
52 background: url(http://tank.slitaz.org/images/logo.png) no-repeat left;
53 position: absolute;
54 float: left;
55 left: 0px;
56 top: 0px;
57 width: 40px;
58 height: 40px;
59 }
60
61 /* SliTaz Network */
62
63 #network {
64 float: right;
65 padding: 10px 5px 0;
66 font-size: 12px;
67 }
68
69 #network a { padding: 0 6px; }
70
71 /* Block */
72
73 #block {
74 min-height: 104px;
75 background: #d66018;
76 padding: 26px 10% 0px;
77 text-align: center;
78 color: #333;
79 border-bottom: 1px solid #f5f5f5;
80 }
81
82 #block_info {
83 text-align: justify;
84 width: 48%;
85 padding: 10px 10px 0 0;
86 }
87
88 #block a, #network a {
89 color: #fff;
90 font-weight: bold;
91 text-decoration: none;
92 }
93
94 #block h4 {
95 color: #351a0a;
96 margin: 0px;
97 font-weight: bold;
98 font-size: 110%;
99 }
100
101 #block_info p { margin: 6px 0; padding: 0 12px 0 0; }
102 #block_info a { font-weight: normal; }
103 #block ul { list-style-type: square; }
104 #block a:hover { color: #351a0a; }
105
106 /* Navigation */
107
108 #block_nav {
109 background: #cc5b17;
110 padding: 10px 10px 40px;
111 text-align: justify;
112 width: 48%;
113 float: right;
114 }
115
116 #block_nav ul {
117 list-style-type: none;
118 margin: 6px 0;
119 padding: 0;
120 }
121
122 #block_nav h4 img {
123 margin: 0 4px 0 0;
124 padding: 0;
125 }
126
127 #searchbox input[type=submit] {
128 padding: 4px;
129 margin-left: -5px;
130 background-color: #f1f1f1;
131 border: 1px solid #ddd;
132 cursor: pointer;
133 color: #000;
134 font-weight: bold;
135 border-top-right-radius: 4px;
136 border-bottom-right-radius: 4px;
137 border-top-left-radius: 0px;
138 border-bottom-left-radius: 0px;
139 }
140
141 input#search-text {
142 border: 1px solid #ddd;
143 padding: 4px;
144 height: 17px;
145 margin: 0;
146 width: 200px;
147 border-top-left-radius: 4px;
148 border-bottom-left-radius: 4px;
149 }
150
151 input[type=submit] {
152 padding: 2px;
153 margin: 2px 0;
154 background-color: #f1f1f1;
155 border: 1px solid #ddd;
156 cursor: pointer;
157 color: #000;
158 }
159
160 input[type=submit]:hover, #searchbox input[type=submit]:hover {
161 background-color: #ddd;
162 border: 1px solid #999;
163 }
164
165 input[type=text] { height: 18px; margin: 4px 0; }
166
167
168 /* Round corner */
169
170 input[type=submit], p.ok-message, p.error-message, table.form,
171 table.messages td {
172 -moz-border-radius: 4px;
173 -webkit-border-radius: 4px;
174 border-radius: 4px;
175 }
176
177 /* Footer */
178
179 #footer {
180 background: #f1f1f1;
181 text-align: center;
182 border-top: 1px solid #ddd;
183 padding: 40px;
184 color: #666;
185 clear: both;
186 margin-top: 160px;
187 margin-bottom: -2%;
188 }
189
190 #footer a { color: #666; padding: 0 2px; }
191
192 .year:after {
193 /* content: "2007-2012"; */
194 content: "2013";
195 }
196
197 /* Modified Roundup style */
198
199 #searchbox {
200 float: right;
201 }
202
203 td.sidebar {
204 white-space: nowrap;
205 position: absolute;
206 right: 10px;
207 top: 230px;
208 border-left: 1px solid #ddd;
209 padding: 0 10px;
210 }
211
212 td.sidebar a {
213 text-decoration: none;
214 }
215
216 td.page-header-left {
217 padding: 5px;
218 }
219
220 td.page-header-top {
221 padding: 10px;
222 position: absolute;
223 left: 20px;
224 right: 20px;
225 width: auto;
226 }
227
228 td.content {
229 padding: 30px 220px 20px 30px;
230 vertical-align: top;
231 width: 100%;
232 }
233
234 p.ok-message { color: #000; }
235 p.error-message { color: red; }
236 p.ok-message, p.error-message {
237 background-color: #f8f8f8;
238 padding: 5px;
239 font-weight: bold;
240
241 position: absolute;
242 right: 10%;
243 top: 70px;
244 min-width: 220px;
245 }
246
247 td.sidebar p.classblock {
248 padding: 12px 5px 0;
249 margin: 0;
250 }
251
252 td.sidebar p.classblock:first-child { padding: 0px 5px 0; }
253
254 td.sidebar p.userblock {
255 padding: 12px 5px 0;
256 margin: 0;
257 }
258
259 table.form {
260 margin: 0 0 10px;
261 padding: 10px;
262 border-spacing: 0;
263 border-collapse: separate;
264 background-color: #f8f8f8;
265 border: 1px solid #ddd;
266 }
267
268 .index-controls {
269 margin: 20px 0;
270 }
271
272 table.body {
273 border: 0;
274 padding: 0;
275 border-spacing: 0;
276 border-collapse: separate;
277 }
278
279 /* don't display the sidebar when printing */
280 @media print {
281 td.page-header-left {
282 display: none;
283 }
284 td.sidebar {
285 display: none;
286 }
287 .index-controls {
288 display: none;
289 }
290 #searchbox {
291 display: none;
292 }
293 }
294
295 form {
296 margin: 0;
297 }
298
299 textarea {
300 font-family: monospace;
301 }
302
303 .form-small {
304 padding: 0;
305 font-size: 75%;
306 }
307
308 td.date, th.date {
309 white-space: nowrap;
310 width: 130px;
311 }
312
313 p.error-message a[href] {
314 color: white;
315 text-decoration: underline;
316 }
317
318 /* style for search forms */
319 ul.search-checkboxes {
320 display: inline;
321 padding: 0;
322 list-style: none;
323 }
324 ul.search-checkboxes > li {
325 display: inline;
326 padding-right: .5em;
327 }
328
329 /* style for forms */
330
331 table.form th {
332 color: #555;
333 text-align: right;
334 vertical-align: top;
335 font-weight: normal;
336 white-space: nowrap;
337 padding: 0 4px 0 0;
338 }
339
340 table.form th.header {
341 font-weight: bold;
342 background-color: #f1f1f1;
343 text-align: left;
344 }
345
346 table.form th.required {
347 font-weight: bold;
348 color: #b20000;
349 }
350
351 table.form td {
352 color: #000;
353 empty-cells: show;
354 vertical-align: top;
355 }
356
357 table.form td.optional {
358 font-weight: bold;
359 font-style: italic;
360 }
361
362 table.form td.html {
363 color: #000;
364 }
365
366 /* style for lists */
367 table.list {
368 border-spacing: 0 4px;
369 border-collapse: separate;
370 width: 100%;
371 }
372
373 table.list th {
374 padding: 0px;
375 color: #888;
376 background-color: #fff;
377 vertical-align: top;
378 empty-cells: show;
379 text-align: left;
380 }
381 table.list th a[href]:hover { color: #333 }
382 table.list th a[href]:link { color: #333 }
383 table.list th a[href] { color: #333 }
384 table.list th.group {
385 background-color: #f8f8f8;
386 color: #666;
387 text-align: left;
388 padding: 4px;
389 font-size: 120%;
390 border: 1px solid #ddd;
391 border-radius: 4px;
392 }
393 table.list th.group:first-letter {
394 text-transform: uppercase;
395 }
396
397 table.list td {
398 padding: 2px;
399 color: #000;
400 vertical-align: top;
401 empty-cells: show;
402 /* border-bottom: 1px solid #ddd; */
403 }
404
405 table.list tr.navigation th {
406 width: 33%;
407 border-style: hidden;
408 text-align: center;
409 }
410 table.list tr.navigation td {
411 border: none
412 }
413 table.list tr.navigation th:first-child {
414 text-align: left;
415 }
416 table.list tr.navigation th:last-child {
417 text-align: right;
418 }
419
420 /* style for message displays */
421 table.messages {
422 border-spacing: 0;
423 border-collapse: separate;
424 width: 100%;
425 }
426
427 table.messages th.header {
428 padding: 20px 0 4px;
429 font-weight: bold;
430 background-color: white;
431 color: #666;
432 font-size: 140%;
433 }
434
435 table.messages th {
436 font-weight: bold;
437 color: black;
438 text-align: left;
439 padding: 10px 0 2px;
440 }
441
442 table.messages th a {
443 text-decoration: none;
444 }
445
446 table.messages td {
447 font-family: monospace;
448 background-color: #f8f8f8;
449 border: 1px solid #ddd;
450 color: black;
451 empty-cells: show;
452 vertical-align: top;
453 padding: 4px 10px 5px 10px;
454 }
455
456 /* style for file displays */
457 table.files {
458 border-spacing: 0;
459 border-collapse: separate;
460 width: 100%;
461 }
462
463 table.files th.header{
464 padding: 10px 0;
465 border-bottom: 0px solid gray;
466 font-weight: bold;
467 background-color: white;
468 color: #666;
469 font-size: 140%;
470 }
471
472 table.files th {
473 border-bottom: 1px solid #888;
474 font-weight: bold;
475 text-align: left;
476 padding: 10px 0 2px;
477 }
478
479 table.files td {
480 font-family: monospace;
481 empty-cells: show;
482 padding-top: 5px;
483 }
484
485 /* style for history displays */
486 table.history {
487 border-spacing: 0;
488 border-collapse: separate;
489 width: 100%;
490 margin: 0 0 40px;
491 }
492
493 table.history th.header {
494 padding: 20px 0 4px;
495 border-bottom: 1px solid #fff;
496 font-weight: bold;
497 background-color: white;
498 color: #666;
499 font-size: 140%;
500 }
501
502 table.history th {
503 border-bottom: 1px solid #666;
504 font-weight: bold;
505 text-align: left;
506 padding: 10px 0 2px;
507 }
508
509 table.history td {
510 vertical-align: top;
511 empty-cells: show;
512 padding-top: 5px;
513 }
514
515
516 /* style for class list */
517 table.classlist {
518 border-spacing: 0;
519 border-collapse: separate;
520 width: 100%;
521 }
522
523 table.classlist th.header{
524 padding-top: 10px;
525 border-bottom: 1px solid gray;
526 font-weight: bold;
527 background-color: white;
528 color: #707040;
529 }
530
531 table.classlist th {
532 font-weight: bold;
533 text-align: left;
534 }
535
536
537 /* style for class help display */
538 table.classhelp { /* the table-layout: fixed; */
539 table-layout: fixed; /* compromises quality for speed */
540 overflow: hidden;
541 font-size: .9em;
542 padding-bottom: 3em;
543 }
544
545 table.classhelp th {
546 font-weight: normal;
547 text-align: left;
548 color: #444;
549 background-color: #efefef;
550 border-bottom: 1px solid #afafaf;
551 border-top: 1px solid #afafaf;
552 text-transform: uppercase;
553 vertical-align: middle;
554 line-height:1.5em;
555 }
556
557 table.classhelp td {
558 vertical-align: middle;
559 padding-right: .2em;
560 border-bottom: 1px solid #efefef;
561 text-align: left;
562 empty-cells: show;
563 white-space: nowrap;
564 vertical-align: middle;
565 }
566
567 table.classhelp tr:hover {
568 background-color: #eee;
569 }
570
571 label.classhelp-label {
572 cursor: pointer;
573 }
574
575 #classhelp-controls {
576 position: fixed;
577 display: block;
578 top: auto;
579 right: 0;
580 bottom: 0;
581 left: 0;
582 padding: .5em;
583 border-top: 2px solid #444;
584 background-color: #eee;
585 }
586
587 #classhelp-controls input.apply {
588 width: 7em;
589 font-weight: bold;
590 margin-right: 2em;
591 margin-left: 2em;
592 }
593
594 #classhelp-controls input.preview {
595 margin-right: 3em;
596 margin-left: 1em;
597 }
598
599 /* style for "other" displays */
600 table.otherinfo {
601 border-spacing: 0;
602 border-collapse: separate;
603 width: 100%;
604 }
605
606 table.otherinfo th.header{
607 padding-top: 10px;
608 border-bottom: 1px solid gray;
609 font-weight: bold;
610 background-color: white;
611 color: #707040;
612 }
613
614 table.otherinfo th {
615 border-bottom: 1px solid #afafaf;
616 font-weight: bold;
617 text-align: left;
618 }
619
620 .calendar_display {
621 text-align: center;
622 }
623
624 .calendar_display td {
625 padding: 1px 4px 1px 4px;
626 }
627
628 .calendar_display .today {
629 background-color: #afafaf;
630 }