1 2/* mobile phones responsive 3-------------------------------------------------*/ 4 5@media screen and (max-width: 1000px) { 6 body { 7 width: unset; 8 } 9} 10@media screen and (max-width: 500px) { 11 #nav li { clear: both; float: none; padding: 2px; } 12 #nav { 13 background: url('images/menuback.png') repeat center bottom; 14 background-size: cover; 15 padding: 8px 0px; 16 position: static; 17 /*padding: 30px 10px 110px;*/ 18 } 19 #nav li:hover a { 20 background: url('images/nav-bg.png') repeat right -85px; 21 } 22 #wrapper { overflow: auto; } 23 #content { width: 70%; } 24 .post-data span { margin-bottom: 8px; display: block; } 25 ul li { margin: 1em 0px !important; } 26 button { margin: 6px 8px; } 27 button img { padding: 3px; } 28 textarea { font-family: 'Courier New', 'Courier', monospace; } 29 .notify { width: 75% !important; } 30} 31 32@media screen and (max-width: 480px) { 33 #content { width: 100%; padding: 0px 1em; margin: 0px; box-sizing: border-box; } 34} 35 36 37/* media manager and config manager for mobile */ 38 39#config__manager fieldset { background-color: transparent; } 40 41@media screen and (max-width: 480px){ 42 fieldset, 43 #mediamanager__page, 44 #mediamanager__page .filelist{ 45 max-width: 100%; min-width: unset; 46 } 47 #mediamanager__page .file, 48 #mediamanager__page .namespaces, 49 #mediamanager__page .panel { 50 width: 100%; clear: both; float: none; 51 } 52 53/* #mediamanager__page .namespaces { min-width: unset; } */ 54 55 /*.page li, .page dd { margin: 1.35em 0px !important; display: block; }*/ 56 #config__manager tr { } 57 #config__manager td { display: block; padding: 1.15em 0px; max-width: 75%; } 58 #config__manager fieldset { margin: 1em 0px; width: 100%; box-sizing: border-box; } 59 60 /* make <select> not exceed it's parent div's width */ 61 /* https://stackoverflow.com/q/44810056/337306 */ 62 div.input, label.nowrap { display: flex; } select { width: 100%; flex-shrink: 1; } 63 64 fieldset { width: unset; } 65 #config__manager fieldset td.value { width: unset; } 66 td.label { word-wrap: anywhere; } 67 68 #config__manager td .input, 69 #config__manager fieldset td.value, 70 input, textarea, 71 #config__manager td input.edit, 72 #config__manager td textarea.edit { 73 max-width: 100%; 74 width: auto; 75 } 76} 77 78