1/** 2 * This contains the print layouts and styles 3 * @author Sascha Leib <sascha@leib.be> 4 */ 5 6 @page { margin: 2cm 4cm 3cm 2.5cm; } 7 8 .noprint, 9 .wrap_noprint { 10 display: none !important; 11 } 12 .nobreak, 13 .wrap_nobreak { 14 white-space: nowrap !important; 15 } 16 .printonly, 17 .print-only, 18 .wrap_print-only { 19 display: initial; 20 } 21 22 html, body, * { 23 font-family: @ini_print_default_fonts; 24 margin: 0; 25 padding: 0; 26 background-color: transparent; 27 } 28 29 body { 30 font-size: 12pt; 31 box-decoration-break: clone; 32 } 33 34 /* hide unneded page elements */ 35 #globalTools, #phSearch, 36 #sidebar, #toc, #navYouAreHere, 37 #footer-layout .ftSection { 38 display: none; 39 } 40 #header-layout { 41 display: table-header-group; 42 padding-bottom: .25em; 43 margin-bottom: 1em; 44 } 45 #header-layout > header { 46 display: block; 47 padding-bottom: .25em; 48 border-bottom: #000 solid .5pt; 49 margin-bottom: 1em; 50 } 51 #siteLogo { 52 display: grid; 53 grid-template-columns: min-content max-content auto; 54 align-items: center; 55 } 56 #siteLogo .logo { 57 grid-row: 1; 58 } 59 #siteLogo .logo img { 60 width: 12pt; 61 height: auto; 62 } 63 #siteLogo .title { 64 font-size: 10pt; 65 line-height: 1.2em; 66 font-weight: bold; 67 } 68 #siteLogo .title a:link, 69 #siteLogo .title a:visited { 70 font-family: @ini_print_title_fonts; 71 color: @ini_print_title_color; 72 text-decoration: none; 73 } 74 #siteLogo .claim { 75 grid-row: 1; grid-column: 3; 76 align-self: center; 77 max-width: 100%; 78 font-size: 10pt; 79 line-height: 1.2em; 80 } 81 82 #header-layout #phInclude { 83 display: none; 84 } 85 86 #main-layout { 87 padding-top: .5em; 88 display: table-row-group; 89 } 90 91 #footer-layout { 92 display: block; 93 padding-top: 0; 94 } 95 #footer-layout footer { 96 display: block; 97 width: auto; 98 } 99 100 /* reset main borders and margins: */ 101 main { 102 display: table-row-group; 103 padding: 0; 104 border-width: 0; 105 line-height: 1.5em; 106 border: none 0; 107 word-break: break-word; 108 box-shadow: 0 0 0 0 transparent; 109 font-variant-ligatures: common-ligatures discretionary-ligatures; 110 } 111 112 /* headlines */ 113 main h1, main h2, main h3, main h4, main h5, main h6 { 114 font-family: @ini_print_title_fonts; 115 color: @ini_print_title_color; 116 line-height: 1.2em; 117 margin: 1em 0 .5em 0; 118 padding: 0 0 .25em 0; 119 page-break-inside: avoid; 120 break-inside: avoid; 121 page-break-after: avoid; 122 break-after: avoid; 123 clear: both; 124 position: relative; 125 } 126 main h1 { font-size: 18pt; margin-bottom: .5em; } 127 main h2 { font-size: 14pt; margin-top: 2em; } 128 main h3 { font-size: 12pt; } 129 main h4 { font-size: 12pt; font-style: italic; } 130 main h5 { font-size: 12pt; font-weight: normal; font-style: italic; } 131 main h6 { font-size: 11pt; font-weight: normal; font-style: italic; } 132 133 /* workaround: force headlines to keep with the next paragraph: */ 134 main h1::after, main h2::after, main h3::after, main h4::after, main h5::after, main h6::after, 135 main dl:not(.compact) dt::after { 136 content: ''; 137 display: block; 138 height: 4.5em; 139 margin-bottom: -4.5em; 140 page-break-inside: avoid; 141 break-inside: avoid; 142 } 143 144 main h1 + div, main h2 + div, main h3 + div, main h4 + div, main h5 + div, main h6 + div { 145 page-break-before: avoid; 146 break-before: avoid; 147 } 148 149 /* workaround until CSS orphans are widely supported: */ 150 main p::before { 151 content: ''; 152 display: block; 153 height: 3.2em; 154 margin-bottom: -3.2em; 155 page-break-inside: avoid; 156 break-inside: avoid; 157 } 158 /* note: no workaround for missing CSS widows yet :-( */ 159 160 /* paragraph-level blocks */ 161 main p, main ul, main ol { 162 margin: .5em 0; 163 } 164 main p, main li { 165 widows: 2; 166 orphans: 2; 167 word-wrap: break-word; 168 overflow-wrap: break-word; 169 -ms-hyphens: auto; 170 -moz-hyphens: auto; 171 -webkit-hyphens: auto; 172 hyphens: auto; 173 hyphenate-limit-chars: 6 2 3; 174 } 175 main ul { list-style: square outside; } 176 main ul ul { list-style-type: disc; } 177 main ul ul ul { list-style-type: none; } 178 main ol { list-style: decimal outside; } 179 main ul ul ul li {margin-left: 1em; } 180 main ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; } 181 main ul ul ul ul li:before { content: '\FE63' } 182 main ul ul ul ul ul li:before { content: '\00B7' } 183 184 main ol ol { list-style-type: lower-alpha; } 185 main ol ol ol { list-style-type: lower-roman; } 186 main ol ol ol ol { list-style-type: lower-greek; } 187 main ol ol ol ol ol { list-style-type: decimal-leading-zero; } 188 main ul ul ul ol li { margin-left: 0; } 189 main ul ul ul ol li:before { display: none; content: ''; } 190 191 main li { 192 margin-left: 1.5em; 193 } 194 main blockquote { 195 border-left: @ini_blockquote solid 3pt; 196 padding: .25em 0 .25em .5em; 197 margin: 0 .25em 1em .25em; 198 widows: 2; 199 orphans: 2; 200 hyphens: auto; 201 } 202 main pre { 203 white-space: normal; 204 } 205 main figure { 206 break-inside: avoid; 207 page-break-inside: avoid; 208 background-color: transparent; 209 border: #666 solid .5pt; 210 margin: .5em 0; 211 } 212 main figure figcaption { 213 font-family: @ini_print_title_fonts; 214 margin-top: .5em; 215 font-size: small; 216 text-align: left; 217 } 218 main figure figcaption p, 219 main figure figcaption li { 220 font-family: @ini_print_title_fonts; 221 } 222 body.print-compact main figure figcaption p { 223 text-indent: 0; 224 } 225 body.print-compact main figure table { 226 max-width: 100%; 227 border: #000 solid .5pt; 228 } 229 main footer { 230 margin-top: 2em; 231 border-top: #000 solid .5pt; 232 page-break-before: avoid; 233 break-before: avoid; 234 } 235 main footer p.docInfo, 236 body.print-compact main p.docInfo { 237 display: block; 238 border: none; 239 padding: 0; 240 text-align: right; 241 color: #000; 242 } 243 #ftLicenseButtons p.license { 244 color: #000; 245 } 246 247 /* links overrides */ 248 main a:link, 249 main a:visited { 250 text-decoration: underline; 251 text-decoration-style: dotted; 252 } 253 main a:link.text-link, 254 main a:visited.text-link { 255 color: #000; 256 } 257 258 /* add URL after external links - optional! 259 main a.interwiki:after, 260 main a.urlextern:after { 261 content: ' <' attr(href) '>'; 262 font-size: 90%; 263 color: #333; 264 } */ 265 266 /* fixed-width elements: */ 267 main tt, main code, main pre, 268 main blockquote tt, main blockquote code, main blockquote pre { 269 font-family: @ini_mono_fonts; 270 } 271 272 /* text attributes */ 273 main s { 274 text-decoration: line-through rgba(255,0,0,0.5) solid 1pt; 275 -webkit-text-decoration: line-through rgba(255,0,0,0.5) solid 1pt; 276 } 277 main u { 278 -webkit-text-decoration-color: @ini_missing; 279 -webkit-text-decoration-line: underline; 280 -webkit-text-decoration-style: wavy; 281 -webkit-text-decoration-thickness: .7pt; 282 text-decoration: underline @ini_missing wavy .7pt; 283 } 284 main u.valid { 285 -webkit-text-decoration-color: @ini_existing; 286 text-decoration-color: @ini_existing; 287 text-decoration-style: dashed; 288 } 289 main abbr { 290 text-decoration: none; 291 font-size: 97%; 292 letter-spacing: .05em; 293 } 294 295 /* horizontal rules */ 296 main hr { 297 border: #000 solid 0; 298 border-top-width: 1pt; 299 height: 0; 300 margin: 3pt 0; 301 } 302 303 /* table styles */ 304 main table { 305 max-width: 100%; 306 border: #000 solid .5pt; 307 border-collapse: collapse; 308 line-height: 1.25em; 309 margin: .5em 0; 310 box-decoration-break: clone; 311 page-break-inside: avoid; 312 break-inside: avoid; 313 font-size: small; 314 } 315 main table td, 316 main table th { 317 padding: 2pt 3pt; 318 vertical-align: top; 319 } 320 main table th, 321 main table th * { 322 font-family: @ini_print_title_fonts; 323 color: @ini_print_title_color; 324 } 325 main table thead { 326 break-inside: avoid; 327 break-after: avoid; 328 } 329 main table thead tr { 330 background-color: #EEE; 331 border-bottom: #000 solid .5pt; 332 text-align: left; 333 } 334 main table thead tr th, 335 main table thead tr td { 336 vertical-align: bottom; 337 border-right: #000 solid .5pt; 338 } 339 main table thead tr th:last-child, 340 main table thead tr td:last-child { 341 border-right: none 0; 342 } 343 main table tbody tr { 344 border-bottom: #000 dashed .5pt; 345 } 346 main table tbody tr:nth-child(even) { 347 background-color: #EEE; 348 } 349 main table tbody th { 350 vertical-align: top; 351 border-right: #000 solid .5pt; 352 } 353 main table tbody td { 354 border-right: #000 dashed .5pt; 355 } 356 main table a:link { 357 text-decoration: none; 358 } 359 360 main table.layout, 361 main table.layout tr, 362 main table.layout th, 363 main table.layout td { 364 border: none !important; 365 background: transparent none !important; 366 } 367 368 main blockquote table { 369 margin: 0; 370 } 371 372 /* image-related */ 373 main aside { 374 float: none; 375 width: 100%; 376 margin: .5em 0; 377 page-break-inside: avoid; 378 break-inside: avoid; 379 } 380 main img { 381 width: auto; 382 max-width: 100%; 383 height: auto; 384 break-inside: avoid; 385 page-break-inside: avoid; 386 } 387 388 /* footnotes */ 389 .dokuwiki div.footnotes { 390 border-top: transparent 0 none; 391 font-size: smaller; 392 } 393 394 .dokuwiki sup a.fn_top { 395 color: #000; 396 } 397 .dokuwiki sup a.fn_top::after { 398 font-size: 1.0rem; 399 font-weight: normal; 400 } 401 #main-content h1 + div > p:first-child sup a.fn_top::after { 402 font-weight: bold; 403 } 404 405 .dokuwiki div.footnotes > .fn .fn_bot { 406 color: #000; 407 } 408 .dokuwiki div.footnotes > .fn .fn_bot::after { 409 font-size: .833rem; 410 } 411 412 main div.footnotes:before { 413 content: ' '; 414 display: block; 415 width: 50%; 416 min-width: 5em; 417 border-top: #000 solid .5pt; 418 height: .5em; 419 } 420 421 /* show language code, if configured as menu */ 422 #tbLanguages { 423 & { 424 display: block; 425 float:right; 426 position: relative; 427 top: -1.5rem; 428 } 429 button { 430 & { 431 border: transparent none 0; 432 } 433 svg { 434 & { 435 fill: transparent; 436 stroke: #000; 437 stroke-width: .5pt; 438 width: 1.75rem; height: 1.75rem; 439 } 440 text { 441 fill: #000; 442 text-transform: uppercase; 443 font-family: Arial, Helvetica, Verdana, sans; 444 stroke-width: 0; 445 } 446 } 447 } 448 } 449 450 /* alternative compact style: */ 451 body.print-compact #main-content { 452 columns: 2; 453 column-gap: 1.2em; 454 column-rule: .25pt solid #666; 455 font-size: 11pt; 456 } 457 body.print-compact main h1, 458 body.print-compact main h2, 459 body.print-compact main figure { 460 column-span: all; 461 } 462 body.print-compact main figure.print-narrow { 463 column-span: none; 464 } 465 466 #main-content h1 + div > p:first-child { 467 column-span: all; 468 font-weight: 600; 469 margin-bottom: 1.5em; 470 text-indent: 0; 471 } 472 473 body.print-compact main p { 474 margin: 0; 475 text-align: justify; 476 text-indent: 1.5em; 477 } 478 body.print-compact main h1 + div > p:first-child + p, 479 body.print-compact main h2 + div > p:first-child, 480 body.print-compact main h3 + div > p:first-child, 481 body.print-compact main h4 + div > p:first-child, 482 body.print-compact main h5 + div > p:first-child, 483 body.print-compact main h6 + div > p:first-child, 484 body.print-compact main figure + p + p, 485 body.print-compact main div.table + p, 486 body.print-compact main aside + p + p, 487 body.print-compact main ul + p, 488 body.print-compact main ol + p, 489 body.print-compact main blockquote + p, 490 body.print-compact main p.info-box, 491 body.print-compact main p.info-box + p + p { 492 text-indent: 0; 493 } 494 495 body.print-compact main table { 496 border: none; 497 } 498 body.print-compact main figure { 499 border: none; 500 margin: 1em 0 .5em 0; 501 padding: .5em 0; 502 } 503 body.print-compact main blockquote { 504 margin: .5em 0; 505 padding: 0 0 0 .5em; 506 } 507 body.print-compact main figure blockquote { 508 margin: 0; 509 } 510 body.print-compact main p.info-box { 511 margin: .5em 0; 512 } 513 body.print-compact main ul, 514 body.print-compact main ol { 515 margin-left: .5em; 516 margin: 0; 517 padding: 0; 518 list-style-position: inside; 519 } 520 body.print-compact main ul > li, 521 body.print-compact main ol > li { 522 margin-left: 0; 523 } 524 body.print-compact main ul ul, 525 body.print-compact main ul ol, 526 body.print-compact main ol ul, 527 body.print-compact main ol ol, 528 body.print-compact main ul ul li, 529 body.print-compact main ul ol li, 530 body.print-compact main ol ul li, 531 body.print-compact main ol ol li { 532 margin-left: .5em; 533 } 534 body.print-compact main ul li::marker, 535 body.print-compact main ol li::marker { 536 display: inline-block; 537 float: none; 538 } 539 body.print-compact main ul li div.li, 540 body.print-compact main ol li div.li { 541 display: inline; 542 } 543 body.print-compact main ul div.li, 544 body.print-compact main ol div.li { 545 text-align: justify; 546 } 547 548 /* media detail */ 549 body.mediadetail figure { 550 border: none; 551 background: transparent none; 552 } 553 body.mediadetail figure table ul { 554 margin: 0; 555 } 556 557 /* allow user to force keep-together rules: */ 558 .keep-together, 559 .wrap_keep-together { 560 page-break-inside: avoid; 561 break-inside: avoid; 562 } 563 .break-before, 564 .wrap_break-before { 565 page-break-before: always; 566 break-before: always; 567 } 568 .print-wide, 569 .wrap_print-wide { 570 clear: both; 571 column-span: all; 572 } 573 .print-outline { 574 margin-top: 1em; 575 border: #666 solid .5pt; 576 border-radius: 1em; 577 padding: 0 1em; 578 } 579 580 /* site-banners */ 581 .site-banner { 582 clear: both; 583 column-span: all; 584 margin-top: 1em; 585 border: #666 solid 1pt; 586 border-radius: 1em; 587 padding: 0 1em; 588 page-break-inside: avoid; 589 break-inside: avoid; 590 text-align: left; 591 } 592 .site-banner h4 { 593 margin: .75em 0 .15em 0; 594 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 595 font-size: 11pt; 596 font-style: normal; 597 } 598 .site-banner p { 599 font-size: 9pt; 600 line-height: 13pt; 601 } 602 .site-banner img { 603 margin: 0 .25em .25em .5em; 604 } 605 606 /* boxes */ 607 main .box, 608 main .wrap_box { 609 border: #666 solid 1px; 610 background-color: @ini_background_alt; 611 padding: .5em .25em .5em .5em; 612 font-size: small; 613 line-height: 1.5em; 614 } 615