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