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