1/**
2 * This file provides the most basic styles.
3 *
4 * If you integrate DokuWiki into another project, you might either
5 * want to integrate this file into the other project as well, or use
6 * the other project's basic CSS for DokuWiki instead of this one.
7 *
8 * @author Reactive Matter <reactivematter@protonmail.org>
9 *
10 */
11
12html {
13    overflow-x: auto;
14    overflow-y: scroll;
15}
16
17body
18{
19    --background: __background__;
20    --background-alt: __background_alt__;
21    --text-color: __text__;
22    --site-width: __site_width__;
23    --text-color-alt: __text_neu__;
24    --sidebar-width: __sidebar_width__;
25    --link-color: __link__;
26    --link-color-existing: __existing__;
27    --link-color-missing: __missing__;
28    --border-color: __border__;
29}
30
31body {
32    background-color: var(--background);
33    color: var(--text-color);
34    margin: 0;
35    padding: 0;
36    min-height: 100vh;
37    font-family: sans-serif;
38    font-size: 16px;
39    display: flex;
40    flex-direction: column;
41    width: 100%;
42}
43
44body:not(.full-width)
45{
46    max-width: var(--site-width);
47    margin: auto;
48}
49
50body *
51{
52    box-sizing: border-box;
53}
54
55
56
57
58.hide
59{
60    display: none;
61}
62
63/*____________ headers ____________*/
64
65h1,
66h2,
67h3,
68h4,
69h5,
70h6 {
71    font-weight: bold;
72    color: var(--text-color-alt);
73    background-color: inherit;
74    padding: 0;
75    line-height: 1.2;
76    clear: left; /* ideally 'both', but problems with toc */
77}
78[dir=rtl] h1,
79[dir=rtl] h2,
80[dir=rtl] h3,
81[dir=rtl] h4,
82[dir=rtl] h5,
83[dir=rtl] h6 {
84    clear: right;
85}
86
87h1 {
88    font-size: 2.25em;
89    margin: 0 0 0.444em;
90}
91h2 {
92    font-size: 1.5em;
93    margin: 0 0 0.666em;
94}
95h3 {
96    font-size: 1.125em;
97    margin: 0 0 0.888em;
98}
99h4 {
100    font-size: 1em;
101    margin: 0 0 1.0em;
102}
103h5 {
104    font-size: .875em;
105    margin: 0 0 1.1428em;
106}
107h6 {
108    font-size: .75em;
109    margin: 0 0 1.333em;
110}
111/* bottom margin = 1 / font-size */
112
113caption,
114figcaption,
115summary,
116legend {
117    font-style: italic;
118    font-weight: normal;
119    line-height: 1.2;
120    padding: 0;
121    margin: 0 0 .35em;
122}
123
124
125/*____________ basic margins and paddings ____________*/
126
127p,
128ul,
129ol,
130dl,
131pre,
132table,
133hr,
134blockquote,
135figure,
136details,
137fieldset,
138address {
139    margin: 0 0 1.4em 0; /* bottom margin = line-height */
140    padding: 0;
141}
142
143div {
144    margin: 0;
145    padding: 0;
146}
147
148
149/*____________ lists ____________*/
150
151ul,
152ol {
153    padding: 0 0 0 1.5em;
154}
155[dir=rtl] ul,
156[dir=rtl] ol {
157    padding: 0 1.5em 0 0;
158}
159
160li,
161dd {
162    padding: 0;
163    margin: 0 0 0 1.5em;
164}
165[dir=rtl] li,
166[dir=rtl] dd {
167    margin: 0 1.5em 0 0;
168}
169
170dt {
171    font-weight: bold;
172    margin: 0;
173    padding: 0;
174}
175
176li ul,
177li ol,
178li dl,
179dl ul,
180dl ol,
181dl dl {
182    margin-bottom: 0;
183    padding: 0;
184}
185li li {
186    font-size: 100%;
187}
188
189ul {
190    list-style: disc outside;
191}
192ol {
193    list-style: decimal outside;
194}
195ol ol {
196    list-style-type: lower-alpha;
197}
198ol ol ol {
199    list-style-type: upper-roman;
200}
201ol ol ol ol {
202    list-style-type: upper-alpha;
203}
204ol ol ol ol ol {
205    list-style-type: lower-roman;
206}
207
208
209/*____________ tables ____________*/
210
211table {
212    border-collapse: collapse;
213    empty-cells: show;
214    border-spacing: 0;
215    border: 1px solid var(--border-color);
216}
217
218caption {
219    caption-side: top;
220    text-align: left;
221}
222[dir=rtl] caption {
223    text-align: right;
224}
225
226th,
227td {
228    padding: .3em .5em;
229    margin: 0;
230    vertical-align: top;
231    border: 1px solid var(--border-color);
232}
233th {
234    font-weight: bold;
235    background-color: __background_alt__;
236    color: inherit;
237    text-align: left;
238}
239[dir=rtl] th {
240    text-align: right;
241}
242
243
244/*____________ links ____________*/
245
246a {
247}
248a:link,
249a:visited {
250    text-decoration: none;
251    color: var(--link-color);
252}
253
254a:visited:hover,
255a:link:focus,
256a:visited:focus,
257a:link:active,
258a:visited:active {
259    text-decoration: none;
260}
261
262
263.dokuwiki a.wikilink2
264{
265    color: var(--link-color-missing);
266}
267
268a:hover
269{
270    text-decoration: underline;
271}
272
273
274/*____________ misc ____________*/
275
276img,
277svg {
278    border-width: 0;
279    vertical-align: middle;
280    color: #666;
281    background-color: transparent;
282    font-style: italic;
283}
284
285img,
286svg,
287object,
288embed,
289iframe,
290video,
291audio {
292    max-width: 100%;
293}
294
295img,
296svg,
297video {
298    height: auto;
299}
300
301iframe {
302    border-width: 0;
303    background-color: inherit;
304}
305
306button img,
307button svg {
308    max-width: none;
309}
310
311hr {
312    border-style: solid;
313    border-width: 1px 0 0;
314    text-align: center;
315    height: 0;
316    width: 100%;
317    clear: both;
318}
319
320acronym,
321abbr {
322    font-style: normal;
323}
324acronym[title],
325abbr[title] {
326    cursor: help;
327    border-bottom: 1px dotted;
328    text-decoration: none;
329}
330em acronym,
331em abbr {
332    font-style: italic;
333}
334
335mark {
336    background: __highlight__;
337    color: inherit;
338}
339
340pre,
341code,
342samp,
343kbd {
344    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
345    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
346    font-size: 1em;
347    background-color: var(--background-alt);
348    color: var(--text-color);
349    direction: ltr;
350    text-align: left;
351}
352pre {
353    border: 1px solid var(--border-color);
354    padding: 0 .2em;
355    overflow: auto;
356    word-wrap: normal;
357}
358
359blockquote {
360    padding: 0 .5em;
361    border: solid var(--border-color);
362    border-width: 0 0 0 .25em;
363}
364[dir=rtl] blockquote {
365    border-width: 0 .25em 0 0;
366}
367q:before,
368q:after {
369    content: '';
370}
371
372sub,
373sup {
374    font-size: .8em;
375    line-height: 1;
376}
377sub {
378    vertical-align: sub;
379}
380sup {
381    vertical-align: super;
382}
383
384small {
385    font-size: .8em;
386}
387
388wbr {
389    display: inline-block;
390}
391
392/*____________ forms ____________*/
393
394form {
395    display: inline;
396    margin: 0;
397    padding: 0;
398}
399
400fieldset {
401    padding: .7em 1em 0;
402    padding: .7rem 1rem; /* for those browsers understanding :last-child */
403    border: 1px solid #999;
404}
405fieldset > :last-child {
406    margin-bottom: 0;
407}
408legend {
409    padding: 0 .1em;
410}
411
412label {
413    vertical-align: middle;
414    cursor: pointer;
415}
416
417input,
418textarea,
419button,
420select,
421optgroup,
422option,
423keygen,
424output,
425meter,
426progress {
427    font: inherit;
428    color: inherit;
429    /* background-color destroys button look */
430    line-height: normal;
431    margin: 0;
432    vertical-align: middle;
433    -moz-box-sizing: content-box;
434    -webkit-box-sizing: content-box;
435    box-sizing: content-box;
436}
437
438input,
439button,
440select,
441keygen,
442textarea {
443    padding: .1em;
444}
445input[type=radio],
446input[type=checkbox],
447input[type=image],
448input.check {
449    padding: 0;
450}
451
452input[type=submit],
453input[type=button],
454input[type=reset],
455input.button,
456button {
457    cursor: pointer;
458    overflow: visible;
459    padding: .1em .4em;
460}
461
462input[disabled],
463button[disabled],
464select[disabled],
465textarea[disabled],
466option[disabled],
467input[readonly],
468button[readonly],
469select[readonly],
470textarea[readonly] {
471    cursor: auto;
472    opacity: .5;
473}
474
475input:focus,
476button:focus,
477select:focus,
478keygen:focus,
479textarea:focus {
480    box-shadow: 0 0 5px #999;
481    outline: 0;
482
483}
484input::-moz-focus-inner,
485button::-moz-focus-inner {
486    border: 0;
487    padding: 0;
488}
489
490select {
491    max-width: 100%;
492}
493optgroup {
494    font-style: italic;
495    font-weight: bold;
496}
497option {
498    font-style: normal;
499    font-weight: normal;
500}
501
502#config__manager tr .input, #config__manager tr input, #config__manager tr textarea, #config__manager tr select,#config__manager fieldset,
503#config__manager tr.default .input, #config__manager tr.default input, #config__manager tr.default textarea, #config__manager tr.default select, #config__manager .selectiondefault
504{
505    color: var(--text-color);
506}
507
508#config__manager tr .input, #config__manager tr input, #config__manager tr textarea, #config__manager tr select
509{
510    background-color: var(--background);
511}
512
513button:not(:last-child)
514{
515    margin-right: 16px;
516}
517
518.JSpopup
519{
520    background-color: var(--background) !important;
521    border-color: var(--border-color) !important;
522}
523
524
525/*____________ links to wiki pages (addition to _links) ____________*/
526
527/* existing wikipage */
528.dokuwiki a.wikilink1 {
529    color: var(--link-color-existing);
530    background-color: inherit;
531}
532/* not existing wikipage */
533.dokuwiki a.wikilink2 {
534    color: var(--link-color-missing);
535    background-color: inherit;
536}
537
538
539/*____________ images ____________*/
540
541/* embedded images (styles are already partly set in DokuWiki's lib/styles/all.css) */
542.dokuwiki img.media {
543    margin: .2em 0;
544}
545.dokuwiki img.medialeft {
546    margin: .2em 1.5em .2em 0;
547}
548.dokuwiki img.mediaright {
549    margin: .2em 0 .2em 1.5em;
550}
551.dokuwiki img.mediacenter {
552    margin: .2em auto;
553}
554
555
556/*____________ tables ____________*/
557
558/* div before each table */
559.dokuwiki div.table {
560}
561
562.dokuwiki table.inline {
563    min-width: 50%;
564}
565.dokuwiki table.inline tr:hover td {
566    background-color: var(--background-alt);
567}
568.dokuwiki table.inline tr:hover th {
569    background-color: var(--border-color);
570}
571
572
573/*____________ code ____________*/
574
575/* fix if background-color hides underlining */
576.dokuwiki em.u code {
577    text-decoration: underline;
578}
579
580/* filenames for downloadable file and code blocks */
581.dokuwiki dl.code,
582.dokuwiki dl.file {
583}
584
585.dokuwiki dl.code dt,
586.dokuwiki dl.file dt {
587    background-color: var(--background-alt);
588    border: solid var(--border-color);
589    border-width: 1px 1px 0;
590    color: inherit;
591    display: inline;
592    padding: .1em .5em .2em;
593    margin-left: 1em;
594}
595[dir=rtl] .dokuwiki dl.code dt,
596[dir=rtl] .dokuwiki dl.file dt {
597    margin-left: 0;
598    margin-right: 1em;
599}
600.dokuwiki dl.code dt a,
601.dokuwiki dl.file dt a {
602}
603
604.dokuwiki dl.code dd,
605.dokuwiki dl.file dd {
606    margin: 0;
607}
608
609/* for code in <file> */
610.dokuwiki pre.file,
611.dokuwiki dl.file pre,
612.dokuwiki dl.file dt {
613    border-color: var(--border-color);
614}
615
616
617/*____________ media manager ____________*/
618
619/* some headings in the media manager should not look like headings */
620#mediamanager__page h2,
621#mediamanager__page h3 {
622    font-family: Frutiger, Calibri, Myriad, "Nimbus Sans L", Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
623    color: var(--text-color);
624}
625
626/* to style button-like div in _fileuploader.css to look like other buttons,
627   please add '.qq-upload-button' to the according styles (which don't really exist in this template) */
628.qq-upload-button {
629    border: 1px solid var(--border-color);
630    background-color: var(--background-alt);
631    padding: 0.125em 0.4em;
632}
633
634/*____________ styling plugin ____________*/
635
636#plugin__styling.ispopup {
637    padding: 1em;
638}
639
640
641/*____________ JS popup ____________*/
642
643.JSpopup {
644    background-color: var(--background);
645    color: var(--text-color);
646    border: 1px solid var(--border-color);
647    line-height: 1.2;
648    padding: 0 .2em;
649}
650
651.JSpopup ul,
652.JSpopup ol {
653    padding-left: 0;
654}
655[dir=rtl] .JSpopup ul,
656[dir=rtl] .JSpopup ol {
657    padding-right: 0;
658}
659
660
661/* CSS starts */
662
663.hide
664{
665    display: none;
666}
667
668.flex-fill
669{
670    flex-grow: 1;
671}
672
673.left-column {
674    display: flex;
675    flex-wrap: wrap;
676    flex-direction: column;
677    gap: 16px;
678    padding: 8px 16px;
679}
680
681.right-column {
682    display: flex;
683    flex-wrap: wrap;
684    flex-direction: column;
685    flex-grow: 1;
686    gap: 16px;
687    padding: 8px 16px;
688}
689
690
691
692navbar
693{
694    display: flex;
695    border-bottom: 1px solid var(--border-color);
696    line-height: 1;
697}
698
699navbar .site-name
700{
701    display: flex;
702    gap: 16px;
703    align-items: center;
704}
705
706
707navbar .site-name .site-logo
708{
709    width: 24px;
710    height: 24px;
711}
712navbar .site-name .site-title
713{
714    font-weight: bold;
715    font-size: 1.2rem;
716    padding: 8px 0px;
717}
718
719navbar a.site-name, navbar a.site-name:hover
720{
721    color: __title_color__;
722    text-decoration: none;
723}
724
725navbar form.search button {
726    background-color: transparent;
727    background-image: url("images/search.svg");
728    border-width: 0;
729    background-size: 14px;
730    background-repeat: no-repeat;
731    width: 19px;
732    height: 14px;
733    text-indent: -99999px;
734    margin-left: -20px;
735    box-shadow: none;
736    padding: 0;
737    position: relative;
738    top:0px;
739    right: 5px;
740    opacity: 0.5;
741}
742
743navbar form.search input
744{
745    padding: 0.5em 1em;
746    padding-right: 2em;
747    width: 20rem;
748    border: 1px solid var(--border-color);
749    border-radius: 3px;
750    box-sizing: border-box;
751    background-color: var(--background);
752}
753navbar form.search input:focus
754{
755    box-shadow: none;
756}
757
758#navbar .left-column
759{
760    flex-direction: row;
761    align-items: center;
762}
763#navbar .right-column {
764    border: none;
765    flex-direction: row-reverse;
766    gap: 16px;
767    align-items: center;
768}
769
770#qsearch__out
771{
772    display: none;
773    padding: 0.5em 1em;
774    width: 20rem;
775    left: unset;
776    top: unset;
777}
778
779#qsearch__out>strong
780{
781    color: __text_alt__;
782    margin-bottom: 1em;
783}
784#qsearch__out ul, #qsearch__out ol, #qsearch__out li
785{
786    margin: 0px;
787}
788
789#qsearch__out li
790{
791    margin: 4px 0px;
792}
793
794navbar .right-column .options
795{
796    display: flex;
797    flex-direction: row;
798}
799
800#main
801{
802    display: flex;
803    flex-grow: 1;
804}
805
806.page-info
807{
808    margin-top: 24px;
809    font-size: 0.9em;
810}
811
812
813
814
815div#view>*
816{
817    padding-left: 0px;
818    padding-right: 0px;
819}
820
821div#view, div#sidebar
822{
823    padding-top: 16px;
824    padding-bottom: 16px;
825}
826
827.site-header
828{
829    border-bottom: 1px solid var(--border-color);
830}
831
832.site-header
833{
834    display: flex;
835    flex-direction: column;
836    padding-top: 8px;
837    padding-bottom: 8px;
838    padding-left: 16px;
839    padding-right: 16px;
840    gap: 8px;
841}
842
843#view>.site-header
844{
845    padding-top: 0px;
846    padding-left: 0px;
847    padding-right: 0px;
848}
849
850.site-header .site-header-content
851{
852    padding: 8px 0px;
853}
854
855#view>.site-header .site-header-content
856{
857    padding: 0px;
858}
859
860.site-navigation
861{
862    display: flex;
863    flex-direction: column;
864    gap: 8px;
865}
866
867
868
869.site-header-content>*:last-child, footer>*:last-child
870{
871    margin-bottom: 0px;
872}
873
874footer
875{
876    padding: 16px;
877    border-top: 1px solid var(--border-color);
878}
879
880#view>footer
881{
882    padding-bottom: 0px;
883}
884
885
886article#content
887{
888    flex-grow: 1;
889}
890
891article#content h1
892{
893    font-size: 2em;
894}
895article#content h2
896{
897    font-size: 1.5em;
898}
899
900article#content h3
901{
902    font-size: 1.25em;
903}
904
905article#content h4
906{
907    font-size: 1em;
908}
909
910h1, h2, h3, h4, h5, h6
911{
912    color: var(--text-color);
913}
914
915.menu
916{
917    position: relative;
918    cursor: pointer;
919}
920
921
922.menu .list
923{
924    display: none;
925    position: absolute;
926    right: 0px;
927    background-color: var(--background);
928    border: 1px solid var(--border-color);
929    min-width: 200px;
930    padding: 8px 0px;
931    top: 44px;
932    z-index: 20000;
933    border-radius: 3px;
934}
935.menu .list li
936{
937    list-style: none;
938    margin: 0px;
939    padding: 0px;
940}
941
942.menu .list li>a
943{
944    display: flex;
945    flex-direction: row-reverse;
946    justify-content: flex-end;
947    align-items: center;
948    gap: 16px;
949    text-decoration: none;
950    color: var(--text-color) ;
951    padding: 4px 16px ;
952}
953.menu .list li>a:hover
954{
955    background-color: __background_alt__;
956}
957.menu .list li>a svg
958{
959    fill: __text_alt__;
960}
961
962.menu .list li.top
963{
964    display: none;
965}
966
967.menu .list .user-name
968{
969    padding: 8px 16px;
970    text-align: center;
971    font-weight: bold;
972}
973
974.menu .button
975{
976    display: flex;
977    gap: 4px;
978    align-items: center;
979    color: __text_alt__;
980}
981
982.menu .button:hover
983{
984    color: var(--text-color);
985}
986
987.user-menu .button::before {
988    mask-image: url('images/user-circle.svg');
989}
990
991.page-menu .button::before{
992    mask-image: url('images/document-text.svg');
993}
994
995.site-menu .button::before{
996    mask-image: url('images/server.svg');
997}
998
999#showhidesidemenu .button::before
1000{
1001    mask-image: url('images/menu.svg');
1002}
1003
1004#showhideappoptions .button::before
1005{
1006    mask-image: url('images/three-dots-vertical.svg');
1007}
1008
1009
1010.menu .button::before, .mobile.icon .button::before
1011{
1012    display: block;
1013    content: "";
1014    background-size: 1em;
1015    mask-repeat: no-repeat;
1016    mask-size: contain;
1017    height: 1.2em;
1018    width: 1.2em;
1019    opacity: 0.9;
1020    background: __text_alt__;
1021}
1022
1023.menu .button:hover::before
1024{
1025    opacity: 1;
1026}
1027
1028
1029
1030.options
1031{
1032    display: flex;
1033    gap: 16px;
1034}
1035
1036
1037navbar .options
1038{
1039    gap: 0px;
1040}
1041
1042navbar .options .menu
1043{
1044    padding: 8px;
1045}
1046
1047.mobile.icon
1048{
1049    display: none;
1050    cursor: pointer;
1051}
1052
1053.mobile-menu
1054{
1055    display: none;
1056}
1057
1058/* Correcting Dokuwiki defaults */
1059ul.actions, .dokuwiki .editBar .editButtons
1060{
1061    display: flex;
1062    gap: 10px;
1063    flex-wrap: wrap;
1064}
1065#wiki__editbar
1066{
1067    margin-top: 15px;
1068    display: flex;
1069    flex-direction: column;
1070    gap: 15px;
1071}
1072
1073div#sidebar
1074{
1075    width: var(--sidebar-width);
1076    border-right: 1px solid var(--border-color);
1077    flex-shrink:0;
1078    flex-grow: 0;
1079}
1080
1081article#content
1082{
1083    position: relative;
1084}
1085
1086#dw__toc
1087{
1088    background-color: transparent;
1089    border: none;
1090    position: absolute;
1091    right: 0px;
1092    width: 15em;
1093}
1094
1095#dw__toc>div
1096{
1097    background-color: var(--background);
1098    border: 1px solid var(--border-color);
1099    border-radius: 3px;
1100    margin-top: 28px;
1101    width: 100%;
1102    padding: 0.5em 1em;
1103}
1104
1105article#content #dw__toc .toggle::before
1106{
1107    display: block;
1108    content: "";
1109    width: 24px;
1110    height: 24px;
1111    background: __text_alt__;
1112    mask: url('images/bullets.svg');
1113    mask-size: contain;
1114    cursor: pointer;
1115    opacity: 0.7;
1116    position: absolute;
1117    right: 0px;
1118}
1119
1120article#content #dw__toc .toggle
1121{
1122    height: 0px;
1123    margin: 0px;
1124    padding: 0px;
1125    overflow: hidden;
1126}
1127
1128#dw__toc
1129{
1130    display: none;
1131}
1132
1133#config__manager fieldset, #config__manager tr.default .input, #config__manager .value input,
1134#config__manager tr.default .input, #config__manager tr.default input, #config__manager tr.default textarea, #config__manager tr.default select, #config__manager .selectiondefault
1135{
1136    background: none;
1137}
1138
1139#config__manager .value input, #config__manager .value select,  #config__manager .value textarea
1140{
1141    border: 1px solid var(--border-color);
1142    padding: 0.5em 1em;
1143
1144}
1145#config__manager .value input:focus, #config__manager .value select:focus, #config__manager .value textarea:focus
1146{
1147     border: 1px solid #00b7ff;
1148     background-color: var(--background);
1149     box-shadow: none;
1150}
1151
1152.dokuwiki #config__manager table.inline tr:hover td
1153{
1154     background-color: var(--background);
1155}
1156
1157.dokuwiki .editBar .summary
1158{
1159    margin-bottom: 16px;
1160}
1161
1162.dokuwiki .editBar .summary input
1163{
1164    background: var(--background);
1165    border: 1px solid var(--border-color);
1166    padding: 0.2em 0.5em;
1167    border-radius: 3px;
1168    margin-left: 10px;
1169    margin-right: 10px;
1170}
1171
1172.dokuwiki .editBar .summary input.missing
1173{
1174    background: none;
1175    border-color: red;
1176
1177}
1178
1179pre.code
1180{
1181    padding: 0.5em 1em;
1182}
1183
1184#dw__toc ul li div.li
1185{
1186    padding: 0.25em;
1187}