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