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