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: @ini_background;
34    color: inherit;
35    border: 1px solid #eee;
36    box-shadow: 0 0 .5em @ini_text_alt;
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 @ini_border;
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 @ini_border;
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}
104/* enable horizontal scrolling in media manager */
105.mode_media div.page {
106    overflow: auto;
107}
108
109/* push pagetools closer to content */
110#dokuwiki__pagetools {
111    top: 0;
112}
113.showSidebar #dokuwiki__pagetools {
114    top: 3.5em;
115}
116
117
118/* _edit */
119.dokuwiki div.section_highlight {
120    margin: 0 -1em;
121    padding: 0 .5em;
122    border-width: 0 .5em;
123}
124.dokuwiki div.preview {
125    margin: 0 -1em;
126    padding: 1em;
127}
128
129/* _recent */
130.dokuwiki form.changes ul {
131    padding-left: 0;
132}
133[dir=rtl] .dokuwiki form.changes ul {
134    padding-right: 0;
135}
136
137
138} /* /@media */
139
140
141/* for screen widths in the smartphone range
142********************************************************************/
143@media only screen and (max-width: @ini_phone_width) {
144
145#screen__mode {
146    z-index: 2; /* for detecting media queries in JavaScript (see script.js) */
147}
148
149body {
150    font-size: 100%;
151}
152
153/*____________ structure ____________*/
154
155#dokuwiki__site {
156    max-width: 100%;
157
158    > .site {
159        padding: 0 .5em;
160    }
161}
162
163#dokuwiki__aside {
164    margin-bottom: 0;
165}
166
167#dokuwiki__header {
168    padding: .5em 0;
169}
170
171
172/*____________ header ____________*/
173
174#dokuwiki__header ul.a11y.skip {
175    position: static !important;
176    left: 0 !important;
177    width: auto !important;
178    height: auto !important;
179    float: right;
180    font-size: 0.875em;
181    list-style: none;
182    padding-left: 0;
183    margin: 0;
184
185    li {
186        margin-left: .35em;
187        display: inline;
188    }
189}
190[dir=rtl] #dokuwiki__header ul.a11y.skip {
191    left: auto !important;
192    right: 0 !important;
193    float: left;
194    padding-right: 0;
195
196    li {
197        margin: 0 .35em 0 0;
198    }
199}
200
201#dokuwiki__header .headings,
202#dokuwiki__header .tools {
203    float: none;
204    text-align: left;
205    width: auto;
206    margin-bottom: .5em;
207}
208[dir=rtl] #dokuwiki__header .headings,
209[dir=rtl] #dokuwiki__header .tools {
210    float: none;
211    text-align: right;
212    width: auto;
213}
214#dokuwiki__sitetools {
215    text-align: left;
216}
217[dir=rtl] #dokuwiki__sitetools {
218    text-align: right;
219}
220#dokuwiki__usertools,
221#dokuwiki__sitetools ul,
222#dokuwiki__sitetools h3,
223#dokuwiki__pagetools,
224.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */
225.dokuwiki .pageId {
226    display: none;
227}
228
229/* search form */
230#dokuwiki__sitetools form.search {
231    float: left;
232    margin: 0 .2em .2em 0;
233    width: 49%;
234}
235[dir=rtl] #dokuwiki__sitetools form.search {
236    float: right;
237    margin: 0 0 .2em .2em;
238}
239
240#dokuwiki__sitetools form.search input {
241    width: 100% !important;
242}
243.dokuwiki form.search div.ajax_qsearch {
244    display: none !important;
245}
246
247/* action dropdown is alternative for all hidden tools */
248#dokuwiki__header .mobileTools {
249    display: block;
250    font-size: 0.875em;
251    margin: 0 0 .2em 0;
252    float: right;
253    width: 49%;
254}
255[dir=rtl] #dokuwiki__header .mobileTools {
256    float: left;
257}
258#dokuwiki__header .mobileTools select {
259    padding: .3em .1em;
260    width: 100% !important;
261}
262
263/* force same height on search input and tools select */
264#dokuwiki__sitetools form.search input,
265#dokuwiki__header .mobileTools select {
266    height: 2.1em;
267    line-height: 2.1em;
268    overflow: visible;
269}
270
271
272/*____________ content ____________*/
273
274#dokuwiki__aside > .pad,
275.dokuwiki div.page {
276    padding: .5em;
277}
278
279/* form elements */
280#config__manager fieldset td.value,
281#config__manager td .input,
282.dokuwiki fieldset,
283.dokuwiki input.edit,
284.dokuwiki textarea {
285    width: auto !important;
286    max-width: 100% !important;
287}
288.dokuwiki select {
289    max-width: 100% !important;
290}
291#config__manager fieldset {
292    margin-left: 0;
293    margin-right: 0;
294}
295
296.dokuwiki label.block {
297    text-align: left;
298
299    span {
300        display: block;
301    }
302}
303[dir=rtl] .dokuwiki label.block {
304    text-align: right;
305}
306
307/* _edit */
308.dokuwiki div.section_highlight {
309    margin: 0;
310    padding: 0;
311    border-width: 0;
312}
313.dokuwiki div.preview {
314    margin: 0 -.5em;
315    padding: .5em;
316}
317
318
319} /* /@media */
320
321
322/* for screen heights smaller than the pagetools permit
323********************************************************************/
324@media only screen and (max-height: 400px) {
325// 400px is only roughly the required value, this may be wrong under non-standard circumstances
326
327#dokuwiki__pagetools div.tools {
328    position: static;
329}
330
331
332} /* /@media */
333