xref: /dokuwiki/lib/tpl/dokuwiki/css/content.less (revision f88cbbf8d8f005f2a8a55f0b2e30bbef70c23e9c) 
1/**
2 * This file provides the main design styles for the page content.
3 *
4 * @author Anika Henke <anika@selfthinker.org>
5 * @author Andreas Gohr <andi@splitbrain.org>
6 * @author Clarence Lee <clarencedglee@gmail.com>
7 */
8
9/*____________ section indenting ____________
10
11.dokuwiki .page  h1 {margin-left: 0;}
12.dokuwiki .page  h2 {margin-left: .666em;}
13.dokuwiki .page  h3 {margin-left: 1.776em;}
14.dokuwiki .page  h4 {margin-left: 3em;}
15.dokuwiki .page  h5 {margin-left: 4.5712em;}
16.dokuwiki .page  div.level1 {margin-left: 0;}
17.dokuwiki .page  div.level2 {margin-left: 1em;}
18.dokuwiki .page  div.level3 {margin-left: 2em;}
19.dokuwiki .page  div.level4 {margin-left: 3em;}
20.dokuwiki .page  div.level5 {margin-left: 4em;}
21
22[dir=rtl] .dokuwiki .page h1 {margin-left: 0; margin-right: 0;}
23[dir=rtl] .dokuwiki .page h2 {margin-left: 0; margin-right: .666em;}
24[dir=rtl] .dokuwiki .page h3 {margin-left: 0; margin-right: 1.776em;}
25[dir=rtl] .dokuwiki .page h4 {margin-left: 0; margin-right: 3em;}
26[dir=rtl] .dokuwiki .page h5 {margin-left: 0; margin-right: 4.5712em;}
27[dir=rtl] .dokuwiki .page div.level1 {margin-left: 0; margin-right: 0;}
28[dir=rtl] .dokuwiki .page div.level2 {margin-left: 0; margin-right: 1em;}
29[dir=rtl] .dokuwiki .page div.level3 {margin-left: 0; margin-right: 2em;}
30[dir=rtl] .dokuwiki .page div.level4 {margin-left: 0; margin-right: 3em;}
31[dir=rtl] .dokuwiki .page div.level5 {margin-left: 0; margin-right: 4em;}
32*/
33/* hx margin-left = (1 / font-size) * .levelx-margin */
34
35/*____________ links to wiki pages (addition to _links) ____________*/
36
37/* existing wikipage */
38.dokuwiki a.wikilink1 {
39    color: @ini_existing;
40    background-color: inherit;
41}
42
43/* not existing wikipage */
44.dokuwiki a.wikilink2 {
45    color: @ini_missing;
46    background-color: inherit;
47}
48
49/*____________ images ____________*/
50
51/* embedded images (styles are already partly set in lib/styles/all.css) */
52.dokuwiki img.media {
53    margin: .2em 0;
54}
55
56.dokuwiki img.medialeft {
57    margin: .2em 1em .2em 0;
58}
59
60.dokuwiki img.mediaright {
61    margin: .2em 0 .2em 1em;
62}
63
64.dokuwiki img.mediacenter {
65    margin: .2em auto;
66}
67
68/*____________ lists ____________*/
69
70.dokuwiki .page,
71.dokuwiki .aside {
72    ul li {
73        color: @ini_text_alt;
74    }
75
76    ol li {
77        color: @ini_text_neu;
78    }
79
80    li .li {
81        color: @ini_text;
82    }
83}
84
85/*____________ tables ____________*/
86
87/* div around each table */
88.dokuwiki div.table {
89    overflow-x: auto;
90    margin-bottom: 1.4em;
91    min-width: 50%;
92}
93
94.dokuwiki div.table table {
95    margin-bottom: 0;
96}
97
98.dokuwiki table.inline {
99    min-width: 50%;
100}
101
102.dokuwiki table.inline tr:hover td {
103    background-color: @ini_background_alt;
104}
105
106.dokuwiki table.inline tr:hover th {
107    background-color: @ini_border;
108}
109
110/*____________ code ____________*/
111
112/* fix if background-color hides underlining */
113.dokuwiki em.u code {
114    text-decoration: underline;
115}
116
117/* filenames for downloadable file and code blocks */
118.dokuwiki dl.code,
119.dokuwiki dl.file {
120    dt {
121        background-color: @ini_background_site;
122        background: linear-gradient(to bottom, @ini_background_alt 0%, @ini_background_site 100%);
123        color: inherit;
124        border: 1px solid @ini_border;
125        border-bottom-color: @ini_background_site;
126        border-top-left-radius: .3em;
127        border-top-right-radius: .3em;
128        padding: .3em .6em .1em;
129        margin-bottom: -1px;
130        float: left;
131
132        a {
133            background-color: transparent;
134            font-size: 0.875em;
135            font-weight: normal;
136            display: block;
137            min-height: 16px;
138        }
139    }
140
141    dd {
142        margin: 0;
143        clear: left;
144    }
145
146    pre {
147        box-shadow: inset -4px -4px .5em -.3em @ini_border;
148    }
149}
150
151[dir=rtl] .dokuwiki dl.code,
152[dir=rtl] .dokuwiki dl.file {
153    dt {
154        float: right;
155    }
156
157    dd {
158        clear: right;
159    }
160}
161
162/* for code in <file> */
163.dokuwiki dl.file {
164    pre,
165    dt {
166        border-style: dashed;
167    }
168    dt {
169        border-bottom-style: solid;
170    }
171}
172
173/* copy to clipboard */
174.dokuwiki .file,
175.dokuwiki .code {
176    .code-copy-btn {
177        opacity: 0;
178    }
179
180    &:hover,
181    &:focus {
182        .code-copy-btn {
183            opacity: 1;
184        }
185    }
186}
187
188/*____________ JS popup ____________*/
189
190.JSpopup {
191    background-color: @ini_background;
192    color: @ini_text;
193    border: 1px solid @ini_border;
194    box-shadow: .1em .1em .1em @ini_border;
195    border-radius: 2px;
196    padding: .3em .5em;
197    font-size: .9em;
198}
199
200.dokuwiki form.search div.ajax_qsearch {
201    top: -.35em;
202    font-size: 1em;
203    text-overflow: ellipsis;
204}
205
206.JSpopup ul,
207.JSpopup ol {
208    padding-left: 0;
209}
210
211[dir=rtl] .JSpopup ul,
212[dir=rtl] .JSpopup ol {
213    padding-right: 0;
214}
215
216/* changes to underscored CSS files
217********************************************************************/
218
219#acl__tree li {
220    margin: 0;
221}
222
223#dokuwiki__content span.curid a {
224    font-weight: normal;
225}
226
227#dokuwiki__content strong span.curid a {
228    font-weight: bold;
229}
230
231/*____________ changes to _edit ____________*/
232
233.dokuwiki div.toolbar {
234    button.toolbutton {
235        border-radius: 0;
236        border-left-width: 0;
237        padding: .1em .35em;
238    }
239
240    button.toolbutton:first-child {
241        border-top-left-radius: 4px;
242        border-bottom-left-radius: 4px;
243        border-left-width: 1px;
244    }
245
246    button.toolbutton:last-child {
247        border-top-right-radius: 4px;
248        border-bottom-right-radius: 4px;
249    }
250}
251
252[dir=rtl] .dokuwiki div.toolbar {
253    button.toolbutton:last-child {
254        border-top-left-radius: 4px;
255        border-bottom-left-radius: 4px;
256        border-top-right-radius: 0;
257        border-bottom-right-radius: 0;
258        border-left-width: 1px;
259    }
260
261    button.toolbutton:first-child {
262        border-top-left-radius: 0;
263        border-bottom-left-radius: 0;
264        border-top-right-radius: 4px;
265        border-bottom-right-radius: 4px;
266        border-left-width: 0;
267        border-right-width: 1px;
268    }
269}
270
271.dokuwiki div.section_highlight {
272    margin: 0 -2em;
273    padding: 0 1em;
274    border-width: 0 1em;
275}
276
277.dokuwiki textarea.edit {
278    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
279}
280
281.dokuwiki div.preview {
282    margin: 0 -2em;
283    padding: 0 2em;
284}
285
286.dokuwiki.hasSidebar div.preview {
287    border-right: @ini_sidebar_width solid @ini_background_alt;
288}
289
290[dir=rtl] .dokuwiki.hasSidebar div.preview {
291    border-right-width: 0;
292    border-left: @ini_sidebar_width solid @ini_background_alt;
293}
294
295.dokuwiki div.preview div.pad {
296    padding: 1.556em 0 2em;
297}
298
299/*____________ changes to _toc ____________*/
300
301#dw__toc {
302    margin: -1.556em -2em .5em 1.4em;
303    width: @ini_sidebar_width;
304    border-left: 1px solid @ini_border;
305    background: @ini_background;
306    color: inherit;
307}
308
309[dir=rtl] #dw__toc {
310    margin: -1.556em 1.4em .5em -2em;
311    border-left-width: 0;
312    border-right: 1px solid @ini_border;
313}
314
315.dokuwiki.export #dw__toc {
316    margin-top: 0;
317    margin-right: 0;
318}
319
320[dir=rtl] .dokuwiki.export #dw__toc {
321    margin-top: 0;
322    margin-left: 0;
323}
324
325.dokuwiki h3.toggle {
326    padding: .5em 1em;
327    margin-bottom: 0;
328    font-size: .875em;
329    letter-spacing: .1em;
330}
331
332#dokuwiki__aside h3.toggle {
333    display: none;
334}
335
336.dokuwiki .toggle strong {
337    background: transparent url(images/toc-arrows.png) 0 0;
338    width: 8px;
339    height: 5px;
340    margin: .4em 0 0;
341}
342
343.dokuwiki .toggle.closed strong {
344    background-position: 0 -5px;
345}
346
347.dokuwiki .toggle strong span {
348    display: none;
349}
350
351#dw__toc {
352    > div {
353        font-size: 0.875em;
354        padding: .5em 1em 1em;
355    }
356
357    ul {
358        padding: 0 0 0 1.2em;
359
360        li {
361            list-style-image: url(images/toc-bullet.png);
362        }
363    }
364
365    ul li.clear {
366        list-style: none;
367    }
368
369    ul li div.li {
370        padding: .2em 0;
371    }
372}
373
374[dir=rtl] #dw__toc ul {
375    padding: 0 1.5em 0 0;
376}
377
378/*____________ changes to _imgdetail ____________*/
379
380#dokuwiki__detail {
381    padding: 0;
382
383    img {
384        float: none;
385        margin-bottom: 1.4em;
386    }
387
388    div.img_detail {
389        float: none;
390    }
391
392    div.img_detail dl {
393        overflow: hidden;
394    }
395
396    div.img_detail dl dt {
397        float: left;
398        width: 9em;
399        text-align: right;
400        clear: left;
401    }
402
403    div.img_detail dl dd {
404        margin-left: 9.5em;
405    }
406}
407
408[dir=rtl] #dokuwiki__detail div.img_detail {
409    dl dt {
410        float: right;
411        text-align: left;
412        clear: right;
413    }
414
415    dl dd {
416        margin-left: 0;
417        margin-right: 9.5em;
418    }
419}
420