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
58    &.closed {
59        margin: 0;
60        padding-bottom: 0;
61		background-color: @ini_background;
62    }
63    &.open {
64        border-bottom: 1px solid @ini_border;
65		padding-bottom: 0;
66		background-color: @ini_background;
67		margin: 0;
68    }
69}
70
71.showSidebar #dokuwiki__content, #dokuwiki__content {
72    float: none;
73    margin-left: 0;
74    width: 100%;
75	margin:0;
76	max-width: calc (@ini_article_width + 10);
77	min-width: inherit;
78
79    > .pad {
80        margin-left: 0;
81    }
82}
83
84[dir=rtl] .showSidebar #dokuwiki__content,
85[dir=rtl] .showSidebar #dokuwiki__content > .pad {
86    margin-right: 0;
87}
88
89/*____________ header ____________*/
90
91#dokuwiki__header ul.a11y.skip {
92    position: static !important;
93    left: 0 !important;
94    width: auto !important;
95    height: auto !important;
96    float: right;
97    font-size: 0.875em;
98    list-style: none;
99    padding-left: 0;
100    margin: 0;
101
102    li {
103        margin-left: .35em;
104        display: inline;
105    }
106}
107[dir=rtl] #dokuwiki__header ul.a11y.skip {
108    left: auto !important;
109    right: 0 !important;
110    float: left;
111    padding-right: 0;
112
113    li {
114        margin: 0 .35em 0 0;
115    }
116}
117
118#dokuwiki__header .headings,
119#dokuwiki__header .tools {
120    float: none;
121    text-align: left;
122    width: auto;
123    margin-bottom: .5em;
124}
125[dir=rtl] #dokuwiki__header .headings,
126[dir=rtl] #dokuwiki__header .tools {
127    float: none;
128    text-align: right;
129    width: auto;
130}
131#dokuwiki__sitetools {
132    text-align: left;
133}
134[dir=rtl] #dokuwiki__sitetools {
135    text-align: right;
136}
137
138#dokuwiki__header .headings {
139	display:block;
140}
141
142/* search form */
143.mobileTools form.search {
144    float: left;
145    margin: 0 .2em .2em 0;
146    width: 100%;
147}
148[dir=rtl] .mobileTools form.search {
149    float: right;
150    margin: 0 0 .2em .2em;
151}
152
153.mobileTools form.search input {
154    width: 100% !important;
155}
156.dokuwiki form.search div.ajax_qsearch {
157    display: none !important;
158}
159
160/* action dropdown is alternative for all hidden tools */
161#dokuwiki__header .mobileTools {
162    display: block;
163    font-size: 0.875em;
164    margin: 0 0 .2em 0;
165    width: 100%;
166}
167[dir=rtl] #dokuwiki__header .mobileTools {
168    float: left;
169}
170#dokuwiki__header .mobileTools select {
171    padding: .3em .1em;
172    width: 100% !important;
173}
174
175/* force same height on search input and tools select */
176#dokuwiki__sitetools form.search input,
177#dokuwiki__header .mobileTools select {
178    height: 2.1em;
179    line-height: 2.1em;
180    overflow: visible;
181}
182
183
184/*____________ content ____________*/
185
186
187#dokuwiki__sidebar > .pad,
188.dokuwiki div.page {
189    padding: 0;
190	margin:0;
191}
192
193.kharticle {
194	margin:0.3em;
195}
196/* form elements */
197#config__manager fieldset td.value,
198#config__manager td .input,
199.dokuwiki fieldset,
200/*.dokuwiki input.edit,*/
201.dokuwiki textarea {
202    width: auto !important;
203    max-width: 100% !important;
204}
205.dokuwiki select {
206    max-width: 100% !important;
207}
208#config__manager fieldset {
209    margin-left: 0;
210    margin-right: 0;
211}
212
213.dokuwiki label.block {
214    text-align: left;
215
216    span {
217        display: block;
218    }
219}
220[dir=rtl] .dokuwiki label.block {
221    text-align: right;
222}
223
224tbody tr td ul, tbody tr td ul li {
225	margin: 0 !important;
226}
227
228/* _edit */
229.dokuwiki div.section_highlight {
230    margin: 0;
231    padding: 0;
232    border-width: 0;
233}
234.dokuwiki div.preview {
235    margin: 0 -.5em;
236    padding: .5em;
237	width: initial;
238}
239
240/* to top */
241.to_top {
242	display:block;
243	right:1em;
244}
245
246/** Plugin **/
247/* Translation */
248.dokuwiki div.plugin_translation {
249	display: block !important;
250	float:none;
251	margin-bottom:1em;
252	text-align:center;
253	}
254/* Wrap */
255.dokuwiki div.wrap_box {
256		width: 100% !important;
257	}
258
259
260} /* /@media */
261
262
263/* for screen heights smaller than the pagetools permit
264********************************************************************/
265@media only screen and (max-height: 400px) {
266// 400px is only roughly the required value, this may be wrong under non-standard circumstances
267
268.kh_pagetools div.tools {
269    position: static;
270}
271
272
273} /* /@media */
274