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