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