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