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