xref: /template/kiwiki/css/mobile.css (revision d037a2de05443a7e76a5f5cc68f80ae22982d74d) 
1/**
2 * This file provides style changes for small screens.
3 */
4
5@media only screen and (min-width: 951px) {
6  #kiwiki nav.tools > div#open-search {
7    display: none;
8  }
9
10  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper a.wikilogo {
11    gap:15px;
12  }
13}
14@media only screen and (max-width: 950px) {
15  #kiwiki h1 {
16    font-size: 1.9rem;
17  }
18  #kiwiki h2 {
19    font-size: 1.6rem;
20  }
21  #kiwiki h3 {
22    font-size: 1.3em;
23  }
24  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper .wikilogo {
25   gap:5px;
26  }
27  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper .wikilogo img {
28    height: 40px;
29    min-width: 40px;
30  }
31  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper .wikilogo .logo-img{
32    height: 40px;
33  }
34  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper a.wikilogo > div {
35    font-size:14px;
36    letter-spacing: 0;
37  }
38  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper #dw__search {
39    order: 3;
40    min-width: initial;
41    padding-bottom: 10px;
42    display: none;
43    width: 100%;
44  }
45  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper #dw__search.open {
46    display: inline;
47  }
48  #kiwiki #dokuwiki__header {
49    padding: 0 5px;
50    margin: 0;
51  }
52  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper {
53    flex-wrap: nowrap;
54    gap: 0;
55  }
56  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper .group {
57    order: 1;
58  }
59  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper nav {
60    order: 2;
61    flex-wrap: nowrap;
62    gap: 8px;
63  }
64  #kiwiki nav.tools > div > strong svg {
65    width: 24px;
66    height: 24px;
67  }
68
69  #kiwiki nav.tools > div#dokuwiki__pagetools > ul {
70    right: -35px;
71  }
72
73  #kiwiki .breadcrumbs {
74    margin: 15px auto;
75  }
76  #kiwiki
77    #dokuwiki__site
78    #dokuwiki__content__wrapper
79    #dokuwiki__aside
80    .dokuwiki__aside_wrapper {
81    gap: 0;
82  }
83  #kiwiki #dokuwiki__site #dokuwiki__top #dokuwiki__content__wrapper {
84    position: relative;
85  }
86
87  #kiwiki #dokuwiki__site #dokuwiki__content__wrapper #dokuwiki__aside {
88    width: 100%;
89    float: none;
90    margin-bottom: 1.4em;
91    order: 1;
92    position: sticky;
93    top: 0;
94    z-index: 8;
95    margin: 0;
96  }
97
98  #kiwiki
99    #dokuwiki__site
100    #dokuwiki__content__wrapper
101    #dokuwiki__aside
102    .dokuwiki__aside__block,
103  #kiwiki
104    #dokuwiki__site
105    #dokuwiki__content__wrapper
106    #dokuwiki__aside
107    #dw__toc {
108    padding: 0;
109    overflow: hidden;
110    display: flex;
111    flex-direction: column;
112  }
113
114  #kiwiki #dokuwiki__site #dokuwiki__content__wrapper #dokuwiki__aside h3 {
115    font-size: 18px;
116    padding: 10px 5px;
117    text-transform: uppercase;
118  }
119  #kiwiki
120    #dokuwiki__site
121    #dokuwiki__content__wrapper
122    #dokuwiki__aside
123    .kiwiki-main-menu
124    h3 {
125    text-align: center;
126    cursor: pointer;
127    margin: 0;
128  }
129
130  #kiwiki
131    #dokuwiki__site
132    #dokuwiki__content__wrapper
133    #dokuwiki__aside
134    .kiwiki-main-menu
135    h3:hover {
136    background-color: var(--kiwiki-btn-hover-bg);
137    color: var(--kiwiki-btn-hover-text);
138  }
139
140  #kiwiki
141    #dokuwiki__site
142    #dokuwiki__content__wrapper
143    #dokuwiki__aside
144    .kiwiki-main-menu
145    h3:after {
146    content: "+";
147    float: right;
148    margin: 0 0.2em;
149  }
150  #kiwiki
151    #dokuwiki__site
152    #dokuwiki__content__wrapper
153    #dokuwiki__aside
154    .kiwiki-main-menu.open
155    h3:after {
156    content: "−";
157  }
158  #kiwiki
159    #dokuwiki__site
160    #dokuwiki__content__wrapper
161    #dokuwiki__aside
162    .kiwiki-main-menu
163    h3
164    + *:not(.kiwiki-edit),
165  #kiwiki
166    #dokuwiki__site
167    #dokuwiki__content__wrapper
168    #dokuwiki__aside
169    #dw__toc {
170    display: none;
171    text-align: center;
172    margin-bottom: 20px;
173  }
174  #kiwiki
175    #dokuwiki__site
176    #dokuwiki__content__wrapper
177    #dokuwiki__aside
178    .kiwiki-main-menu.open
179    h3
180    + *:not(.kiwiki-edit),
181  #kiwiki
182    #dokuwiki__site
183    #dokuwiki__content__wrapper
184    #dokuwiki__aside
185    .kiwiki-main-menu.open
186    + #dw__toc {
187    display: initial;
188  }
189
190  #kiwiki #dokuwiki__site #dokuwiki__content__wrapper #dokuwiki__aside > div {
191    margin: 0;
192  }
193
194  #kiwiki #dokuwiki__content {
195    width: 100%;
196    float: none;
197    margin-left: 0;
198    margin-right: 0;
199    order: 2;
200  }
201  #kiwiki #dokuwiki__site #dokuwiki__content__wrapper {
202    width: 100%;
203    max-width: initial;
204    flex-direction: column;
205    flex-wrap: wrap;
206  }
207  #kiwiki #dokuwiki__content > .group {
208    margin-left: 0;
209    padding: 0;
210  }
211  #kiwiki #dokuwiki__content > .group > .page.group {
212    padding: 15px;
213  }
214  #kiwiki #dokuwiki__content ul {
215    padding: 0 0 0 20px;
216  }
217  #kiwiki #dokuwiki__content ul.admin_tasks {
218    padding: 0;
219  }
220  #kiwiki [dir="rtl"] .hasSidebar #dokuwiki__content > div {
221    margin-right: 0;
222  }
223
224  #kiwiki #dokuwiki__header .a11y.skip,
225  #kiwiki #dokuwiki__aside hr.a11y {
226    left: auto !important;
227    top: auto !important;
228    width: auto !important;
229    height: auto !important;
230    position: static !important;
231  }
232
233  #kiwiki [dir="rtl"] #dokuwiki__header .a11y.skip,
234  #kiwiki [dir="rtl"] #dokuwiki__aside hr.a11y {
235    right: auto !important;
236    left: 1em !important;
237  }
238
239  #kiwiki .tools {
240    text-align: left;
241  }
242
243  #kiwiki [dir="rtl"] .tools {
244    text-align: right;
245  }
246  #kiwiki #dokuwiki__content > .other,
247  #kiwiki #dokuwiki__content > .other ul {
248    flex-wrap: wrap;
249  }
250
251  #kiwiki pre {
252    word-wrap: break-word;
253  }
254  #kiwiki .kiwiki-edit {
255    left: 4px;
256    right: 4px;
257    width: fit-content;
258  }
259  /*EXTENSIONS*/
260  #kiwiki #extension__list .legend > div {
261    grid-template-columns: 20% 80%;
262    border-right: 0;
263    border-bottom: 1px solid var(--kiwiki-ui-300);
264    padding-bottom: 15px;
265  }
266  #kiwiki #dokuwiki__content #extension__list ul.extensionList {
267    padding: 0;
268  }
269  #kiwiki #extension__list ul.extensionList li {
270    display: flex;
271    flex-direction: column;
272    gap: 15px;
273    justify-content: center;
274    background-color: var(--kiwiki-ui-300);
275    border-radius: 10px;
276    border: 0;
277  }
278
279  #kiwiki #extension__list .legend,
280  #kiwiki #extension__manager .actions {
281    width: 100%;
282    float: none;
283    display: flex;
284    justify-content: center;
285  }
286
287  #kiwiki #extension__list .legend dl.details {
288    border-radius: 0;
289  }
290  #kiwiki #extension__list.hasDisplayOptions .enabled,
291  #kiwiki #extension__list.hasDisplayOptions .disabled,
292  #kiwiki #extension__list.hasDisplayOptions .updatable {
293    display: none;
294  }
295  #kiwiki #extension__list.hasDisplayOptions.enabled .enabled,
296  #kiwiki #extension__list.hasDisplayOptions.disabled .disabled,
297  #kiwiki #extension__list.hasDisplayOptions.updatable .updatable {
298    display: flex;
299  }
300
301  /*GO TOP/BOTTOM*/
302  #kiwiki #go {
303    flex-direction: column;
304  }
305} /* /@media */
306