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