xref: /template/kiwiki/css/mobile.css (revision 6d5babb2467eb7e57dc24c981ab68f447193c53d) 
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  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper #dw__search {
21    order: 3;
22    min-width: initial;
23    padding-bottom: 10px;
24    display: none;
25    width: 100%;
26  }
27  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper #dw__search.open {
28    display: inline;
29  }
30  #kiwiki #dokuwiki__header {
31    padding: 0 5px;
32    margin: 0;
33  }
34  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper {
35    flex-wrap: wrap;
36    gap: 0;
37  }
38  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper .group {
39    order: 1;
40  }
41  #kiwiki #dokuwiki__header > .dokuwiki__header__wrapper nav {
42    order: 2;
43  }
44
45  #kiwiki .breadcrumbs {
46    margin: 15px auto;
47  }
48  #kiwiki
49    #dokuwiki__site
50    #dokuwiki__content__wrapper
51    #dokuwiki__aside
52    .dokuwiki__aside_wrapper {
53    gap: 0;
54  }
55  #kiwiki #dokuwiki__site #dokuwiki__top #dokuwiki__content__wrapper {
56    position: relative;
57  }
58
59  #kiwiki #dokuwiki__site #dokuwiki__content__wrapper #dokuwiki__aside {
60    width: 100%;
61    float: none;
62    margin-bottom: 1.4em;
63    order: 1;
64    position: sticky;
65    top: 0;
66    z-index: 8;
67    margin: 0;
68  }
69  #kiwiki
70    #dokuwiki__site
71    #dokuwiki__content__wrapper
72    #dokuwiki__aside
73    .dokuwiki__aside__block,
74  #kiwiki
75    #dokuwiki__site
76    #dokuwiki__content__wrapper
77    #dokuwiki__aside
78    #dw__toc {
79    padding: 0;
80    overflow: hidden;
81    display: flex;
82    flex-direction: column;
83  }
84  #kiwiki #dokuwiki__site #dokuwiki__content__wrapper #dokuwiki__aside h3 {
85    font-size: 18px;
86    padding: 10px 5px;
87    text-transform: uppercase;
88  }
89  #kiwiki
90    #dokuwiki__site
91    #dokuwiki__content__wrapper
92    #dokuwiki__aside
93    .kiwiki-main-menu
94    h3 {
95    text-align: center;
96    cursor: pointer;
97    margin: 0;
98  }
99
100  #kiwiki
101    #dokuwiki__site
102    #dokuwiki__content__wrapper
103    #dokuwiki__aside
104    .kiwiki-main-menu
105    h3:hover {
106    background-color: var(--kiwiki-btn-hover-bg);
107    color: var(--kiwiki-white);
108  }
109
110  #kiwiki
111    #dokuwiki__site
112    #dokuwiki__content__wrapper
113    #dokuwiki__aside
114    .kiwiki-main-menu
115    h3:after {
116    content: "+";
117    float: right;
118    margin: 0 0.2em;
119  }
120  #kiwiki
121    #dokuwiki__site
122    #dokuwiki__content__wrapper
123    #dokuwiki__aside
124    .kiwiki-main-menu.open
125    h3:after {
126    content: "−";
127  }
128  #kiwiki
129    #dokuwiki__site
130    #dokuwiki__content__wrapper
131    #dokuwiki__aside
132    .kiwiki-main-menu
133    h3
134    + ul,
135  #kiwiki
136    #dokuwiki__site
137    #dokuwiki__content__wrapper
138    #dokuwiki__aside
139    #dw__toc {
140    display: none;
141    text-align: center;
142    margin-bottom: 20px;
143  }
144  #kiwiki
145    #dokuwiki__site
146    #dokuwiki__content__wrapper
147    #dokuwiki__aside
148    .kiwiki-main-menu.open
149    h3
150    + ul,
151  #kiwiki
152    #dokuwiki__site
153    #dokuwiki__content__wrapper
154    #dokuwiki__aside
155    .kiwiki-main-menu.open
156    + #dw__toc {
157    display: initial;
158  }
159
160  #kiwiki #dokuwiki__site #dokuwiki__content__wrapper #dokuwiki__aside > div {
161    margin: 0;
162  }
163
164  #kiwiki #dokuwiki__content {
165    width: 100%;
166    float: none;
167    margin-left: 0;
168    margin-right: 0;
169    order: 2;
170  }
171  #kiwiki #dokuwiki__site #dokuwiki__content__wrapper {
172    width: 100%;
173    max-width: initial;
174    flex-direction: column;
175    flex-wrap: wrap;
176  }
177  #kiwiki #dokuwiki__content > .group {
178    margin-left: 0;
179    padding: 15px;
180  }
181
182  #kiwiki #dokuwiki__content ul {
183    padding: 0 0 0 20px;
184  }
185  #kiwiki [dir="rtl"] .hasSidebar #dokuwiki__content > div {
186    margin-right: 0;
187  }
188
189  #kiwiki #dokuwiki__header .a11y.skip,
190  #kiwiki #dokuwiki__aside hr.a11y {
191    left: auto !important;
192    top: auto !important;
193    width: auto !important;
194    height: auto !important;
195    position: static !important;
196  }
197
198  #kiwiki [dir="rtl"] #dokuwiki__header .a11y.skip,
199  #kiwiki [dir="rtl"] #dokuwiki__aside hr.a11y {
200    right: auto !important;
201    left: 1em !important;
202  }
203
204  #kiwiki .tools {
205    text-align: left;
206  }
207
208  #kiwiki [dir="rtl"] .tools {
209    text-align: right;
210  }
211  #kiwiki #dokuwiki__content > .other,
212  #kiwiki #dokuwiki__content > .other ul {
213    flex-wrap: wrap;
214  }
215} /* /@media */
216