1/** 2 * This contains the most basic layouts and styles 3 * @author Sascha Leib <sascha@leib.be> 4 */ 5 6html, body, * { 7 font-family: @ini_default_fonts; 8 margin: 0; 9 padding: 0; 10 scrollbar-gutter: auto; 11 scrollbar-width: thin; 12} 13body { 14 background-color: @ini_background_site; 15 font-size: @ini_default_font_size; 16 letter-spacing: @ini_default_letter_spacing; 17} 18 19/* scrollbar styles */ 20::-webkit-scrollbar { 21 width: .5rem; 22} 23::-webkit-scrollbar-track { 24 background: @ini_background_site; 25} 26::-webkit-scrollbar-thumb { 27 border-radius: .25rem; 28 background: @ini_blockquote; 29} 30::-webkit-scrollbar-thumb:hover { 31 background: @ini_separator; 32} 33* { 34 scrollbar-gutter: auto; 35 scrollbar-color: @ini_blockquote @ini_background_site; 36 scrollbar-width: thin; 37} 38 39#skip-link { 40 position: fixed; 41 left: 4pt; 42 top: 4pt; 43 width: auto; 44 z-index: 9999; 45} 46#skip-link a { 47 position: absolute; 48 background-color: @ini_background; 49 font-size: 1.25em; 50 color: @ini_link; 51 height: 1px; 52 overflow: hidden; 53 clip: rect(1px, 1px, 1px, 1px); 54} 55#skip-link a:focus { 56 position: static; 57 display: inline-block; 58 padding: 8px; 59 height: auto; 60 clip: auto; 61 overflow: visible; 62 outline: 2px solid @ini_focus_color; 63} 64#skip-link:focus { 65 display: block; 66} 67 68.sronly { 69 position: absolute; 70 width: 0; 71 height: 0; 72 overflow: hidden; 73 display: block; 74} 75.printonly, 76.print-only, 77.wrap_print-only { 78 display: none; 79} 80div.no { 81 display: inline; 82 margin: 0; 83 padding: 0; 84} 85 86#globalTools a:link { 87 text-decoration: none; 88} 89 90#gSiteTools { 91 justify-self: start; 92} 93#gSiteTools select { 94 display: none; 95} 96#gUserTools { 97 justify-self: end; 98 padding-right: .5rem; 99} 100#gUserTools ul { 101 list-style: none inside; 102 display: block; 103} 104#gUserTools ul li { 105 display: inline; 106} 107#gUserTools ul li::before { 108 content: '\00B7'; 109 display: inline-block; 110 width: .35em; 111 padding-right: .35em; 112} 113#gUserTools ul li:first-child::before { 114 content: ''; 115} 116 117#header-layout, 118#footer-layout { 119 width: 100%; 120} 121 122#header-layout>header { 123 width: 100%; 124 max-width: @ini_site_width; 125 margin: 0 auto; 126 padding-top: .25rem; 127 display: grid; 128 grid-template-columns: @ini_sidebar_width auto @ini_sidebar_width; 129 grid-template-rows: auto auto auto; 130 justify-items: stretch; 131} 132 133#siteLogo { 134 grid-column: 1; 135 grid-row: 1 / span 3; 136 column-gap: 8px; 137 padding: 0 .25em 0 .5em; 138 display: grid; 139 grid-template-columns: 64px auto; 140 grid-template-rows: auto auto; 141} 142#siteLogo .logo { 143 margin-top: 3pt; 144 grid-column: 1; 145 grid-row: 1 / span 2; 146} 147#siteLogo .logo img { 148 width: 64px; 149 height: auto; 150} 151#siteLogo .title, 152#siteLogo .claim { 153 grid-column: 2; 154 grid-row: 2; 155 align-self: start; 156 font-size: 10pt; 157 padding-right: .5em; 158 max-width: e("calc(") @ini_sidebar_width e(" - 80px)") 159} 160#siteLogo .title { 161 grid-row: 1; 162 align-self: center; 163 font-size: 14pt; 164 line-height: 1em; 165 margin: 0; 166} 167#siteLogo .title * { 168/* font-family: @ini_alt_fonts; 169 font-size: 13pt; */ 170} 171 172#globalTools { 173 grid-column: 2 / span 2; 174 grid-row: 1; 175 text-align: right; 176 font-size: 10pt; 177} 178#phSearch { 179 grid-column: 2; 180 grid-row: 2; 181 padding: .5em 0; 182} 183#phSearch form { 184} 185#phSearch form > div.search-field { 186 width: 100%; 187 display: grid; 188 grid-template-columns: auto 20pt 20pt; 189 place-items: stretch; 190 border: @ini_border solid 1pt; 191 background: @ini_background; 192 border-radius: 4pt; 193 -moz-box-shadow: inset 0 0 3pt @ini_border; 194 -webkit-box-shadow: inset 0 0 3pt @ini_border; 195 box-shadow: inset 0 0 3pt @ini_border; 196 outline: transparent solid 2pt; 197} 198#phSearch form > div.search-field.focus { 199 outline-color: @ini_focus_color; 200} 201#phSearch form > div input { 202 grid-column: 1; 203 grid-row: 1; 204 z-index: 23; 205 font-size: large; 206 padding: 2pt 0 2pt 4pt; 207 border: transparent none 0; 208 border-radius: 3pt; 209 background-color: transparent; 210} 211#phSearch form > div input:focus { 212 outline: transparent none 0; 213} 214#phSearch form > div button { 215 border: transparent solid 1pt; 216 background: transparent none no-repeat center; 217 background-size: 13pt; 218 color: transparent; 219 width: 2em; 220 height: 2em; 221 border-radius: 3pt; 222 overflow: hidden; 223 margin: 1pt 1pt 1pt 0; 224 height: auto; 225 outline: transparent solid 2pt; 226} 227#phSearch form > div button[type=reset] { 228 background-image: url('images/delete.svg'); 229 border-right: @ini_border solid 1pt; 230} 231#phSearch form > div button[type=submit] { 232 background-image: url('images/search.svg'); 233} 234#phSearch form > div button:hover { 235 background-color: @ini_background_neu; 236 border-color: @ini_border; 237} 238#phSearch form > div button:focus { 239 background-color: @ini_background_neu; 240} 241 242#phSearch form .search-popup { 243 position: absolute; 244 width: 100%; 245 height: 5pt; 246 margin-right: 21pt; 247} 248#qsearch__out { 249 z-index: 20; 250 position: relative; 251 left: 0; 252 width: auto; 253 padding: 0; 254 white-space: nowrap; 255 font-size: 1rem; 256 background-color: @ini_background_site; 257 -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.5); 258 -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.5); 259 box-shadow: 2px 2px 2px 0 rgba(0,0,0,.5); 260} 261#qsearch__out strong { 262 display: none; 263 padding: 2pt; 264 font-weight: normal; 265} 266#qsearch__out ul { 267 border: @ini_border solid 1px; 268 border-top-width: 0; 269 max-height: 11em; 270} 271#qsearch__out li { 272 border-top: @ini_border solid 1px; 273} 274#qsearch__out a { 275 display: block; 276 padding: 2pt 0 2pt 4pt; 277 border: transparent solid 2px; 278 overflow: hidden; 279 text-overflow: '\2025'; 280} 281#qsearch__out a:focus { 282 border-color: @ini_focus_color; 283} 284 285#phTools{ 286} 287#phInclude { 288 grid-column: 2 / span 2; 289 grid-row: 3; 290 margin-right: 2pt; 291} 292 293#main-layout { 294 width: 100%; 295 max-width: @ini_site_width; 296 margin: 0 auto; 297 display: flex; 298 flex-direction: row; 299 flex-wrap: nowrap; 300 justify-content: space-between; 301 align-items: stretch; 302 align-content: flex-start; 303} 304 305#sidebar { 306 width: 100%; 307 max-width: @ini_sidebar_width; 308 flex-grow: 0; 309} 310#sidebar.toggle.hide, 311#sidebar.toggle.alt { 312 max-width: 1em; 313} 314#sidebar p, 315#sidebar ul, 316#sidebar ol { 317 padding-left: 1.25em; 318} 319#sidebar ul { 320 list-style: square outside; 321} 322#sidebar ul ~ ul, #sidebar ul ~ ol, 323#sidebar ol ~ ul, #sidebar ol ~ ol { 324 margin-top: .5em; 325} 326#sidebar ul li, 327#sidebar ol li { 328 color: @ini_text_alt; 329 padding: .1em 0; 330} 331#sidebar dl dt { 332 font-weight: bold; 333} 334#sidebar a:link, 335#sidebar a:visited { 336 color: @ini_link; 337} 338 339#sidebar .home a::before { 340 content: ' '; 341 display: inline-block; 342 width: 10pt; 343 height: 1em; 344 background: transparent url('images/home.svg') no-repeat no-repeat 0 4px; 345 background-size: .8em; 346 padding-right: 3pt; 347} 348#sidebar .curid { 349 font-weight: bold; 350} 351#sidebar h4 { 352 font-size: 1rem; 353 margin: 0.25em 2pt; 354} 355#sidebar>button.tg_button { 356 float: right; 357 display: block; 358 background-color: transparent; 359 border: transparent none 0; 360 margin-right: 2px; 361 font-size: 1.5rem; 362} 363#sidebar>button:focus { 364 outline: @ini_focus_color solid 2px; 365} 366#sidebar>button.tg_button span { 367 display: none; 368} 369#sidebar.hide>button.tg_button, 370#sidebar.alt>button.tg_button { 371 margin-left: 0; 372 width: 11pt; 373} 374#sidebar>button.tg_button span { 375 376} 377#sidebar>button.tg_button::after { 378 content: '\2039'; 379 color: @ini_link; 380 display: inline-block; 381 width: .75em; 382 height: 1.25em; 383 text-align: center; 384} 385#sidebar.hide>button.tg_button span, 386#sidebar.alt>button.tg_button span { 387 display: none; 388} 389#sidebar.hide>button.tg_button::after, 390#sidebar.alt>button.tg_button::after { 391 content: '\203A'; 392 width: auto; 393} 394 395#sidebar .tg_content { 396 line-height: 1.5em; 397 font-size: 11.5pt; 398} 399 400#sidebar hr { 401 border: 0; 402 height: 1pt; 403 background: @ini_text_alt; 404 background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt); 405 margin: .5em 1em .5em 0; 406} 407 408#sbNavigation { 409 margin: 1em .25em 0 1em; 410} 411#navBreadCrumbs { 412 margin-left: .5em; 413} 414#navBreadCrumbs ol { 415 list-style: decimal outside; 416 padding-left: 2em; 417} 418 419main { 420 width: e("calc(90% - 5px)"); 421 flex-grow: 100; 422 background-color: @ini_background; 423 color: @ini_text; 424 line-height: 1.5em; 425 padding: 1.5em 5% .75em 5%; 426 border: @ini_border solid 1px; 427 border-radius: 5px; 428} 429 430#navYouAreHere { 431 display: flex; 432 flex-flow: row nowrap; 433 position: relative; 434 top: 0; 435 left: 0; 436 height: 16pt; 437 overflow: hidden; 438 white-space: nowrap; 439} 440#navYouAreHere h4 { 441 display: none /*inline-block */; 442 font-family: @ini_default_fonts; 443 font-weight: normal; 444 font-size: small; 445 line-height: 1.5em; 446 margin: 0 .5em 0 0; 447} 448 449#navYouAreHere ol { 450 list-style: none inside; 451 display: flex; 452 line-height: 1.5em; 453 height: 100pt; 454 padding-left: 0; 455 margin: 0 2pt 0 0; 456 font-size: small; 457 overflow: scroll hidden; 458} 459#navYouAreHere ol li { 460 color: @ini_headlines; 461 display: inline; 462 margin-bottom: 0; 463 max-width: 20em; 464 min-width: 2.2em; 465 overflow: hidden; 466 text-overflow: '\202F...'; 467} 468 469#navYouAreHere ol li:last-child { flex-shrink: 1; } 470#navYouAreHere ol li:nth-last-child(2) { flex-shrink: 2; } 471#navYouAreHere ol li:nth-last-child(3) { flex-shrink: 3; } 472#navYouAreHere ol li:nth-last-child(4) { flex-shrink: 4; } 473#navYouAreHere ol li:nth-last-child(5) { flex-shrink: 5; } 474#navYouAreHere ol li:nth-last-child(6) { flex-shrink: 6; } 475 476#navYouAreHere ol li.home { 477 min-width: 14px; 478 flex-shrink: 0 !important; 479} 480 481#navYouAreHere ol li::before { 482 content: '\25B8'; 483 padding: 0 2pt; 484 color: @ini_text_alt; 485} 486#navYouAreHere ol li.home::before { 487 content: ''; 488 padding: 0; 489} 490#navYouAreHere ol li.home a { 491 display: inline-block; 492 width: 14px; 493 overflow: hidden; 494} 495#navYouAreHere ol li.home a::before { 496 content: ' '; 497 display: inline-block; 498 width: 14px; 499 height: 1em; 500 background: transparent url('images/home.svg') no-repeat left bottom; 501 filter: hue-rotate(-80deg); 502} 503 504/* fix for issue with homepage */ 505body.home #navYouAreHere ol li:last-child { 506 display: none; 507} 508 509main>footer { 510 margin-top: 1em; 511 padding-top: 1em; 512 text-align: right; 513} 514main>footer p.docInfo { 515 display: inline-block; 516 border-top: @ini_separator solid 1px; 517 padding-top: .5em; 518 padding-left: 5%; 519 font-size: small; 520 color: @ini_text_alt; 521} 522 523/* Table of Contents */ 524#toc { 525 clear: both; 526 float: right; 527 width: auto; 528 min-width: 32px; 529 padding-left: .25em; 530 line-height: 1.5em; 531 text-align: left; 532 max-width: @ini_toc_width; 533 background-color: transparent; 534 border-left: @ini_border solid 1pt; 535} 536#toc ol { 537 list-style: none inside; 538 padding: 0 0 0 1em; 539 margin: 0; 540} 541#toc ol li { 542 font-size: small; 543 line-height: 1.25em; 544 margin: .5em 0; 545} 546#toc-menubutton { 547 background: transparent; 548 margin-left: .5em; 549 padding: 0 .25em; 550 width: auto; 551 height: auto; 552 overflow: hidden; 553 border: transparent 0 none; 554 border-radius: 3pt; 555} 556#toc-menubutton > span { 557 font-family: @ini_alt_fonts; 558 line-height: 1.5em; 559 font-weight: bold; 560 color: @ini_headlines; 561} 562#toc-menubutton::after { 563 content: '\203A'; 564 display: inline-block; 565 width: 1.5em; 566 text-align: center; 567} 568 569.hide #toc-menubutton::after, 570.alt #toc-menubutton::after { 571 content: '\2630'; 572} 573 574.hide #toc-menubutton>span, 575.alt #toc-menubutton>span { 576 display: none; 577} 578 579/* edit buttons */ 580main .secedit { 581 float: right; 582 margin-top: -22pt; 583 line-height: 0; 584} 585main .secedit button { 586 border: @ini_border solid 1pt; 587 background-color: transparent; 588 color: transparent; 589 width: 20pt; 590 height: 20pt; 591 border-radius: 50%; 592 font-size: 0; 593 cursor: pointer; 594} 595main .secedit button::before { 596 content: ' '; 597 display: inline-block; 598 width: 13pt; 599 height: 13pt; 600 padding: 2pt; 601 background: transparent url('images/edit.svg') no-repeat center; 602 background-size: 10pt; 603} 604main .secedit button:hover { 605 background-color: @ini_highlight; 606 border: @ini_text_alt solid 1pt; 607} 608main .secedit button:focus { 609 background-color: @ini_highlight; 610 border: @ini_focus_color solid 2px; 611 outline: transparent none 0; 612} 613main .secedit button:hover::before { 614} 615 616main .section_highlight { 617 border-radius: .5em; 618 outline: orange dashed 3px; 619} 620 621/* math fonts */ 622main math, 623main .math, 624main .math *, 625main .wrap_math, 626main .wrap_math * { 627 font-family: @ini_math_fonts; 628 font-size: 12pt; 629 line-height: 1em; 630} 631 632/* figure block */ 633main figure { 634 background-color: @ini_background_alt; 635 border: @ini_border solid 1px; 636 padding: .5em; 637} 638main figure figcaption { 639 margin-top: .5em; 640} 641main figure figcaption p { 642 margin-bottom: 0; 643} 644main figure > *:first-child { 645 margin-top: .25em; 646} 647main figure table { 648 background-color: @ini_background; 649 margin: 0; 650} 651main figure div.table { 652 margin: 0; 653} 654main figure > p { 655 margin: 0; 656} 657 658body.mediadetail figure img { 659 background: transparent url('images/transparency.gif'); 660} 661body.mediadetail figure table.img_detail, 662body.mediadetail figure table.img_detail th, 663body.mediadetail figure table.img_detail td { 664 border: none; 665} 666body.mediadetail figure table.img_detail th { 667 text-align: right; 668 white-space: nowrap; 669 border: none; 670} 671 672#footer-layout { 673 padding-top: 1.5em; 674} 675#footer-layout > footer { 676 width: 100%; 677 max-width: @ini_site_width; 678 margin: 0 auto; 679 display: grid; 680 grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr; 681 grid-template-rows: auto auto; 682 grid-gap: 6pt; 683 align-items: stretch; 684} 685#footer-layout > footer .ftSection { 686 padding-left: 1em; 687} 688#footer-layout > footer .ftSection ul { 689 list-style: none inside; 690 padding-left: .5em; 691} 692#footer-layout > footer .ftSection ul li { 693 margin-bottom: .5em; 694 font-size: small; 695} 696#footer-layout > footer .ftSection ul li a { 697 white-space: nowrap; 698} 699#footer-layout > footer h4 { 700 color: @ini_headlines; 701 margin: 0 0 1em 0; 702 font-family: @ini_alt_fonts; 703 font-size: 1rem; 704} 705 706#footer-layout > footer #ftPlaceholder>* { 707 display: none; 708} 709 710#ftLicenseButtons { 711 grid-row: 2; 712 grid-column: 2 / span 3; 713 text-align: center; 714 font-size: small; 715 padding-top: 1em; 716} 717#ftLicenseButtons hr { 718 border: 0; 719 height: 1pt; 720 background: #333; 721 background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt); 722} 723#ftLicenseButtons p.license { 724 margin: .5em 0 1em 0; 725 font-size: small; 726 color: @ini_text_alt; 727} 728#ftLicenseButtons p.license bdi { 729 display: block; 730 width: 100%; 731} 732 733/* togglers */ 734.toggle .tg_button.active { 735 color: @ini_link; 736 cursor: pointer; 737} 738.toggle .tg_content, 739.toggle.auto .tg_content, 740.toggle.show .tg_content { 741 display: initial; 742} 743.toggle.hide .tg_content, 744.toggle.alt .tg_content { 745 display: none; 746} 747 748/* config overrides */ 749#config__manager #dw__configform p:last-child { 750 position: -webkit-sticky; /* Safari */ 751 position: sticky; 752 bottom: 0; 753 box-sizing: border-box; 754 background-color: rgba(255,255,255,.67); 755 border: @ini_border solid 2pt; 756 padding: .5em 0; 757 z-index: 9; 758 display: grid; 759 grid-template-columns: auto auto; 760 justify-items: center; 761} 762#config__manager #dw__configform p:last-child button { 763 border: @ini_border solid 2pt; 764 padding: .25em .5em; 765} 766#config__manager #dw__configform p:last-child button[type=submit] { 767 background-color: #ccddff; 768} 769 770#config__manager fieldset { 771 background-color: transparent; 772 color: inherit; 773} 774 775#config__manager table, #config__manager table th, #config__manager table td { 776 border: none; 777} 778#config__manager td.label span.outkey { 779 background-color: inherit; 780} 781 782#config__manager tr.default .input, 783#config__manager tr .input { 784 background-color: transparent; 785} 786 787/* dark mode overrides */ 788@media screen and (prefers-color-scheme: dark) { 789 790 body.darkmode { background-color: @ini_background_site_dark; color: @ini_text_dark; } 791 body.darkmode main { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; } 792 body.darkmode #skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;} 793 body.darkmode #navYouAreHere ol li { color: @ini_headlines_dark; } 794 body.darkmode main h1, 795 body.darkmode main h2, 796 body.darkmode main h3, 797 body.darkmode main h4, 798 body.darkmode main h5, 799 body.darkmode main h6 { color: @ini_headlines_dark; } 800 body.darkmode #sbNavigation h1, 801 body.darkmode #sbNavigation h2, 802 body.darkmode #sbNavigation h3, 803 body.darkmode #sbNavigation h4, 804 body.darkmode #sbNavigation h5, 805 body.darkmode #sbNavigation h6 { color: @ini_headlines_dark; } 806 body.darkmode #sidebar hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); } 807 body.darkmode #ftLicenseButtons hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); } 808 body.darkmode #sidebar a:link, 809 body.darkmode #sidebar a:visited { color: @ini_link_dark; } 810 body.darkmode #footer-layout>footer h4 { color: @ini_headlines_dark; } 811 812 body.darkmode #phSearch form>div.search-field { border-color: @ini_border_dark; background: @ini_background_dark; } 813 body.darkmode #phSearch form>div input { color: @ini_text_dark; } 814 body.darkmode #phSearch form > div button[type="reset"] {border-right-color: @ini_border_dark; } 815 816 body.darkmode #config__manager #dw__configform p:last-child { 817 background-color: rgba(57,57,61,.67); 818 border-color: @ini_border_dark; 819 } 820 body.darkmode #config__manager #dw__configform p:last-child button { 821 background-color: @ini_background_dark; 822 border-color: @ini_border_dark; 823 color: @ini_missing_dark; 824 } 825 body.darkmode #config__manager #dw__configform p:last-child button[type=submit] { 826 border-color: @ini_existing_dark; 827 background-color: @ini_background_dark; 828 color: @ini_existing_dark; 829 } 830 831 body.darkmode #toc { border-left-color: @ini_border_dark; } 832 body.darkmode #toc-menubutton, 833 body.darkmode #toc-menubutton span { color: @ini_headlines_dark; } 834 835 body.darkmode #qsearch__out { 836 background-color: @ini_background_site_dark; 837 } 838 body.darkmode #qsearch__out ul, 839 body.darkmode #qsearch__out li { 840 border-color: @ini_border_dark; 841 } 842 843 body.darkmode #navYouAreHere ol li::before { 844 color: @ini_text_alt_dark; 845 } 846 body.darkmode main > footer p.docInfo { 847 color: @ini_text_alt_dark; 848 } 849 body.darkmode #ftLicenseButtons p.license { 850 color: @ini_text_alt_dark; 851 } 852 853 body.darkmode main figure table { 854 background-color: @ini_background_dark; 855 } 856 857 /* Extension Manager: */ 858 body.darkmode #extension__manager .panelHeader { 859 background-color: @ini_background_alt_dark; 860 } 861 body.darkmode #extension__manager ul.tabs li a { 862 background-color: @ini_background_dark; 863 border-color: @ini_border_dark; 864 color: @ini_text_dark 865 } 866 body.darkmode #extension__manager ul.tabs li.active a { 867 background-color: @ini_background_alt_dark; 868 border-color: @ini_text_dark; 869 } 870 body.darkmode #extension__list ul.extensionList li { 871 color: @ini_text_dark 872 } 873 body.darkmode main figure { 874 background-color: rgba(0,0,0,.2); 875 border-color: @ini_border_dark; 876 } 877 body.darkmode #config__manager tr.default .input, 878 body.darkmode #config__manager tr .input { 879 color: @ini_text_dark; 880 } 881 882 /* dark scrollbar styles for webkit browsers: */ 883 ::-webkit-scrollbar-track { 884 background: @ini_background_site_dark; 885 } 886 ::-webkit-scrollbar-thumb { 887 background: @ini_background_alt_dark; 888 } 889 ::-webkit-scrollbar-thumb:hover { 890 background: @ini_background_dark; 891 } 892 /* dark scrollbars for firefox: */ 893 * { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; } 894} 895 896/* tablet break point */ 897@media all and (max-width: @ini_tablet_width) { 898 #header-layout>header { 899 margin: 0; 900 grid-template-columns: e("repeat(2, auto)"); 901 grid-template-rows: e("repeat(4, auto)"); 902 } 903 #header-layout>header #siteLogo { 904 grid-column: 1; 905 grid-row: 1; 906 } 907 #header-layout>header #globalTools { 908 grid-row: 1; 909 grid-column: 2; 910 } 911 #header-layout>header #globalTools ul li { 912 display: block; 913 margin-bottom: .5em; 914 } 915 #header-layout>header #globalTools ul li:before { 916 content: ''; 917 } 918 #header-layout>header #phSearch { 919 grid-row: 2; 920 grid-column: 1 / span 2; 921 padding: .5em 1em 0 68px; 922 } 923 #header-layout>header #phTools { 924 grid-row: 3; 925 grid-column: 1 / span 2; 926 } 927 #header-layout>header #phInclude { 928 grid-row: 4; 929 grid-column: 1 / span 2; 930 margin: 0 6pt 5pt 64px; 931 } 932 933 #qsearch__out ul { 934 max-height: 100%; 935 } 936 937 #main-layout { 938 display: block; 939 } 940 941 #sidebar.toggle { 942 width: auto; 943 margin-left: .5em; 944 padding: 0; 945 position: relative; 946 top: -2.25em; 947 height: .25em; 948 } 949 #sidebar>button.tg_button { 950 float: none; 951 } 952 #sidebar.auto>button.tg_button, 953 #sidebar.hide>button.tg_button, 954 #sidebar.alt>button.tg_button, 955 #sidebar.show>button.tg_button { 956 width: 1.5em; 957 } 958 #sidebar>button.tg_button span { 959 display: none; 960 } 961 962 #sidebar>button.tg_button::after { 963 content: '\2630'; 964 } 965 #sidebar.hide>button.tg_button::after, 966 #sidebar.alt>button.tg_button::after { 967 content: '\2715'; 968 } 969 970 #sidebar .tg_content { 971 min-width: @ini_sidebar_width; 972 padding-right: 0; 973 margin-top: 10px; 974 padding-bottom: 1em; 975 background-color: @ini_background_site; 976 position: absolute; 977 z-index: 18; 978 border: @ini_border solid 1px; 979 -moz-box-shadow: 2px 2px 2px @ini_border; 980 -webkit-box-shadow: 2px 2px 2px @ini_border; 981 box-shadow: 2px 2px 2px @ini_border; 982 } 983 984 #sidebar .tg_content:before { 985 content: ' '; 986 z-index: 19; 987 width: 0; 988 height: 0; 989 position: absolute; 990 top: -10px; 991 left: 7px; 992 border-width: 0 10px 10px; 993 border-style: solid; 994 border-color: transparent; 995 border-bottom-color: @ini_border; 996 } 997 #sidebar .tg_content:after { 998 content: ' '; 999 z-index: 20; 1000 width: 0; 1001 height: 0; 1002 position: absolute; 1003 top: -8px; 1004 left: 8px; 1005 border-width: 0 9px 8px; 1006 border-style: solid; 1007 border-color: transparent; 1008 border-bottom-color: @ini_background_site; 1009 } 1010 1011 #sbNavigation { 1012 padding-left: .5em; 1013 margin-left: 0; 1014 } 1015 #sidebar h3, 1016 #sidebar h4 { 1017 font-size: 1rem; 1018 padding: .25em 0 .25em 2pt; 1019 } 1020 #sidebar ul, #sidebar ol { 1021 margin-left: .5em; 1022 } 1023 #sidebar ul ul, #sidebar ol ol, 1024 #sidebar ul ol, #sidebar ol ul { 1025 margin-left: 0; 1026 } 1027 #sidebar p, 1028 #sidebar li { 1029 font-size: small; 1030 padding: .25em 0 .25em .25em; 1031 } 1032 1033 main { 1034 width: auto; 1035 box-shadow: 0 0 0 0 transparent; 1036 } 1037 1038 .toggle .tg_content, 1039 .toggle.alt .tg_content, 1040 .toggle.show .tg_content { 1041 display: initial; 1042 } 1043 .toggle.auto .tg_content { 1044 display: none; 1045 } 1046 1047 #toc.hide h3::after, 1048 #toc.auto h3::after { 1049 content: '\2630'; 1050 } 1051 #toc.alt h3::after { 1052 content: '\203A'; 1053 } 1054 1055 #toc.hide h3>span, 1056 #toc.auto h3>span { 1057 display: none; 1058 } 1059 #toc.alt h3>span { 1060 display: inline-block; 1061 } 1062 1063 #footer-layout>footer { 1064 grid-template-columns: 12pt 1fr 1fr 1fr; 1065 } 1066 1067 /* admin interface */ 1068 .dokuwiki div.ui-admin ul.admin_tasks { 1069 float: none; 1070 width: auto; 1071 } 1072 .dokuwiki div.ui-admin #admin__version { 1073 display: none; 1074 } 1075} 1076 1077@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) { 1078 body.darkmode #sidebar .tg_content { 1079 background-color: @ini_background_dark; 1080 border-color: @ini_border_dark; 1081 -moz-box-shadow: 3px 3px 3px @ini_background_site_dark; 1082 -webkit-box-shadow: 3px 3px 3px @ini_background_site_dark; 1083 box-shadow: 3px 3px 3px @ini_background_site_dark; 1084 } 1085 body.darkmode #sidebar .tg_content:before { 1086 border-bottom-color: @ini_border_dark; 1087 } 1088 body.darkmode #sidebar .tg_content:after { 1089 border-bottom-color: @ini_background_dark; 1090 } 1091 body.darkmode #sidebar hr { 1092 background: @ini_link_dark; 1093 background-image: linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark); 1094 } 1095} 1096 1097/* medium break point: */ 1098@media all and (max-width: @ini_phone_width) { 1099 #footer-layout { 1100 padding-top: .5em; 1101 } 1102 #footer-layout>footer { 1103 grid-template-columns: 100%; 1104 grid-template-rows: auto auto auto auto auto; 1105 } 1106 #footer-layout>footer .ftSection { 1107 grid-column: 1; 1108 padding: 0 .25em 0 .5em; 1109 white-space: normal; 1110 } 1111 #footer-layout>footer .ftSection ul { 1112 padding-left: 0; 1113 } 1114 #footer-layout>footer .ftSection li { 1115 display: inline-block; 1116 } 1117 #footer-layout>footer .ftSection li::before { 1118 content: '\00B7'; 1119 display: inline; 1120 width: .35em; 1121 padding: 0 .35em; 1122 } 1123 #footer-layout>footer .ftSection li:first-child::before { 1124 content: ''; 1125 padding-left: 0; 1126 } 1127 1128 #footer-layout>footer #ftPlaceholder { 1129 grid-row: 1; 1130 } 1131 #footer-layout>footer #ftInclude { 1132 grid-row: 2; 1133 } 1134 #footer-layout>footer #ftSiteTools { 1135 grid-row: 3; 1136 } 1137 #footer-layout>footer #ftPageTools { 1138 grid-row: 4; 1139 } 1140 #footer-layout>footer #ftLicenseButtons { 1141 grid-column: 1; 1142 grid-row: 5; 1143 } 1144 1145 #footer-layout>footer h4 { 1146 margin-bottom: .5em; 1147 } 1148 1149 main blockquote { 1150 margin-left: .15em; 1151 margin-right: 0; 1152 } 1153 main ul, main ol { 1154 margin-left: .5em; 1155 margin-right: 0; 1156 padding-left: .75em; 1157 } 1158}
