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