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