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/* toc */
55#dw__toc {
56    float: none;
57    margin: 0 0 1em 0;
58    width: auto;
59    border-left-width: 0;
60    border-bottom: 1px solid @ini_border;
61}
62[dir=rtl] #dw__toc {
63    float: none;
64    margin: 0 0 1em 0;
65    border-right-width: 0;
66}
67
68.dokuwiki h3.toggle {
69    padding: 0 .5em .5em 0;
70}
71#dw__toc > div,
72#dokuwiki__aside div.content {
73    padding: .2em 0 .5em;
74}
75
76/* page */
77.dokuwiki div.page {
78    padding: 1em;
79}
80/* enable horizontal scrolling in media manager */
81.mode_media div.page {
82    overflow: auto;
83}
84
85/* push pagetools closer to content */
86#dokuwiki__pagetools {
87    top: 0;
88}
89
90
91/* _edit */
92.dokuwiki div.section_highlight {
93    margin: 0 -1em;
94    padding: 0 .5em;
95    border-width: 0 .5em;
96}
97.dokuwiki div.preview {
98    margin: 0 -1em;
99    padding: 1em;
100}
101
102/* _recent */
103.dokuwiki form.changes ul {
104    padding-left: 0;
105}
106[dir=rtl] .dokuwiki form.changes ul {
107    padding-right: 0;
108}
109
110
111} /* /@media */
112
113
114/* for screen widths in the smartphone range
115********************************************************************/
116@media only screen and (max-width: @ini_phone_width) {
117
118#screen__mode {
119    z-index: 2; /* for detecting media queries in JavaScript (see script.js) */
120}
121
122body {
123    font-size: 100%;
124}
125
126/*____________ structure ____________*/
127/*
128#dokuwiki__site {
129    max-width: 100%;
130
131    > .site {
132        padding: 0 .5em;
133    }
134}
135*/
136#dokuwiki__aside {
137    margin-bottom: 0;
138}
139
140#dokuwiki__sitetools {
141    text-align: left;
142}
143[dir=rtl] #dokuwiki__sitetools {
144    text-align: right;
145}
146#dokuwiki__usertools,
147#dokuwiki__sitetools ul,
148#dokuwiki__sitetools h3,
149#dokuwiki__pagetools,
150.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */
151.dokuwiki .pageId {
152    display: none;
153}
154
155/* search form */
156#dokuwiki__sitetools form.search {
157    float: left;
158    margin: 0 .2em .2em 0;
159    width: 49%;
160}
161[dir=rtl] #dokuwiki__sitetools form.search {
162    float: right;
163    margin: 0 0 .2em .2em;
164}
165
166#dokuwiki__sitetools form.search input {
167    width: 100% !important;
168}
169.dokuwiki form.search div.ajax_qsearch {
170    display: none !important;
171}
172
173/* force same height on search input and tools select */
174#dokuwiki__sitetools form.search input {
175    height: 2.1em;
176    line-height: 2.1em;
177    overflow: visible;
178}
179
180
181/*____________ content ____________*/
182
183#dokuwiki__aside > .pad,
184.dokuwiki div.page {
185    padding: .5em;
186}
187
188/* form elements */
189#config__manager fieldset td.value,
190#config__manager td .input,
191.dokuwiki fieldset,
192.dokuwiki input.edit,
193.dokuwiki textarea {
194    width: auto !important;
195    max-width: 100% !important;
196}
197.dokuwiki select {
198    max-width: 100% !important;
199}
200#config__manager fieldset {
201    margin-left: 0;
202    margin-right: 0;
203}
204
205.dokuwiki label.block {
206    text-align: left;
207
208    span {
209        display: block;
210    }
211}
212[dir=rtl] .dokuwiki label.block {
213    text-align: right;
214}
215
216/* _edit */
217.dokuwiki div.section_highlight {
218    margin: 0;
219    padding: 0;
220    border-width: 0;
221}
222.dokuwiki div.preview {
223    margin: 0 -.5em;
224    padding: .5em;
225}
226
227
228} /* /@media */
229
230
231/* for screen heights smaller than the pagetools permit
232********************************************************************/
233@media only screen and (max-height: 400px) {
234// 400px is only roughly the required value, this may be wrong under non-standard circumstances
235
236#dokuwiki__pagetools div.tools {
237    position: static;
238}
239
240
241} /* /@media */
242