1/** 2 * This contains the content styling 3 * @author Sascha Leib <sascha@leib.be> 4 */ 5 6body { 7 overflow: hidden auto; 8} 9 10.dokuwiki main { 11 p, 12 blockquote, 13 div.table { 14 margin-bottom: .5em; 15 margin-top: .5em; 16 } 17 18/* headlines: */ 19 h1, h2, h3, h4, h5, h6 { 20 font-family: @ini_headline_fonts; 21 color: @ini_headlines; 22 margin: 1em 0 1em 0; 23 line-height: 1.1em; 24 } 25 h1 { font-size: 2em; } 26 h2 { font-size: 1.5em; } 27 h3 { font-size: 1.125em; } 28 h4 { font-size: 1em; } 29 h5 { font-size: .875em; } 30 h6 { font-size: .75em; } 31 h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { 32 font-family: inherit; 33 font-size: inherit; 34 color: inherit; 35 margin: inherit; 36 line-height: inherit; 37 } 38 /* Definition Terms are like Headlines in many ways */ 39 dl dt { 40 font-family: @ini_headline_fonts; 41 color: @ini_headlines; 42 } 43 44 /* make strike-through and underline more useful! */ 45 u { 46 -webkit-text-decoration-color: #F30; 47 -webkit-text-decoration-line: underline; 48 -webkit-text-decoration-style: wavy; 49 -webkit-text-decoration-thickness: .7pt; 50 text-decoration: underline #F30 wavy .7pt; 51 } 52 s, del { 53 -webkit-text-decoration-color: rgba(255,0,0,.5); 54 -webkit-text-decoration-line: line-through; 55 -webkit-text-decoration-style: solid; 56 -webkit-text-decoration-thickness: .1em; 57 text-decoration: line-through rgba(255,0,0,.5) solid .1em; 58 } 59 60 /* subscript and superscript */ 61 sup, sub { 62 line-height: 1; 63 font-size: .6em; 64 font-weight: 600; 65 margin: 0 .1em; 66 } 67 sup { 68 vertical-align: .5em; 69 } 70 sub { 71 vertical-align: -.15em; 72 } 73 74 /* lists: */ 75 ul, ol { 76 margin: 0 2em 1em 1em; 77 padding-left: 1.75em; 78 } 79 ul { list-style: square outside; } 80 ul ul { list-style-type: disc; } 81 ul ul ul { list-style-type: none; } 82 ul ul ul li {margin-left: 1em; } 83 ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; } 84 ul ul ul ul li:before { content: '\FE63' } 85 ul ul ul ul ul li:before { content: '\00B7' } 86 87 /* numbered lists vary by nestling: */ 88 ol { list-style: decimal outside; } 89 ol ol { list-style-type: lower-alpha; } 90 ol ol ol { list-style-type: lower-roman; } 91 ol ol ol ol { list-style-type: lower-greek; } 92 ol ol ol ol ol { list-style-type: decimal-leading-zero; font-size: .96em;} 93 ol ol ol ol ol ol { list-style-type: upper-alpha; font-size: .96em;} 94 ul ul ul ol li { margin-left: 0; } 95 ul ul ul ol li:before { display: none; content: ''; } 96 97 li::marker { 98 color: #666; 99 } 100 101 ul ul, ul ol, 102 ol ul, ol ol { 103 margin-bottom: 0; 104 padding-left: .25em; 105 } 106 107 /* horizontal rules */ 108 hr { 109 border: #666 solid 0; 110 border-top-width: 1pt; 111 height: 0; 112 margin: 3pt 0; 113 } 114 115 tt, blockquote tt, 116 pre, pre *, 117 code, code *, 118 blockquote code { 119 font-family: @ini_mono_fonts; 120 } 121 code, blockquote code { 122 border: @ini_border solid 1px; 123 border-radius: 3pt; 124 padding: 0 2pt; 125 } 126 pre { 127 overflow-x: auto; 128 white-space: pre-wrap; 129 word-wrap: normal; 130 border: 1px solid @ini_border; 131 border-radius: 2px; 132 box-shadow: inset 0 0 .5em @ini_border; 133 padding: .3em; 134 font-variant-numeric: slashed-zero; 135 } 136 137 /* overwrite pre styling for CodeMirror plugin: */ 138 .CodeMirror pre { 139 max-width: 100%; 140 } 141 /* quotes: */ 142 blockquote { 143 border: @ini_blockquote solid 0; 144 border-width: 0 0 0 .4em; 145 border-radius: .5em; 146 padding: .25em 0 .25em .75em; 147 margin: 0 2em 1em 1em; 148 font-family: @ini_alt_fonts; 149 font-size: @ini_alt_font_size; 150 hanging-punctuation: first allow-end; 151 } 152 blockquote * { 153 font-family: @ini_alt_fonts; 154 } 155 156 svg { 157 display: block; 158 fill-rule: evenodd; 159 clip-rule: evenodd; 160 stroke-linejoin: round; 161 stroke-miterlimit: 1.5; 162 } 163 svg.math { 164 margin-left: 15px 165 } 166 167 /* tables */ 168 div.table { 169 overflow-x: auto; 170 } 171 table { 172 & { 173 border-collapse: collapse; 174 empty-cells: show; 175 border-spacing: 0; 176 font-size: smaller; 177 border: 1px solid @ini_border; 178 margin-bottom: 1em; 179 } 180 th, td { 181 padding: .5em .3em; 182 vertical-align: top; 183 border: 1px solid @ini_border; 184 line-height: 1.25em; 185 } 186 th.centeralign, td.centeralign { 187 text-align: center; 188 } 189 th.rightalign, td.rightalign { 190 text-align: right; 191 } 192 th { 193 font-weight: bold; 194 background-color: @ini_background_alt; 195 text-align: left; 196 } 197 &.inline { 198 min-width: 50%; 199 margin-bottom: 0; 200 } 201 &.inline tr:hover td { 202 background-color: @ini_background_alt; 203 } 204 &.inline tr:hover th { 205 background-color: @ini_border; 206 } 207 } 208 209 /* asides */ 210 aside { 211 & > * { 212 margin: .25em 0; 213 } 214 &.float-left, &.float-right { 215 width: 50%; 216 max-width: 220px; 217 min-width: 150px; 218 font-size: smaller; 219 line-height: 1.5em; 220 } 221 &.float-left { 222 clear: left; 223 float: left; 224 margin-right: .5em; 225 } 226 &.float-right { 227 clear: right; 228 float: right; 229 margin-left: .5em; 230 } 231 & footer { 232 line-height: 1.1em; 233 } 234 } 235 236 /* images */ 237 img { 238 max-width: 100%; 239 height: auto; 240 } 241 242 /* abbbreviations a reslightly widened and made smaller */ 243 abbr { 244 letter-spacing: .01em; 245 font-size: 97%; 246 } 247 248 /* extra styles for ad-hoc tags: */ 249 kbd { 250 padding: .15em .25em; 251 margin: 0 .1em; 252 font-size: 85%; 253 color: @ini_headlines; 254 border: @ini_border solid 1px; 255 border-radius: .25em; 256 display: inline-block; 257 white-space: nowrap; 258 line-height: 1.2em; 259 letter-spacing: .03em; 260 } 261 kbd kbd { 262 background-color: @ini_background_alt; 263 -webkit-box-shadow: 0 .1em 0 rgba(0,0,0,0.25); 264 box-shadow: 0 .1em 0 rgba(0,0,0,0.25); 265 font-weight: bold; 266 } 267 samp { 268 background-color: @ini_background_alt; 269 font-family: @ini_mono_fonts; 270 white-space: nowrap; 271 } 272 mark { 273 background-color: @ini_highlight; 274 } 275 276 /* box / notification classes */ 277 .box, .wrap_box, 278 .outline, .wrap_outline { 279 padding: 1pt .5em; 280 margin: .5em 0; 281 } 282 .box, .wrap_box { 283 background-color: @ini_background_alt; 284 } 285 .rounded, .wrap_rounded { 286 border-radius: .5em; 287 } 288 289 /* hyphenation only in the main-content */ 290 p, li { 291 word-wrap: break-word; 292 overflow-wrap: break-word; 293 hyphens: auto; 294 -ms-hyphens: auto; 295 -moz-hyphens: auto; 296 -webkit-hyphens: auto; 297 hyphenate-limit-chars: 6 2 3; 298 } 299 300 /* footnotes section */ 301 div.footnotes { 302 border-top: transparent 0 none; 303 margin-top: 1.5em; 304 font-size: smaller; 305 } 306 div.footnotes:before { 307 content: ' '; 308 display: block; 309 width: 33%; 310 min-width: 5em; 311 border-top: @ini_border solid 1.5pt; 312 height: .5em; 313 } 314 div.footnotes div.fn { 315 margin-left: 1em; 316 } 317} 318 319/* footnotes and similar poups: */ 320.JSpopup { 321 background-color: @ini_background; 322 color: @ini_text; 323 border: @ini_border solid 1px; 324 padding: .25em; 325 box-shadow: 2px 2px 4px rgba(0, 0, 0, .5); 326} 327 328 329/* on the homepage only, reduce the H1 top margin: */ 330body.home h1:first-child { margin-top: .5em; } 331 332 333[dir=rtl] { 334 main { 335 blockquote { 336 border-width: 0 .4em 0 0; 337 padding: .25em .75em .25em 0; 338 margin: 0 1em 1em 2em; 339 } 340 341 ul, ol { 342 margin-left: 0; 343 margin-right: .5em; 344 padding-left: 0; 345 padding-right: .25em; 346 } 347 ul li, ol li { 348 width: 100%; 349 } 350 351 ul ul ul li:before { 352 float: right; 353 margin-left: 0; 354 margin-right: -1em; 355 } 356 357 } 358} 359 360/* tablet break point: */ 361@media (max-width: @ini_tablet_width) { 362 363 /* tighter hyphenation for narrower screens */ 364 #main-content p, #main-content li { 365 hyphenate-limit-chars: 5 2 2; 366 } 367} 368 369/* phone break point: */ 370@media (max-width: @ini_phone_width) { 371 372 .nophone, .wrap_nophone { 373 display: none !important; 374 } 375 376 main aside { 377 width: 100%; 378 max-width: initial; 379 float: none; 380 margin-left: 0; 381 } 382} 383 384/* dark mode overrides */ 385@media (prefers-color-scheme: dark) { 386 387 body.darkmode { 388 main { 389 h1, h2, h3, h4, h5, h6, dt { color: @ini_headlines_dark; } 390 table { 391 & { border-color: @ini_border_dark; } 392 &.inline tr:hover td, 393 &.inline tr:hover th { background-color: @ini_border_dark; } 394 th { background-color: rgba(255,255,255,0.05); } 395 } 396 #acl_manager table tr:hover { background-color: rgba(255,255,255,0.1); } 397 code, 398 blockquote { border-color: @ini_blockquote_dark } 399 blockquote code { border-color: @ini_border_dark; } 400 kbd {color: @ini_headlines_dark;border-color: @ini_border_dark;} 401 kbd kbd {background-color: @ini_background_alt_dark;} 402 samp {background-color: @ini_background_alt_dark;} 403 pre {border-color: @ini_border_dark; box-shadow: inset 0 0 .5em @ini_background_site_dark;} 404 dl dt { color: @ini_headlines_dark; } 405 406 details summary { 407 & { 408 color: @ini_headlines_dark; 409 } 410 &::after { 411 background-color: @ini_link_dark; 412 } 413 &:hover { 414 & { 415 color: @ini_text_dark; 416 } 417 &::after { 418 background-color: lighten(@ini_link_dark, 10%); 419 } 420 } 421 &:focus { 422 outline: @ini_focus_color solid 2px; 423 } 424 } 425 426 /* overrides for PRE blocks: */ 427 pre.code { 428 .me1 {color: #3C3;} 429 .kw2 {color: #0C7;} 430 .kw3 {color: #0CF;} 431 } 432 433 div.error {background-color: #4B2F36; color: #FFB3D2; border-color: #743E4C;} 434 div.success {background-color: #28381F; color: #FBE2A1; border-color: #37562E;} 435 div.notify {background-color: #42381F; color: #FCE2A1; border-color: #56562E;} 436 437 /* colour overrides for Wrap Plugin */ 438 .wrap_hi {background-color: @ini_highlight; color: #000;} 439 .wrap_box, .box {background-color: @ini_background_alt_dark; color: inherit;} 440 .wrap_outline, .outline {border-color: @ini_border_dark; color: inherit} 441 .red, .wrap_red { color: #E53935; } 442 .green, .wrap_green { color: #00E676; } 443 .wrap_tip {background-color: #47391B;} 444 .wrap_important {background-color: #603000;} 445 .wrap_alert, .wrap_danger {background-color: #4C0909;} 446 .wrap_help, .wrap_info {background-color: #112847;} 447 .wrap_download, .wrap_safety {background-color: #1C3802;} 448 .wrap_todo, .wrap_notice {background-color: #004A7F;} 449 .wrap_caution {background-color: #fcffaa;} 450 .wrap_warning {background-color: #FFC9AA;} 451 452 /* MathML fixes */ 453 merror { background-color: @ini_highlight; color: red; } 454 455 } 456 457 /* footnote and similar poups: */ 458 .JSpopup { 459 background-color: @ini_background_site_dark; 460 color: @ini_text_dark; 461 border-color: @ini_border_dark; 462 box-shadow: 2px 2px 4px #000; 463 } 464 } 465} 466 467