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