slitaz-forge view doc/lib/tpl/slitaz-grey/design.css @ rev 424

doc: start to move to new style
author Christophe Lincoln <pankso@slitaz.org>
date Wed Jan 15 14:42:06 2014 +0100 (2014-01-15)
parents 0c2b437cde56
children 9718ed8566d7
line source
1 /**
2 * Design elements for default Template
3 *
4 * @author Andreas Gohr <andi@splitbrain.org>
5 * @author Anika Henke <henke@cosmocode.de>
6 */
8 /* -------------- general elements --------------- */
10 /* * { padding: 0; margin: 0; } */
12 /* SliTaz stuff */
13 html {
14 min-height: 102%;
15 }
17 body {
18 background: #ffffff;
19 color: black;
20 font: 13px sans-serif, vernada, arial;
21 margin: 0;
22 min-width: 780px;
23 }
25 /* Languges */
27 #lang {
28 position: absolute;
29 top: 40px;
30 right: 0px;
31 text-align: right;
32 width: auto;
33 margin: 0;
34 padding: 4px 4px 4px 20px;
35 font-size: 12px;
36 font-weight: bold;
37 }
39 #lang a {
40 text-decoration: none;
41 font-weight: bold
42 }
44 #lang a:hover, div.plugin_translation a:hover {
45 background: transparent;
46 color: #b64b22;
47 }
49 #lang img {
50 vertical-align: middle;
51 }
53 /* Header and title */
55 #header {
56 background: #222;
57 color: #fff;
58 width: 100%;
59 height: 40px;
60 }
62 #header h1 {
63 margin: 0;
64 padding: 8px 0 0 42px;
65 width: 250px;
66 }
68 #header h1 a {
69 color: white;
70 text-decoration: none;
71 font-size: 20px;
72 font-style: italic;
73 }
75 #header h1 a:hover, #network a:hover {
76 color: #afafaf;
77 }
79 /* Logo */
81 #logo {
82 background: url(images/logo.png) no-repeat left;
83 position: absolute;
84 float: left;
85 left: 0px;
86 top: 0px;
87 width: 40px;
88 height: 40px;
89 }
91 /* SliTaz Network */
93 #network {
94 float: right;
95 padding: 14px 5px 0;
96 font-size: 12px;
97 }
99 #network a { padding: 0 6px; color: #fff;
100 font-weight: bold;
101 text-decoration: none;}
102 #network img { vertical-align: middle; }
104 #block {
105 min-height: 100px;
106 background: #ccc;
107 padding: 20px 12% 0;
108 text-align: center;
109 color: #333;
110 border-bottom: 1px solid #afafaf;
111 }
113 /* Page content */
115 #content {
116 background: white;
117 color: black;
118 text-align: justify;
119 height: auto;
120 margin: 0;
121 padding: 40px 80px;
122 }
124 #content li, #content-full li {
125 line-height: 1.5em;
126 text-align: left;
127 }
129 /* Box and block. */
131 .tools {
132 width: 100%;
133 min-height: 30px;
134 background-color: #cc5b17;
135 padding: 8px 5px 1px 5px;
136 margin: 10px 0;
137 vertical-align: middle;
138 text-align: left;
139 }
141 .tools img, .tools form { vertical-align: middle; }
142 .tools span { font-size: 110%; }
143 div.dokuwiki .tools input.button {
144 color: #fff;
145 }
146 div.dokuwiki .tools input:hover.button {
147 color: #351a0a;
148 }
150 #footer, .tools {
151 -moz-border-radius: 4px;
152 -webkit-border-radius: 4px;
153 border-radius: 4px;
154 }
156 .right_box {
157 width: 50%;
158 float: right;
159 }
161 /* HTML styles */
163 h1, h1 a {
164 color: #444;
165 background: transparent;
166 text-align: left;
167 margin: 0;
168 font-size: 150%;
169 font-weight: bold;
170 padding: 0;
171 text-decoration: none !important;
172 }
174 h2, h2 a {
175 color: #666;
176 padding: 0;
177 margin: 20px 0 0 0;
178 font-size: 130%;
179 font-weight: bold;
180 text-decoration: none !important;
181 }
183 h3, .tools span {
184 font-weight: bold;
185 color: #666666;
186 background: transparent;
187 }
189 h3 img {
190 vertical-align: middle;
191 width: 20px;
192 height: 20px;
193 padding-right: 4px;
194 }
196 a {
197 text-decoration: underline;
198 color: #103A5E;
199 background: inherit;
200 }
202 a:hover {
203 text-decoration: none;
204 color: blue;
205 background: inherit;
206 }
208 code {
209 font-size: 12px;
210 color: #669900;
211 background: inherit;
212 }
214 tt {
215 color: #15EE15;
216 background: inherit;
217 }
219 img {
220 border: 0pt none;
221 }
223 pre {
224 padding: 5px;
225 color: black;
226 background: #E1E0B0;
227 }
229 pre.script {
230 padding: 10px;
231 color: black;
232 background: #E8E8E8;
233 border: 1px inset #606060;
234 }
236 textarea {
237 background: #E5E5E5;
238 margin-top: 12px;
239 }
241 .year:after {
242 /* content: "2007-2014"; */
243 content: "2014";
244 }
246 /* Footer */
248 #footer {
249 background: #f1f1f1;
250 text-align: center;
251 border-top: 1px solid #ddd;
252 padding: 40px;
253 color: #666;
254 clear: both;
255 margin-bottom: -2%;
256 }
257 #footer a {
258 background: inherit;
259 color: #666666;
260 }
261 #footer a:hover {
262 background: inherit;
263 color: #333333;
264 }
265 #footer ul {
266 list-style-type: none;
267 }
268 #footer li {
269 padding: 2px;
270 }
271 #footer h4 {
272 margin: 0 20px;
273 font-size: 125%;
274 }
276 /* the document */
277 div.dokuwiki div.page {
278 text-align: justify;
279 background: #ffffff;
280 }
282 div.dokuwiki table {
283 font-size: 100%;
284 }
286 div.dokuwiki tr,
287 div.dokuwiki td,
288 div.dokuwiki th {
289 }
291 div.dokuwiki img {
292 border: 0;
293 }
295 div.dokuwiki p,
296 div.dokuwiki blockquote,
297 div.dokuwiki table,
298 div.dokuwiki pre {
299 margin: 0 0 1.0em 0;
300 }
302 div.dokuwiki hr {
303 border: 0px;
304 border-top: 1px solid __border__;
305 text-align: center;
306 height: 0px;
307 }
309 div.dokuwiki div.nothing {
310 text-align: center;
311 margin: 2em;
312 }
314 /* ---------------- forms ------------------------ */
316 div.dokuwiki form {
317 border: none;
318 display: inline;
319 }
321 div.dokuwiki label.block {
322 display: block;
323 text-align: right;
324 font-weight: bold;
325 min-height: 20px;
326 margin: 0;
327 }
329 div.dokuwiki label.simple {
330 display: block;
331 text-align: left;
332 font-weight: normal;
333 }
335 div.dokuwiki label.block input.edit {
336 width: 50%;
337 }
339 div.dokuwiki fieldset {
340 width: 300px;
341 text-align: center;
342 border: 1px solid __border__;
343 padding: 0.5em;
344 margin: auto;
345 }
347 div.dokuwiki textarea.edit {
348 font-family: monospace;
349 font-size: 14px;
350 color: __text__;
351 background-color: __background__;
352 border: 1px solid __border__;
353 padding: 0.3em 0 0 0.3em;
354 width: 100%;
355 }
357 div.dokuwiki input.edit,
358 div.dokuwiki select.edit {
359 font-size: 100%;
360 border: 1px solid __border__;
361 color: __text__;
362 background-color: __background__;
363 vertical-align: middle;
364 margin: 0px;
365 padding: 0.20em 0.3em;
366 display: inline;
367 }
369 div.dokuwiki select.edit {
370 padding: 0.1em 0;
371 }
373 div.dokuwiki input.missing {
374 font-size: 100%;
375 border: 1px solid __border__;
376 color: __text__;
377 background-color: #ffcccc;
378 vertical-align: middle;
379 margin: 1px;
380 padding: 0.20em 0.3em;
381 display: inline;
382 }
384 /* disabled style - not understood by IE */
385 div.dokuwiki textarea.edit[disabled],
386 div.dokuwiki textarea.edit[readonly],
387 div.dokuwiki input.edit[disabled],
388 div.dokuwiki input.edit[readonly],
389 div.dokuwiki select.edit[disabled] {
390 background-color: __background_neu__!important;
391 color: __text_neu__!important;
392 }
394 /* edit form */
395 div.dokuwiki div.toolbar,
396 div.dokuwiki div#wiki__editbar {
397 margin: 2px 0;
398 text-align: left;
399 }
400 div.dokuwiki div#size__ctl {
401 float: right;
402 width: 60px;
403 height: 2.7em;
404 }
405 div.dokuwiki #size__ctl img {
406 cursor: pointer;
407 }
408 div.dokuwiki div#wiki__editbar div.editButtons {
409 float: left;
410 padding: 0 1.0em 0.7em 0;
411 }
412 div.dokuwiki div#wiki__editbar div.summary {
413 float: left;
414 }
415 div.dokuwiki .nowrap {
416 white-space: nowrap;
417 }
418 div.dokuwiki div#draft__status {
419 float: right;
420 color: __text_alt__;
421 }
423 /* --------- buttons ------------------- */
426 div.dokuwiki input.button,
427 div.dokuwiki button.button {
428 border: 0px solid #eaeaea;
429 color: #0F314E;
430 background-color: transparent;
431 vertical-align: middle;
432 text-decoration: none;
433 font-size: 12px;
434 font-weight: bold;
435 cursor: pointer;
436 padding: 0;
437 }
439 div.dokuwiki input:hover.button {
440 color: #b64b22;
441 }
443 * html div.dokuwiki input.button,
444 * html div.dokuwiki button.button {
445 height: 24px;
446 }
448 div.dokuwiki div.secedit input.button {
449 border: 1px solid #eaeaea;
450 color: #3E1220;
451 background-color: transparent;
452 vertical-align: middle;
453 text-decoration: none;
454 margin: 0;
455 padding: 0;
456 font-size: 10px;
457 cursor: pointer;
458 float: right;
459 display: inline;
460 }
462 /* ----------- page navigator ------------- */
464 div.dokuwiki div.pagenav {
465 margin: 1em 0 0 0;
466 }
468 div.dokuwiki div.pagenav-prev {
469 text-align: right;
470 float: left;
471 width: 49%
472 }
474 div.dokuwiki div.pagenav-next {
475 text-align: left;
476 float: right;
477 width: 49%
478 }
480 /* --------------- Links ------------------ */
482 div.dokuwiki a:link,
483 div.dokuwiki a:visited {
484 color: __extern__;
485 text-decoration: none;
486 }
487 div.dokuwiki a:hover,
488 div.dokuwiki a:active {
489 color: __text__;
490 text-decoration: underline;
491 }
493 div.dokuwiki h3 a,
494 div.dokuwiki h4 a,
495 div.dokuwiki h5 a,
496 div.dokuwiki a.nolink {
497 color: #6c0023 !important;
498 text-decoration: none !important;
499 }
501 /* external link */
502 div.dokuwiki a.urlextern {
503 background: transparent url(images/link_icon.gif) 0px 1px no-repeat;
504 padding: 1px 0px 1px 16px;
505 }
507 /* windows share */
508 div.dokuwiki a.windows {
509 background: transparent url(images/windows.gif) 0px 1px no-repeat;
510 padding: 1px 0px 1px 16px;
511 }
513 /* interwiki link (icon are set by dokuwiki) */
514 div.dokuwiki a.interwiki {
515 }
517 /* link to some embedded media */
518 div.dokuwiki a.media {
519 }
521 div.dokuwiki a.urlextern:link,
522 div.dokuwiki a.windows:link,
523 div.dokuwiki a.interwiki:link {
524 color: __extern__;
525 }
527 div.dokuwiki a.urlextern:visited,
528 div.dokuwiki a.windows:visited,
529 div.dokuwiki a.interwiki:visited {
530 color: purple;
531 }
532 div.dokuwiki a.urlextern:hover,
533 div.dokuwiki a.urlextern:active,
534 div.dokuwiki a.windows:hover,
535 div.dokuwiki a.windows:active,
536 div.dokuwiki a.interwiki:hover,
537 div.dokuwiki a.interwiki:active {
538 color: __text__;
539 }
541 /* email link */
542 div.dokuwiki a.mail {
543 background: transparent url(images/mail_icon.gif) 0px 1px no-repeat;
544 padding: 1px 0px 1px 16px;
545 }
547 /* existing wikipage */
548 div.dokuwiki a.wikilink1 {
549 color: #0F314E;
550 text-decoration: underline;
551 }
552 div.dokuwiki a.wikilink1:hover {
553 text-decoration: none;
554 color: blue;
555 }
557 /* not existing wikipage */
558 div.dokuwiki a.wikilink2 {
559 color: __missing__ !important;
560 text-decoration: none !important;
561 border-bottom: dashed 1px __missing__ !important;
562 }
564 /* ------------- Page elements ----------------- */
566 div.dokuwiki div.preview {
567 background-color: __background_neu__;
568 margin: 0 0 0 2em;
569 padding: 4px;
570 border: 1px dashed __text__;
571 }
573 div.dokuwiki div.breadcrumbs {
574 background-color: #f1f1f1;
575 color: __text_neu__;
576 font-size: 85%;
577 padding: 1px 0px 1px 18px;
578 margin: 0px 100px 0px 100px;
579 }
581 div.dokuwiki span.user {
582 color: __text_other__;
583 font-size: 90%;
584 }
586 div.dokuwiki li.minor {
587 color: __text_neu__;
588 font-style: italic;
589 }
591 /* embedded images */
592 div.dokuwiki img.media {
593 margin: 3px;
594 }
596 div.dokuwiki img.medialeft {
597 border: 0;
598 float: left;
599 margin: 0 1.5em 0 0;
600 }
602 div.dokuwiki img.mediaright {
603 border: 0;
604 float: right;
605 margin: 0 0 0 1.5em;
606 }
608 div.dokuwiki img.mediacenter {
609 border: 0;
610 display: block;
611 margin: 0 auto;
612 }
614 /* smileys */
615 div.dokuwiki img.middle {
616 vertical-align: middle;
617 }
619 div.dokuwiki acronym {
620 cursor: help;
621 border-bottom: 1px dotted __text__;
622 }
624 /* general headline setup */
625 div.dokuwiki h1,
626 div.dokuwiki h2,
627 div.dokuwiki h3,
628 div.dokuwiki h4,
629 div.dokuwiki h5 {
630 background-color: transparent;
631 clear: left;
632 }
634 /* unordered lists */
635 div.dokuwiki ul {
636 line-height: 1.5em;
637 list-style-type: square;
638 list-style-image: none;
639 margin: 0 0 0.5em 1.5em;
640 color: __text_alt__;
641 }
643 /* ordered lists */
644 div.dokuwiki ol {
645 line-height: 1.5em;
646 list-style-image: none;
647 margin: 0 0 0.5em 1.5em;
648 color: __text_alt__;
649 font-weight: bold;
650 }
652 /* the list items overriding the ul/ol definition */
653 div.dokuwiki .li {
654 color: __text__;
655 font-weight: normal;
656 }
658 div.dokuwiki ol {list-style-type: decimal}
659 div.dokuwiki ol ol {list-style-type: upper-roman}
660 div.dokuwiki ol ol ol {list-style-type: lower-alpha}
661 div.dokuwiki ol ol ol ol {list-style-type: lower-greek}
663 div.dokuwiki li.open {
664 list-style-image: url(images/open.gif);
665 /*list-style-type: circle;*/
666 }
668 div.dokuwiki li.closed {
669 list-style-image: url(images/closed.gif);
670 /*list-style-type: disc;*/
671 }
673 div.dokuwiki blockquote {
674 border-left: 2px solid __border__;
675 padding-left: 3px;
676 }
678 div.dokuwiki pre {
679 font-size: 100%;
680 padding: 5px;
681 color: black;
682 background: #E1E0B0;
683 border: 0;
684 overflow: auto;
685 }
687 /* code blocks by indention */
688 div.dokuwiki pre.pre {
689 background-color: __background_other__;
690 }
692 /* code blocks by code tag */
693 div.dokuwiki pre.code {
694 -moz-border-radius: 4px;
695 -webkit-border-radius: 4px;
696 background-color: #f8f8f8;
697 border: 1px solid #ddd;
698 padding: 10px;
700 }
702 /* inline code words */
703 div.dokuwiki code {
704 font-size: 120%;
705 }
707 /* code blocks by file tag */
708 div.dokuwiki pre.file {
709 background-color: __background_alt__;
710 }
712 /* inline tables */
713 div.dokuwiki table.inline {
714 background-color: __background__;
715 border-spacing: 0px;
716 border-collapse: collapse;
717 }
719 div.dokuwiki table.inline th {
720 padding: 3px;
721 border: 1px solid __border__;
722 background-color: __background_alt__;
723 }
725 div.dokuwiki table.inline td {
726 padding: 3px;
727 border: 1px solid __border__;
728 }
730 /* ---------- table of contents ------------------- */
732 div.dokuwiki div.toc {
733 margin: 1.2em 0 0 2em;
734 float: right;
735 width: 200px;
736 font-size: 80%;
737 clear: both;
738 }
740 div.dokuwiki div.tocheader {
741 border: 1px solid __border__;
742 background-color: __background_alt__;
743 text-align: left;
744 font-weight: bold;
745 padding: 3px;
746 margin-bottom: 2px;
747 }
749 div.dokuwiki span.toc_open,
750 div.dokuwiki span.toc_close {
751 border: 0.4em solid __background_alt__;
752 float: right;
753 display: block;
754 margin: 0.4em 3px 0 0;
755 }
757 div.dokuwiki span.toc_open span,
758 div.dokuwiki span.toc_close span {
759 display: none;
760 }
762 div.dokuwiki span.toc_open {
763 margin-top: 0.4em;
764 border-top: 0.4em solid __text__;
765 }
767 div.dokuwiki span.toc_close {
768 margin-top: 0;
769 border-bottom: 0.4em solid __text__;
770 }
772 div.dokuwiki #toc__inside {
773 border: 1px solid __border__;
774 background-color: __background__;
775 text-align: left;
776 padding: 0.5em 0 0.7em 0;
777 }
779 div.dokuwiki ul.toc {
780 list-style-type: none;
781 list-style-image: none;
782 line-height: 1.2em;
783 padding-left: 1em;
784 margin: 0;
785 }
787 div.dokuwiki ul.toc li {
788 background: transparent url(images/tocdot2.gif) 0 0.6em no-repeat;
789 padding-left: 0.4em;
790 }
792 div.dokuwiki ul.toc li.clear {
793 background-image: none;
794 padding-left: 0.4em;
795 }
797 div.dokuwiki a.toc:link,
798 div.dokuwiki a.toc:visited {
799 color: __extern__;
800 }
802 div.dokuwiki a.toc:hover,
803 div.dokuwiki a.toc:active {
804 color: __text__;
805 }
807 /* ---------------------------- Diff rendering --------------------------*/
808 div.dokuwiki table.diff {
809 background-color: __background__;
810 width: 100%;
811 }
812 div.dokuwiki td.diff-blockheader {
813 font-weight: bold;
814 }
815 div.dokuwiki table.diff th {
816 border-bottom: 1px solid __border__;
817 font-size: 120%;
818 width: 50%;
819 font-weight: normal;
820 text-align: left;
821 }
822 div.dokuwiki table.diff td {
823 font-family: monospace;
824 font-size: 100%;
825 }
826 div.dokuwiki td.diff-addedline {
827 background-color: #ddffdd;
828 }
829 div.dokuwiki td.diff-deletedline {
830 background-color: #ffffbb;
831 }
832 div.dokuwiki td.diff-context {
833 background-color: __background_neu__;
834 }
835 div.dokuwiki table.diff td.diff-addedline strong,
836 div.dokuwiki table.diff td.diff-deletedline strong {
837 color: red;
838 }
840 /* --------------------- footnotes -------------------------------- */
842 div.dokuwiki div.footnotes {
843 clear: both;
844 border-top: 1px solid __border__;
845 padding-left: 1em;
846 margin-top: 1em;
847 }
849 div.dokuwiki div.fn {
850 font-size: 90%;
851 }
853 div.dokuwiki a.fn_bot {
854 font-weight: bold;
855 }
857 /* insitu-footnotes */
858 div.insitu-footnote {
859 font-size: 80%;
860 line-height: 1.2em;
861 border: 1px solid __border__;
862 background-color: __background_other__;
863 text-align: left;
864 padding: 4px;
865 max-width: 40%; /* IE's width is handled in javascript */
866 }
868 /* overcome IE issue with one line code or file boxes which require h. scrolling */
869 * html .insitu-footnote pre.code,
870 * html .insitu-footnote pre.file {
871 padding-bottom: 18px;
872 }
874 /* --------------- search result formating --------------- */
875 div.dokuwiki .search_result {
876 margin-bottom: 6px;
877 padding: 0 10px 0 30px;
878 }
880 div.dokuwiki .search_snippet {
881 color: __text_other__;
882 font-size: 12px;
883 margin-left: 20px;
884 }
886 div.dokuwiki .search_sep {
887 color: __text__;
888 }
890 div.dokuwiki .search_hit {
891 color: __text__;
892 background-color: __highlight__;
893 }
894 div.dokuwiki strong.search_hit {
895 font-weight: normal;
896 }
898 div.dokuwiki div.search_quickresult {
899 margin: 0 0 15px 30px;
900 padding: 0 10px 10px 0;
901 border-bottom: 1px dashed __border__;
902 }
903 div.dokuwiki div.search_quickresult h3 {
904 margin: 0 0 1.0em 0;
905 font-size: 1em;
906 font-weight: bold;
907 }
909 div.dokuwiki ul.search_quickhits {
910 margin: 0 0 0.5em 1.0em;
911 }
913 div.dokuwiki ul.search_quickhits li {
914 margin: 0 1.0em 0 1.0em;
915 float:left;
916 width: 30%;
917 }
919 /* ------------------ Additional ---------------------- */
921 div.footerinc {
922 text-align: left;
923 margin: 10px 80px;
924 }
925 .footerinc a img {
926 opacity: 0.5;
927 border: 0;
928 }
930 .footerinc a:hover img {
931 opacity: 1;
932 }
934 /* ---------- AJAX quicksearch ----------- */
936 div.dokuwiki div.ajax_qsearch {
937 position: absolute;
938 right: 237px;;
939 width: 200px;
940 opacity: 0.9;
941 display: none;
942 font-size: 80%;
943 line-height: 1.2em;
944 border: 1px solid __border__;
945 background-color: __background_other__;
946 text-align: left;
947 padding: 4px;
948 }
950 /* --------- Toolbar -------------------- */
951 button.toolbutton {
952 background-color: transparent;
953 padding: 0px;
954 margin: 0 1px 0 0;
955 border: 1px solid __border__;
956 cursor: pointer;
957 }
959 div.picker {
960 width: 250px;
961 border: 1px solid __border__;
962 background-color: __background_alt__;
963 }
965 button.pickerbutton {
966 padding: 0px;
967 margin: 0 1px 1px 0;
968 border: 0;
969 background-color: transparent;
970 font-size: 80%;
971 cursor: pointer;
972 }
974 /* --------------- Image Details ----------------- */
976 div.dokuwiki div.img_big {
977 float: left;
978 margin-right: 0.5em;
979 }
981 div.dokuwiki dl.img_tags dt {
982 font-weight: bold;
983 background-color: __background_alt__;
984 }
985 div.dokuwiki dl.img_tags dd {
986 background-color: __background_neu__;
987 }
989 div.dokuwiki div.imagemeta {
990 color: __text_neu__;
991 font-size: 70%;
992 line-height: 95%;
993 }
995 div.dokuwiki div.imagemeta img.thumb {
996 float:left;
997 margin-right: 0.1em;
998 }
1000 div.notify {
1001 background: #cfcfcf;
1002 color: #222;
1003 border: 1px solid #222;
1004 font-size: 90%;
1005 margin: 0;
1006 padding: 4px;
1007 -moz-border-radius: 4px;
1008 -webkit-border-radius: 4px;
1009 border-radius: 4px;
1010 position: absolute;
1011 top: 150px;
1012 right: 20px;
1013 width: 400px;
1016 #access div.notify a { text-decoration: underline; }
1017 #access div.notify a:hover { text-decoration: none; }