1@media screen and (max-width: 480px) {
2	ul, p { margin: 1em 0px; }
3	.page ul, .page ol { margin-left: 1em; }
4	li.user { display: block !important; float: none !important; }
5	li.profile { margin-left: 0px; }
6	.page li, .page dd { margin: 0.85em 0.35em; }
7	button { margin: 12px 8px; }
8	button img { padding: 5px; }
9	#dokuwiki__header .tools ul li {
10		display: inline-block;
11		margin: 0.35em 0.85em;
12	}
13}
14
15
16/* media manager and config manager for mobile */
17@media screen and (max-width: 480px){
18  fieldset,
19  #mediamanager__page,
20  #mediamanager__page .filelist{
21    max-width: 100%; min-width: unset;
22  }
23  #mediamanager__page .file,
24  #mediamanager__page .namespaces,
25  #mediamanager__page .panel {
26    width: 100%; clear: both; float: none;
27  }
28
29/* #mediamanager__page .namespaces { min-width: unset; } */
30
31  /*.page li, .page dd { margin: 1.35em 0px !important; display: block; }*/
32  #config__manager tr { }
33  #config__manager td { display: block;  padding: 1.15em 0px; max-width: 75%;  }
34  #config__manager fieldset {  margin: 1em 0px; width: 100%; box-sizing: border-box; }
35
36     /* make <select> not exceed it's parent div's width */
37    /* https://stackoverflow.com/q/44810056/337306 */
38    div.input, label.nowrap { display: flex; } select { width: 100%; flex-shrink: 1; }
39
40  fieldset { width: unset; }
41  #config__manager fieldset td.value { width: unset; }
42  td.label { word-wrap: anywhere; }
43
44  #config__manager td .input,
45  #config__manager fieldset td.value,
46  input, textarea,
47  #config__manager td input.edit,
48  #config__manager td textarea.edit {
49    max-width: 100%;
50    width: auto;
51  }
52}
53
54