1@media screen and (max-width: 480px) {
2	div.dokuwiki .bar-right { display: inline; float: none; }
3	#dw__search button { margin: 0px; margin-left: 1em; }
4	button { margin: 0px 8px 16px 8px; padding: 8px !important; }
5	button:first-of-type { margin-left: 0px; }
6	button.toolbutton { margin: 8px 8px !important; }
7	button:first-child, button.toolbutton:first-child { margin-left: 8px !important; }
8	button img { padding: 8px; }
9	div.dokuwiki #dw__toc ul { line-height: 2em; }
10	div.dokuwiki #dw__toc { font-size: 1em; }
11	div.dokuwiki #dw__toc ul li { margin: 0.35em 0px; }
12	div.dokuwiki div.breadcrumbs { padding: 1em; }
13	.page li, .page dd { margin: 0.85em 0px; }
14
15  /* rearrange elements * /
16  /*
17  https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079
18  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
19  https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
20  */
21  .maincontentrow {
22    display: grid !important;
23    grid-template-columns: repeat(1);
24  }
25  .right { order: 2; float: none !important; }
26  .left { order: 3; float: none !important; }
27  /* /////_______//// */
28}
29
30/* media manager and config manager for mobile */
31/* See more: https://gitlab.com/-/snippets/2071984 */
32@media screen and (max-width: 480px){
33  fieldset,
34  #mediamanager__page,
35  #mediamanager__page .filelist{
36    max-width: 100%; min-width: unset;
37  }
38  #mediamanager__page .file,
39  #mediamanager__page .namespaces,
40  #mediamanager__page .panel {
41    width: 100%; clear: both; float: none;
42  }
43
44/* #mediamanager__page .namespaces { min-width: unset; } */
45
46  /*.page li, .page dd { margin: 1.35em 0px !important; display: block; }*/
47  #config__manager tr { }
48  #config__manager td { display: block;  padding: 1.15em 0px; max-width: 75%;  }
49  #config__manager fieldset {  margin: 1em 0px; width: 100%; box-sizing: border-box; }
50
51     /* make <select> not exceed it's parent div's width */
52    /* https://stackoverflow.com/q/44810056/337306 */
53    div.input, label.nowrap { display: flex; } select { width: 100%; flex-shrink: 1; }
54
55  fieldset { width: unset; }
56  #config__manager fieldset td.value { width: unset; }
57  td.label { word-wrap: anywhere; }
58
59  #config__manager td .input,
60  #config__manager fieldset td.value,
61  input, textarea,
62  #config__manager td input.edit,
63  #config__manager td textarea.edit {
64    max-width: 100%;
65    width: auto;
66  }
67}
68