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