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.breadsearch {
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/*____________ pagetoolszenith ____________*/
273
274#dokuwiki__pagetoolszenith {
275    padding: .5em 0;
276}
277
278#dokuwiki__pagetoolszenith .headings,
279#dokuwiki__pagetoolszenith .tools {
280    float: none;
281    text-align: left;
282    width: auto;
283}
284[dir=rtl] #dokuwiki__pagetoolszenith .headings,
285[dir=rtl] #dokuwiki__pagetoolszenith .tools {
286    float: none;
287    text-align: right;
288    width: auto;
289}
290
291/* action dropdown is alternative for all hidden tools */
292#dokuwiki__pagetoolszenith .mobileTools {
293    display: block;
294    font-size: 0.875em;
295    margin: 0 0 .2em 0;
296    width: 100%;
297}
298[dir=rtl] #dokuwiki__pagetoolszenith .mobileTools {
299    float: left;
300}
301#dokuwiki__pagetoolszenith .mobileTools select {
302    padding: .3em .1em;
303    width: 100% !important;
304}
305
306/* force same height on search input and tools select */
307#dokuwiki__sitetools form.search input,
308#dokuwiki__pagetoolszenith .mobileTools select {
309    height: 2.1em;
310    line-height: 2.1em;
311    overflow: visible;
312}
313.toolszenith {
314	padding:0
315	}
316/*____________ content ____________*/
317
318#dokuwiki__aside > .pad,
319.dokuwiki div.page {
320    padding: .5em;
321}
322
323/* form elements */
324#config__manager fieldset td.value,
325#config__manager td .input,
326.dokuwiki fieldset,
327.dokuwiki input.edit,
328.dokuwiki textarea {
329    width: auto !important;
330    max-width: 100% !important;
331}
332.dokuwiki select {
333    max-width: 100% !important;
334}
335#config__manager fieldset {
336    margin-left: 0;
337    margin-right: 0;
338}
339
340.dokuwiki label.block {
341    text-align: left;
342
343    span {
344        display: block;
345    }
346}
347[dir=rtl] .dokuwiki label.block {
348    text-align: right;
349}
350
351/* _edit */
352.dokuwiki div.section_highlight {
353    margin: 0;
354    padding: 0;
355    border-width: 0;
356}
357.dokuwiki div.preview {
358    margin: 0 -.5em;
359    padding: .5em;
360}
361
362
363} /* /@media */
364
365
366/* for screen heights smaller than the pagetools permit
367********************************************************************/
368@media only screen and (max-height: 400px) {
369// 400px is only roughly the required value, this may be wrong under non-standard circumstances
370
371#dokuwiki__pagetools div.tools {
372    position: static;
373}
374
375
376} /* /@media */
377