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