xref: /template/sprintdoc/css/base_design.less (revision 7a4b2bb9cc493fc384801c9698b9fd49e4ceed06) 
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
13a {
14    color: @color-link;
15}
16
17
18/* highlight selected tool */
19
20.mode_admin a.action.admin,
21.mode_login a.action.login,
22.mode_register a.action.register,
23.mode_profile a.action.profile,
24.mode_recent a.action.recent,
25.mode_index a.action.index,
26.mode_media a.action.media,
27.mode_revisions a.action.revs,
28.mode_backlink a.action.backlink,
29.mode_subscribe a.action.subscribe {
30    font-weight: bold;
31}
32
33.dokuwiki .pageId {
34    float: right;
35    margin-right: -1em;
36    margin-bottom: -1px;
37    margin-top: -1.5em;
38    overflow: hidden;
39    padding: 0.5em 1em 0;
40
41    span {
42        font-size: @font-size-small;
43        border: solid @ini_background_alt;
44        border-width: 1px 1px 0;
45        background-color: @ini_background;
46        color: @ini_text_alt;
47        padding: .1em .35em;
48        border-top-left-radius: 2px;
49        border-top-right-radius: 2px;
50        box-shadow: 0 0 .5em @ini_text_alt;
51        display: block;
52    }
53}
54
55.dokuwiki div.page {
56    clear: both;
57    overflow: hidden;
58    word-wrap: break-word;
59    background: @color-content-bg;
60    color: inherit;
61    // margin-bottom: .5rem; // no margin: if there is another bg-color, then there is an #fff border
62    padding: @page_padding-top @margin-default @margin-default;
63
64    @media @screen_max-md{
65        padding-right: (@margin-default *1.6);
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 @color-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 @color-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
348a:link,
349a:visited {
350    text-decoration: none;
351    color: @color-link;
352}
353
354a:hover,
355a:focus,
356a:active {
357    text-decoration: underline;
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 @color-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: @color-text;
420    box-shadow: inset 0 0 .3em @color-border;
421    border-radius: @fix_border-radius;
422}
423
424pre {
425    overflow: auto;
426    word-wrap: normal;
427    border: 1px solid @color-border;
428    border-radius: @fix_border-radius;
429    box-shadow: inset 0 0 .5em @color-border;
430    font-size: @font-size-default;
431    line-height: 140%;
432    padding: .7em 1em;
433}
434
435blockquote {
436    border: solid @color-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