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