1/**
2 * This file provides styles for mobile devices
3 * and smaller screens (up to 480px and 768px width).
4 *
5 * @author Anika Henke <anika@selfthinker.org>
6 */
7
8/* for detecting media queries in JavaScript (see script.js): */
9#screen__mode {
10    position: relative;
11    z-index: 0;
12}
13
14/* for screen widths in the tablet range
15********************************************************************/
16@media only screen and (max-width: @ini_tablet_width) {
17
18#screen__mode {
19    z-index: 1; /* for detecting media queries in JavaScript (see script.js) */
20}
21
22/* structure */
23#dokuwiki__aside {
24    width: 100%;
25    float: none;
26    margin-bottom: 1.5em;
27}
28
29#dokuwiki__aside > .pad,
30[dir=rtl] #dokuwiki__aside > .pad {
31    margin: 0 0 .5em;
32    /* style like .page */
33    background: var(--background, #fff);
34    color: inherit;
35    border: 1px solid #eee;
36    box-shadow: none;
37    border-radius: 2px;
38    padding: 1em;
39    margin-bottom: .5em;
40}
41
42#dokuwiki__aside h3.toggle {
43    font-size: 1em;
44
45    &.closed {
46        margin-bottom: 0;
47        padding-bottom: 0;
48    }
49    &.open {
50        border-bottom: 1px solid var(--border, #ccc);
51    }
52}
53
54.showSidebar #dokuwiki__content {
55    float: none;
56    margin-left: 0;
57    width: 100%;
58
59    > .pad {
60        margin-left: 0;
61    }
62}
63
64[dir=rtl] .showSidebar #dokuwiki__content,
65[dir=rtl] .showSidebar #dokuwiki__content > .pad {
66    margin-right: 0;
67}
68
69/* preview */
70.dokuwiki.hasSidebar div.preview {
71    border-right: none;
72}
73
74[dir=rtl] .dokuwiki.hasSidebar div.preview {
75    border-left: none;
76}
77
78/* toc */
79#dw__toc {
80    float: none;
81    margin: 0 0 1em 0;
82    width: auto;
83    border-left-width: 0;
84    border-bottom: 1px solid var(--border, #ccc);
85}
86[dir=rtl] #dw__toc {
87    float: none;
88    margin: 0 0 1em 0;
89    border-right-width: 0;
90}
91
92.dokuwiki h3.toggle {
93    padding: 0 .5em .5em 0;
94}
95#dw__toc > div,
96#dokuwiki__aside div.content {
97    padding: .2em 0 .5em;
98}
99
100/* page */
101.dokuwiki div.page {
102    padding: 1em;
103    margin-left: 0px;
104}
105/* enable horizontal scrolling in media manager */
106.mode_media div.page {
107    overflow: auto;
108}
109
110/* push pagetools closer to content */
111#dokuwiki__pagetools {
112    top: 0;
113}
114.showSidebar #dokuwiki__pagetools {
115    top: 3.5em;
116}
117
118
119/* _edit */
120.dokuwiki div.section_highlight {
121    margin: 0 -1em;
122    padding: 0 .5em;
123    border-width: 0 .5em;
124}
125.dokuwiki div.preview {
126    margin: 0 -1em;
127    padding: 1em;
128}
129
130/* _recent */
131.dokuwiki form.changes ul {
132    padding-left: 0;
133}
134[dir=rtl] .dokuwiki form.changes ul {
135    padding-right: 0;
136}
137
138
139} /* /@media */
140
141
142/* for screen widths in the smartphone range
143********************************************************************/
144@media only screen and (max-width: @ini_phone_width) {
145
146#screen__mode {
147    z-index: 2; /* for detecting media queries in JavaScript (see script.js) */
148}
149
150body {
151    font-size: 100%;
152}
153
154/*____________ structure ____________*/
155
156#dokuwiki__site {
157    max-width: 100%;
158
159    > .site {
160        padding: 0 .5em;
161    }
162}
163
164#dokuwiki__aside {
165    margin-bottom: 0;
166}
167
168#dokuwiki__header {
169    padding: .5em 0;
170}
171
172
173/*____________ header ____________*/
174
175#dokuwiki__header ul.a11y.skip {
176    position: static !important;
177    left: 0 !important;
178    width: auto !important;
179    height: auto !important;
180    float: right;
181    font-size: 0.875em;
182    list-style: none;
183    padding-left: 0;
184    margin: 0;
185
186    li {
187        margin-left: .35em;
188        display: inline;
189    }
190}
191[dir=rtl] #dokuwiki__header ul.a11y.skip {
192    left: auto !important;
193    right: 0 !important;
194    float: left;
195    padding-right: 0;
196
197    li {
198        margin: 0 .35em 0 0;
199    }
200}
201
202#dokuwiki__header .headings,
203#dokuwiki__header .tools {
204    float: none;
205    text-align: left;
206    width: auto;
207    margin-bottom: .5em;
208}
209[dir=rtl] #dokuwiki__header .headings,
210[dir=rtl] #dokuwiki__header .tools {
211    float: none;
212    text-align: right;
213    width: auto;
214}
215#dokuwiki__sitetools {
216    text-align: left;
217}
218[dir=rtl] #dokuwiki__sitetools {
219    text-align: right;
220}
221#dokuwiki__usertools,
222#dokuwiki__sitetools ul,
223#dokuwiki__sitetools h3,
224#dokuwiki__pagetools,
225.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */
226.dokuwiki .pageId {
227    display: none;
228}
229
230/* search form */
231#dokuwiki__sitetools form.search {
232    float: left;
233    margin: 0 .2em .2em 0;
234    width: 49%;
235}
236[dir=rtl] #dokuwiki__sitetools form.search {
237    float: right;
238    margin: 0 0 .2em .2em;
239}
240
241#dokuwiki__sitetools form.search input {
242    width: 100% !important;
243}
244.dokuwiki form.search div.ajax_qsearch {
245    display: none !important;
246}
247
248/* action dropdown is alternative for all hidden tools */
249#dokuwiki__header .mobileTools {
250    display: block;
251    font-size: 0.875em;
252    margin: 0 0 .2em 0;
253    float: right;
254    width: 49%;
255}
256[dir=rtl] #dokuwiki__header .mobileTools {
257    float: left;
258}
259#dokuwiki__header .mobileTools select {
260    padding: .3em .1em;
261    width: 100% !important;
262}
263
264/* force same height on search input and tools select */
265#dokuwiki__sitetools form.search input,
266#dokuwiki__header .mobileTools select {
267    height: 2.1em;
268    line-height: 2.1em;
269    overflow: visible;
270}
271
272
273/*____________ content ____________*/
274
275#dokuwiki__aside > .pad,
276.dokuwiki div.page {
277    padding: .5em;
278}
279
280/* form elements */
281#config__manager fieldset td.value,
282#config__manager td .input,
283.dokuwiki fieldset,
284.dokuwiki input.edit,
285.dokuwiki textarea {
286    width: auto !important;
287    max-width: 100% !important;
288}
289.dokuwiki select {
290    max-width: 100% !important;
291}
292#config__manager fieldset {
293    margin-left: 0;
294    margin-right: 0;
295}
296
297.dokuwiki label.block {
298    text-align: left;
299
300    span {
301        display: block;
302    }
303}
304[dir=rtl] .dokuwiki label.block {
305    text-align: right;
306}
307
308/* _edit */
309.dokuwiki div.section_highlight {
310    margin: 0;
311    padding: 0;
312    border-width: 0;
313}
314.dokuwiki div.preview {
315    margin: 0 -.5em;
316    padding: .5em;
317}
318
319
320} /* /@media */
321
322
323/* for screen heights smaller than the pagetools permit
324********************************************************************/
325@media only screen and (max-height: 400px) {
326// 400px is only roughly the required value, this may be wrong under non-standard circumstances
327
328#dokuwiki__pagetools div.tools {
329    position: static;
330}
331
332
333} /* /@media */
334