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 * some additions by zatalyz (in cc0, have a fun)
7 */
8
9/* for detecting media queries in JavaScript (see script.js): */
10#screen__mode {
11    position: relative;
12    z-index: 0;
13}
14/* Things who are not displayed on normal screen (but detailled below)
15********************************************************************/
16#dokuwiki__header .mobileTools {
17    display: none; /* hide mobile tools dropdown to only show in mobile view */
18}
19
20
21/* for screen widths in the smartphone range
22********************************************************************/
23@media only screen and (max-width: @ini_phone_width) {
24
25/* element non displayed on mobile */
26.nomobile {
27	display:none !important;
28}
29
30#screen__mode {
31    z-index: 2; /* for detecting media queries in JavaScript (see script.js) */
32}
33
34#dokuwiki__site .wrapper {
35	display: block;
36}
37
38/*____________ structure - sidebar ____________*/
39
40#dokuwiki__sidebar {
41    margin-bottom: 1em;
42	width: 100%;
43	float: none;
44}
45
46#dokuwiki__sidebar > .pad,
47[dir=rtl] #dokuwiki__sidebar > .pad {
48		margin-bottom: 1em;
49		padding: 1em;
50		margin-bottom: 0;
51		display:flex;
52		flex-direction: column;
53}
54
55#dokuwiki__sidebar h3.toggle {
56    font-size: 1em;
57    display:flex;
58    flex-direction: row-reverse;
59    align-items: center;
60    justify-content: space-between;
61
62    &.closed {
63        margin: 0;
64        padding-bottom: 0;
65		background-color: @ini_background;
66
67    }
68    &.open {
69        border-bottom: 1px solid @ini_border;
70		padding-bottom: 0;
71		background-color: @ini_background;
72		margin: 0;
73    }
74}
75
76
77.showSidebar #dokuwiki__content, #dokuwiki__content {
78    float: none;
79    margin-left: 0;
80    width: 100%;
81	margin:0;
82	max-width: calc (@ini_article_width + 10);
83	min-width: inherit;
84
85    > .pad {
86        margin-left: 0;
87    }
88}
89
90[dir=rtl] .showSidebar #dokuwiki__content,
91[dir=rtl] .showSidebar #dokuwiki__content > .pad {
92    margin-right: 0;
93}
94
95/*____________ header ____________*/
96
97#dokuwiki__header ul.a11y.skip {
98    position: static !important;
99    left: 0 !important;
100    width: auto !important;
101    height: auto !important;
102    float: right;
103    font-size: 0.875em;
104    list-style: none;
105    padding-left: 0;
106    margin: 0;
107
108    li {
109        margin-left: .35em;
110        display: inline;
111    }
112}
113[dir=rtl] #dokuwiki__header ul.a11y.skip {
114    left: auto !important;
115    right: 0 !important;
116    float: left;
117    padding-right: 0;
118
119    li {
120        margin: 0 .35em 0 0;
121    }
122}
123
124#dokuwiki__header .headings,
125#dokuwiki__header .tools {
126    float: none;
127    text-align: left;
128    width: auto;
129    margin-bottom: .5em;
130}
131[dir=rtl] #dokuwiki__header .headings,
132[dir=rtl] #dokuwiki__header .tools {
133    float: none;
134    text-align: right;
135    width: auto;
136}
137#dokuwiki__sitetools {
138    text-align: left;
139}
140[dir=rtl] #dokuwiki__sitetools {
141    text-align: right;
142}
143
144#dokuwiki__header .headings {
145	display:block;
146}
147
148/* search form */
149.mobileTools form.search {
150    float: left;
151    margin: 0 .2em .2em 0;
152    width: 100%;
153}
154[dir=rtl] .mobileTools form.search {
155    float: right;
156    margin: 0 0 .2em .2em;
157}
158
159.mobileTools form.search input {
160    width: 100% !important;
161}
162.dokuwiki form.search div.ajax_qsearch {
163    display: none !important;
164}
165
166/* action dropdown is alternative for all hidden tools */
167#dokuwiki__header .mobileTools {
168    display: block;
169    font-size: 0.875em;
170    margin: 0 0 .2em 0;
171    width: 100%;
172}
173[dir=rtl] #dokuwiki__header .mobileTools {
174    float: left;
175}
176#dokuwiki__header .mobileTools select {
177    padding: .3em .1em;
178    width: 100% !important;
179}
180
181/* force same height on search input and tools select */
182#dokuwiki__sitetools form.search input,
183#dokuwiki__header .mobileTools select {
184    height: 2.1em;
185    line-height: 2.1em;
186    overflow: visible;
187}
188
189
190/*____________ content ____________*/
191
192
193#dokuwiki__sidebar > .pad,
194.dokuwiki div.page {
195    padding: 0;
196	margin:0;
197}
198
199.kharticle {
200	margin:0.3em;
201}
202/* form elements */
203#config__manager fieldset td.value,
204#config__manager td .input,
205.dokuwiki fieldset,
206/*.dokuwiki input.edit,*/
207.dokuwiki textarea {
208    width: auto !important;
209    max-width: 100% !important;
210}
211.dokuwiki select {
212    max-width: 100% !important;
213}
214#config__manager fieldset {
215    margin-left: 0;
216    margin-right: 0;
217}
218
219.dokuwiki label.block {
220    text-align: left;
221
222    span {
223        display: block;
224    }
225}
226[dir=rtl] .dokuwiki label.block {
227    text-align: right;
228}
229
230tbody tr td ul, tbody tr td ul li {
231	margin: 0 !important;
232}
233
234/* _edit */
235.dokuwiki div.section_highlight {
236    margin: 0;
237    padding: 0;
238    border-width: 0;
239}
240.dokuwiki div.preview {
241    margin: 0 -.5em;
242    padding: .5em;
243	width: initial;
244}
245
246/* to top */
247.to_top {
248	display:block;
249	right:1em;
250}
251
252/** Plugin **/
253/* Translation */
254.dokuwiki div.plugin_translation {
255	display: block !important;
256	float:none;
257	margin-bottom:1em;
258	text-align:center;
259	}
260/* Wrap */
261.dokuwiki div.wrap_box {
262		width: 100% !important;
263	}
264
265
266} /* /@media */
267
268
269/* for screen heights smaller than the pagetools permit
270********************************************************************/
271@media only screen and (max-height: 400px) {
272// 400px is only roughly the required value, this may be wrong under non-standard circumstances
273
274.kh_pagetools div.tools {
275    position: static;
276}
277
278
279} /* /@media */
280