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 Anika Henke <anika@selfthinker.org>
9 */
10
11::-moz-selection {
12    background: var(--selection_background, #275c9c);
13    color: var(--selection_color, white);
14}
15
16::selection {
17    background: var(--selection_background, #275c9c);
18    color: var(--selection_color, white);
19}
20
21html {
22    overflow-x: auto;
23    overflow-y: scroll;
24}
25html,
26body {
27    color: var(--text, #333);
28    background: var(--background_site, #fbfaf9) url(images/page-gradient.png) top left repeat-x;
29    margin: 0;
30    padding: 0;
31}
32body {
33    font: normal 87.5%/1.4 Arial, sans-serif;
34    /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
35    -webkit-text-size-adjust: 100%;
36}
37
38/*____________ scrollbars ____________*/
39
40/* The emerging W3C standard
41   that is currently Firefox-only */
42* {
43    scrollbar-color: var(--scrollbar_thumb) var(--scrollbar_track);
44}
45
46  /* Works on Chrome/Edge/Safari */
47::-webkit-scrollbar {
48    background: var(--scrollbar_track);
49    width: 12px;
50    height: 12px;
51}
52
53::-webkit-scrollbar-thumb {
54    background: var(--scrollbar_thumb);
55}
56
57/*____________ config manager ____________*/
58
59#config__manager fieldset{
60    color: var(--text, #000);
61    background-color: var(--background, #fff);
62}
63
64#config__manager td.label span.outkey {
65	font-size: 85%;
66    background-color: var(--background, #fff);
67}
68
69#config__manager tr .input,
70#config__manager tr input,
71#config__manager tr textarea,
72#config__manager tr select {
73    background-color: var(--background, #fff);
74    border: 1px solid var(--border,#333);
75    color: var(--text,#000);
76}
77
78#config__manager tr.default .input,
79#config__manager tr.default input,
80#config__manager tr.default textarea,
81#config__manager tr.default select,
82#config__manager .selectiondefault {
83    background-color: var(--background_site, #fff);
84    border: 1px solid var(--border,#333);
85    color: var(--text,#000);
86}
87
88#extension__manager ul.tabs li.active a {
89    background-color: var(--background_alt, #eee);
90    color: var(--text, #333);
91    border-bottom: none;
92}
93
94#extension__manager .panelHeader {
95    background-color: var(--background_alt, #eee);
96}
97
98#extension__list ul.extensionList li {
99    color: var(--text, #000);
100    background-color: var(--background, #fff);
101}
102
103#extension__list .legend div.popularity {
104    background-color: var(--background, #fff);
105    border: 1px solid var(--text_alt, #999)
106}
107
108#extension__list .legend div.popularity div {
109    background-color: var(--pre_text, #333);
110}
111/*____________ headers ____________*/
112
113caption,
114figcaption,
115summary,
116legend {
117    padding: 0;
118    margin: 0 0 .35em;
119    line-height: 1.2;
120}
121h1,
122h2,
123h3,
124h4,
125h5,
126h6 {
127    font-weight: bold;
128    padding: 0;
129    line-height: 1.3;
130    clear: left; /* ideally 'both', but problems with toc */
131}
132[dir=rtl] h1,
133[dir=rtl] h2,
134[dir=rtl] h3,
135[dir=rtl] h4,
136[dir=rtl] h5,
137[dir=rtl] h6 {
138    clear: right;
139}
140
141h1 {
142    font-size: 2em;
143    margin: 0 0 0.444em;
144	border-bottom: 1px solid var(--border, #333);
145}
146h2 {
147    font-size: 1.5em;
148    margin: 1.7em 0 0.666em;
149    border-bottom: 1px solid var(--border, #333);
150}
151h3 {
152    font-size: 1.125em;
153    margin: 1em 0 0.3em;
154}
155h4 {
156    font-size: 1em;
157    margin: 1em 0 0.3em;
158}
159h5 {
160    font-size: .875em;
161    margin: 1em 0 0.3em;
162}
163h6 {
164    font-size: .75em;
165    margin: 1em 0 0.3em;
166}
167/* bottom margin = 1 / font-size */
168
169
170/*____________ basic margins and paddings ____________*/
171
172p,
173ul,
174ol,
175dl,
176pre,
177table,
178hr,
179blockquote,
180figure,
181details,
182fieldset,
183address {
184    margin: 0 0 0.6em 0;
185    padding: 0;
186}
187
188div,
189video,
190audio {
191    margin: 0;
192    padding: 0;
193}
194
195
196/*____________ lists ____________*/
197
198ul,
199ol {
200    padding: 0 0 0 1.5em;
201}
202[dir=rtl] ul,
203[dir=rtl] ol {
204    padding: 0 1.5em 0 0;
205}
206
207li,
208dd {
209    padding: 0;
210    margin: 0 0 0 1.5em;
211}
212[dir=rtl] li,
213[dir=rtl] dd {
214    margin: 0 1.5em 0 0;
215}
216dt {
217    font-weight: bold;
218    margin: 0;
219    padding: 0;
220}
221
222li ul,
223li ol,
224li dl,
225dl ul,
226dl ol,
227dl dl {
228    margin-bottom: 0;
229    padding: 0;
230}
231li li {
232    font-size: 100%;
233}
234
235ul             { list-style: disc; }
236ol             { list-style: decimal outside; }
237ol ol          { list-style-type: lower-alpha; }
238ol ol ol       { list-style-type: lower-roman; }
239ol ol ol ol    { list-style-type: lower-greek; }
240ol ol ol ol ol { list-style-type: lower-latin; }
241
242
243/*____________ tables ____________*/
244
245table {
246    border-collapse: collapse;
247    empty-cells: show;
248    border-spacing: 0;
249    border: 1px solid var(--border, #ccc);
250}
251
252caption {
253    caption-side: top;
254    text-align: left;
255}
256[dir=rtl] caption {
257    text-align: right;
258}
259
260th,
261td {
262    padding: .3em .5em;
263    margin: 0;
264    vertical-align: top;
265    border: 1px solid var(--border, #ccc);
266}
267th {
268    font-weight: bold;
269    background-color: var(--background_alt, #eee);
270    text-align: left;
271}
272[dir=rtl] th {
273    text-align: right;
274}
275
276
277/*____________ links ____________*/
278
279a {
280    outline: none;
281}
282a:link,
283a:visited {
284    text-decoration: none;
285    color: var(--link, #2b73b7);
286}
287a:link:hover,
288a:visited:hover,
289a:link:focus,
290a:visited:focus,
291a:link:active,
292a:visited:active {
293    text-decoration: underline;
294}
295
296
297/*____________ misc ____________*/
298
299img {
300    border-width: 0;
301    vertical-align: middle;
302    color: var(--text_neu, #666);
303    background-color: transparent;
304    font-style: italic;
305    height: auto;
306}
307video {
308    height: auto;
309}
310img,
311object,
312embed,
313iframe,
314video,
315audio {
316    max-width: 100%;
317}
318button img {
319    max-width: none;
320}
321
322hr {
323    border-top: solid var(--border, #ccc);
324    border-bottom: solid var(--border, #ccc);
325    border-width: 1px 0;
326    height: 0;
327    text-align: center;
328    clear: both;
329}
330
331acronym,
332abbr {
333    cursor: help;
334    border-bottom: 1px dotted;
335    font-style: normal;
336}
337em acronym,
338em abbr {
339    font-style: italic;
340}
341
342mark {
343    background-color: var(--highlight, #ff9);
344    color: inherit;
345}
346
347code,
348samp,
349kbd {
350    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
351    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
352    font-size: 89%;
353    direction: ltr;
354    text-align: left;
355    background-color: var(--pre_background, #fbfaf9);
356    color: var(--pre_text, #333);
357    box-shadow: none;
358    border-radius: 2px;
359    padding: 1.5px 4px 1.5px 4px;
360}
361
362pre {
363    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
364    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
365    font-size: 1em;
366    direction: ltr;
367    text-align: left;
368    background-color: var(--background_site, #fbfaf9);
369    color: var(--text, #333);
370    box-shadow: none;
371    border-radius: 2px;
372    overflow: auto;
373    word-wrap: normal;
374    border: 1px solid var(--border, #ccc);
375    border-radius: 2px;
376    box-shadow: none;
377    padding: .7em 1em;
378}
379
380blockquote {
381    padding: 0 .5em;
382    border: solid var(--border, #ccc);
383    border-width: 0 0 0 .25em;
384}
385[dir=rtl] blockquote {
386    border-width: 0 .25em 0 0;
387}
388q:before,
389q:after {
390    content: '';
391}
392
393sub,
394sup {
395    font-size: .8em;
396    line-height: 1;
397}
398sub {
399    vertical-align: sub;
400}
401sup {
402    vertical-align: super;
403}
404
405small {
406    font-size: .8em;
407}
408
409/*____________ forms ____________*/
410
411/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */
412
413form {
414    display: inline;
415    margin: 0;
416    padding: 0;
417}
418fieldset {
419    padding: .7em 1em 0;
420    padding: .7rem 1rem; /* for those browsers understanding :last-child */
421    border: 1px solid var(--text_alt, #999);
422}
423fieldset > :last-child {
424    margin-bottom: 0;
425}
426legend {
427    margin: 0;
428    padding: 0 .1em;
429}
430label {
431    vertical-align: middle;
432    cursor: pointer;
433}
434
435input,
436textarea,
437button,
438select,
439optgroup,
440option,
441keygen,
442output,
443meter,
444progress {
445    font: inherit;
446    font-weight: normal;
447    color: var(--text, #000);
448    background-color: var(--background, #fff);
449    line-height: normal;
450    margin: 0;
451    vertical-align: middle;
452    box-sizing: border-box;
453}
454
455select {
456    max-width: 100%;
457}
458optgroup {
459    font-style: italic;
460    font-weight: bold;
461}
462option {
463    font-style: normal;
464    font-weight: normal;
465}
466
467input,
468textarea,
469select,
470keygen {
471    border: 1px solid var(--border, #333);
472    box-shadow: none;
473    border-radius: 2px;
474}
475input:active,
476input:focus,
477textarea:active,
478textarea:focus,
479select:active,
480select:focus,
481keygen:active,
482keygen:focus {
483    border-color: #999;
484}
485input[type=radio],
486input[type=checkbox],
487input[type=image] {
488    padding: 0;
489    border-style: none;
490    box-shadow: none;
491}
492
493/* all types of buttons */
494input[type=submit],
495input[type=button],
496input[type=reset],
497input.button,
498a.button,
499button,
500.qq-upload-button {
501    color: var(--text, #000);
502    background-color: var(--background_alt, #eee);
503    border: 1px solid var(--border, #333);
504    border-radius: 2px;
505    padding: .1em .5em;
506    cursor: pointer;
507}
508
509input[type=submit]:hover,
510input[type=submit]:active,
511input[type=submit]:focus,
512input[type=button]:hover,
513input[type=button]:active,
514input[type=button]:hover,
515input[type=reset]:hover,
516input[type=reset]:active,
517input[type=reset]:hover,
518input.button:hover,
519input.button:active,
520input.button:focus,
521a.button:hover,
522a.button:active,
523a.button:focus,
524button:hover,
525button:active,
526button:focus,
527.qq-upload-button:hover {
528    border-color: var(--background_neu, #ddd);
529    background-color: var(--background_neu, #ddd);
530}
531
532input::-moz-focus-inner,
533button::-moz-focus-inner {
534    border: 0;
535    padding: 0;
536}
537
538input[disabled],
539button[disabled],
540select[disabled],
541textarea[disabled],
542option[disabled],
543input[readonly],
544button[readonly],
545select[readonly],
546textarea[readonly] {
547    cursor: auto;
548    opacity: .5;
549    background-color: var(--background_alt, #eee);
550    color: var(--text_alt, #999);
551}
552