1/******************************************************************** 2Screen and Print Styles for the Wrap Plugin 3********************************************************************/ 4 5.dokuwiki { 6 7/* resetting the box model to something more sane makes life a whole lot easier */ 8.plugin_wrap { 9 -moz-box-sizing: border-box; 10 -webkit-box-sizing: border-box; 11 box-sizing: border-box; 12} 13 14/* emulate a headline 15 (only with 'emulatedHeadlines' config option set) 16 @deprecated 2018-03-20 */ 17.plugin_wrap.wrap__emuhead em strong { 18 font-size: 130%; 19 font-weight: bold; 20 font-style: normal; 21 display: block; 22} 23/* emulate a bigger headline with a bottom border */ 24.plugin_wrap.wrap__emuhead em strong em.u { 25 font-size: 115%; 26 border-bottom: 1px solid @ini_border; 27 font-style: normal; 28 text-decoration: none; 29 display: block; 30} 31/* different bigger headline for safety notes */ 32.wrap_danger.wrap__emuhead em strong em.u, 33.wrap_warning.wrap__emuhead em strong em.u, 34.wrap_caution.wrap__emuhead em strong em.u, 35.wrap_notice.wrap__emuhead em strong em.u, 36.wrap_safety.wrap__emuhead em strong em.u { 37 text-transform: uppercase; 38 border-bottom-width: 0; 39} 40/* change border colour of emulated headlines inside boxes to something more neutral 41 (to match all the different background colours) */ 42.wrap_box.wrap__emuhead em strong em.u, 43.wrap_info.wrap__emuhead em strong em.u, 44.wrap_important.wrap__emuhead em strong em.u, 45.wrap_alert.wrap__emuhead em strong em.u, 46.wrap_tip.wrap__emuhead em strong em.u, 47.wrap_help.wrap__emuhead em strong em.u, 48.wrap_todo.wrap__emuhead em strong em.u, 49.wrap_download.wrap__emuhead em strong em.u { 50 border-bottom-color: #999; 51} 52 53/* real headlines should not be indented inside a wrap */ 54.plugin_wrap h1, 55.plugin_wrap h2, 56.plugin_wrap h3, 57.plugin_wrap h4, 58.plugin_wrap h5 { 59 margin-left: 0; 60 margin-right: 0; 61} 62 63/* columns 64********************************************************************/ 65 66.wrap_left, 67.wrap_column { 68 float: left; 69 margin-right: 1.5em; 70} 71[dir=rtl] .wrap_column { 72 float: right; 73 margin-left: 1.5em; 74 margin-right: 0; 75} 76.wrap_right { 77 float: right; 78 margin-left: 1.5em; 79} 80.wrap_center { 81 display: block; 82 margin-left: auto; 83 margin-right: auto; 84} 85 86/*____________ CSS3 columns ____________*/ 87 88.wrap_col2, .wrap_col3, .wrap_col4, .wrap_col5, 89.wrap_colsmall, .wrap_colmedium, .wrap_collarge { 90 -moz-column-gap: 1.5em; 91 -webkit-column-gap: 1.5em; 92 column-gap: 1.5em; 93 -moz-column-rule: 1px dotted #666; 94 -webkit-column-rule: 1px dotted #666; 95 column-rule: 1px dotted #666; 96} 97.wrap_col2 { 98 -moz-column-count: 2; 99 -webkit-column-count: 2; 100 column-count: 2; 101} 102.wrap_col3 { 103 -moz-column-count: 3; 104 -webkit-column-count: 3; 105 column-count: 3; 106} 107.wrap_col4 { 108 -moz-column-count: 4; 109 -webkit-column-count: 4; 110 column-count: 4; 111} 112.wrap_col5 { 113 -moz-column-count: 5; 114 -webkit-column-count: 5; 115 column-count: 5; 116} 117 118.wrap_colsmall { 119 -moz-column-width: 10em; 120 -webkit-column-width: 10em; 121 column-width: 10em; 122} 123.wrap_colmedium { 124 -moz-column-width: 20em; 125 -webkit-column-width: 20em; 126 column-width: 20em; 127} 128.wrap_collarge { 129 -moz-column-width: 30em; 130 -webkit-column-width: 30em; 131 column-width: 30em; 132} 133 134 135/* widths 136********************************************************************/ 137 138.wrap_twothirds { 139 width: 65%; 140 margin-right: 5%; 141} 142 143.wrap_half { 144 width: 48%; 145 margin-right: 4%; 146} 147 148.wrap_third { 149 width: 30%; 150 margin-right: 5%; 151} 152 153.wrap_quarter { 154 width: 22%; 155 margin-right: 4%; 156} 157 158[dir=rtl] .wrap_half, 159[dir=rtl] .wrap_quarter { 160 margin-right: 0; 161 margin-left: 4%; 162} 163[dir=rtl] .wrap_twothirds, 164[dir=rtl] .wrap_third { 165 margin-right: 0; 166 margin-left: 5%; 167} 168 169/* this doesn't always work when third and twothirds are mixed across rows 170 but can be fixed by adding any div (e.g. <WRAP clear/>) after a row */ 171.wrap_half + .wrap_half, 172.wrap_third + .wrap_twothirds, 173.wrap_twothirds + .wrap_third, 174.wrap_third + .wrap_third + .wrap_third, 175.wrap_quarter + .wrap_quarter + .wrap_quarter + .wrap_quarter { 176 margin-right: 0; 177 178 [dir=rtl] & { 179 margin-left: 0; 180 } 181 182 + * { 183 clear: left; 184 [dir=rtl] & { 185 clear: right; 186 } 187 } 188} 189 190/* show 2 instead 4 columns on medium sized screens (mobile, etc) */ 191@media only screen and (max-width: 950px) { 192 193.wrap_quarter { 194 width: 48%; 195} 196.wrap_quarter:nth-of-type(2n) { 197 margin-right: 0; 198} 199[dir=rtl] .wrap_quarter:nth-of-type(2n) { 200 margin-left: 0; 201} 202.wrap_quarter:nth-of-type(2n+1) { 203 clear: left; 204} 205[dir=rtl] .wrap_quarter:nth-of-type(2n) { 206 clear: right; 207} 208 209} /* /@media */ 210 211/* show full width on smaller screens (mobile, etc) */ 212@media only screen and (max-width: 600px) { 213 214.wrap_twothirds, 215.wrap_half, 216.wrap_third, 217.wrap_quarter { 218 width: auto; 219 margin-right: 0; 220 margin-left: 0; 221 float: none; 222} 223 224} /* /@media */ 225 226 227/* alignments 228********************************************************************/ 229 230.wrap_leftalign { 231 text-align: left; 232} 233.wrap_centeralign { 234 text-align: center; 235} 236.wrap_rightalign { 237 text-align: right; 238} 239.wrap_justify { 240 text-align: justify; 241} 242 243 244/* box 245********************************************************************/ 246 247/* see styles for boxes and notes with icons in style.css */ 248 249/*____________ rounded corners ____________*/ 250/* (only for modern browsers) */ 251 252div.wrap_round { 253 border-radius: 1.4em; 254} 255span.wrap_round { 256 border-radius: .14em; 257} 258 259 260/* mark 261********************************************************************/ 262 263.wrap_lo { 264 color: @ini_text_neu; 265 font-size: 85%; 266} 267.wrap_em { 268 color: #c00; 269 font-weight: bold; 270} 271.wrap__dark.wrap_em { 272 color: #f66; 273} 274 275/* see styles for highlighted text in style.css */ 276 277 278/* miscellaneous 279********************************************************************/ 280 281/*____________ tablewidth ____________*/ 282 283.wrap_tablewidth table { 284 width: 100%; 285} 286 287/*____________ indent ____________*/ 288 289.wrap_indent { 290 padding-left: 1.5em; 291} 292[dir=rtl] .wrap_indent { 293 padding-right: 1.5em; 294 padding-left: 0; 295} 296 297 298/*____________ outdent ____________*/ 299 300.wrap_outdent { 301 margin-left: -1.5em; 302} 303[dir=rtl] .wrap_outdent { 304 margin-right: -1.5em; 305 margin-left: 0; 306} 307 308/*____________ word wrapping in pre ____________*/ 309 310div.wrap_prewrap pre { 311 white-space: pre-wrap; 312 word-wrap: break-word;/* for IE < 8 */ 313} 314 315/*____________ spoiler ____________*/ 316 317div.wrap_spoiler { 318 margin-bottom: 1.5em; 319} 320/* see rest of spoiler styles in style.css */ 321 322/*____________ clear float ____________*/ 323 324.wrap_clear { 325 clear: both; 326 line-height: 0; 327 height: 0; 328 font-size: 1px; 329 visibility: hidden; 330 overflow: hidden; 331} 332 333/*____________ hide ____________*/ 334 335.wrap_hide { 336 display: none; 337} 338 339 340/*____________ button-style link ____________*/ 341 342.wrap_button a:link, 343.wrap_button a:visited { 344 background-image: none; 345 border: 1px solid @ini_border; 346 border-radius: .3em; 347 padding: .5em .7em; 348 text-decoration: none; 349} 350/* see rest of button link styles in style.css */ 351 352} /* /.dokuwiki */ 353