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