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