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