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 * some additions by zatalyz (in cc0, have a fun) 7 */ 8 9/* for detecting media queries in JavaScript (see script.js): */ 10#screen__mode { 11 position: relative; 12 z-index: 0; 13} 14/* Things who are not displayed on normal screen (but detailled below) 15********************************************************************/ 16#dokuwiki__header .mobileTools { 17 display: none; /* hide mobile tools dropdown to only show in mobile view */ 18} 19 20 21/* for screen widths in the smartphone range 22********************************************************************/ 23@media only screen and (max-width: @ini_phone_width) { 24 25/* element non displayed on mobile */ 26.nomobile { 27 display:none !important; 28} 29 30#screen__mode { 31 z-index: 2; /* for detecting media queries in JavaScript (see script.js) */ 32} 33 34#dokuwiki__site .wrapper { 35 display: block; 36} 37 38/*____________ structure - sidebar ____________*/ 39 40#dokuwiki__sidebar { 41 margin-bottom: 1em; 42 width: 100%; 43 float: none; 44} 45 46#dokuwiki__sidebar > .pad, 47[dir=rtl] #dokuwiki__sidebar > .pad { 48 margin-bottom: 1em; 49 padding: 1em; 50 margin-bottom: 0; 51 display:flex; 52 flex-direction: column; 53} 54 55#dokuwiki__sidebar h3.toggle { 56 font-size: 1em; 57 display:flex; 58 flex-direction: row-reverse; 59 align-items: center; 60 justify-content: space-between; 61 62 &.closed { 63 margin: 0; 64 padding-bottom: 0; 65 background-color: @ini_background; 66 67 } 68 &.open { 69 border-bottom: 1px solid @ini_border; 70 padding-bottom: 0; 71 background-color: @ini_background; 72 margin: 0; 73 } 74} 75 76 77.showSidebar #dokuwiki__content, #dokuwiki__content { 78 float: none; 79 margin-left: 0; 80 width: 100%; 81 margin:0; 82 max-width: calc (@ini_article_width + 10); 83 min-width: inherit; 84 85 > .pad { 86 margin-left: 0; 87 } 88} 89 90[dir=rtl] .showSidebar #dokuwiki__content, 91[dir=rtl] .showSidebar #dokuwiki__content > .pad { 92 margin-right: 0; 93} 94 95/*____________ header ____________*/ 96 97#dokuwiki__header ul.a11y.skip { 98 position: static !important; 99 left: 0 !important; 100 width: auto !important; 101 height: auto !important; 102 float: right; 103 font-size: 0.875em; 104 list-style: none; 105 padding-left: 0; 106 margin: 0; 107 108 li { 109 margin-left: .35em; 110 display: inline; 111 } 112} 113[dir=rtl] #dokuwiki__header ul.a11y.skip { 114 left: auto !important; 115 right: 0 !important; 116 float: left; 117 padding-right: 0; 118 119 li { 120 margin: 0 .35em 0 0; 121 } 122} 123 124#dokuwiki__header .headings, 125#dokuwiki__header .tools { 126 float: none; 127 text-align: left; 128 width: auto; 129 margin-bottom: .5em; 130} 131[dir=rtl] #dokuwiki__header .headings, 132[dir=rtl] #dokuwiki__header .tools { 133 float: none; 134 text-align: right; 135 width: auto; 136} 137#dokuwiki__sitetools { 138 text-align: left; 139} 140[dir=rtl] #dokuwiki__sitetools { 141 text-align: right; 142} 143 144#dokuwiki__header .headings { 145 display:block; 146} 147 148/* search form */ 149.mobileTools form.search { 150 float: left; 151 margin: 0 .2em .2em 0; 152 width: 100%; 153} 154[dir=rtl] .mobileTools form.search { 155 float: right; 156 margin: 0 0 .2em .2em; 157} 158 159.mobileTools form.search input { 160 width: 100% !important; 161} 162.dokuwiki form.search div.ajax_qsearch { 163 display: none !important; 164} 165 166/* action dropdown is alternative for all hidden tools */ 167#dokuwiki__header .mobileTools { 168 display: block; 169 font-size: 0.875em; 170 margin: 0 0 .2em 0; 171 width: 100%; 172} 173[dir=rtl] #dokuwiki__header .mobileTools { 174 float: left; 175} 176#dokuwiki__header .mobileTools select { 177 padding: .3em .1em; 178 width: 100% !important; 179} 180 181/* force same height on search input and tools select */ 182#dokuwiki__sitetools form.search input, 183#dokuwiki__header .mobileTools select { 184 height: 2.1em; 185 line-height: 2.1em; 186 overflow: visible; 187} 188 189 190/*____________ content ____________*/ 191 192 193#dokuwiki__sidebar > .pad, 194.dokuwiki div.page { 195 padding: 0; 196 margin:0; 197} 198 199.kharticle { 200 margin:0.3em; 201} 202/* form elements */ 203#config__manager fieldset td.value, 204#config__manager td .input, 205.dokuwiki fieldset, 206/*.dokuwiki input.edit,*/ 207.dokuwiki textarea { 208 width: auto !important; 209 max-width: 100% !important; 210} 211.dokuwiki select { 212 max-width: 100% !important; 213} 214#config__manager fieldset { 215 margin-left: 0; 216 margin-right: 0; 217} 218 219.dokuwiki label.block { 220 text-align: left; 221 222 span { 223 display: block; 224 } 225} 226[dir=rtl] .dokuwiki label.block { 227 text-align: right; 228} 229 230tbody tr td ul, tbody tr td ul li { 231 margin: 0 !important; 232} 233 234/* _edit */ 235.dokuwiki div.section_highlight { 236 margin: 0; 237 padding: 0; 238 border-width: 0; 239} 240.dokuwiki div.preview { 241 margin: 0 -.5em; 242 padding: .5em; 243 width: initial; 244} 245 246/* to top */ 247.to_top { 248 display:block; 249 right:1em; 250} 251 252/** Plugin **/ 253/* Translation */ 254.dokuwiki div.plugin_translation { 255 display: block !important; 256 float:none; 257 margin-bottom:1em; 258 text-align:center; 259 } 260/* Wrap */ 261.dokuwiki div.wrap_box { 262 width: 100% !important; 263 } 264 265 266} /* /@media */ 267 268 269/* for screen heights smaller than the pagetools permit 270********************************************************************/ 271@media only screen and (max-height: 400px) { 272// 400px is only roughly the required value, this may be wrong under non-standard circumstances 273 274.kh_pagetools div.tools { 275 position: static; 276} 277 278 279} /* /@media */ 280