1/** 2 * This file provides styles for mobile devices 3 * and smaller screens (up to 480px and 768px width). 4 * 5 * @author Anika Henke <anika@selfthinker.org> 6 */ 7 8/* for detecting media queries in JavaScript (see script.js): */ 9#screen__mode { 10 position: relative; 11 z-index: 0; 12} 13 14/* for screen widths in the tablet range 15********************************************************************/ 16@media only screen and (max-width: @ini_tablet_width) { 17 18#screen__mode { 19 z-index: 1; /* for detecting media queries in JavaScript (see script.js) */ 20} 21 22/* structure */ 23#dokuwiki__aside { 24 width: 100%; 25 float: none; 26 margin-bottom: 1.5em; 27} 28 29#dokuwiki__aside > .pad, 30[dir=rtl] #dokuwiki__aside > .pad { 31 margin: 0 0 .5em; 32 /* style like .page */ 33 background: @ini_background; 34 color: inherit; 35 border: 1px solid #eee; 36 box-shadow: 0 0 .5em @ini_text_alt; 37 border-radius: 2px; 38 padding: 1em; 39 margin-bottom: .5em; 40} 41 42#dokuwiki__aside h3.toggle { 43 font-size: 1em; 44 45 &.closed { 46 margin-bottom: 0; 47 padding-bottom: 0; 48 } 49 &.open { 50 border-bottom: 1px solid @ini_border; 51 } 52} 53 54/* toc */ 55#dw__toc { 56 float: none; 57 margin: 0 0 1em 0; 58 width: auto; 59 border-left-width: 0; 60 border-bottom: 1px solid @ini_border; 61} 62[dir=rtl] #dw__toc { 63 float: none; 64 margin: 0 0 1em 0; 65 border-right-width: 0; 66} 67 68.dokuwiki h3.toggle { 69 padding: 0 .5em .5em 0; 70} 71#dw__toc > div, 72#dokuwiki__aside div.content { 73 padding: .2em 0 .5em; 74} 75 76/* page */ 77.dokuwiki div.page { 78 padding: 1em; 79} 80/* enable horizontal scrolling in media manager */ 81.mode_media div.page { 82 overflow: auto; 83} 84 85/* push pagetools closer to content */ 86#dokuwiki__pagetools { 87 top: 0; 88} 89 90 91/* _edit */ 92.dokuwiki div.section_highlight { 93 margin: 0 -1em; 94 padding: 0 .5em; 95 border-width: 0 .5em; 96} 97.dokuwiki div.preview { 98 margin: 0 -1em; 99 padding: 1em; 100} 101 102/* _recent */ 103.dokuwiki form.changes ul { 104 padding-left: 0; 105} 106[dir=rtl] .dokuwiki form.changes ul { 107 padding-right: 0; 108} 109 110 111} /* /@media */ 112 113 114/* for screen widths in the smartphone range 115********************************************************************/ 116@media only screen and (max-width: @ini_phone_width) { 117 118#screen__mode { 119 z-index: 2; /* for detecting media queries in JavaScript (see script.js) */ 120} 121 122body { 123 font-size: 100%; 124} 125 126/*____________ structure ____________*/ 127/* 128#dokuwiki__site { 129 max-width: 100%; 130 131 > .site { 132 padding: 0 .5em; 133 } 134} 135*/ 136#dokuwiki__aside { 137 margin-bottom: 0; 138} 139 140#dokuwiki__sitetools { 141 text-align: left; 142} 143[dir=rtl] #dokuwiki__sitetools { 144 text-align: right; 145} 146#dokuwiki__usertools, 147#dokuwiki__sitetools ul, 148#dokuwiki__sitetools h3, 149#dokuwiki__pagetools, 150.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */ 151.dokuwiki .pageId { 152 display: none; 153} 154 155/* search form */ 156#dokuwiki__sitetools form.search { 157 float: left; 158 margin: 0 .2em .2em 0; 159 width: 49%; 160} 161[dir=rtl] #dokuwiki__sitetools form.search { 162 float: right; 163 margin: 0 0 .2em .2em; 164} 165 166#dokuwiki__sitetools form.search input { 167 width: 100% !important; 168} 169.dokuwiki form.search div.ajax_qsearch { 170 display: none !important; 171} 172 173/* force same height on search input and tools select */ 174#dokuwiki__sitetools form.search input { 175 height: 2.1em; 176 line-height: 2.1em; 177 overflow: visible; 178} 179 180 181/*____________ content ____________*/ 182 183#dokuwiki__aside > .pad, 184.dokuwiki div.page { 185 padding: .5em; 186} 187 188/* form elements */ 189#config__manager fieldset td.value, 190#config__manager td .input, 191.dokuwiki fieldset, 192.dokuwiki input.edit, 193.dokuwiki textarea { 194 width: auto !important; 195 max-width: 100% !important; 196} 197.dokuwiki select { 198 max-width: 100% !important; 199} 200#config__manager fieldset { 201 margin-left: 0; 202 margin-right: 0; 203} 204 205.dokuwiki label.block { 206 text-align: left; 207 208 span { 209 display: block; 210 } 211} 212[dir=rtl] .dokuwiki label.block { 213 text-align: right; 214} 215 216/* _edit */ 217.dokuwiki div.section_highlight { 218 margin: 0; 219 padding: 0; 220 border-width: 0; 221} 222.dokuwiki div.preview { 223 margin: 0 -.5em; 224 padding: .5em; 225} 226 227 228} /* /@media */ 229 230 231/* for screen heights smaller than the pagetools permit 232********************************************************************/ 233@media only screen and (max-height: 400px) { 234// 400px is only roughly the required value, this may be wrong under non-standard circumstances 235 236#dokuwiki__pagetools div.tools { 237 position: static; 238} 239 240 241} /* /@media */ 242