xref: /template/minimal/css/basic.css (revision f9fbba3d000a2f654a1ce07c9bb31140c9e9773b) 
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    text-wrap: wrap;
352    word-wrap: break-word;
353}
354pre {
355    border: 1px solid var(--border-color);
356    padding: 0 .2em;
357    overflow: auto;
358    word-wrap: normal;
359    text-wrap: wrap;
360    word-wrap: break-word;
361}
362
363blockquote {
364    padding: 0 .5em;
365    border: solid var(--border-color);
366    border-width: 0 0 0 .25em;
367}
368[dir=rtl] blockquote {
369    border-width: 0 .25em 0 0;
370}
371q:before,
372q:after {
373    content: '';
374}
375
376sub,
377sup {
378    font-size: .8em;
379    line-height: 1;
380}
381sub {
382    vertical-align: sub;
383}
384sup {
385    vertical-align: super;
386}
387
388small {
389    font-size: .8em;
390}
391
392wbr {
393    display: inline-block;
394}
395
396/*____________ forms ____________*/
397
398form {
399    display: inline;
400    margin: 0;
401    padding: 0;
402}
403
404fieldset {
405    padding: .7em 1em 0;
406    padding: .7rem 1rem; /* for those browsers understanding :last-child */
407    border: 1px solid #999;
408}
409fieldset > :last-child {
410    margin-bottom: 0;
411}
412legend {
413    padding: 0 .1em;
414}
415
416label {
417    vertical-align: middle;
418    cursor: pointer;
419}
420
421input,
422textarea,
423button,
424select,
425optgroup,
426option,
427keygen,
428output,
429meter,
430progress {
431    font: inherit;
432    color: inherit;
433    /* background-color destroys button look */
434    line-height: normal;
435    margin: 0;
436    vertical-align: middle;
437    -moz-box-sizing: content-box;
438    -webkit-box-sizing: content-box;
439    box-sizing: content-box;
440}
441
442input,
443button,
444select,
445keygen,
446textarea {
447    padding: .1em;
448}
449input[type=radio],
450input[type=checkbox],
451input[type=image],
452input.check {
453    padding: 0;
454}
455
456input[type=submit],
457input[type=button],
458input[type=reset],
459input.button,
460button {
461    cursor: pointer;
462    overflow: visible;
463    padding: .1em .4em;
464}
465
466input[disabled],
467button[disabled],
468select[disabled],
469textarea[disabled],
470option[disabled],
471input[readonly],
472button[readonly],
473select[readonly],
474textarea[readonly] {
475    cursor: auto;
476    opacity: .5;
477}
478
479input:focus,
480button:focus,
481select:focus,
482keygen:focus,
483textarea:focus {
484    box-shadow: 0 0 5px #999;
485    outline: 0;
486
487}
488input::-moz-focus-inner,
489button::-moz-focus-inner {
490    border: 0;
491    padding: 0;
492}
493
494select {
495    max-width: 100%;
496}
497optgroup {
498    font-style: italic;
499    font-weight: bold;
500}
501option {
502    font-style: normal;
503    font-weight: normal;
504}
505
506#config__manager tr .input, #config__manager tr input, #config__manager tr textarea, #config__manager tr select,#config__manager fieldset,
507#config__manager tr.default .input, #config__manager tr.default input, #config__manager tr.default textarea, #config__manager tr.default select, #config__manager .selectiondefault
508{
509    color: var(--text-color);
510}
511
512#config__manager tr .input, #config__manager tr input, #config__manager tr textarea, #config__manager tr select
513{
514    background-color: var(--background);
515}
516
517.JSpopup
518{
519    background-color: var(--background) !important;
520    border-color: var(--border-color) !important;
521}
522
523
524/*____________ links to wiki pages (addition to _links) ____________*/
525
526/* existing wikipage */
527.dokuwiki a.wikilink1 {
528    color: var(--link-color-existing);
529    background-color: inherit;
530}
531/* not existing wikipage */
532.dokuwiki a.wikilink2 {
533    color: var(--link-color-missing);
534    background-color: inherit;
535}
536
537
538/*____________ images ____________*/
539
540/* embedded images (styles are already partly set in DokuWiki's lib/styles/all.css) */
541.dokuwiki img.media {
542    margin: .2em 0;
543}
544.dokuwiki img.medialeft {
545    margin: .2em 1.5em .2em 0;
546}
547.dokuwiki img.mediaright {
548    margin: .2em 0 .2em 1.5em;
549}
550.dokuwiki img.mediacenter {
551    margin: .2em auto;
552}
553
554
555/*____________ tables ____________*/
556
557/* div before each table */
558.dokuwiki div.table {
559}
560
561.dokuwiki table.inline {
562    min-width: 50%;
563}
564.dokuwiki table.inline tr:hover td {
565    background-color: var(--background-alt);
566}
567.dokuwiki table.inline tr:hover th {
568    background-color: var(--border-color);
569}
570
571
572/*____________ code ____________*/
573
574/* fix if background-color hides underlining */
575.dokuwiki em.u code {
576    text-decoration: underline;
577}
578
579/* filenames for downloadable file and code blocks */
580.dokuwiki dl.code,
581.dokuwiki dl.file {
582}
583
584.dokuwiki dl.code dt,
585.dokuwiki dl.file dt {
586    background-color: var(--background-alt);
587    border: solid var(--border-color);
588    border-width: 1px 1px 0;
589    color: inherit;
590    display: inline;
591    padding: .1em .5em .2em;
592    margin-left: 1em;
593}
594[dir=rtl] .dokuwiki dl.code dt,
595[dir=rtl] .dokuwiki dl.file dt {
596    margin-left: 0;
597    margin-right: 1em;
598}
599.dokuwiki dl.code dt a,
600.dokuwiki dl.file dt a {
601}
602
603.dokuwiki dl.code dd,
604.dokuwiki dl.file dd {
605    margin: 0;
606}
607
608/* for code in <file> */
609.dokuwiki pre.file,
610.dokuwiki dl.file pre,
611.dokuwiki dl.file dt {
612    border-color: var(--border-color);
613}
614
615
616/*____________ media manager ____________*/
617
618/* some headings in the media manager should not look like headings */
619#mediamanager__page h2,
620#mediamanager__page h3 {
621    font-family: Frutiger, Calibri, Myriad, "Nimbus Sans L", Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
622    color: var(--text-color);
623}
624
625/* to style button-like div in _fileuploader.css to look like other buttons,
626   please add '.qq-upload-button' to the according styles (which don't really exist in this template) */
627.qq-upload-button {
628    border: 1px solid var(--border-color);
629    background-color: var(--background-alt);
630    padding: 0.125em 0.4em;
631}
632
633/*____________ styling plugin ____________*/
634
635#plugin__styling.ispopup {
636    padding: 1em;
637}
638
639
640/*____________ JS popup ____________*/
641
642.JSpopup {
643    background-color: var(--background);
644    color: var(--text-color);
645    border: 1px solid var(--border-color);
646    line-height: 1.2;
647    padding: 0 .2em;
648}
649
650.JSpopup ul,
651.JSpopup ol {
652    padding-left: 0;
653}
654[dir=rtl] .JSpopup ul,
655[dir=rtl] .JSpopup ol {
656    padding-right: 0;
657}
658
659
660/* CSS starts */
661
662.hide
663{
664    display: none;
665}
666
667.flex-fill
668{
669    flex-grow: 1;
670}
671
672.left-column {
673    display: flex;
674    flex-wrap: wrap;
675    flex-direction: column;
676    gap: 16px;
677    padding: 8px 16px;
678}
679
680.right-column {
681    display: flex;
682    flex-wrap: wrap;
683    flex-direction: column;
684    flex-grow: 1;
685    gap: 16px;
686    padding: 8px 16px;
687}
688
689
690
691navbar
692{
693    display: flex;
694    border-bottom: 1px solid var(--border-color);
695    line-height: 1;
696}
697
698navbar .site-name
699{
700    display: flex;
701    gap: 16px;
702    align-items: center;
703}
704
705
706navbar .site-name .site-logo
707{
708    width: 24px;
709    height: 24px;
710}
711navbar .site-name .site-title
712{
713    font-weight: bold;
714    font-size: 1.2rem;
715    padding: 8px 0px;
716}
717
718navbar a.site-name, navbar a.site-name:hover
719{
720    color: __title_color__;
721    text-decoration: none;
722}
723
724navbar form.search button {
725    background-color: transparent;
726    background-image: url("images/search.svg");
727    border-width: 0;
728    background-size: 14px;
729    background-repeat: no-repeat;
730    width: 19px;
731    height: 14px;
732    text-indent: -99999px;
733    margin-left: -20px;
734    box-shadow: none;
735    padding: 0;
736    position: relative;
737    top:0px;
738    right: 5px;
739    opacity: 0.5;
740}
741
742navbar form.search input
743{
744    padding: 0.5em 1em;
745    padding-right: 2em;
746    width: 20rem;
747    border: 1px solid var(--border-color);
748    border-radius: 3px;
749    box-sizing: border-box;
750    background-color: var(--background);
751}
752navbar form.search input:focus
753{
754    box-shadow: none;
755}
756
757#navbar .left-column
758{
759    flex-direction: row;
760    align-items: center;
761}
762#navbar .right-column {
763    border: none;
764    flex-direction: row-reverse;
765    gap: 16px;
766    align-items: center;
767}
768
769#qsearch__out
770{
771    display: none;
772    padding: 0.5em 1em;
773    width: 20rem;
774    left: unset;
775    top: unset;
776}
777
778#qsearch__out>strong
779{
780    color: __text_alt__;
781    margin-bottom: 1em;
782}
783#qsearch__out ul, #qsearch__out ol, #qsearch__out li
784{
785    margin: 0px;
786}
787
788#qsearch__out li
789{
790    margin: 4px 0px;
791}
792
793navbar .right-column .options
794{
795    display: flex;
796    flex-direction: row;
797}
798
799#main
800{
801    display: flex;
802    flex-grow: 1;
803}
804
805.page-info
806{
807    margin-top: 24px;
808    font-size: 0.9em;
809}
810
811
812
813
814div#view>*
815{
816    padding-left: 0px;
817    padding-right: 0px;
818}
819
820div#view, div#sidebar
821{
822    padding-top: 16px;
823    padding-bottom: 16px;
824}
825
826.site-header
827{
828    border-bottom: 1px solid var(--border-color);
829}
830
831.site-header
832{
833    display: flex;
834    flex-direction: column;
835    padding-top: 8px;
836    padding-bottom: 8px;
837    padding-left: 16px;
838    padding-right: 16px;
839    gap: 8px;
840}
841
842#view>.site-header
843{
844    padding-top: 0px;
845    padding-left: 0px;
846    padding-right: 0px;
847}
848
849.site-header .site-header-content
850{
851    padding: 8px 0px;
852}
853
854#view>.site-header .site-header-content
855{
856    padding: 0px;
857}
858
859.site-navigation
860{
861    display: flex;
862    flex-direction: column;
863    gap: 8px;
864}
865
866
867
868.site-header-content>*:last-child, footer>*:last-child
869{
870    margin-bottom: 0px;
871}
872
873footer
874{
875    padding: 16px;
876    border-top: 1px solid var(--border-color);
877}
878
879#view>footer
880{
881    padding-bottom: 0px;
882}
883
884
885article#content
886{
887    flex-grow: 1;
888}
889
890article#content h1
891{
892    font-size: 2em;
893}
894article#content h2
895{
896    font-size: 1.5em;
897}
898
899article#content h3
900{
901    font-size: 1.25em;
902}
903
904article#content h4
905{
906    font-size: 1em;
907}
908
909h1, h2, h3, h4, h5, h6
910{
911    color: var(--text-color);
912}
913
914.menu
915{
916    position: relative;
917    cursor: pointer;
918}
919
920
921.menu .list
922{
923    display: none;
924    position: absolute;
925    right: 0px;
926    background-color: var(--background);
927    border: 1px solid var(--border-color);
928    min-width: 200px;
929    padding: 8px 0px;
930    top: 44px;
931    z-index: 20000;
932    border-radius: 3px;
933}
934.menu .list li
935{
936    list-style: none;
937    margin: 0px;
938    padding: 0px;
939}
940
941.menu .list li>a
942{
943    display: flex;
944    flex-direction: row-reverse;
945    justify-content: flex-end;
946    align-items: center;
947    gap: 16px;
948    text-decoration: none;
949    color: var(--text-color) ;
950    padding: 4px 16px ;
951}
952.menu .list li>a:hover
953{
954    background-color: __background_alt__;
955}
956.menu .list li>a svg
957{
958    fill: __text_alt__;
959}
960
961.menu .list li.top
962{
963    display: none;
964}
965
966.menu .list .user-name
967{
968    padding: 8px 16px;
969    text-align: center;
970    font-weight: bold;
971}
972
973.menu .button
974{
975    display: flex;
976    gap: 4px;
977    align-items: center;
978    color: __text_alt__;
979}
980
981.menu .button:hover
982{
983    color: var(--text-color);
984}
985
986.user-menu .button::before {
987    mask-image: url('images/user-circle.svg');
988}
989
990.page-menu .button::before{
991    mask-image: url('images/document-text.svg');
992}
993
994.site-menu .button::before{
995    mask-image: url('images/server.svg');
996}
997
998#showhidesidemenu .button::before
999{
1000    mask-image: url('images/menu.svg');
1001}
1002
1003#showhideappoptions .button::before
1004{
1005    mask-image: url('images/three-dots-vertical.svg');
1006}
1007
1008
1009.menu .button::before, .mobile.icon .button::before
1010{
1011    display: block;
1012    content: "";
1013    background-size: 1em;
1014    mask-repeat: no-repeat;
1015    mask-size: contain;
1016    height: 1.2em;
1017    width: 1.2em;
1018    opacity: 0.9;
1019    background: __text_alt__;
1020}
1021
1022.menu .button:hover::before
1023{
1024    opacity: 1;
1025}
1026
1027
1028
1029.options
1030{
1031    display: flex;
1032    gap: 16px;
1033}
1034
1035
1036navbar .options
1037{
1038    gap: 0px;
1039}
1040
1041navbar .options .menu
1042{
1043    padding: 8px;
1044}
1045
1046.mobile.icon
1047{
1048    display: none;
1049    cursor: pointer;
1050}
1051
1052.mobile-menu
1053{
1054    display: none;
1055}
1056
1057/* Correcting Dokuwiki defaults */
1058ul.actions, .dokuwiki .editBar .editButtons
1059{
1060    display: flex;
1061    gap: 10px;
1062    flex-wrap: wrap;
1063}
1064#wiki__editbar
1065{
1066    margin-top: 15px;
1067    display: flex;
1068    flex-direction: column;
1069    gap: 15px;
1070}
1071
1072div#sidebar
1073{
1074    width: var(--sidebar-width);
1075    border-right: 1px solid var(--border-color);
1076    flex-shrink:0;
1077    flex-grow: 0;
1078}
1079
1080article#content
1081{
1082    position: relative;
1083}
1084
1085#dw__toc
1086{
1087    background-color: transparent;
1088    border: none;
1089    position: absolute;
1090    right: 0px;
1091    width: 15em;
1092}
1093
1094#dw__toc>div
1095{
1096    background-color: var(--background);
1097    border: 1px solid var(--border-color);
1098    border-radius: 3px;
1099    margin-top: 28px;
1100    width: 100%;
1101    padding: 0.5em 1em;
1102}
1103
1104.dokuwiki.stoc #dw__toc>div
1105{
1106    position: absolute;
1107    overflow: scroll;
1108    max-height: calc(500px);
1109    height: 100vh;
1110}
1111
1112article#content #dw__toc .toggle::before
1113{
1114    display: block;
1115    content: "";
1116    width: 24px;
1117    height: 24px;
1118    background: __text_alt__;
1119    mask: url('images/bullets.svg');
1120    mask-size: contain;
1121    cursor: pointer;
1122    opacity: 0.7;
1123    position: absolute;
1124    right: 0px;
1125}
1126
1127article#content #dw__toc .toggle
1128{
1129    height: 0px;
1130    margin: 0px;
1131    padding: 0px;
1132    overflow: hidden;
1133}
1134
1135#dw__toc
1136{
1137    display: none;
1138}
1139
1140#config__manager fieldset, #config__manager tr.default .input, #config__manager .value input,
1141#config__manager tr.default .input, #config__manager tr.default input, #config__manager tr.default textarea, #config__manager tr.default select, #config__manager .selectiondefault
1142{
1143    background: none;
1144}
1145
1146#config__manager .value input, #config__manager .value select,  #config__manager .value textarea
1147{
1148    border: 1px solid var(--border-color);
1149    padding: 0.5em 1em;
1150
1151}
1152#config__manager .value input:focus, #config__manager .value select:focus, #config__manager .value textarea:focus
1153{
1154     border: 1px solid #00b7ff;
1155     background-color: var(--background);
1156     box-shadow: none;
1157}
1158
1159.dokuwiki #config__manager table.inline tr:hover td
1160{
1161     background-color: var(--background);
1162}
1163
1164.dokuwiki .editBar .summary
1165{
1166    margin-bottom: 16px;
1167}
1168
1169.dokuwiki .editBar .summary input
1170{
1171    background: var(--background);
1172    border: 1px solid var(--border-color);
1173    padding: 0.2em 0.5em;
1174    border-radius: 3px;
1175    margin-left: 10px;
1176    margin-right: 10px;
1177}
1178
1179.dokuwiki .editBar .summary input.missing
1180{
1181    background: none;
1182    border-color: red;
1183
1184}
1185
1186pre.code
1187{
1188    padding: 0.5em 1em;
1189}
1190
1191#dw__toc ul li div.li
1192{
1193    padding: 0.25em;
1194}
1195
1196
1197.dokuwiki.stoc #dw__toc
1198{
1199    position: sticky;
1200    top: 10px;
1201}
1202