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