1/**
2 * This file provides the main design styles for the
3 * bits that surround the content.
4 *
5 * @author Anika Henke <anika@selfthinker.org>
6 * @author Andreas Gohr <andi@splitbrain.org>
7 * @author Clarence Lee <clarencedglee@gmail.com>
8 */
9
10.dokuwiki.export {
11    background-color: @ini_background;
12}
13
14/* header
15********************************************************************/
16
17#dokuwiki__header {
18    padding: 2em 0 1.5em;
19
20    .headings,
21    .tools {
22        margin-bottom: 1.5em;
23        width: 49%;
24    }
25    .tools {
26        margin-top: .2em;
27    }
28
29    .logo {
30        margin: 0;
31        font-size: 1.5em;
32        font-weight: normal;
33        line-height: 1.2;
34
35        img {
36            float: left;
37            margin-right: .5em;
38        }
39
40        span {
41            display: block;
42            padding-top: 10px;
43        }
44
45        a {
46            text-decoration: none;
47            color: @ini_text;
48            background-color: inherit;
49        }
50    }
51
52    p.claim {
53        margin-bottom: 0;
54        font-size: 0.875em;
55    }
56
57    /* make all links in header (including breadcrumb and interwiki) same colour as the rest */
58    a {
59        color: @ini_link;
60        background-color: inherit;
61    }
62}
63
64[dir=rtl] #dokuwiki__header .logo img {
65    float: right;
66    margin-left: .5em;
67    margin-right: 0;
68}
69
70/* tools
71********************************************************************/
72
73/* highlight selected tool */
74.mode_admin .action.admin a,
75.mode_login .action.login a,
76.mode_register .action.register a,
77.mode_profile .action.profile a,
78.mode_recent .action.recent a,
79.mode_index .action.index a,
80.mode_media .action.media a,
81.mode_revisions .action.revs a,
82.mode_backlink .action.backlink a,
83.mode_subscribe .action.subscribe a {
84    font-weight: bold;
85}
86
87#dokuwiki__header .tools {
88    ul {
89        padding-left: 0;
90        margin-bottom: 0;
91    }
92
93    li {
94        font-size: 0.875em;
95        margin-left: 1em;
96        list-style: none;
97        display: inline;
98    }
99
100    form.search div.ajax_qsearch li {
101        font-size: 1em;
102        margin-left: 0;
103        display: block;
104        overflow: hidden;
105        text-overflow: ellipsis;
106    }
107}
108
109[dir=rtl] #dokuwiki__header .tools li {
110    margin-right: 1em;
111    margin-left: 0;
112}
113
114#dokuwiki__header .mobileTools {
115    display: none; /* hide mobile tools dropdown to only show in mobile view */
116}
117
118/*____________ site tools ____________*/
119
120#dokuwiki__sitetools {
121    & {
122		text-align: right;
123	}
124    form.search {
125        font-size: 0.875em;
126    }
127}
128
129[dir=rtl] #dokuwiki__sitetools {
130    text-align: left;
131}
132
133form.search {
134    display: block;
135    position: relative;
136    margin-bottom: 0.5em;
137
138    input {
139        /* width: 18em; */
140        padding: .35em 22px .35em .1em;
141    }
142
143    button {
144        background: transparent url(images/search.png) no-repeat 0 0;
145		background-size: 16px;
146        border-width: 0;
147        width: 16px;
148        height: 16px;
149        text-indent: -99999px;
150        margin-left: -28px;
151        box-shadow: none;
152        padding: 0;
153    }
154}
155
156[dir=rtl] form.search {
157    input {
158        padding: .35em .1em .35em 22px;
159    }
160
161    button {
162        background-position: 5px 0;
163        margin-left: 0;
164        margin-right: -20px;
165        position: relative;
166    }
167}
168
169/*____________ breadcrumbs ____________*/
170
171.dokuwiki div.breadcrumbs {
172    border-top: 1px solid @ini_border;
173    border-bottom: 1px solid @ini_background;
174    margin-bottom: .5em;
175    font-size: 0.875em;
176    clear: both;
177
178    div {
179        padding: .1em .35em;
180    }
181
182    div:only-child {
183        border-top: 1px solid @ini_background;
184        border-bottom: 1px solid @ini_border;
185    }
186
187    div:first-child {
188        border-top: 1px solid @ini_background;
189    }
190
191    div:last-child {
192        border-bottom: 1px solid @ini_border;
193    }
194
195    .bcsep {
196        font-size: 0.75em;
197    }
198}
199
200/* sidebar
201********************************************************************/
202
203.dokuwiki .aside {
204    font-size: 0.875em;
205    overflow: hidden;
206    word-wrap: break-word;
207
208    /* make sidebar more condensed */
209
210    h1 {
211        font-size: 1.714em;
212        margin-bottom: .292em;
213    }
214
215    h2 {
216        margin-bottom: .333em;
217    }
218
219    h3 {
220        margin-bottom: .444em;
221    }
222
223    h4 {
224        margin-bottom: .5em;
225    }
226
227    h5 {
228        margin-bottom: .5714em;
229    }
230
231    p,
232    ul,
233    ol,
234    dl,
235    pre,
236    table,
237    fieldset,
238    hr,
239    blockquote,
240    address {
241        margin-bottom: .7em;
242    }
243
244    ul,
245    ol {
246        padding-left: .5em;
247    }
248
249    li ul,
250    li ol {
251        margin-bottom: 0;
252        padding: 0;
253    }
254
255    a:link,
256    a:visited {
257        color: @ini_link;
258        background-color: inherit;
259    }
260}
261
262[dir=rtl] .dokuwiki .aside ul,
263[dir=rtl] .dokuwiki .aside ol {
264    padding-right: .5em;
265}
266
267/* content
268********************************************************************/
269
270.dokuwiki .pageId {
271    float: right;
272    margin-right: -1em;
273    margin-bottom: -1px;
274    margin-top: -1.5em;
275    overflow: hidden;
276    padding: 0.5em 1em 0;
277
278    span {
279        font-size: 0.875em;
280        border: solid @ini_background_alt;
281        border-width: 1px 1px 0;
282        background-color: @ini_background;
283        color: @ini_text_alt;
284        padding: .1em .35em;
285        border-top-left-radius: 2px;
286        border-top-right-radius: 2px;
287        box-shadow: 0 0 .5em @ini_text_alt;
288        display: block;
289    }
290}
291
292.dokuwiki div.page {
293    clear: both;
294    background: @ini_background;
295    color: inherit;
296    border: 1px solid @ini_background_alt;
297    box-shadow: 0 0 .5em @ini_text_alt;
298    border-radius: 2px;
299    padding: 1.556em 2em 2em;
300    margin-bottom: .5em;
301    overflow: hidden;
302    word-wrap: break-word;
303}
304
305.dokuwiki .docInfo {
306    font-size: 0.875em;
307    text-align: right;
308    overflow-wrap: break-word;
309}
310
311/* license note under edit window */
312.dokuwiki div.license {
313    font-size: small;
314    line-height: 1.5em;
315    padding: 3pt;
316    background-color: @ini_background_alt;
317    border: @ini_border solid 1px;
318}
319
320[dir=rtl] .dokuwiki .docInfo {
321    text-align: left;
322}
323
324[dir=rtl] .dokuwiki .pageId {
325    float: left;
326    margin-left: -1em;
327    margin-right: 0;
328}
329
330/* footer
331********************************************************************/
332
333.dokuwiki .wrapper {
334    margin-bottom: 1.4em;
335}
336
337#dokuwiki__footer {
338    margin-bottom: 1em;
339    text-align: center;
340
341    > .pad {
342        font-size: 0.875em;
343    }
344
345    div.license {
346        margin-bottom: 0.5em;
347        font-size: 100%;
348    }
349
350    div.buttons a {
351        img {
352            opacity: 0.5;
353        }
354
355        &:hover img,
356        &:active img,
357        &:focus img {
358            opacity: 1;
359        }
360    }
361
362}
363
364[dir=rtl] #dokuwiki__footer .license img {
365    margin: 0 0 0 .5em;
366}
367
368/* dark mode overrides */
369@media (prefers-color-scheme: dark) {
370    body.darkmode div.license {
371        background-color: @ini_background_alt_dark;
372        border-color: @ini_border_dark;
373    }
374}