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.showSidebar #dokuwiki__content { 55 float: none; 56 margin-left: 0; 57 width: 100%; 58 59 > .pad { 60 margin-left: 0; 61 } 62} 63 64[dir=rtl] .showSidebar #dokuwiki__content, 65[dir=rtl] .showSidebar #dokuwiki__content > .pad { 66 margin-right: 0; 67} 68 69/* preview */ 70.dokuwiki.hasSidebar div.preview { 71 border-right: none; 72} 73 74[dir=rtl] .dokuwiki.hasSidebar div.preview { 75 border-left: none; 76} 77 78/* toc */ 79#dw__toc { 80 float: none; 81 margin: 0 0 1em 0; 82 width: auto; 83 border-left-width: 0; 84 border-bottom: 1px solid @ini_border; 85} 86[dir=rtl] #dw__toc { 87 float: none; 88 margin: 0 0 1em 0; 89 border-right-width: 0; 90} 91 92.dokuwiki h3.toggle { 93 padding: 0 .5em .5em 0; 94} 95#dw__toc > div, 96#dokuwiki__aside div.content { 97 padding: .2em 0 .5em; 98} 99 100/* page */ 101.dokuwiki div.page { 102 padding: 1em; 103} 104/* enable horizontal scrolling in media manager */ 105.mode_media div.page { 106 overflow: auto; 107} 108 109/* push pagetools closer to content */ 110#dokuwiki__pagetools { 111 top: 0; 112} 113.showSidebar #dokuwiki__pagetools { 114 top: 3.5em; 115} 116 117 118/* _edit */ 119.dokuwiki div.section_highlight { 120 border-width: 0 .1em; 121} 122.dokuwiki div.preview { 123 margin: 0 -1em; 124 padding: 1em; 125} 126 127/* _recent */ 128.dokuwiki form.changes ul { 129 padding-left: 0; 130} 131[dir=rtl] .dokuwiki form.changes ul { 132 padding-right: 0; 133} 134 135 136} /* /@media */ 137 138 139/* for screen widths in the smartphone range 140********************************************************************/ 141@media only screen and (max-width: @ini_phone_width) { 142 143#screen__mode { 144 z-index: 2; /* for detecting media queries in JavaScript (see script.js) */ 145} 146 147body { 148 font-size: 100%; 149} 150 151/*____________ structure ____________*/ 152 153#dokuwiki__site { 154 max-width: 100%; 155 156 > .site { 157 padding: 0 .5em; 158 } 159} 160 161#dokuwiki__aside { 162 margin-bottom: 0; 163} 164 165#dokuwiki__header { 166 padding: .5em 0; 167} 168 169 170/*____________ header ____________*/ 171 172#dokuwiki__header ul.a11y.skip { 173 position: static !important; 174 left: 0 !important; 175 width: auto !important; 176 height: auto !important; 177 float: right; 178 font-size: 0.875em; 179 list-style: none; 180 padding-left: 0; 181 margin: 0; 182 183 li { 184 margin-left: .35em; 185 display: inline; 186 } 187} 188[dir=rtl] #dokuwiki__header ul.a11y.skip { 189 left: auto !important; 190 right: 0 !important; 191 float: left; 192 padding-right: 0; 193 194 li { 195 margin: 0 .35em 0 0; 196 } 197} 198 199#dokuwiki__header .headings, 200#dokuwiki__header .tools { 201 float: none; 202 text-align: left; 203 width: auto; 204 margin-bottom: .5em; 205} 206[dir=rtl] #dokuwiki__header .headings, 207[dir=rtl] #dokuwiki__header .tools { 208 float: none; 209 text-align: right; 210 width: auto; 211} 212#dokuwiki__sitetools { 213 text-align: left; 214} 215[dir=rtl] #dokuwiki__sitetools { 216 text-align: right; 217} 218#dokuwiki__usertools, 219#dokuwiki__sitetools ul, 220#dokuwiki__sitetools h3, 221#dokuwiki__pagetools, 222.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */ 223.dokuwiki .pageId { 224 display: none; 225} 226 227/* search form */ 228#dokuwiki__sitetools form.search { 229 float: left; 230 margin: 0 .2em .2em 0; 231 width: 49%; 232} 233[dir=rtl] #dokuwiki__sitetools form.search { 234 float: right; 235 margin: 0 0 .2em .2em; 236} 237 238#dokuwiki__sitetools form.search input { 239 width: 100% !important; 240} 241.dokuwiki form.search div.ajax_qsearch { 242 display: none !important; 243} 244 245/* action dropdown is alternative for all hidden tools */ 246#dokuwiki__header .mobileTools { 247 display: block; 248 font-size: 0.875em; 249 margin: 0 0 .2em 0; 250 float: right; 251 width: 49%; 252} 253[dir=rtl] #dokuwiki__header .mobileTools { 254 float: left; 255} 256#dokuwiki__header .mobileTools select { 257 padding: .3em .1em; 258 width: 100% !important; 259} 260 261/* force same height on search input and tools select */ 262#dokuwiki__sitetools form.search input, 263#dokuwiki__header .mobileTools select { 264 height: 2.1em; 265 line-height: 2.1em; 266 overflow: visible; 267} 268 269 270/*____________ content ____________*/ 271 272#dokuwiki__aside > .pad, 273.dokuwiki div.page { 274 padding: .5em; 275} 276 277/* form elements */ 278#config__manager fieldset td.value, 279#config__manager td .input, 280.dokuwiki fieldset, 281.dokuwiki input.edit, 282.dokuwiki textarea { 283 width: auto !important; 284 max-width: 100% !important; 285} 286.dokuwiki select { 287 max-width: 100% !important; 288} 289#config__manager fieldset { 290 margin-left: 0; 291 margin-right: 0; 292} 293 294.dokuwiki label.block { 295 text-align: left; 296 297 span { 298 display: block; 299 } 300} 301[dir=rtl] .dokuwiki label.block { 302 text-align: right; 303} 304 305/* _edit */ 306.dokuwiki div.section_highlight { 307 border-width: 0; 308} 309.dokuwiki div.preview { 310 margin: 0 -.5em; 311 padding: .5em; 312} 313 314 315} /* /@media */ 316 317 318/* for screen heights smaller than the pagetools permit 319********************************************************************/ 320@media only screen and (max-height: 400px) { 321// 400px is only roughly the required value, this may be wrong under non-standard circumstances 322 323#dokuwiki__pagetools div.tools { 324 position: static; 325} 326 327 328} /* /@media */ 329