xref: /template/sprintdoc/css/base_design.less (revision 0c9df3be9ec908914549daaed916f6648f656dd6) 
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}
155
156h3 {
157    font-size: @font-size-head3;
158    margin: 0 0 @font-size-head3;
159}
160
161h4 {
162    font-size: @font-size-head4;
163    margin: 0 0 @font-size-head4;
164}
165
166h5 {
167    font-size: @font-size-head5;
168    margin: 0 0 @font-size-head5;
169}
170
171h6 {
172    font-size: @font-size-head6;
173    font-weight: @font-weight-bold;
174    margin: 0 0 @font-size-head6;
175}
176
177p {
178    font-size: @font-size-default;
179    line-height: 135%;
180
181    a,
182    span,
183    strong {
184        font-size: inherit;
185    }
186}
187
188label,
189legend,
190button {
191    font-size: @font-size-default;
192
193    a,
194    span,
195    strong {
196        font-size: inherit;
197    }
198}
199
200hr,
201figure,
202details,
203address {
204    font-size: @font-size-default;
205    line-height: 140%;
206}
207
208p,
209ul,
210ol,
211dl,
212pre,
213table,
214hr,
215blockquote,
216figure,
217details,
218fieldset,
219address {
220    margin: 0 0 1.4em; /* bottom margin = line-height */
221    padding: 0;
222}
223
224div,
225video,
226audio {
227    margin: 0;
228    padding: 0;
229}
230
231small,
232.code {
233    font-size: @font-size-small;
234}
235
236.code {
237    margin-top: @grid;
238}
239
240
241/*____________ lists ____________*/
242
243ul,
244ol {
245    font-size: @font-size-default;
246    line-height: 140%;
247    padding: 0 0 0 1.5em;
248}
249
250[dir=rtl] ul,
251[dir=rtl] ol {
252    padding: 0 1.5em 0 0;
253}
254
255li,
256dd {
257    padding: 0;
258    margin: 0 0 0 1.5em;
259}
260
261[dir=rtl] li,
262[dir=rtl] dd {
263    margin: 0 1.5em 0 0;
264}
265
266dl {
267    font-size: @font-size-default;
268    line-height: 140%;
269}
270
271dt {
272    font-weight: bold;
273    margin: 0;
274    padding: 0;
275}
276
277li ul,
278li ol,
279li dl,
280dl ul,
281dl ol,
282dl dl {
283    margin-bottom: 0;
284    padding: 0;
285}
286
287li li {
288    font-size: 100%;
289}
290
291ul {
292    list-style: square outside;
293}
294
295ol {
296    list-style: decimal outside;
297}
298
299ol ol {
300    list-style-type: lower-alpha;
301}
302
303ol ol ol {
304    list-style-type: upper-roman;
305}
306
307ol ol ol ol {
308    list-style-type: upper-alpha;
309}
310
311ol ol ol ol ol {
312    list-style-type: lower-roman;
313}
314
315
316/*____________ tables ____________*/
317
318.dokuwiki table.inline tr:hover td {
319    color: @ini_text_alt;
320
321    * {
322        color: @ini_text_alt;
323    }
324}
325
326table {
327    border-collapse: collapse;
328    empty-cells: show;
329    border-spacing: 0;
330    border: 1px solid @ini_border;
331    font-size: @font-size-default;
332    line-height: 140%;
333}
334
335caption {
336    caption-side: top;
337    text-align: left;
338}
339
340[dir=rtl] caption {
341    text-align: right;
342}
343
344th,
345td {
346    padding: .3em .5em;
347    margin: 0;
348    vertical-align: top;
349    border: 1px solid @ini_border;
350}
351
352th {
353    font-weight: bold;
354    background-color: @ini_background_alt;
355    color: @ini_text_alt;
356    text-align: left;
357}
358
359[dir=rtl] th {
360    text-align: right;
361}
362
363a {
364    outline: none;
365
366    &:link,
367    &:visited {
368        text-decoration: none;
369        color: @ini_link;
370    }
371
372    &:hover,
373    &:focus,
374    &:active {
375        text-decoration: underline;
376    }
377}
378
379img {
380    display: inline-block;
381    border-width: 0;
382    vertical-align: middle;
383    color: #666;
384    background-color: transparent;
385    font-style: italic;
386    height: auto;
387}
388
389img,
390object,
391embed,
392iframe,
393video,
394audio {
395    max-width: 100%;
396}
397
398button img {
399    max-width: none;
400}
401
402hr {
403    border-top: solid @ini_border;
404    border-bottom: solid @ini_background;
405    border-width: 1px 0;
406    height: 0;
407    text-align: center;
408    clear: both;
409}
410
411acronym,
412abbr {
413    cursor: help;
414    border-bottom: 1px dotted;
415    font-style: normal;
416}
417
418em acronym,
419em abbr {
420    font-style: italic;
421}
422
423mark {
424    background-color: @ini_highlight;
425    color: @ini_highlight_text;
426}
427
428pre,
429code,
430samp,
431kbd {
432    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
433    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
434    font-size: @font-size-default;
435    direction: ltr;
436    text-align: left;
437    background-color: @ini_background_content;
438    color: @ini_text;
439    box-shadow: inset 0 0 .3em @ini_border;
440    border-radius: @fix_border-radius;
441}
442
443pre {
444    overflow: auto;
445    word-wrap: normal;
446    border: 1px solid @ini_border;
447    border-radius: @fix_border-radius;
448    box-shadow: inset 0 0 .5em @ini_border;
449    font-size: @font-size-default;
450    line-height: 140%;
451    padding: .7em 1em;
452}
453
454blockquote {
455    border: solid @ini_border;
456    border-width: 0 0 0 .25em;
457    font-size: @font-size-default;
458    line-height: 140%;
459    padding: 0 .5em;
460}
461
462[dir=rtl] blockquote {
463    border-width: 0 .25em 0 0;
464}
465
466q:before,
467q:after {
468    content: '';
469}
470
471sub,
472sup {
473    font-size: .8em;
474    line-height: 1;
475}
476
477sub {
478    vertical-align: sub;
479}
480
481sup {
482    vertical-align: super;
483}
484
485small {
486    font-size: .9em;
487}
488