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