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