xref: /template/kiwiki/css/mobile.css (revision 52d9eff955669d8809e1975c05b877a3916f9ddf)
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
72  #kiwiki nav.tools > div#dokuwiki__pagetools > ul {
73    right: -35px;
74  }
75
76  #kiwiki .breadcrumbs {
77    margin: 15px auto;
78  }
79  #kiwiki .kiwiki_aside{
80    width: 100%;
81    float: none;
82    margin-bottom:0;
83    order: 1;
84    z-index: 8;
85    position: sticky;
86    top: 0;
87  }
88  #kiwiki .kiwiki_aside .dokuwiki__aside_wrapper {
89    gap: 0;
90    flex-direction: column-reverse;
91  }
92  #kiwiki #dokuwiki__site #dokuwiki__top #dokuwiki__content__wrapper {
93    position: relative;
94  }
95
96
97  #kiwiki .kiwiki_aside .dokuwiki__aside_wrapper #dw__toc {
98    position: sticky;
99    width: 100%;
100    top:0;
101  }
102
103  #kiwiki .kiwiki_aside  .dokuwiki__aside_wrapper > div {
104    padding: 0;
105    overflow: hidden;
106    display: flex;
107    flex-direction: column;
108  }
109
110  #kiwiki .kiwiki_aside h3 {
111    font-size: 18px;
112    padding: 10px 5px;
113    text-transform: uppercase;
114  }
115  #kiwiki .kiwiki_aside .dokuwiki__aside_wrapper > div.kiwiki-sidebar
116   {
117    display: none;
118  }
119
120  #kiwiki .kiwiki-sidebar-mobile{
121    display: flex;
122    margin-top: 20px;
123  }
124
125  #kiwiki .kiwiki_aside > div {
126    margin: 0;
127  }
128
129  #kiwiki #dokuwiki__content {
130    width: 100%;
131    float: none;
132    margin-left: 0;
133    margin-right: 0;
134    order: 2;
135  }
136  #kiwiki #dokuwiki__site #dokuwiki__content__wrapper {
137    width: 100%;
138    max-width: initial;
139    flex-direction: column;
140    flex-wrap: wrap;
141  }
142  #kiwiki #dokuwiki__content > .group {
143    margin-left: 0;
144    padding: 0;
145  }
146  #kiwiki #dokuwiki__content > .group > .page.group {
147    padding: 15px;
148  }
149  #kiwiki #dokuwiki__content ul {
150    padding: 0 0 0 20px;
151  }
152  #kiwiki #dokuwiki__content ul.admin_tasks {
153    padding: 0;
154  }
155  #kiwiki [dir="rtl"] .hasSidebar #dokuwiki__content > div {
156    margin-right: 0;
157  }
158
159  #kiwiki #dokuwiki__header .a11y.skip,
160  #kiwiki #dokuwiki__aside hr.a11y {
161    left: auto !important;
162    top: auto !important;
163    width: auto !important;
164    height: auto !important;
165    position: static !important;
166  }
167
168  #kiwiki [dir="rtl"] #dokuwiki__header .a11y.skip,
169  #kiwiki [dir="rtl"] #dokuwiki__aside hr.a11y {
170    right: auto !important;
171    left: 1em !important;
172  }
173
174  #kiwiki .tools {
175    text-align: left;
176  }
177
178  #kiwiki [dir="rtl"] .tools {
179    text-align: right;
180  }
181  #kiwiki #dokuwiki__content > .other,
182  #kiwiki #dokuwiki__content > .other ul {
183    flex-wrap: wrap;
184  }
185
186  #kiwiki pre {
187    word-wrap: break-word;
188  }
189  #kiwiki .kiwiki-edit {
190    left: initial;
191    right: 4px;
192    width: fit-content;
193  }
194  /*EXTENSIONS*/
195  #kiwiki #extension__list .legend > div {
196    grid-template-columns: 20% 80%;
197    border-right: 0;
198    border-bottom: 1px solid var(--kiwiki-ui-300);
199    padding-bottom: 15px;
200  }
201  #kiwiki #dokuwiki__content #extension__list ul.extensionList {
202    padding: 0;
203  }
204  #kiwiki #extension__list ul.extensionList li {
205    display: flex;
206    flex-direction: column;
207    gap: 15px;
208    justify-content: center;
209    background-color: var(--kiwiki-ui-300);
210    border-radius: 10px;
211    border: 0;
212  }
213
214  #kiwiki #extension__list .legend,
215  #kiwiki #extension__manager .actions {
216    width: 100%;
217    float: none;
218    display: flex;
219    justify-content: center;
220  }
221
222  #kiwiki #extension__list .legend dl.details {
223    border-radius: 0;
224  }
225  #kiwiki #extension__list.hasDisplayOptions .enabled,
226  #kiwiki #extension__list.hasDisplayOptions .disabled,
227  #kiwiki #extension__list.hasDisplayOptions .updatable {
228    display: none;
229  }
230  #kiwiki #extension__list.hasDisplayOptions.enabled .enabled,
231  #kiwiki #extension__list.hasDisplayOptions.disabled .disabled,
232  #kiwiki #extension__list.hasDisplayOptions.updatable .updatable {
233    display: flex;
234  }
235
236  #kiwiki .before-content {
237    display: flex;
238    flex-direction: column-reverse;
239    align-items: center;
240  }
241  #dokuwiki__right_before{
242    width: 100%;
243    justify-content: space-between;
244  }
245
246  /*Main Menu*/
247  .kiwiki-main-menu__wrapper #kiwiki-main-menu__close {
248    top: 5px;
249    left:-18px;
250  }
251
252  /*GO TOP/BOTTOM*/
253  #kiwiki #go {
254    flex-direction: column;
255  }
256} /* /@media */
257