1/**
2 * This file provides the main design styles
3 * across all template elements (typo, colors etc.)
4 */
5
6
7html, body {
8    background-color: @ini_background_site;
9}
10
11/* highlight selected tool */
12.mode_admin a.action.admin,
13.mode_login a.action.login,
14.mode_register a.action.register,
15.mode_profile a.action.profile,
16.mode_recent a.action.recent,
17.mode_index a.action.index,
18.mode_media a.action.media,
19.mode_revisions a.action.revs,
20.mode_backlink a.action.backlink,
21.mode_subscribe a.action.subscribe {
22    font-weight: bold;
23}
24
25.dokuwiki {
26    .page ol li,
27    .page ul li,
28    .aside ul li {
29        color: @ini_text;
30    }
31
32    .pageId {
33        float: right;
34        margin-right: -1em;
35        margin-bottom: -1px;
36        margin-top: -1.5em;
37        overflow: hidden;
38        padding: 0.5em 1em 0;
39
40        span {
41            font-size: @font-size-small;
42            border: solid @ini_background_alt;
43            border-width: 1px 1px 0;
44            background-color: @ini_background_site;
45            color: @ini_text_alt;
46            padding: .1em .35em;
47            border-top-left-radius: 2px;
48            border-top-right-radius: 2px;
49            box-shadow: 0 0 .5em @ini_text_alt;
50            display: block;
51        }
52    }
53
54    div.page {
55        clear: both;
56        overflow: hidden;
57        word-wrap: break-word;
58        background: @ini_background;
59        color: inherit;
60        padding: @page_padding-top @margin-default @margin-default;
61
62        @media @screen_max-md {
63            padding-right: (@margin-default * 1.6);
64        }
65
66        @media @screen_max-xs {
67            padding-left: @margin-small;
68        }
69
70        @media @screen_max-xxs {
71            padding-right: @margin-small;
72        }
73    }
74
75    .content #dokuwiki__pagetools {
76        @media @screen_max-md {
77            top: 4rem;
78        }
79    }
80
81    .docInfo {
82        font-size: @font-size-small;
83        text-align: right;
84    }
85
86    /* license note under edit window */
87    div.license {
88        font-size: @font-size-small;
89        line-height: @line-height-default;
90        padding-top: 1rem;
91
92        @media @screen_max-lg {
93            font-size: @font-size-default;
94        }
95
96        @media @screen_max-md {
97            font-size: @font-size-small;
98        }
99
100        * {
101            font-size: inherit;
102        }
103    }
104
105    [dir=rtl] & .docInfo {
106        text-align: left;
107    }
108
109    [dir=rtl] & .pageId {
110        float: left;
111        margin-left: -1em;
112        margin-right: 0;
113    }
114}
115
116caption,
117figcaption,
118summary,
119legend {
120    padding: 0;
121    margin: 0 0 .35em;
122    line-height: 1.2;
123}
124
125h1,
126h2,
127h3,
128h4,
129h5,
130h6 {
131    font-weight: bold;
132    padding: 0;
133    line-height: 1.2;
134    clear: both;
135}
136
137[dir=rtl] h1,
138[dir=rtl] h2,
139[dir=rtl] h3,
140[dir=rtl] h4,
141[dir=rtl] h5,
142[dir=rtl] h6 {
143    clear: right;
144}
145
146h1 {
147    font-size: @font-size-head1;
148    margin: 0 0 @font-size-head1;
149    padding-top: 1em;
150}
151
152h2 {
153    font-size: @font-size-head2;
154    margin: 0 0 @font-size-head2;
155    padding-top: (@font-size-head2 / 2);
156}
157
158h3 {
159    font-size: @font-size-head3;
160    margin: 0 0 @font-size-head3;
161    padding-top: (@font-size-head3 / 2);
162}
163
164h4 {
165    font-size: @font-size-head4;
166    margin: 0 0 @font-size-head4;
167    padding-top: (@font-size-head4 / 2);
168}
169
170h5 {
171    font-size: @font-size-head5;
172    margin: 0 0 @font-size-head5;
173    padding-top: (@font-size-head5 / 2);
174}
175
176h6 {
177    font-size: @font-size-head6;
178    font-weight: @font-weight-bold;
179    margin: 0 0 @font-size-head6;
180    padding-top: (@font-size-head6 / 2);
181}
182
183p {
184    font-size: @font-size-default;
185    line-height: @line-height-big;
186
187    a,
188    span,
189    strong {
190        font-size: inherit;
191    }
192}
193
194label,
195legend,
196button {
197    font-size: @font-size-default;
198
199    a,
200    span,
201    strong {
202        font-size: inherit;
203    }
204}
205
206hr,
207figure,
208details,
209address {
210    font-size: @font-size-default;
211    line-height: 140%;
212}
213
214p,
215ul,
216ol,
217dl,
218pre,
219table,
220hr,
221blockquote,
222figure,
223details,
224fieldset,
225address {
226    margin: 0 0 1.4em; /* bottom margin = line-height */
227    padding: 0;
228}
229
230div,
231video,
232audio {
233    margin: 0;
234    padding: 0;
235}
236
237small,
238.code {
239    font-size: @font-size-small;
240}
241
242.code {
243    margin-top: @grid;
244
245    // SPR-926: darker colors for accessibility
246    .es6 {
247        color: #00832B;
248    }
249
250    .kw5 {
251        color: #005D00;
252    }
253
254    .kw6 {
255        color: #DC0075;
256    }
257
258    .nu0 {
259        color: #A74DA7;
260    }
261
262    .re3 {
263        color: #DE1B1B;
264    }
265
266    .re4 {
267        color: #007F6F;
268    }
269
270    .br0, .sy0 {
271        color: #248124;
272    }
273
274    .co1, .coMULTI, .sc-1 {
275        color: #707070;
276    }
277
278    .co2, .sy1 {
279        color: #108400;
280    }
281
282    .co3, .sy4 {
283        color: #008070;
284    }
285
286    .kw1, .kw8 {
287        color: #747400;
288    }
289
290    .re1, .st0, .st_h {
291        color: #DD0000;
292    }
293}
294
295/* + + +  lists   + + + */
296ul,
297ol {
298    font-size: @font-size-default;
299    line-height: 140%;
300    padding: 0 0 0 1.5em;
301}
302
303[dir=rtl] ul,
304[dir=rtl] ol {
305    padding: 0 1.5em 0 0;
306}
307
308li,
309dd {
310    padding: 0;
311    margin: 0 0 0 1.5em;
312}
313
314[dir=rtl] li,
315[dir=rtl] dd {
316    margin: 0 1.5em 0 0;
317}
318
319dl {
320    font-size: @font-size-default;
321    line-height: 140%;
322}
323
324dt,
325dd {
326    line-height: inherit;
327}
328
329dt {
330    font-weight: bold;
331    margin: 0;
332    padding: 0;
333}
334
335li ul,
336li ol,
337li dl,
338dl ul,
339dl ol,
340dl dl {
341    margin-bottom: 0;
342    padding: 0;
343}
344
345li li {
346    font-size: 100%;
347}
348
349ul {
350    list-style: square outside;
351}
352
353ol {
354    list-style: decimal outside;
355}
356
357ol ol {
358    list-style-type: lower-alpha;
359}
360
361ol ol ol {
362    list-style-type: upper-roman;
363}
364
365ol ol ol ol {
366    list-style-type: upper-alpha;
367}
368
369ol ol ol ol ol {
370    list-style-type: lower-roman;
371}
372
373/* + + +  tables   + + + */
374.dokuwiki {
375    table.inline tr:hover {
376        th {
377            background-color: fade(@ini_background_alt, 50%);
378        }
379
380        td {
381            background-color: fade(@ini_background_alt, 80%);
382            color: @ini_text_alt;
383
384            *:not(button,a) {
385                color: @ini_text_alt;
386            }
387        }
388    }
389}
390
391table {
392    border-collapse: collapse;
393    empty-cells: show;
394    border-spacing: 0;
395    border: 1px solid @ini_border;
396    font-size: @font-size-default;
397    line-height: 140%;
398}
399
400caption {
401    caption-side: top;
402    text-align: left;
403}
404
405[dir=rtl] caption {
406    text-align: right;
407}
408
409th,
410td {
411    padding: .3em .5em;
412    margin: 0;
413    vertical-align: top;
414    border: 1px solid @ini_border;
415}
416
417th {
418    font-weight: bold;
419    background-color: @ini_background_alt;
420    color: @ini_text_alt;
421    text-align: left;
422
423    a {
424        color: @ini_link_alt;
425    }
426}
427
428[dir=rtl] th {
429    text-align: right;
430}
431
432a {
433    outline: none;
434
435    &:link,
436    &:visited {
437        text-decoration: none;
438        color: @ini_link; // links to non wikipages (external links)
439    }
440
441    &:hover,
442    &:focus,
443    &:active {
444        text-decoration: underline;
445    }
446}
447
448img {
449    display: inline-block;
450    border-width: 0;
451    vertical-align: middle;
452    color: #666;
453    background-color: transparent;
454    font-style: italic;
455    height: auto;
456}
457
458img,
459object,
460embed,
461iframe,
462video,
463audio {
464    max-width: 100%;
465}
466
467button img {
468    max-width: none;
469}
470
471hr {
472    border-top: solid @ini_border;
473    border-bottom: solid @ini_background_site;
474    border-width: 1px 0;
475    height: 0;
476    text-align: center;
477    clear: both;
478}
479
480acronym,
481abbr {
482    cursor: help;
483    border-bottom: 1px dotted;
484    font-style: normal;
485}
486
487em acronym,
488em abbr {
489    font-style: italic;
490}
491
492mark {
493    background-color: @ini_highlight;
494    color: @ini_highlight_text;
495}
496
497pre,
498code,
499samp,
500kbd {
501    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
502    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
503    font-size: @font-size-default;
504    direction: ltr;
505    text-align: left;
506    background-color: @code-background;
507    color: @noopentasks-color;
508    box-shadow: inset 0 0 .3em @noopentasks-border;
509    border-radius: @fix_border-radius;
510    padding-left: @small-spacing;
511    padding-right: @small-spacing;
512
513    * {
514        font-family: inherit;
515        font-size: inherit;
516    }
517
518    span {
519        color: inherit;
520    }
521
522    a {
523        &:link,
524        &:visited {
525            color: inherit;
526            text-decoration: underline;
527        }
528
529        &:hover,
530        &:focus,
531        &:active {
532            text-decoration: none;
533        }
534    }
535}
536
537pre {
538    overflow: auto;
539    word-wrap: normal;
540    border: 1px solid @noopentasks-border;
541    font-size: @font-size-default;
542    line-height: 140%;
543    padding: .7em 1em;
544}
545
546code:not([class]) {
547    display: inline-block;
548}
549
550blockquote {
551    border: solid @ini_border;
552    border-width: 0 0 0 .25em;
553    font-size: @font-size-default;
554    line-height: 140%;
555    padding: 0 .5em;
556}
557
558[dir=rtl] blockquote {
559    border-width: 0 .25em 0 0;
560}
561
562q:before,
563q:after {
564    content: '';
565}
566
567sub,
568sup {
569    font-size: .8em;
570    line-height: 1;
571}
572
573sub {
574    vertical-align: sub;
575}
576
577sup {
578    vertical-align: super;
579}
580
581small {
582    font-size: .9em;
583}
584