slitaz-forge view doc/lib/tpl/slitaz-grey/design.css @ rev 431
doc: continue to move to new style (more testing)
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Wed Jan 15 15:34:03 2014 +0100 (2014-01-15) |
| parents | a78e08084838 |
| children | fdb7fa1b6237 |
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: 152px;
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 div.plugin_translation a {
40 text-decoration: none;
41 font-weight: bold;
42 color: #215090;
43 background: #444;
44 padding: 2px;
45 }
47 div.plugin_translation a:hover {
48 background: #333;
49 }
51 /* Header and title */
53 #header {
54 background: #222;
55 color: #fff;
56 width: 100%;
57 height: 40px;
58 }
60 #header h1 {
61 margin: 0;
62 padding: 8px 0 0 42px;
63 width: 250px;
64 }
66 #header h1 a {
67 color: white;
68 text-decoration: none;
69 font-size: 20px;
70 font-style: italic;
71 }
73 #header h1 a:hover, #network a:hover {
74 color: #afafaf;
75 }
77 /* Logo */
79 #logo {
80 background: url(images/logo.png) no-repeat left;
81 position: absolute;
82 float: left;
83 left: 0px;
84 top: 0px;
85 width: 40px;
86 height: 40px;
87 }
89 /* SliTaz Network */
91 #network {
92 float: right;
93 padding: 14px 5px 0;
94 font-size: 12px;
95 }
97 #network a { padding: 0 4px; color: #fff;
98 font-weight: bold;
99 text-decoration: none;}
100 #network img { vertical-align: middle; }
102 #block {
103 min-height: 92px;
104 background: #ccc;
105 padding: 20px 12% 0;
106 text-align: center;
107 color: #333;
108 border-bottom: 1px solid #afafaf;
109 }
111 /* Page content */
113 #content {
114 background: white;
115 color: black;
116 text-align: justify;
117 height: auto;
118 margin: 0;
119 padding: 40px 80px;
120 }
122 #content li, #content-full li {
123 line-height: 1.5em;
124 text-align: left;
125 }
127 /* Box and block. */
129 .tools {
130 width: 100%;
131 min-height: 30px;
132 background-color: #666;
133 padding: 8px 5px 1px 5px;
134 margin: 10px 0;
135 vertical-align: middle;
136 text-align: left;
137 }
139 .tools img, .tools form { vertical-align: middle; }
140 .tools span { font-size: 110%; }
141 div.dokuwiki .tools input.button {
142 color: #fff;
143 }
144 div.dokuwiki .tools input:hover.button {
145 color: #222;
146 }
148 #footer, .tools {
149 -moz-border-radius: 4px;
150 -webkit-border-radius: 4px;
151 border-radius: 4px;
152 }
154 .right_box {
155 width: 50%;
156 float: right;
157 }
159 /* HTML styles */
161 h1, h1 a {
162 color: #444;
163 background: transparent;
164 text-align: left;
165 margin: 0;
166 font-size: 150%;
167 font-weight: bold;
168 padding: 0;
169 text-decoration: none !important;
170 }
172 h2, h2 a {
173 color: #666;
174 padding: 0;
175 margin: 20px 0 0 0;
176 font-size: 140%;
177 font-weight: bold;
178 text-decoration: none !important;
179 }
181 h3, .tools span {
182 font-weight: bold;
183 color: #666666;
184 background: transparent;
185 }
187 h3 img {
188 vertical-align: middle;
189 width: 20px;
190 height: 20px;
191 padding-right: 4px;
192 }
194 a {
195 text-decoration: underline;
196 color: #103A5E;
197 background: inherit;
198 }
200 a:hover {
201 text-decoration: none;
202 color: blue;
203 background: inherit;
204 }
206 code {
207 font-size: 12px;
208 color: #669900;
209 background: inherit;
210 }
212 tt {
213 color: #15EE15;
214 background: inherit;
215 }
217 img {
218 border: 0pt none;
219 }
221 pre {
222 padding: 5px;
223 color: black;
224 background: #E1E0B0;
225 }
227 pre.script {
228 padding: 10px;
229 color: black;
230 background: #E8E8E8;
231 border: 1px inset #606060;
232 }
234 textarea {
235 background: #E5E5E5;
236 margin-top: 12px;
237 }
239 .year:after {
240 /* content: "2007-2014"; */
241 content: "2014";
242 }
244 /* Footer */
246 #footer {
247 background: #f1f1f1;
248 text-align: center;
249 border-top: 1px solid #ddd;
250 padding: 40px;
251 color: #666;
252 clear: both;
253 margin-bottom: -2%;
254 }
255 #footer a {
256 background: inherit;
257 color: #666666;
258 }
259 #footer a:hover {
260 background: inherit;
261 color: #333333;
262 }
263 #footer ul {
264 list-style-type: none;
265 }
266 #footer li {
267 padding: 2px;
268 }
269 #footer h4 {
270 margin: 0 20px;
271 font-size: 125%;
272 }
274 /* the document */
275 div.dokuwiki div.page {
276 text-align: justify;
277 background: #ffffff;
278 }
280 div.dokuwiki table {
281 font-size: 100%;
282 }
284 div.dokuwiki tr,
285 div.dokuwiki td,
286 div.dokuwiki th {
287 }
289 div.dokuwiki img {
290 border: 0;
291 }
293 div.dokuwiki p,
294 div.dokuwiki blockquote,
295 div.dokuwiki table,
296 div.dokuwiki pre {
297 margin: 0 0 1.0em 0;
298 }
300 div.dokuwiki hr {
301 border: 0px;
302 border-top: 1px solid __border__;
303 text-align: center;
304 height: 0px;
305 }
307 div.dokuwiki div.nothing {
308 text-align: center;
309 margin: 2em;
310 }
312 /* ---------------- forms ------------------------ */
314 div.dokuwiki form {
315 border: none;
316 display: inline;
317 }
319 div.dokuwiki label.block {
320 display: block;
321 text-align: right;
322 font-weight: bold;
323 min-height: 20px;
324 margin: 0;
325 }
327 div.dokuwiki label.simple {
328 display: block;
329 text-align: left;
330 font-weight: normal;
331 }
333 div.dokuwiki label.block input.edit {
334 width: 50%;
335 }
337 div.dokuwiki fieldset {
338 width: 300px;
339 text-align: center;
340 border: 1px solid __border__;
341 padding: 0.5em;
342 margin: auto;
343 }
345 div.dokuwiki textarea.edit {
346 font-family: monospace;
347 font-size: 14px;
348 color: __text__;
349 background-color: __background__;
350 border: 1px solid __border__;
351 padding: 0.3em 0 0 0.3em;
352 width: 100%;
353 }
355 div.dokuwiki input.edit,
356 div.dokuwiki select.edit {
357 font-size: 100%;
358 border: 1px solid __border__;
359 color: __text__;
360 background-color: __background__;
361 vertical-align: middle;
362 margin: 0px;
363 padding: 0.20em 0.3em;
364 display: inline;
365 }
367 div.dokuwiki select.edit {
368 padding: 0.1em 0;
369 }
371 div.dokuwiki input.missing {
372 font-size: 100%;
373 border: 1px solid __border__;
374 color: __text__;
375 background-color: #ffcccc;
376 vertical-align: middle;
377 margin: 1px;
378 padding: 0.20em 0.3em;
379 display: inline;
380 }
382 /* disabled style - not understood by IE */
383 div.dokuwiki textarea.edit[disabled],
384 div.dokuwiki textarea.edit[readonly],
385 div.dokuwiki input.edit[disabled],
386 div.dokuwiki input.edit[readonly],
387 div.dokuwiki select.edit[disabled] {
388 background-color: __background_neu__!important;
389 color: __text_neu__!important;
390 }
392 /* edit form */
393 div.dokuwiki div.toolbar,
394 div.dokuwiki div#wiki__editbar {
395 margin: 2px 0;
396 text-align: left;
397 }
398 div.dokuwiki div#size__ctl {
399 float: right;
400 width: 60px;
401 height: 2.7em;
402 }
403 div.dokuwiki #size__ctl img {
404 cursor: pointer;
405 }
406 div.dokuwiki div#wiki__editbar div.editButtons {
407 float: left;
408 padding: 0 1.0em 0.7em 0;
409 }
410 div.dokuwiki div#wiki__editbar div.summary {
411 float: left;
412 }
413 div.dokuwiki .nowrap {
414 white-space: nowrap;
415 }
416 div.dokuwiki div#draft__status {
417 float: right;
418 color: __text_alt__;
419 }
421 /* --------- buttons ------------------- */
424 div.dokuwiki input.button,
425 div.dokuwiki button.button {
426 border: 0px solid #eaeaea;
427 color: #0F314E;
428 background-color: transparent;
429 vertical-align: middle;
430 text-decoration: none;
431 font-size: 12px;
432 font-weight: bold;
433 cursor: pointer;
434 padding: 0;
435 }
437 div.dokuwiki input:hover.button {
438 color: #b64b22;
439 }
441 * html div.dokuwiki input.button,
442 * html div.dokuwiki button.button {
443 height: 24px;
444 }
446 div.dokuwiki div.secedit input.button {
447 border: 1px solid #eaeaea;
448 color: #3E1220;
449 background-color: transparent;
450 vertical-align: middle;
451 text-decoration: none;
452 margin: 0;
453 padding: 0;
454 font-size: 10px;
455 cursor: pointer;
456 float: right;
457 display: inline;
458 }
460 /* ----------- page navigator ------------- */
462 div.dokuwiki div.pagenav {
463 margin: 1em 0 0 0;
464 }
466 div.dokuwiki div.pagenav-prev {
467 text-align: right;
468 float: left;
469 width: 49%
470 }
472 div.dokuwiki div.pagenav-next {
473 text-align: left;
474 float: right;
475 width: 49%
476 }
478 /* --------------- Links ------------------ */
480 div.dokuwiki a:link,
481 div.dokuwiki a:visited {
482 color: __extern__;
483 text-decoration: none;
484 }
485 div.dokuwiki a:hover,
486 div.dokuwiki a:active {
487 color: __text__;
488 text-decoration: underline;
489 }
491 div.dokuwiki h3 a,
492 div.dokuwiki h4 a,
493 div.dokuwiki h5 a,
494 div.dokuwiki a.nolink {
495 color: #6c0023 !important;
496 text-decoration: none !important;
497 }
499 /* external link */
500 div.dokuwiki a.urlextern {
501 background: transparent url(images/link_icon.gif) 0px 1px no-repeat;
502 padding: 1px 0px 1px 16px;
503 }
505 /* windows share */
506 div.dokuwiki a.windows {
507 background: transparent url(images/windows.gif) 0px 1px no-repeat;
508 padding: 1px 0px 1px 16px;
509 }
511 /* interwiki link (icon are set by dokuwiki) */
512 div.dokuwiki a.interwiki {
513 }
515 /* link to some embedded media */
516 div.dokuwiki a.media {
517 }
519 div.dokuwiki a.urlextern:link,
520 div.dokuwiki a.windows:link,
521 div.dokuwiki a.interwiki:link {
522 color: __extern__;
523 }
525 div.dokuwiki a.urlextern:visited,
526 div.dokuwiki a.windows:visited,
527 div.dokuwiki a.interwiki:visited {
528 color: purple;
529 }
530 div.dokuwiki a.urlextern:hover,
531 div.dokuwiki a.urlextern:active,
532 div.dokuwiki a.windows:hover,
533 div.dokuwiki a.windows:active,
534 div.dokuwiki a.interwiki:hover,
535 div.dokuwiki a.interwiki:active {
536 color: __text__;
537 }
539 /* email link */
540 div.dokuwiki a.mail {
541 background: transparent url(images/mail_icon.gif) 0px 1px no-repeat;
542 padding: 1px 0px 1px 16px;
543 }
545 /* existing wikipage */
546 div.dokuwiki a.wikilink1 {
547 color: #0F314E;
548 text-decoration: underline;
549 }
550 div.dokuwiki a.wikilink1:hover {
551 text-decoration: none;
552 color: blue;
553 }
555 /* not existing wikipage */
556 div.dokuwiki a.wikilink2 {
557 color: __missing__ !important;
558 text-decoration: none !important;
559 border-bottom: dashed 1px __missing__ !important;
560 }
562 /* ------------- Page elements ----------------- */
564 div.dokuwiki div.preview {
565 background-color: __background_neu__;
566 margin: 0 0 0 2em;
567 padding: 4px;
568 border: 1px dashed __text__;
569 }
571 div.dokuwiki div.breadcrumbs {
572 background-color: #f1f1f1;
573 color: __text_neu__;
574 font-size: 85%;
575 padding: 1px 0px 1px 18px;
576 margin: 0px 100px 0px 100px;
577 }
579 div.dokuwiki span.user {
580 color: __text_other__;
581 font-size: 90%;
582 }
584 div.dokuwiki li.minor {
585 color: __text_neu__;
586 font-style: italic;
587 }
589 /* embedded images */
590 div.dokuwiki img.media {
591 margin: 3px;
592 }
594 div.dokuwiki img.medialeft {
595 border: 0;
596 float: left;
597 margin: 0 1.5em 0 0;
598 }
600 div.dokuwiki img.mediaright {
601 border: 0;
602 float: right;
603 margin: 0 0 0 1.5em;
604 }
606 div.dokuwiki img.mediacenter {
607 border: 0;
608 display: block;
609 margin: 0 auto;
610 }
612 /* smileys */
613 div.dokuwiki img.middle {
614 vertical-align: middle;
615 }
617 div.dokuwiki acronym {
618 cursor: help;
619 border-bottom: 1px dotted __text__;
620 }
622 /* general headline setup */
623 div.dokuwiki h1,
624 div.dokuwiki h2,
625 div.dokuwiki h3,
626 div.dokuwiki h4,
627 div.dokuwiki h5 {
628 background-color: transparent;
629 clear: left;
630 }
632 /* unordered lists */
633 div.dokuwiki ul {
634 line-height: 1.5em;
635 list-style-type: square;
636 list-style-image: none;
637 margin: 0 0 0.5em 1.5em;
638 color: __text_alt__;
639 }
641 /* ordered lists */
642 div.dokuwiki ol {
643 line-height: 1.5em;
644 list-style-image: none;
645 margin: 0 0 0.5em 1.5em;
646 color: __text_alt__;
647 font-weight: bold;
648 }
650 /* the list items overriding the ul/ol definition */
651 div.dokuwiki .li {
652 color: __text__;
653 font-weight: normal;
654 }
656 div.dokuwiki ol {list-style-type: decimal}
657 div.dokuwiki ol ol {list-style-type: upper-roman}
658 div.dokuwiki ol ol ol {list-style-type: lower-alpha}
659 div.dokuwiki ol ol ol ol {list-style-type: lower-greek}
661 div.dokuwiki li.open {
662 list-style-image: url(images/open.gif);
663 /*list-style-type: circle;*/
664 }
666 div.dokuwiki li.closed {
667 list-style-image: url(images/closed.gif);
668 /*list-style-type: disc;*/
669 }
671 div.dokuwiki blockquote {
672 border-left: 2px solid __border__;
673 padding-left: 3px;
674 }
676 div.dokuwiki pre {
677 font-size: 100%;
678 padding: 5px;
679 color: black;
680 background: #E1E0B0;
681 border: 0;
682 overflow: auto;
683 }
685 /* code blocks by indention */
686 div.dokuwiki pre.pre {
687 background-color: __background_other__;
688 }
690 /* code blocks by code tag */
691 div.dokuwiki pre.code {
692 -moz-border-radius: 4px;
693 -webkit-border-radius: 4px;
694 background-color: #f8f8f8;
695 border: 1px solid #ddd;
696 padding: 10px;
698 }
700 /* inline code words */
701 div.dokuwiki code {
702 font-size: 120%;
703 }
705 /* code blocks by file tag */
706 div.dokuwiki pre.file {
707 background-color: __background_alt__;
708 }
710 /* inline tables */
711 div.dokuwiki table.inline {
712 background-color: __background__;
713 border-spacing: 0px;
714 border-collapse: collapse;
715 }
717 div.dokuwiki table.inline th {
718 padding: 3px;
719 border: 1px solid __border__;
720 background-color: __background_alt__;
721 }
723 div.dokuwiki table.inline td {
724 padding: 3px;
725 border: 1px solid __border__;
726 }
728 /* ---------- table of contents ------------------- */
730 div.dokuwiki div.toc {
731 margin: 1.2em 0 0 2em;
732 float: right;
733 width: 200px;
734 font-size: 80%;
735 clear: both;
736 }
738 div.dokuwiki div.tocheader {
739 border: 1px solid __border__;
740 background-color: __background_alt__;
741 text-align: left;
742 font-weight: bold;
743 padding: 3px;
744 margin-bottom: 2px;
745 }
747 div.dokuwiki span.toc_open,
748 div.dokuwiki span.toc_close {
749 border: 0.4em solid __background_alt__;
750 float: right;
751 display: block;
752 margin: 0.4em 3px 0 0;
753 }
755 div.dokuwiki span.toc_open span,
756 div.dokuwiki span.toc_close span {
757 display: none;
758 }
760 div.dokuwiki span.toc_open {
761 margin-top: 0.4em;
762 border-top: 0.4em solid __text__;
763 }
765 div.dokuwiki span.toc_close {
766 margin-top: 0;
767 border-bottom: 0.4em solid __text__;
768 }
770 div.dokuwiki #toc__inside {
771 border: 1px solid __border__;
772 background-color: __background__;
773 text-align: left;
774 padding: 0.5em 0 0.7em 0;
775 }
777 div.dokuwiki ul.toc {
778 list-style-type: none;
779 list-style-image: none;
780 line-height: 1.2em;
781 padding-left: 1em;
782 margin: 0;
783 }
785 div.dokuwiki ul.toc li {
786 background: transparent url(images/tocdot2.gif) 0 0.6em no-repeat;
787 padding-left: 0.4em;
788 }
790 div.dokuwiki ul.toc li.clear {
791 background-image: none;
792 padding-left: 0.4em;
793 }
795 div.dokuwiki a.toc:link,
796 div.dokuwiki a.toc:visited {
797 color: __extern__;
798 }
800 div.dokuwiki a.toc:hover,
801 div.dokuwiki a.toc:active {
802 color: __text__;
803 }
805 /* ---------------------------- Diff rendering --------------------------*/
806 div.dokuwiki table.diff {
807 background-color: __background__;
808 width: 100%;
809 }
810 div.dokuwiki td.diff-blockheader {
811 font-weight: bold;
812 }
813 div.dokuwiki table.diff th {
814 border-bottom: 1px solid __border__;
815 font-size: 120%;
816 width: 50%;
817 font-weight: normal;
818 text-align: left;
819 }
820 div.dokuwiki table.diff td {
821 font-family: monospace;
822 font-size: 100%;
823 }
824 div.dokuwiki td.diff-addedline {
825 background-color: #ddffdd;
826 }
827 div.dokuwiki td.diff-deletedline {
828 background-color: #ffffbb;
829 }
830 div.dokuwiki td.diff-context {
831 background-color: __background_neu__;
832 }
833 div.dokuwiki table.diff td.diff-addedline strong,
834 div.dokuwiki table.diff td.diff-deletedline strong {
835 color: red;
836 }
838 /* --------------------- footnotes -------------------------------- */
840 div.dokuwiki div.footnotes {
841 clear: both;
842 border-top: 1px solid __border__;
843 padding-left: 1em;
844 margin-top: 1em;
845 }
847 div.dokuwiki div.fn {
848 font-size: 90%;
849 }
851 div.dokuwiki a.fn_bot {
852 font-weight: bold;
853 }
855 /* insitu-footnotes */
856 div.insitu-footnote {
857 font-size: 80%;
858 line-height: 1.2em;
859 border: 1px solid __border__;
860 background-color: __background_other__;
861 text-align: left;
862 padding: 4px;
863 max-width: 40%; /* IE's width is handled in javascript */
864 }
866 /* overcome IE issue with one line code or file boxes which require h. scrolling */
867 * html .insitu-footnote pre.code,
868 * html .insitu-footnote pre.file {
869 padding-bottom: 18px;
870 }
872 /* --------------- search result formating --------------- */
873 div.dokuwiki .search_result {
874 margin-bottom: 6px;
875 padding: 0 10px 0 30px;
876 }
878 div.dokuwiki .search_snippet {
879 color: __text_other__;
880 font-size: 12px;
881 margin-left: 20px;
882 }
884 div.dokuwiki .search_sep {
885 color: __text__;
886 }
888 div.dokuwiki .search_hit {
889 color: __text__;
890 background-color: __highlight__;
891 }
892 div.dokuwiki strong.search_hit {
893 font-weight: normal;
894 }
896 div.dokuwiki div.search_quickresult {
897 margin: 0 0 15px 30px;
898 padding: 0 10px 10px 0;
899 border-bottom: 1px dashed __border__;
900 }
901 div.dokuwiki div.search_quickresult h3 {
902 margin: 0 0 1.0em 0;
903 font-size: 1em;
904 font-weight: bold;
905 }
907 div.dokuwiki ul.search_quickhits {
908 margin: 0 0 0.5em 1.0em;
909 }
911 div.dokuwiki ul.search_quickhits li {
912 margin: 0 1.0em 0 1.0em;
913 float:left;
914 width: 30%;
915 }
917 /* ------------------ Additional ---------------------- */
919 div.footerinc {
920 text-align: left;
921 margin: 10px 80px;
922 }
923 .footerinc a img {
924 opacity: 0.5;
925 border: 0;
926 }
928 .footerinc a:hover img {
929 opacity: 1;
930 }
932 /* ---------- AJAX quicksearch ----------- */
934 div.dokuwiki div.ajax_qsearch {
935 position: absolute;
936 right: 237px;;
937 width: 200px;
938 opacity: 0.9;
939 display: none;
940 font-size: 80%;
941 line-height: 1.2em;
942 border: 1px solid __border__;
943 background-color: __background_other__;
944 text-align: left;
945 padding: 4px;
946 }
948 /* --------- Toolbar -------------------- */
949 button.toolbutton {
950 background-color: transparent;
951 padding: 0px;
952 margin: 0 1px 0 0;
953 border: 1px solid __border__;
954 cursor: pointer;
955 }
957 div.picker {
958 width: 250px;
959 border: 1px solid __border__;
960 background-color: __background_alt__;
961 }
963 button.pickerbutton {
964 padding: 0px;
965 margin: 0 1px 1px 0;
966 border: 0;
967 background-color: transparent;
968 font-size: 80%;
969 cursor: pointer;
970 }
972 /* --------------- Image Details ----------------- */
974 div.dokuwiki div.img_big {
975 float: left;
976 margin-right: 0.5em;
977 }
979 div.dokuwiki dl.img_tags dt {
980 font-weight: bold;
981 background-color: __background_alt__;
982 }
983 div.dokuwiki dl.img_tags dd {
984 background-color: __background_neu__;
985 }
987 div.dokuwiki div.imagemeta {
988 color: __text_neu__;
989 font-size: 70%;
990 line-height: 95%;
991 }
993 div.dokuwiki div.imagemeta img.thumb {
994 float:left;
995 margin-right: 0.1em;
996 }
998 div.notify {
999 background: #FFCC00;
1000 color: #222;
1001 border: 1px solid #222;
1002 font-size: 90%;
1003 margin: 0;
1004 padding: 4px;
1005 -moz-border-radius: 4px;
1006 -webkit-border-radius: 4px;
1007 border-radius: 4px;
1008 position: absolute;
1009 top: 10px;
1010 right: 260px;
1011 width: 620px;
1012 }
1014 #access div.notify a { text-decoration: underline; background: transparent; }
1015 #access div.notify a:hover { text-decoration: none; }