1/* responsive */ 2@media screen and (max-width: 850px) { 3 #wrapper { width: 100%; } 4 #header, #column1, #column2, #column3, #footer { 5 width: 100%; 6 min-width: unset; 7 box-sizing: border-box; 8 padding: 0px 1em; 9 } 10 h1, h2, h3, h4, h5, h6{ 11 line-height: 0.85em; 12 } 13 #column1 h3, #column2 h3, #column3 h3, #writtensidebar h1 { 14 margin: 0px; 15 } 16 #column2 { 17 padding-bottom: 1em; 18 margin-bottom: 2em; 19 border-bottom: 2px solid black; 20 } 21 #column1 ul, #column3 ul, #writtensidebar ul { 22 text-align: left; 23 margin: 0px; 24 } 25 #column1 li, #column2 li, #column3 li, #writtensidebar li, 26 #column1 dd, #column2 dd, #column3 dd, #writtensidebar dd, 27 .page li, .page dd 28 { 29 margin: 1.35em 0px; 30 } 31 ul ul { margin-left: 1.35em; } 32 button img { padding: 5px; } 33 button { margin: 12px 8px; } 34 textarea { font-size: 1.15em; } 35 36 /* rearrange elements * / 37 /* 38 https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079 39 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns 40 https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit 41 */ 42 #wrapper { 43 display: grid !important; 44 grid-template-rows: none; 45 /*grid-template-columns: repeat(1);*/ 46 } 47 #column2 { order: 1; float: none !important; } 48 #column1 { order: 2; float: none !important; } 49 #column3 { order: 3; float: none !important; } 50 #footer { order: 4; float: none !important; } 51} 52 53/* media manager and config manager for mobile */ 54@media screen and (max-width: 480px){ 55 fieldset, 56 #mediamanager__page, 57 #mediamanager__page .filelist{ 58 max-width: 100%; min-width: unset; 59 } 60 #mediamanager__page .file, 61 #mediamanager__page .namespaces, 62 #mediamanager__page .panel { 63 width: 100%; clear: both; float: none; 64 } 65 66/* #mediamanager__page .namespaces { min-width: unset; } */ 67 68 /*.page li, .page dd { margin: 1.35em 0px !important; display: block; }*/ 69 #config__manager tr { } 70 #config__manager td { display: block; padding: 1.15em 0px; max-width: 75%; } 71 #config__manager fieldset { margin: 1em 0px; width: 100%; box-sizing: border-box; } 72 73 /* make <select> not exceed it's parent div's width */ 74 /* https://stackoverflow.com/q/44810056/337306 */ 75 div.input, label.nowrap { display: flex; } select { width: 100%; flex-shrink: 1; } 76 77 fieldset { width: unset; } 78 #config__manager fieldset td.value { width: unset; } 79 td.label { word-wrap: anywhere; } 80 81 #config__manager td .input, 82 #config__manager fieldset td.value, 83 input, textarea, 84 #config__manager td input.edit, 85 #config__manager td textarea.edit { 86 max-width: 100%; 87 width: auto; 88 } 89} 90