wok view slitaz-mercurial-style/stuff/templates/static/style-slitaz.css @ rev 7937
slitaz-mercurial-style: Start moving to new CSS and layout
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Tue Jan 11 21:53:28 2011 +0100 (2011-01-11) |
| parents | c1315b822a63 |
| children | 5e5a67e17e5a |
line source
1 html {
2 min-height: 102%;
3 }
5 body {
6 background: #ffffff;
7 color: black;
8 font: 13px sans-serif, vernada, arial;
9 margin: 0;
10 border-top: 34px solid #f1f1f1;
11 }
13 /* Accessibility */
15 #access {
16 position: absolute;
17 top: 4px;
18 right: 0px;
19 text-align: right;
20 width: auto;
21 margin: 0;
22 padding: 4px 4px 4px 20px;
23 font-size: 11px;
24 font-weight: bold;
25 }
27 #access a {
28 background: transparent;
29 color: #0F314E;
30 text-decoration: none;
31 }
33 #access a:hover {
34 background: inherit;
35 color: #b64b22;
36 }
38 #access img {
39 vertical-align: middle;
40 }
42 /* Header and title */
44 #header {
45 background: #351a0a url(header-img.png) no-repeat top right;
46 color: black;
47 width: 100%;
48 height: 42px;
49 border-top: 1px solid black;
50 border-bottom: 1px solid #999;
51 margin-bottom: 33px;
52 }
54 #titre {
55 position: absolute;
56 font-size: 14px;
57 font-weight: bolder ;
58 left: 180px;
59 top: 4px;
60 }
62 #logo {
63 position: absolute;
64 float: left;
65 left: 16px;
66 top: -10px;
67 width: 200px;
68 height: 74px;
69 }
71 /* Side bar Navigation */
73 #nav {
74 position: absolute;
75 top: 102px;
76 right: 80px;
77 color: #555555;
78 float: right;
79 width: 250px;
80 line-height: 1.5em;
81 text-align: left;
82 font-size: 12px;
83 }
85 #nav .nav_box ul {
86 list-style-type: none;
87 margin: 0;
88 padding: 10px 24px 10px 0px;
89 background-color: inherit;
90 }
92 #nav li {
93 display: inline;
94 }
96 #nav h4 {
97 font-size: 120%;
98 color: #666666;
99 font-weight: bold;
100 margin: 0;
101 padding: 0 0 1px 0;
102 border-bottom: 1px solid #cecece;
103 }
105 #nav a {
106 color: #0F314E;
107 background: inherit;
108 display: block;
109 text-decoration: none;
110 font-weight: bold;
111 }
113 #nav a:hover {
114 color: #b64b22;
115 text-decoration: none;
116 display: block;
117 }
119 #nav ul {
120 -moz-border-radius: 8px;
121 -webkit-border-radius: 8px;
122 border-radius: 8px;
123 list-style-type: none;
124 margin: 10px 0;
125 padding: 10px 24px 10px 24px;
126 background-color: #eaeaea;
127 }
129 .nav_box {
130 margin: 10px 0;
131 padding: 10px 24px 10px 24px;
132 background-color: #eaeaea;
133 text-align: justify;
134 -moz-border-radius: 8px;
135 -webkit-border-radius: 8px;
136 border-radius: 8px;
137 -moz-box-shadow: 0 1px 3px #666;
138 -webkit-box-shadow: 0 1px 3px #666;
139 box-shadow: 0 1px 3px #666;
140 /* CSS3 transition */
141 -webkit-transition-property: background-color;
142 -webkit-transition-duration: 2s;
143 -moz-transition-property: background-color;
144 -moz-transition-duration: 2s;
145 transition-property: background-color;
146 transition-duration: 2s;
147 }
149 .nav_box:hover { background-color: #f8f8f8; }
151 #nav .nav_box p {
152 line-height: 1.3em;
153 }
155 #nav .nav_box p a {
156 display: inline;
157 font-weight: normal;
158 text-decoration: underline;
159 }
161 #nav .nav_box p a:hover {
162 text-decoration: none;
163 color: blue;
164 background: inherit;
165 }
167 /* Page content */
169 #content {
170 background: white;
171 color: black;
172 text-align: justify;
173 height: auto;
174 margin: 6px 320px 0px 0px;
175 padding: 0px 40px 60px 80px;
176 }
178 #content-full {
179 background: white;
180 color: black;
181 text-align: justify;
182 height: auto;
183 margin: 0;
184 padding: 0px 80px 40px 80px;
185 }
187 #content li, #content-full li {
188 line-height: 1.5em;
189 text-align: left;
190 }
192 #news li {
193 list-style-type: square;
194 border-bottom: 1px dotted #BEBEBE;
195 margin-left: -25px;
196 padding: 4px 0px 4px 0px;
197 }
199 #news a {
200 text-decoration: none;
201 }
203 #gallery {
204 text-align: center;
205 }
207 /* Box and block. */
209 .infobox {
210 margin: 20px 60px;
211 padding: 12px;
212 background: #f8f8f8;
213 }
215 .infobox img { vertical-align: middle; }
216 /* .infobox:hover { background-color: #f2b21d; } */
217 .infobox:hover { background-color: #FBFBFB; }
219 .block {
220 /*padding-bottom: 35%;*/
221 color: black;
222 min-height: 200px;
223 margin-bottom: 40px;
224 }
226 .block ul {
227 list-style-type: none;
228 margin: 0;
229 padding: 0 20px;
230 }
232 .block_left {
233 width: 46%;
234 float: left;
235 background-color: #eaeaea;
236 margin: 4px 2px;
237 padding: 0 10px 10px 10px;
238 }
240 .block_right {
241 width: 46%;
242 float: right;
243 background-color: #eaeaea;
244 margin: 4px 2px;
245 padding: 0 10px 10px 10px;
246 }
248 #block_top {
249 color: black;
250 background-color: #eaeaea;
251 min-height: 180px;
252 margin-bottom: 40px;
253 margin-right: 340px;
254 padding: 0 10px;
255 }
257 #block_nav {
258 width: 300px;
259 min-height: 180px;
260 float: right;
261 background-color: #eaeaea;
262 margin: 0;
263 padding: 0 10px;
264 }
266 .infobox, .block_left, .block_right, #block_top, #block_nav, #footer {
267 -moz-border-radius: 8px;
268 -webkit-border-radius: 8px;
269 border-radius: 8px;
270 -moz-box-shadow: 0 1px 3px #666;
271 -webkit-box-shadow: 0 1px 3px #666;
272 box-shadow: 0 1px 3px #666;
273 /* CSS3 transition */
274 -webkit-transition-property: background-color;
275 -webkit-transition-duration: 2s;
276 -moz-transition-property: background-color;
277 -moz-transition-duration: 2s;
278 transition-property: background-color;
279 transition-duration: 2s;
280 }
282 #block_nav {
283 font-weight: bold;
284 }
286 #block_nav a {
287 text-decoration: none;
288 }
290 #block_nav li a:hover {
291 color: #b64b22;
292 }
294 #block_nav ul {
295 margin: 0;
296 list-style-type: none;
297 }
299 #block_nav h3 {
300 font-size: 110%;
301 }
303 .block_left:hover, .block_right:hover, #block_top:hover,
304 #block_nav:hover, #footer:hover {
305 background-color: #f8f8f8;
306 }
308 .right_box {
309 width: 50%;
310 float: right;
311 }
313 .floor {
314 color: #999999;
315 font-size: 20px;
316 -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
317 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
318 -o-transform: rotate(-45deg) skew(15deg, 15deg);
319 -ms-transform: rotate(-45deg) skew(15deg, 15deg);
320 transform: rotate(-45deg) skew(15deg, 15deg);
321 }
323 /* Button */
325 .button { margin-left: 20px; }
327 .button a {
328 background-color: #b64b22;
329 color: #ffffff;
330 margin-right: 6px;
331 padding: 6px 10px;
332 font-size: 14px;
333 -moz-border-radius: 4px;
334 -webkit-border-radius: 4px;
335 border-radius: 4px;
336 -moz-box-shadow: 0 1px 3px #666;
337 -webkit-box-shadow: 0 1px 3px #666;
338 box-shadow: 0 1px 3px #666;
339 }
341 .button a:hover, input[type=submit]:hover {
342 background-color: #a3431f;
343 color: #ffffff;
344 }
346 input[type=submit] {
347 border: 1px solid #b64b22;
348 background-color: #b64b22;
349 color: white;
350 font-weight: bold;
351 cursor: pointer;
352 padding: 2px 10px;
353 font-size: 14px;
354 -moz-border-radius: 2px;
355 -webkit-border-radius: 2px;
356 border-radius: 2px;
357 -moz-box-shadow: 0 0 5px #666;
358 -webkit-box-shadow: 0 0 5px#666;
359 box-shadow: 0 0 5px #666;
360 }
362 input[type=text] {
363 border: 1px solid #333333;
364 padding: 3px;
365 width: 100%;
366 max-width: 500px;
367 }
369 /* Clouds */
371 #cloud {
372 padding: 10px 0px;
373 line-height: 3em;
374 text-align: center;
375 }
376 #cloud a { padding: 0 2px; color: #956411; }
377 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
378 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
379 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
380 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
381 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
382 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
383 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
384 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
385 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
386 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
388 /* Slideshow. */
390 #slideshow
391 {
392 overflow: hidden;
393 margin: 10px auto 10px;
394 position: relative;
395 width: 260px;
396 height: 163px;
397 }
399 #slideshow img
400 {
401 border: 0;
402 width: 260px;
403 height: 163px;
404 }
406 #twitter {
407 margin-top: 20px;
408 -moz-border-radius: 8px;
409 -webkit-border-radius: 8px;
410 border-radius: 8px;
411 -moz-box-shadow: 0 1px 3px #666;
412 -webkit-box-shadow: 0 1px 3px #666;
413 box-shadow: 0 1px 3px #666;
414 }
416 /* HTML styles */
418 h1 {
419 color: #444444;
420 background: transparent;
421 text-align: left;
422 margin: 0px 0px 4px 0px;
423 font-size: 150%;
424 font-weight: bold;
425 padding: 5px 0 0 10px;
426 }
428 h2 {
429 color: #b64b22;
430 padding: 0;
431 margin: 20px 0 0 0;
432 font-size: 130%;
433 font-weight: bold;
434 }
436 h3 {
437 font-weight: bold;
438 color: #666666;
439 background: transparent;
440 }
442 h3 img {
443 vertical-align: middle;
444 width: 20px;
445 height: 20px;
446 padding-right: 4px;
447 }
449 a {
450 text-decoration: underline;
451 color: #103A5E;
452 background: inherit;
453 }
455 a:hover {
456 text-decoration: none;
457 color: blue;
458 background: inherit;
459 }
461 code {
462 font-size: 12px;
463 color: #669900;
464 background: inherit;
465 }
467 tt {
468 color: #15EE15;
469 background: inherit;
470 }
472 img {
473 border: 0pt none;
474 }
476 fieldset {
477 background: #E2ECf6;
478 color: black;
479 margin-top: 25px;
480 border: 1px solid black;
481 }
483 legend {
484 border: 1px solid black;
485 color: #6c0023;
486 background: #eaeaea;
487 font-weight: bold;
488 }
490 pre {
491 padding: 5px;
492 color: black;
493 background: #E1E0B0;
494 }
496 pre.script {
497 padding: 10px;
498 color: black;
499 background: #E8E8E8;
500 border: 1px inset #606060;
501 }
503 textarea {
504 background: #E5E5E5;
505 margin-top: 12px;
506 }
508 /* Packages pages */
510 .pkg_nav {
511 border-top: 1px solid black;
512 margin-top: 10px;
513 padding-top: 10px;
514 }
516 pre.package {
517 padding: 0px;
518 color: black;
519 background: white;
520 }
522 p.get {
523 text-align: center;
524 padding: 10px;
525 color: black;
526 background: #F3F3F3;
527 border: 1px solid #DEDEDE;
528 border-radius: 4px;
529 -moz-border-radius: 4px;
530 -webkit-border-radius: 4px;
531 }
533 p.get a {
534 font-weight: bold;
535 text-decoration: none;
536 }
538 .pkgs-search {
539 text-align: center;
540 padding: 40px 20px 80px 20px;
541 }
543 .year:after {
544 /* content: "2007-2011"; */
545 content: "2011";
546 }
548 /* Footer */
550 #footer {
551 margin: 0px 80px 80px 80px;
552 padding: 10px;
553 background: #eaeaea;
554 color: #666666;
555 height: 180px;
556 clear: both;
557 border-radius: 8px;
558 -moz-border-radius: 8px;
559 -webkit-border-radius: 8px;
560 -moz-box-shadow: 0 1px 3px #666;
561 -webkit-box-shadow: 0 1px 3px #666;
562 box-shadow: 0 1px 3px #666;
563 }
564 #footer a {
565 background: inherit;
566 color: #666666;
567 }
568 #footer a:hover {
569 background: inherit;
570 color: #333333;
571 }
572 #footer ul {
573 list-style-type: none;
574 }
575 #footer li {
576 padding: 2px;
577 }
578 #footer h4 {
579 margin: 0 20px;
580 font-size: 125%;
581 }
583 .container {
584 margin: 6px 280px 0px 0px;
585 padding: 0px 40px 60px 40px;
586 }
588 .main {
589 background: white;
590 }
592 #.main {
593 width: 100%;
594 }
596 .overflow {
597 width: 100%;
598 overflow: auto;
599 }
601 .search {
602 text-align: center;
603 }
605 form.search div#hint {
606 display: none;
607 position: absolute;
608 top: 0px;
609 right: 280px;
610 width: 200px;
611 padding: 5px;
612 background: #ffc;
613 font-size: 80%;
614 border: 1px solid yellow;
615 -moz-border-radius: 5px; /* this works only in camino/firefox */
616 -webkit-border-radius: 5px; /* this is just for Safari */
617 }
619 form.search:hover div#hint { display: block; }
621 a { text-decoration:none; }
622 .age { white-space:nowrap; }
623 .date { white-space:nowrap; }
624 .indexlinks { white-space:nowrap; }
625 .parity0 { background-color: #f0f0f0; }
626 .parity1 { background-color: white; }
627 .plusline { color: green; }
628 .minusline { color: #dc143c; } /* crimson */
629 .atline { color: purple; }
631 .navigate {
632 text-align: right;
633 font-size: 80%;
634 margin: 1em 0;
635 }
637 .tag {
638 color: #999;
639 font-size: 70%;
640 font-weight: normal;
641 margin-left: .5em;
642 vertical-align: baseline;
643 }
645 .branchhead {
646 color: #000;
647 font-size: 80%;
648 font-weight: normal;
649 margin-left: .5em;
650 vertical-align: baseline;
651 }
653 ul#graphnodes .branchhead {
654 font-size: 75%;
655 }
657 .branchname {
658 color: #000;
659 font-size: 60%;
660 font-weight: normal;
661 margin-left: .5em;
662 vertical-align: baseline;
663 }
665 h3 .branchname {
666 font-size: 80%;
667 }
669 /* Common */
670 pre { margin: 0; }
672 h2 a { color: #b64b22; }
674 /* log and tags tables */
675 .bigtable {
676 border-bottom: 1px solid #999;
677 border-collapse: collapse;
678 font-size: 90%;
679 width: 100%;
680 font-weight: normal;
681 text-align: left;
682 }
684 .bigtable td {
685 vertical-align: top;
686 }
688 .bigtable th {
689 padding: 1px 4px;
690 border-bottom: 1px solid #999;
691 }
692 .bigtable tr { border: none; }
693 .bigtable .age { width: 6em; }
694 .bigtable .author { width: 12em; }
695 .bigtable .description { }
696 .bigtable .node { width: 5em; font-family: monospace;}
697 .bigtable .permissions { width: 8em; text-align: left;}
698 .bigtable .size { width: 5em; text-align: right; }
699 .bigtable .annotate { text-align: right; }
700 .bigtable td.annotate { font-size: smaller; }
701 .bigtable td.source { font-size: inherit; }
703 .source, .sourcefirst, .sourcelast {
704 font-family: monospace;
705 white-space: pre;
706 padding: 1px 4px;
707 font-size: 90%;
708 }
709 .sourcefirst { border-bottom: 1px solid #999; font-weight: bold; }
710 .sourcelast { border-top: 1px solid #999; }
711 .source a { color: #999; font-size: smaller; font-family: monospace;}
712 .bottomline { border-bottom: 1px solid #999; }
714 .fileline { font-family: monospace; }
715 .fileline img { border: 0; }
717 .tagEntry .closed { color: #99f; }
719 /* Changeset entry */
720 #changesetEntry {
721 border-collapse: collapse;
722 font-size: 90%;
723 width: 100%;
724 margin-bottom: 1em;
725 }
727 #changesetEntry th {
728 padding: 1px 4px;
729 width: 4em;
730 text-align: right;
731 font-weight: normal;
732 color: #999;
733 margin-right: .5em;
734 vertical-align: top;
735 }
737 div.description {
738 border-left: 2px solid #999;
739 margin: 1em 0 1em 0;
740 padding: .3em;
741 }
743 /* Graph */
744 div#wrapper {
745 position: relative;
746 border-top: 1px solid black;
747 border-bottom: 1px solid black;
748 margin: 0;
749 padding: 0;
750 }
752 canvas {
753 position: absolute;
754 z-index: 5;
755 top: -0.7em;
756 margin: 0;
757 }
759 ul#graphnodes {
760 position: absolute;
761 z-index: 10;
762 top: -1.0em;
763 list-style: none inside none;
764 padding: 0;
765 }
767 ul#nodebgs {
768 list-style: none inside none;
769 padding: 0;
770 margin: 0;
771 top: -0.7em;
772 }
774 ul#graphnodes li, ul#nodebgs li {
775 height: 39px;
776 }
778 ul#graphnodes li .info {
779 display: block;
780 font-size: 70%;
781 position: relative;
782 top: -3px;
783 }