github.com/choria-io/go-choria@v0.28.1-0.20240416190746-b3bf9c7d5a45/docs/themes/hugo-theme-relearn/static/css/theme.css (about) 1 @charset "UTF-8"; 2 3 @import "tags.css"; 4 5 /* until browsers don't let us set length values based on dppx, we 6 need a way to calculate them ourself */ 7 :root { 8 --dpr: 1; 9 --bpx: 1; 10 --bpx1: 1; 11 } 12 @media (min-resolution: 105dpi) { 13 :root { 14 --dpr: 1.1; 15 --bpx: 1.1; 16 --bpx1: calc(1/1.1); 17 } 18 } 19 @media (min-resolution: 115dpi) { 20 :root { 21 --dpr: 1.2; 22 --bpx: 1.2; 23 --bpx1: calc(1/1.2); 24 } 25 } 26 @media (min-resolution: 120dpi) { 27 :root { 28 --dpr: 1.25; 29 --bpx: 1.25; 30 --bpx1: calc(1/1.25); 31 } 32 } 33 @media (min-resolution: 128dpi) { 34 :root { 35 --dpr: 1.333; 36 --bpx: 1.333; 37 --bpx1: calc(1/1.333); 38 } 39 } 40 @media (min-resolution: 144dpi) { 41 :root { 42 --dpr: 1.5; 43 --bpx: 1.5; 44 --bpx1: calc(1/1.5); 45 } 46 } 47 @media (min-resolution: 160dpi) { 48 :root { 49 --dpr: 1.666; 50 --bpx: 1.666; 51 --bpx1: calc(1/1.666); 52 } 53 } 54 @media (min-resolution: 168dpi) { 55 :root { 56 --dpr: 1.75; 57 --bpx: 1.75; 58 --bpx1: calc(1/1.75); 59 } 60 } 61 @media (min-resolution: 192dpi) { 62 :root { 63 --dpr: 2; 64 --bpx: 1; 65 --bpx1: 1; 66 } 67 } 68 @media (min-resolution: 240dpi) { 69 :root { 70 --dpr: 2.5; 71 --bpx: 1.25; 72 --bpx1: calc(1/1.25); 73 } 74 } 75 @media (min-resolution: 288dpi) { 76 :root { 77 --dpr: 3; 78 --bpx: 1; 79 --bpx1: 1; 80 } 81 } 82 @media (min-resolution: 384dpi) { 83 :root { 84 --dpr: 4; 85 --bpx: 1; 86 --bpx1: 1; 87 } 88 } 89 @media (min-resolution: 480dpi) { 90 :root { 91 --dpr: 5; 92 --bpx: 1.25; 93 --bpx1: calc(1/1.25); 94 } 95 } 96 @media (min-resolution: 576dpi) { 97 :root { 98 --dpr: 6; 99 --bpx: 1.5; 100 --bpx1: calc(1/1.5); 101 } 102 } 103 @media (min-resolution: 768dpi) { 104 :root { 105 --dpr: 8; 106 --bpx: 1; 107 --bpx1: 1; 108 } 109 } 110 111 html { 112 height: 100%; 113 width: 100%; 114 } 115 116 body { 117 display: flex; 118 flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS and better SEO and a11y */ 119 font-size: 1.015625rem; 120 font-weight: 300; 121 height: 100%; 122 justify-content: flex-end; 123 line-height: 1.574; 124 /* overflow: hidden; PSC removed for #242 #243 #244; to avoid browser scrollbar to flicker before we create our own */ 125 width: 100%; 126 } 127 128 b, 129 strong, 130 label, 131 th { 132 font-weight: 600; 133 } 134 135 ul { 136 list-style: disc; 137 } 138 139 dt { 140 font-style: italic; 141 } 142 143 dd { 144 display: list-item; 145 list-style: circle; 146 } 147 148 .default-animation{ 149 transition: all 0.35s ease; 150 } 151 152 #R-sidebar { 153 display: flex; 154 flex-basis: auto; 155 flex-direction: column; 156 flex-grow: 0; 157 flex-shrink: 0; 158 font-size: .953125rem; 159 height: 100%; 160 inset-inline-start: 0; 161 line-height: 1.574; 162 min-height: 100%; 163 position: fixed; 164 min-width: var(--INTERNAL-MENU-WIDTH-L); 165 max-width: var(--INTERNAL-MENU-WIDTH-L); 166 width: var(--INTERNAL-MENU-WIDTH-L); 167 } 168 169 #R-sidebar a{ 170 text-decoration: none; 171 } 172 173 #R-header-wrapper { 174 text-align: center; 175 padding: 1rem; 176 position: relative; 177 } 178 #R-header { 179 border-block-end: 1px solid transparent; 180 position: relative; 181 z-index: 1; 182 } 183 #R-header a { 184 display: inline-block; 185 } 186 187 .searchbox { 188 border-radius: 4px; 189 border-style: solid; 190 border-width: 1px; 191 position: relative; 192 margin-top: 1rem; 193 } 194 195 .searchbox > :first-child { 196 inset-inline-start: .5rem; 197 position: absolute; 198 } 199 200 .searchbox > button { 201 -webkit-appearance: none; 202 appearance: none; 203 background-color: transparent; 204 border: 0; 205 margin: 0; 206 padding: 0; 207 top: .25rem; 208 } 209 210 .searchbox > i { 211 top: .45rem; 212 } 213 214 .searchbox > :last-child { 215 inset-inline-end: .5rem; 216 position: absolute; 217 } 218 219 #R-sidebar .searchbox > :first-child, 220 #R-sidebar .searchbox > :last-child{ 221 opacity: .65; 222 } 223 224 #R-sidebar .searchbox button:hover { 225 opacity: 1; 226 } 227 228 .searchbox input { 229 display: inline-block; 230 width: 100%; 231 height: 1.875rem; 232 background: transparent; 233 border: 0; 234 padding-bottom: 0; 235 padding-inline-end: 1.6rem; 236 padding-inline-start: 1.8rem; 237 padding-top: 0; 238 margin: 0; 239 font-weight: 300; 240 } 241 242 .searchbox input::placeholder { 243 opacity: .45; 244 } 245 246 #R-content-wrapper { 247 --ps-rail-hover-color: rgba( 176, 176, 176, .25 ); 248 display: flex; 249 flex-direction: column; 250 flex: 1; /* fill rest of vertical space */ 251 overflow: hidden; 252 position: relative; /* PS */ 253 z-index: 100; 254 } 255 256 #R-sidebar .padding { 257 padding: 0 1rem; 258 } 259 260 .footerFooter { 261 font-size: .8125rem; 262 padding-top: 2rem; 263 padding-bottom: .75rem; 264 text-align: center; 265 } 266 267 .footerFooter > * { 268 margin: 0 auto; 269 } 270 271 #R-footer > hr:first-child { 272 margin-top: 0; 273 } 274 275 /* increase specifity to override following #R-content-wrapper hr style */ 276 #R-footer > hr:nth-child(n) { 277 margin-left: 0; 278 margin-right: 0; 279 } 280 281 #R-sidebar ul { 282 list-style: none; 283 padding: 0; 284 margin: 0; 285 } 286 287 #R-sidebar ul li { 288 padding: 0; 289 } 290 291 #R-sidebar ul li.visited + span { 292 margin-inline-end: 1rem; 293 } 294 295 #R-sidebar ul li .read-icon { 296 display: none; 297 font-size: .8125rem; 298 inset-inline-end: 1rem; 299 margin: .25rem 0 0 0; 300 min-width: 1rem; 301 position: absolute; 302 } 303 304 #R-sidebar ul li.visited > a .read-icon { 305 display: inline; 306 } 307 308 #R-sidebar .nav-title { 309 font-size: 2rem; 310 font-weight: 200; 311 letter-spacing: -.02175em; 312 line-height: 110%; 313 margin: 1.2rem 0 .8rem 0; 314 padding-inline-start: 1rem; 315 text-rendering: optimizeLegibility; 316 text-transform: uppercase; 317 } 318 319 #R-sidebar .footermargin { 320 flex-grow: 1; 321 } 322 323 #R-content-wrapper hr { 324 border-bottom-style: solid; 325 border-bottom-width: 1px; 326 margin: 1.5rem 1rem 1rem 1rem; 327 } 328 329 #R-body { 330 display: flex; 331 flex-basis: 100%; 332 flex-direction: column; 333 flex-grow: 1; 334 flex-shrink: 0; 335 height: 100%; 336 margin-inline-start: var(--INTERNAL-MENU-WIDTH-L); 337 min-height: 100%; 338 overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */ 339 position: relative; /* PS */ 340 min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) ); 341 max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) ); 342 width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) ); 343 z-index: 70; 344 } 345 346 #R-body img, 347 #R-body figure > figcaption > h4, 348 #R-body figure > figcaption > p, 349 #R-body .video-container { 350 display: block; 351 margin-left: auto; 352 margin-right: auto; 353 padding: 0; 354 text-align: center; 355 } 356 357 #R-body img:not(.lightbox-image).left { 358 margin-left: 0; 359 } 360 361 #R-body img:not(.lightbox-image).right { 362 margin-right: 0; 363 } 364 365 #R-body img:not(.lightbox-image).border, 366 #R-body .video-container.border { 367 background-clip: padding-box; 368 border: 1px solid rgba( 134, 134, 134, .333 ); 369 } 370 371 #R-body img:not(.lightbox-image).shadow, 372 #R-body .video-container.shadow { 373 box-shadow: 0 10px 30px rgba( 176, 176, 176, .666 ); 374 } 375 376 #R-body img:not(.lightbox-image).inline { 377 display: inline; 378 margin: 0; 379 vertical-align: bottom; 380 } 381 382 #R-body figure > figcaption{ 383 margin: 0; 384 } 385 386 #R-body figure > figcaption > h4{ 387 font-size: 1.0rem; 388 font-weight: 500; 389 margin: 0; 390 } 391 392 #R-body figure > figcaption > p{ 393 font-size: .85rem; 394 font-weight: 300; 395 margin-top: .15rem; 396 } 397 #R-body figure > figcaption > h4 + p{ 398 margin-top: 0; 399 } 400 401 #R-body-inner { 402 display: flex; 403 flex: auto; 404 flex-direction: column; 405 overflow-y: auto; 406 padding: 0 3.25rem 4rem 3.25rem; 407 position: relative; /* PS */ 408 } 409 @media screen and (max-width: 59.999rem) { 410 #R-body-inner { 411 padding: 0 2rem 1rem 2rem; 412 } 413 } 414 @media screen and (max-width: 47.999rem) { 415 #R-body-inner { 416 padding: 0 1.25rem .375rem 1.25rem; 417 } 418 } 419 420 #R-topbar a:hover:empty, 421 #R-topbar a:active:empty, 422 #R-topbar a:focus:empty, 423 #R-topbar a:hover :not(i), 424 #R-topbar a:active :not(i), 425 #R-topbar a:focus :not(i), 426 #R-topbar button:hover :not(i), 427 #R-topbar button:active :not(i), 428 #R-topbar button:focus :not(i), 429 #R-topbar .title:hover, 430 #R-topbar .title:active, 431 #R-topbar .title:focus, 432 .topbar-content a:hover, 433 .topbar-content a:active, 434 .topbar-content a:focus, 435 article a:hover, 436 article a:active, 437 article a:focus, 438 article a:hover .copy-to-clipboard, 439 article a:active .copy-to-clipboard, 440 article a:focus .copy-to-clipboard { 441 text-decoration: underline; 442 } 443 .topbar-content a:hover, 444 .topbar-content a:active, 445 .topbar-content a:focus, 446 article a:hover, 447 article a:active, 448 article a:focus, 449 article a:hover .copy-to-clipboard, 450 article a:active .copy-to-clipboard, 451 article a:focus .copy-to-clipboard { 452 outline: none; 453 } 454 article a:hover > img:only-child:empty, 455 article a:active > img:only-child:empty, 456 article a:focus > img:only-child:empty{ 457 outline: auto; 458 } 459 460 #R-body-inner:focus-visible{ 461 /* remove focus indicator for programatically set focus */ 462 outline: none; 463 } 464 465 #R-body h1 + hr { 466 margin-bottom: 2rem; 467 margin-top: -1rem; 468 } 469 470 #R-body .flex-block-wrapper { 471 margin-left: auto; 472 margin-right: auto; 473 max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem ); 474 width: 100%; 475 } 476 body:not(.print) #R-body .narrow .flex-block-wrapper { 477 max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem ); 478 } 479 /* we limit width if we have large screens */ 480 body.main-width-max #R-body .flex-block-wrapper { 481 width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem ); 482 } 483 body.main-width-max:not(.print) #R-body .narrow .flex-block-wrapper { 484 width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem ); 485 } 486 487 body:not(.print) #R-body-inner.narrow { 488 padding: 0 9.75rem 2rem 9.75rem; 489 } 490 @media screen and (max-width: 59.999rem) { 491 body:not(.print) #R-body-inner.narrow { 492 padding: 0 6.5rem 1rem 6.5rem; 493 } 494 } 495 @media screen and (max-width: 47.999rem) { 496 body:not(.print) #R-body-inner.narrow { 497 padding: 0 3.25rem .375rem 3.25rem; 498 } 499 } 500 501 #R-body-inner div.article-subheading, 502 #R-body-inner .chapter.deprecated h3:first-of-type { 503 font-weight: 200; 504 margin-top: 0; 505 text-align: center; 506 } 507 body:not(.print) #R-body-inner.narrow div.article-subheading{ 508 margin-top: 2rem; 509 } 510 @media screen and (max-width: 59.999rem) { 511 body:not(.print) #R-body-inner.narrow div.article-subheading{ 512 margin-top: 1rem; 513 } 514 } 515 @media screen and (max-width: 47.999rem) { 516 body:not(.print) #R-body-inner.narrow div.article-subheading{ 517 margin-top: .375rem; 518 } 519 } 520 521 body:not(.print) #R-body-inner.narrow p { 522 font-size: 1.2rem; 523 text-align: justify; 524 } 525 526 mark { 527 background: transparent; 528 border-radius: 0.8em 0.3rem; 529 -webkit-box-decoration-break: clone; 530 box-decoration-break: clone; 531 color: rgba( 0, 0, 0, 1 ); 532 -webkit-print-color-adjust: exact; 533 color-adjust: exact; 534 margin: 0 -0.4rem; 535 padding: 0.1em 0.4rem; 536 } 537 538 kbd { 539 background-color: rgba( 134, 134, 134, .166 ); 540 border-color: rgba( 134, 134, 134, .5 ); 541 border-radius: 0.25rem; 542 border-style: solid; 543 border-width: 1px; 544 box-shadow: 0 .0625rem 0 .0625rem rgba( 134, 134, 134, .5 ); 545 -webkit-print-color-adjust: exact; 546 color-adjust: exact; 547 font-size: 0.75rem; 548 line-height: 1; 549 min-width: 0.75rem; 550 padding: .125rem .3125rem .125rem .3125rem; 551 position: relative; 552 text-align: center; 553 top: -.125rem; 554 } 555 556 h1 { 557 font-size: 3.25rem; 558 font-weight: 200; 559 margin: 0.85rem 0 1rem 0; 560 /* big titles cause a horizontal scrollbar - fixing this by wrapping text */ 561 overflow-wrap: break-word; 562 overflow-x: hidden; 563 text-align: center; 564 text-rendering: optimizeLegibility; 565 text-transform: uppercase; 566 } 567 568 body:not(.print) #R-body-inner.narrow h1 { 569 border-bottom: 4px solid rgba( 134, 134, 134, .125 ); 570 font-size: 3.5rem; 571 } 572 @media only screen and (min-width: 48rem) and (max-width: 59.999rem) { 573 body:not(.print) #R-body-inner.narrow h1 { 574 font-size: 2.8rem; 575 } 576 } 577 @media only screen and (max-width: 47.999rem) { 578 body:not(.print) #R-body-inner.narrow h1 { 579 font-size: 2.5rem; 580 } 581 } 582 583 h2 { 584 font-size: 2.2rem; 585 font-weight: 500; 586 } 587 588 h3, .article-subheading { 589 font-size: 1.8rem; 590 font-weight: 500; 591 } 592 593 h4 { 594 font-size: 1.85rem; 595 font-weight: 300; 596 } 597 598 h5 { 599 font-size: 1.6rem; 600 font-weight: 300; 601 } 602 603 h6 { 604 font-size: 1.3rem; 605 font-weight: 300; 606 } 607 608 h2, h3, .article-subheading, h4, h5, h6 { 609 letter-spacing: -.0625rem; 610 margin: 2rem 0 1rem 0; 611 /* big titles cause a horizontal scrollbar - fixing this by wrapping text */ 612 overflow-wrap: break-word; 613 overflow-x: hidden; 614 text-rendering: optimizeLegibility; 615 } 616 617 h2, h3, h4, h5, h6 { 618 /* leave space for anchor to avoid overflow */ 619 padding-inline-end: 2rem; 620 } 621 622 blockquote { 623 border-inline-start: .6rem solid rgba( 134, 134, 134, .4 ); 624 } 625 626 blockquote p { 627 font-size: 1.06640625rem; 628 font-style: italic; 629 opacity: .75; 630 text-align: justify; 631 } 632 633 blockquote cite { 634 display: block; 635 font-weight: bold; 636 opacity: .5; 637 padding-top: .5rem; 638 text-align: end; 639 } 640 641 /* colored boxes */ 642 643 .cstyle { 644 --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); 645 --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color); 646 --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); 647 --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); 648 -webkit-print-color-adjust: exact; 649 color-adjust: exact; 650 } 651 652 div.box { 653 margin: 1.5rem 0; 654 border-style: solid; 655 border-width: 1px; 656 } 657 658 div.box > .box-label { 659 font-weight: 500; 660 padding: .2rem .6rem; 661 } 662 663 div.box > .box-content { 664 padding-top: 1rem; 665 padding-bottom: 1rem; 666 padding-left: 1rem; 667 padding-right: 1rem; 668 } 669 670 p:empty { 671 /* in case of image render hook, Hugo may generate empty <p>s that we want to ignore */ 672 display: none; 673 } 674 675 /* in case of image render hook, Hugo may generate empty <p>s that we want to ignore aswell, so a simple :first-child or :last-child is not enough */ 676 #R-body table th > :nth-child(1 of :not(:empty)), 677 #R-body table th > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)), 678 #R-body table td > :nth-child(1 of :not(:empty)), 679 #R-body table td > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)), 680 #R-body div.box > .box-content > :nth-child(1 of :not(:empty)), 681 #R-body div.box > .box-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)), 682 #R-body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)), 683 #R-body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)), 684 #R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)), 685 #R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) { 686 margin-top: 0; 687 } 688 689 #R-body table th > :nth-last-child(1 of :not(:empty)), 690 #R-body table th > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)), 691 #R-body table th > div.highlight:last-child pre:not(.mermaid), 692 #R-body table td > :nth-last-child(1 of :not(:empty)), 693 #R-body table td > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)), 694 #R-body table td > div:last-child pre:not(.mermaid), 695 #R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)), 696 #R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)), 697 #R-body div.box > .box-content > div:last-child pre:not(.mermaid), 698 #R-body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)), 699 #R-body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)), 700 #R-body div.expand > .expand-content-text > div:last-child pre:not(.mermaid), 701 #R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)), 702 #R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)), 703 #R-body div.tab-content > .tab-content-text > div:last-child pre:not(.mermaid) { 704 margin-bottom: 0; 705 } 706 707 /* resources shortcode */ 708 709 div.attachments .box-content { 710 display: block; 711 margin: 0; 712 padding-inline-start: 1.75rem; 713 } 714 715 /* Children shortcode */ 716 717 .children p { 718 font-size: .8125rem; 719 margin-bottom: 0; 720 margin-top: 0; 721 padding-bottom: 0; 722 padding-top: 0; 723 } 724 725 .children-li p { 726 font-size: .8125rem; 727 font-style: italic; 728 } 729 730 .children-h2 p, 731 .children-h3 p { 732 font-size: .8125rem; 733 margin-bottom: 0; 734 margin-top: 0; 735 padding-bottom: 0; 736 padding-top: 0; 737 } 738 739 #R-body-inner .children h2, 740 #R-body-inner .children h3, 741 #R-body-inner .children h4, 742 #R-body-inner .children h5, 743 #R-body-inner .children h6 { 744 margin-bottom: 0; 745 margin-top: 1rem; 746 } 747 #R-body-inner ul.children-h2, 748 #R-body-inner ul.children-h3, 749 #R-body-inner ul.children-h4, 750 #R-body-inner ul.children-h5, 751 #R-body-inner ul.children-h6 { 752 /* if we display children with style=h2 but without a containerstyle 753 a ul will be used for structuring; we remove default indention for uls 754 in this case */ 755 padding-inline-start: 0; 756 } 757 758 code, 759 kbd, 760 pre:not(.mermaid), 761 samp { 762 font-size: .934375rem; 763 vertical-align: baseline; 764 } 765 766 code { 767 border-radius: 2px; 768 border-style: solid; 769 border-width: 1px; 770 -webkit-print-color-adjust: economy; 771 color-adjust: economy; 772 padding-left: 2px; 773 padding-right: 2px; 774 white-space: nowrap; 775 } 776 777 span.copy-to-clipboard { 778 display: inline-block; 779 white-space: nowrap; 780 } 781 782 code.copy-to-clipboard-code { 783 border-end-end-radius: 0; 784 border-start-end-radius: 0; 785 border-inline-end-width: 0; 786 } 787 788 pre:not(.mermaid) { 789 border-radius: 2px; 790 border-style: solid; 791 border-width: 1px; 792 -webkit-print-color-adjust: economy; 793 color-adjust: economy; 794 line-height: 1.15; 795 padding: 1rem; 796 position: relative; 797 } 798 799 /* pre:not(.mermaid):has( code ), */ 800 /* the :has() operator isn't available in FF yet, so we patch this by JS */ 801 pre:not(.mermaid).pre-code { 802 direction: ltr; 803 text-align: left; 804 } 805 806 pre:not(.mermaid) code { 807 background-color: inherit; 808 border: 0; 809 color: inherit; 810 -webkit-print-color-adjust: economy; 811 color-adjust: economy; 812 font-size: .9375rem; 813 margin: 0; 814 padding: 0; 815 } 816 817 div.highlight{ 818 position: relative; 819 } 820 /* we may have special treatment if highlight shortcode was used in table lineno mode */ 821 div.highlight > div{ 822 border-style: solid; 823 border-width: 1px; 824 } 825 /* remove default style for usual markdown tables */ 826 div.highlight > div table{ 827 background-color: transparent; 828 border-width: 0; 829 margin: 0; 830 } 831 div.highlight > div td{ 832 border-width: 0; 833 } 834 #R-body div.highlight > div a { 835 line-height: inherit; 836 } 837 #R-body div.highlight > div a:after { 838 display: none; 839 } 840 /* disable selection for lineno cells */ 841 div.highlight > div td:first-child:not(:last-child){ 842 -ms-user-select: none; 843 -webkit-user-select: none; 844 user-select: none; 845 } 846 /* increase code column to full width if highlight shortcode was used in table lineno mode */ 847 div.highlight > div td:not(:first-child):last-child{ 848 width: 100%; 849 } 850 /* add scrollbars if highlight shortcode was used in table lineno mode */ 851 div.highlight > div table{ 852 display: block; 853 overflow: auto; 854 } 855 div.highlight:not(.wrap-code) pre:not(.mermaid){ 856 overflow: auto; 857 } 858 div.highlight:not(.wrap-code) pre:not(.mermaid) code{ 859 white-space: pre; 860 } 861 div.highlight.wrap-code pre:not(.mermaid) code{ 862 white-space: pre-wrap; 863 } 864 /* remove border from row cells if highlight shortcode was used in table lineno mode */ 865 div.highlight > div td > pre:not(.mermaid) { 866 border-radius: 0; 867 border-width: 0; 868 } 869 /* in case of table lineno mode we want to move each row closer together - besides the edges 870 this usually applies only to wrapfix tables but it doesn't hurt for non-wrapfix tables too */ 871 div.highlight > div tr:not(:first-child) pre:not(.mermaid){ 872 padding-top: 0; 873 } 874 div.highlight > div tr:not(:last-child) pre:not(.mermaid){ 875 padding-bottom: 0; 876 } 877 /* in case of table lineno mode we want to move each columns closer together on the inside */ 878 div.highlight > div td:first-child:not(:last-child) pre:not(.mermaid){ 879 padding-right: 0; 880 } 881 div.highlight > div td:not(:first-child):last-child pre:not(.mermaid){ 882 padding-left: 0; 883 } 884 885 hr { 886 border-bottom: 4px solid rgba( 134, 134, 134, .125 ); 887 } 888 889 #R-body-inner pre:not(.mermaid) { 890 white-space: pre-wrap; 891 } 892 893 table { 894 border: 1px solid rgba( 134, 134, 134, .333 ); 895 margin-bottom: 1rem; 896 margin-top: 1rem; 897 table-layout: auto; 898 } 899 900 th, 901 thead td { 902 background-color: rgba( 134, 134, 134, .166 ); 903 border: 1px solid rgba( 134, 134, 134, .333 ); 904 -webkit-print-color-adjust: exact; 905 color-adjust: exact; 906 padding: 0.5rem; 907 } 908 909 td { 910 border: 1px solid rgba( 134, 134, 134, .333 ); 911 padding: 0.5rem; 912 } 913 tbody > tr:nth-child(even) > td { 914 background-color: rgba( 134, 134, 134, .045 ); 915 } 916 917 .tooltipped { 918 position: relative; 919 } 920 921 .tooltipped:after { 922 background: rgba( 0, 0, 0, 1 ); 923 border: 1px solid rgba( 119, 119, 119, 1 ); 924 border-radius: 3px; 925 color: rgba( 255, 255, 255, 1 ); 926 content: attr(aria-label); 927 display: none; 928 font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 929 font-size: .6875rem; 930 font-weight: normal; 931 -webkit-font-smoothing: subpixel-antialiased; 932 letter-spacing: normal; 933 line-height: 1.5; 934 padding: 5px 8px; 935 pointer-events: none; 936 position: absolute; 937 text-align: center; 938 text-decoration: none; 939 text-shadow: none; 940 text-transform: none; 941 white-space: pre; 942 word-wrap: break-word; 943 z-index: 140; 944 } 945 946 .tooltipped:before { 947 border: 5px solid transparent; 948 color: rgba( 0, 0, 0, 1 ); 949 content: ""; 950 display: none; 951 height: 0; 952 pointer-events: none; 953 position: absolute; 954 width: 0; 955 z-index: 150; 956 } 957 958 .tooltipped:hover:before, 959 .tooltipped:hover:after, 960 .tooltipped:active:before, 961 .tooltipped:active:after, 962 .tooltipped:focus:before, 963 .tooltipped:focus:after { 964 display: inline-block; 965 text-decoration: none; 966 } 967 968 .tooltipped-s:after, 969 .tooltipped-se:after, 970 .tooltipped-sw:after { 971 margin-top: 5px; 972 right: 50%; 973 top: 100%; 974 } 975 976 .tooltipped-s:before, 977 .tooltipped-se:before, 978 .tooltipped-sw:before { 979 border-bottom-color: rgba( 0, 0, 0, .8 ); 980 bottom: -5px; 981 margin-right: -5px; 982 right: 50%; 983 top: auto; 984 } 985 986 .tooltipped-se:after { 987 left: 50%; 988 margin-left: -15px; 989 right: auto; 990 } 991 992 .tooltipped-sw:after { 993 margin-right: -15px; 994 } 995 996 .tooltipped-n:after, 997 .tooltipped-ne:after, 998 .tooltipped-nw:after { 999 bottom: 100%; 1000 margin-bottom: 5px; 1001 right: 50%; 1002 } 1003 1004 .tooltipped-n:before, 1005 .tooltipped-ne:before, 1006 .tooltipped-nw:before { 1007 border-top-color: rgba( 0, 0, 0, .8 ); 1008 bottom: auto; 1009 margin-right: -5px; 1010 right: 50%; 1011 top: -5px; 1012 } 1013 1014 .tooltipped-ne:after { 1015 left: 50%; 1016 margin-left: -15px; 1017 right: auto; 1018 } 1019 1020 .tooltipped-nw:after { 1021 margin-right: -15px; 1022 } 1023 1024 .tooltipped-s:after, 1025 .tooltipped-n:after { 1026 transform: translateX(50%); 1027 } 1028 1029 .tooltipped-w:after { 1030 bottom: 50%; 1031 margin-right: 5px; 1032 right: 100%; 1033 transform: translateY(50%); 1034 } 1035 1036 .tooltipped-w:before { 1037 border-left-color: rgba( 0, 0, 0, .8 ); 1038 bottom: 50%; 1039 left: -5px; 1040 margin-top: -5px; 1041 top: 50%; 1042 } 1043 1044 .tooltipped-e:after { 1045 bottom: 50%; 1046 left: 100%; 1047 margin-left: 5px; 1048 transform: translateY(50%); 1049 } 1050 1051 .tooltipped-e:before { 1052 border-right-color: rgba( 0, 0, 0, .8 ); 1053 bottom: 50%; 1054 margin-top: -5px; 1055 right: -5px; 1056 top: 50%; 1057 } 1058 1059 #R-topbar { 1060 min-height: 3rem; 1061 position: relative; 1062 z-index: 170; 1063 } 1064 1065 #R-topbar > .topbar-wrapper { 1066 align-items: center; 1067 background-color: rgba( 134, 134, 134, .066 ); 1068 display: flex; 1069 flex-basis: 100%; 1070 flex-direction: row; 1071 height: 100%; 1072 } 1073 1074 .topbar-button { 1075 display: inline-block; 1076 position: relative; 1077 } 1078 .topbar-button:not([data-origin]) { 1079 display: none; 1080 } 1081 1082 .topbar-button > .topbar-control { 1083 display: inline-block; 1084 padding-left: 1rem; 1085 padding-right: 1rem; 1086 } 1087 .topbar-wrapper > .topbar-area-start > .topbar-button > .topbar-control { 1088 border-inline-end: 1px solid rgba( 134, 134, 134, .333 ); 1089 } 1090 .topbar-wrapper > .topbar-area-end > .topbar-button > .topbar-control { 1091 border-inline-start: 1px solid rgba( 134, 134, 134, .333 ); 1092 } 1093 1094 .topbar-button > button:disabled i, 1095 .topbar-button > span i { 1096 color: rgba( 134, 134, 134, .333 ); 1097 } 1098 .topbar-button button{ 1099 -webkit-appearance: none; 1100 appearance: none; 1101 background-color: transparent; 1102 } 1103 1104 .topbar-sidebar-divider { 1105 border-inline-start-style: solid; 1106 border-inline-start-width: 1px; 1107 margin-inline-end: -1px; 1108 width: 1px; 1109 } 1110 .topbar-sidebar-divider::after { 1111 content: "\00a0"; 1112 } 1113 1114 .topbar-wrapper > .topbar-area-start { 1115 display: flex; 1116 flex-direction: row; 1117 flex-shrink: 0; 1118 } 1119 .topbar-wrapper > .topbar-area-end { 1120 display: flex; 1121 flex-direction: row; 1122 flex-shrink: 0; 1123 } 1124 .topbar-wrapper > .topbar-hidden { 1125 display: none; 1126 } 1127 1128 html[dir="rtl"] .topbar-button-prev i, 1129 html[dir="rtl"] .topbar-button-next i { 1130 transform: scaleX(-1); 1131 } 1132 1133 .topbar-content { 1134 top: .75rem; 1135 } 1136 .topbar-wrapper > .topbar-area-start .topbar-content { 1137 inset-inline-start: 1.5rem; 1138 } 1139 .topbar-wrapper > .topbar-area-end .topbar-content { 1140 inset-inline-end: 1.5rem; 1141 } 1142 .topbar-content .topbar-content{ 1143 /* we don't allow flyouts in flyouts; come on, don't get funny... */ 1144 display: none; 1145 } 1146 1147 .topbar-breadcrumbs { 1148 flex-grow: 1; 1149 margin: 0; 1150 padding: 0 1rem; 1151 } 1152 @media screen and (max-width: 47.999rem) { 1153 .topbar-breadcrumbs { 1154 /* we just hide the breadcrumbs instead of display: none; 1155 this makes sure that the breadcrumbs are still usable for 1156 accessability */ 1157 visibility: hidden; 1158 } 1159 } 1160 1161 .breadcrumbs { 1162 min-width: 0; 1163 overflow: hidden; 1164 text-overflow: ellipsis; 1165 width: 100%; 1166 white-space: nowrap; 1167 } 1168 1169 .breadcrumbs meta { 1170 display: none; 1171 } 1172 1173 .breadcrumbs li { 1174 display: inline-block; 1175 } 1176 1177 #R-body a[aria-disabled="true"] { 1178 pointer-events: none; 1179 text-decoration: none; 1180 } 1181 1182 @media screen and (max-width: 59.999rem) { 1183 #R-sidebar { 1184 min-width: var(--INTERNAL-MENU-WIDTH-M); 1185 max-width: var(--INTERNAL-MENU-WIDTH-M); 1186 width: var(--INTERNAL-MENU-WIDTH-M); 1187 } 1188 #R-body { 1189 margin-inline-start: var(--INTERNAL-MENU-WIDTH-M); 1190 min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) ); 1191 max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) ); 1192 width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) ); 1193 } 1194 } 1195 @media screen and (max-width: 47.999rem) { 1196 /* we don't support sidebar flyout in mobile */ 1197 .mobile-support #R-sidebar { 1198 inset-inline-start: calc( -1 * var(--INTERNAL-MENU-WIDTH-S) ); 1199 min-width: var(--INTERNAL-MENU-WIDTH-S); 1200 max-width: var(--INTERNAL-MENU-WIDTH-S); 1201 width: var(--INTERNAL-MENU-WIDTH-S); 1202 } 1203 .mobile-support #navshow{ 1204 display: inline; 1205 } 1206 .mobile-support #R-body { 1207 min-width: 100%; 1208 max-width: 100%; 1209 width: 100%; 1210 } 1211 .mobile-support #R-body { 1212 margin-inline-start: 0; 1213 } 1214 .mobile-support.sidebar-flyout { 1215 overflow: hidden; 1216 } 1217 .mobile-support.sidebar-flyout #R-sidebar { 1218 inset-inline-start: 0; 1219 z-index: 90; 1220 } 1221 .mobile-support.sidebar-flyout #R-body { 1222 margin-inline-start: var(--INTERNAL-MENU-WIDTH-S); 1223 overflow: hidden; 1224 } 1225 .mobile-support.sidebar-flyout #R-body-overlay{ 1226 background-color: rgba( 134, 134, 134, .5 ); 1227 bottom: 0; 1228 cursor: pointer; 1229 height: 100vh; 1230 left: 0; 1231 position: absolute; 1232 right: 0; 1233 top: 0; 1234 z-index: 190; 1235 } 1236 } 1237 1238 .copy-to-clipboard-button { 1239 border-start-start-radius: 0; 1240 border-start-end-radius: 2px; 1241 border-end-end-radius: 2px; 1242 border-end-start-radius: 0; 1243 border-style: solid; 1244 border-width: 1px; 1245 cursor: pointer; 1246 font-size: .934375rem; 1247 line-height: 1.15; 1248 } 1249 1250 span > .copy-to-clipboard-button { 1251 border-start-start-radius: 0; 1252 border-start-end-radius: 2px; 1253 border-end-end-radius: 2px; 1254 border-end-start-radius: 0; 1255 } 1256 1257 .copy-to-clipboard-button > i { 1258 font-size: .859625rem; 1259 } 1260 1261 /* only show copy to clipboard on hover for code blocks if configured */ 1262 div.highlight .copy-to-clipboard-button { 1263 display: none; 1264 } 1265 @media (any-hover: none) { 1266 /* if there is at least one input device that does not support hover, we want to force the copy button */ 1267 div.highlight .copy-to-clipboard-button { 1268 display: block; 1269 } 1270 } 1271 div.highlight:hover .copy-to-clipboard-button { 1272 display: block; 1273 } 1274 .disableHoverBlockCopyToClipBoard div.highlight .copy-to-clipboard-button { 1275 display: block; 1276 } 1277 1278 div.highlight > div table + .copy-to-clipboard-button > i, 1279 div.highlight pre:not(.mermaid) + .copy-to-clipboard-button > i, 1280 .copy-to-clipboard-code + .copy-to-clipboard-button > i { 1281 padding-left: 5px; 1282 padding-right: 5px; 1283 } 1284 1285 div.highlight > div table + .copy-to-clipboard-button, 1286 div.highlight pre:not(.mermaid) + .copy-to-clipboard-button, 1287 pre:not(.mermaid) > .copy-to-clipboard-button { 1288 background-color: rgba( 160, 160, 160, .2 ); 1289 border-radius: 2px; 1290 border-style: solid; 1291 border-width: 1px; 1292 right: 4px; 1293 padding: 5px 3px; 1294 position: absolute; 1295 top: 4px; 1296 } 1297 1298 .disableInlineCopyToClipboard span > code.copy-to-clipboard-code + span.copy-to-clipboard-button { 1299 display: none; 1300 } 1301 1302 .disableInlineCopyToClipboard span > code.copy-to-clipboard-code { 1303 border-start-end-radius: 2px; 1304 border-end-end-radius: 2px; 1305 border-inline-end-width: 1px; 1306 } 1307 1308 #R-homelinks { 1309 padding: 0; 1310 } 1311 #R-homelinks ul { 1312 margin: .5rem 0; 1313 } 1314 #R-homelinks hr { 1315 border-bottom-style: solid; 1316 border-bottom-width: 1px; 1317 margin: 0 1rem 3px 1rem; 1318 } 1319 1320 option { 1321 color: initial; 1322 } 1323 1324 .expand { 1325 margin-bottom: 1rem; 1326 margin-top: 1rem; 1327 position: relative; 1328 } 1329 1330 .expand > input { 1331 -webkit-appearance: none; 1332 appearance: none; 1333 cursor: pointer; 1334 } 1335 1336 .expand > label { 1337 cursor: pointer; 1338 display: inline; 1339 font-weight: 300; 1340 inset-inline-start: 0; 1341 line-height: 1.1; 1342 margin-top: .2rem; 1343 position: absolute; 1344 } 1345 1346 .expand > input:active + label, 1347 .expand > input:focus + label, 1348 .expand > label:hover { 1349 text-decoration: underline; 1350 } 1351 1352 .expand > label > .fas { 1353 font-size: .8rem; 1354 width: .6rem; 1355 } 1356 1357 .expand > .expand-content { 1358 margin-inline-start: 1rem; 1359 margin-top: .5rem; 1360 } 1361 /* closed expander */ 1362 .expand > input + label + div { 1363 display: none; 1364 } 1365 1366 .expand > input + label > .fa-chevron-down { 1367 display: none; 1368 } 1369 .expand > input + label > .fa-chevron-right { 1370 display: inline-block; 1371 } 1372 1373 /* open expander */ 1374 .expand > input:checked + label + div { 1375 display: block; 1376 } 1377 1378 .expand > input:checked + label > .fa-chevron-down { 1379 display: inline-block; 1380 } 1381 .expand > input:checked + label > .fa-chevron-right { 1382 display: none; 1383 } 1384 1385 /* adjust expander for RTL reading direction */ 1386 html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right { 1387 transform: scaleX(-1); 1388 } 1389 1390 #R-body footer.footline{ 1391 margin-top: 2rem; 1392 } 1393 1394 .headline i, 1395 .footline i{ 1396 margin-inline-start: .5rem; 1397 } 1398 .headline i:first-child, 1399 .footline i:first-child{ 1400 margin-inline-start: 0; 1401 } 1402 1403 .mermaid-container { 1404 margin-bottom: 1.7rem; 1405 margin-top: 1.7rem; 1406 } 1407 1408 .mermaid { 1409 display: inline-block; 1410 border: 1px solid transparent; 1411 padding: .5rem .5rem 0 .5rem; 1412 position: relative; 1413 /* don't use display: none, as this will cause no renderinge by Mermaid */ 1414 visibility: hidden; 1415 width: 100%; 1416 } 1417 .mermaid-container.zoomable > .mermaid:hover { 1418 border-color: rgba( 134, 134, 134, .333 ); 1419 } 1420 .mermaid.mermaid-render { 1421 visibility: visible; 1422 } 1423 1424 .mermaid > svg { 1425 /* remove inline height from generated diagram */ 1426 height: initial !important; 1427 } 1428 .mermaid-container.zoomable > .mermaid > svg { 1429 cursor: grab; 1430 } 1431 1432 .svg-reset-button { 1433 background-color: rgba( 160, 160, 160, .2 ); 1434 border-radius: 2px; 1435 border-style: solid; 1436 border-width: 1px; 1437 cursor: pointer; 1438 display: none; 1439 font-size: .934375rem; 1440 line-height: 1.15; 1441 padding: 5px 3px; 1442 position: absolute; 1443 right: 4px; 1444 top: 4px; 1445 } 1446 .mermaid:hover .svg-reset-button.zoomed { 1447 display: block; 1448 } 1449 @media (any-hover: some) { 1450 /* if there is at least one input device that does not support hover, we want to force the reset button if zoomed */ 1451 .svg-reset-button.zoomed { 1452 display: block; 1453 } 1454 } 1455 1456 .svg-reset-button > i { 1457 font-size: .859625rem; 1458 padding-left: 5px; 1459 padding-right: 5px; 1460 } 1461 1462 .mermaid-code { 1463 display: none; 1464 } 1465 1466 .include.hide-first-heading h1:first-of-type, 1467 .include.hide-first-heading h2:first-of-type, 1468 .include.hide-first-heading h3:first-of-type, 1469 .include.hide-first-heading h4:first-of-type, 1470 .include.hide-first-heading h5:first-of-type, 1471 .include.hide-first-heading h6:first-of-type { 1472 display: none; 1473 } 1474 1475 .include.hide-first-heading h1 + h2:first-of-type, 1476 .include.hide-first-heading h1 + h3:first-of-type, 1477 .include.hide-first-heading h2 + h3:first-of-type, 1478 .include.hide-first-heading h1 + h4:first-of-type, 1479 .include.hide-first-heading h2 + h4:first-of-type, 1480 .include.hide-first-heading h3 + h4:first-of-type, 1481 .include.hide-first-heading h1 + h5:first-of-type, 1482 .include.hide-first-heading h2 + h5:first-of-type, 1483 .include.hide-first-heading h3 + h5:first-of-type, 1484 .include.hide-first-heading h4 + h5:first-of-type, 1485 .include.hide-first-heading h1 + h6:first-of-type, 1486 .include.hide-first-heading h2 + h6:first-of-type, 1487 .include.hide-first-heading h3 + h6:first-of-type, 1488 .include.hide-first-heading h4 + h6:first-of-type, 1489 .include.hide-first-heading h5 + h6:first-of-type { 1490 display: block; 1491 } 1492 1493 /* Table of contents */ 1494 1495 .topbar-flyout #R-main-overlay{ 1496 bottom: 0; 1497 cursor: pointer; 1498 left: 0; 1499 position: absolute; 1500 right: 0; 1501 top: 3rem; 1502 z-index: 160; 1503 } 1504 1505 .topbar-content { 1506 border: 0 solid rgba( 134, 134, 134, .166 ); 1507 box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 ); 1508 height: 0; 1509 opacity: 0; 1510 overflow: hidden; 1511 position: absolute; 1512 visibility: hidden; 1513 width: 0; 1514 z-index: 180; 1515 } 1516 1517 .topbar-button.topbar-flyout .topbar-content { 1518 border-width: 1px; 1519 height: auto; 1520 opacity: 1; 1521 visibility: visible; 1522 width: auto; 1523 } 1524 1525 .topbar-content .topbar-content-wrapper { 1526 background-color: rgba( 134, 134, 134, .066 ); 1527 } 1528 1529 .topbar-content-wrapper { 1530 --ps-rail-hover-color: rgba( 176, 176, 176, .25 ); 1531 max-height: 90vh; 1532 overflow: hidden; 1533 padding: .5rem 1rem; 1534 position: relative; /* PS */ 1535 } 1536 1537 .topbar-content .topbar-button .topbar-control { 1538 border-width: 0; 1539 padding: 0; 1540 } 1541 .topbar-content .topbar-button .topbar-control { 1542 border-width: 0; 1543 padding: .5rem 0; 1544 } 1545 1546 #TableOfContents, 1547 .TableOfContents { 1548 font-size: .8125rem; 1549 } 1550 #TableOfContents ul, 1551 .TableOfContents ul { 1552 list-style: none; 1553 margin: 0; 1554 padding: 0 1rem; 1555 } 1556 1557 #TableOfContents > ul, 1558 .TableOfContents > ul { 1559 padding: 0; 1560 } 1561 1562 #TableOfContents li, 1563 .TableOfContents li { 1564 white-space: nowrap; 1565 } 1566 1567 #TableOfContents > ul > li > a, 1568 .TableOfContents > ul > li > a { 1569 font-weight: 500; 1570 } 1571 1572 .btn { 1573 border-radius: 4px; 1574 display: inline-block; 1575 font-size: .9rem; 1576 font-weight: 500; 1577 line-height: 1.1; 1578 margin-bottom: 0; 1579 touch-action: manipulation; 1580 -ms-user-select: none; 1581 -webkit-user-select: none; 1582 user-select: none; 1583 } 1584 .btn.interactive { 1585 cursor: pointer; 1586 } 1587 1588 .btn > span, 1589 .btn > a { 1590 display: block; 1591 } 1592 1593 .btn > :where(button) { 1594 -webkit-appearance: none; 1595 appearance: none; 1596 border-width: 0; 1597 margin: 0; 1598 padding: 0; 1599 } 1600 1601 .btn > * { 1602 background-color: transparent; 1603 border-radius: 4px; 1604 border-style: solid; 1605 border-width: 1px; 1606 padding: 6px 12px; 1607 text-align: center; 1608 touch-action: manipulation; 1609 -ms-user-select: none; 1610 -webkit-user-select: none; 1611 user-select: none; 1612 white-space: nowrap; 1613 } 1614 1615 .btn > *:after { 1616 /* avoid breakage if no content is given */ 1617 content: "\200b" 1618 } 1619 1620 #R-body #R-body-inner .btn > *.highlight:after { 1621 background-color: transparent; 1622 } 1623 1624 .btn.interactive > .btn-interactive:focus { 1625 outline: none; 1626 } 1627 1628 .btn.interactive > *:hover, 1629 .btn.interactive > *:active, 1630 .btn.interactive > *:focus { 1631 text-decoration: none; 1632 } 1633 1634 /* anchors */ 1635 .anchor { 1636 cursor: pointer; 1637 font-size: .5em; 1638 margin-inline-start: .66em; 1639 margin-top: .9em; 1640 position: absolute; 1641 visibility: hidden; 1642 } 1643 @media (any-hover: none) { 1644 /* if there is at least one input device that does not support hover, we want to force the copy button */ 1645 .anchor { 1646 visibility: visible; 1647 } 1648 } 1649 1650 h2:hover .anchor, 1651 h3:hover .anchor, 1652 h4:hover .anchor, 1653 h5:hover .anchor, 1654 h6:hover .anchor { 1655 visibility: visible; 1656 } 1657 1658 /* Redfines headers style */ 1659 1660 h1 a, 1661 h2 a, 1662 h3 a, 1663 h4 a, 1664 h5 a, 1665 h6 a { 1666 font-weight: inherit; 1667 } 1668 1669 #R-body h1 + h2, 1670 #R-body h1 + h3, 1671 #R-body h1 + h4, 1672 #R-body h1 + h5, 1673 #R-body h1 + h6, 1674 #R-body h2 + h3, 1675 #R-body h2 + h4, 1676 #R-body h2 + h5, 1677 #R-body h2 + h6, 1678 #R-body h3 + h4, 1679 #R-body h3 + h5, 1680 #R-body h3 + h6, 1681 #R-body h4 + h5, 1682 #R-body h4 + h6, 1683 #R-body h5 + h6 { 1684 margin-top: 1rem; 1685 } 1686 1687 .menu-control .control-style { 1688 cursor: pointer; 1689 height: 1.574em; 1690 overflow: hidden; 1691 } 1692 1693 .menu-control i { 1694 padding-top: .25em; 1695 } 1696 1697 .menu-control i, 1698 .menu-control span { 1699 cursor: pointer; 1700 display: block; 1701 float: left; 1702 } 1703 html[dir="rtl"] .menu-control i, 1704 html[dir="rtl"] .menu-control span { 1705 float: right; 1706 } 1707 1708 .menu-control :hover, 1709 .menu-control i:hover, 1710 .menu-control span:hover { 1711 cursor: pointer; 1712 } 1713 1714 .menu-control select, 1715 .menu-control button { 1716 -webkit-appearance: none; 1717 appearance: none; 1718 outline: none; 1719 width: 100%; 1720 } 1721 .menu-control button:active, 1722 .menu-control button:focus, 1723 .menu-control select:active, 1724 .menu-control select:focus{ 1725 outline-style: auto; 1726 } 1727 1728 .menu-control select { 1729 background-color: transparent; 1730 background-image: none; 1731 border: none; 1732 box-shadow: none; 1733 padding-left: 0; 1734 padding-right: 0; 1735 } 1736 1737 .menu-control option { 1738 color: rgba( 0, 0, 0, 1 ); 1739 padding: 0; 1740 margin: 0; 1741 } 1742 1743 .menu-control button { 1744 background-color: transparent; 1745 cursor: pointer; 1746 display: block; 1747 text-align: start; 1748 } 1749 1750 .clear { 1751 clear: both; 1752 } 1753 1754 .footerLangSwitch, 1755 .footerVariantSwitch, 1756 .footerVisitedLinks, 1757 .footerFooter { 1758 display: none; 1759 } 1760 1761 .showLangSwitch, 1762 .showVariantSwitch, 1763 .showVisitedLinks, 1764 .showFooter { 1765 display: block; 1766 } 1767 1768 /* clears the 'X' from Chrome's search input */ 1769 input[type="search"]::-webkit-search-decoration, 1770 input[type="search"]::-webkit-search-cancel-button, 1771 input[type="search"]::-webkit-search-results-button, 1772 input[type="search"]::-webkit-search-results-decoration { display: none; } 1773 1774 span.math:has(> mjx-container[display]) { 1775 display: block; 1776 } 1777 1778 @supports selector(.math:has(> mjx-container)){ 1779 .math{ 1780 visibility: hidden; 1781 } 1782 .math:has(> mjx-container){ 1783 visibility: visible; 1784 } 1785 } 1786 .math.align-left > mjx-container{ 1787 text-align: left !important; 1788 } 1789 1790 .math.align-center > mjx-container{ 1791 text-align: center !important; 1792 } 1793 1794 .math.align-right > mjx-container{ 1795 text-align: right !important; 1796 } 1797 1798 .scrollbar-measure { 1799 /* https://davidwalsh.name/detect-scrollbar-width */ 1800 height: 100px; 1801 overflow: scroll; 1802 position: absolute; 1803 width: 100px; 1804 top: -9999px; 1805 } 1806 1807 .a11y-only { 1808 /* idea taken from https://www.filamentgroup.com/lab/a11y-form-labels.html */ 1809 clip-path: polygon(0 0, 1px 0, 1px 1px, 0 1px); 1810 overflow: hidden; 1811 position: absolute; 1812 height: 1px; 1813 transform: translateY(-100%); 1814 transition: transform .5s cubic-bezier(.18,.89,.32,1.28); 1815 white-space: nowrap; 1816 width: 1px; 1817 } 1818 1819 /* filament style for making action visible on focus - not adapted yet 1820 .a11y-only:focus { 1821 position: fixed; 1822 height: auto; 1823 overflow: visible; 1824 clip: auto; 1825 white-space: normal; 1826 margin: 0 0 0 -100px; 1827 top: -.3em; 1828 left: 50%; 1829 text-align: center; 1830 width: 200px; 1831 background: rgba( 255, 255, 255, 1 ); 1832 color: rgba( 54, 133, 18, 1 ); 1833 padding: .8em 0 .7em; 1834 font-size: 16px; 1835 z-index: 5000; 1836 text-decoration: none; 1837 border-bottom-right-radius: 8px; 1838 border-bottom-left-radius: 8px; 1839 outline: 0; 1840 transform: translateY(0%); 1841 } 1842 */ 1843 1844 .mermaid-container.align-right { 1845 text-align: right; 1846 } 1847 1848 .mermaid-container.align-center { 1849 text-align: center; 1850 } 1851 1852 .mermaid-container.align-left { 1853 text-align: left; 1854 } 1855 1856 .searchform { 1857 display: flex; 1858 } 1859 1860 .searchform input { 1861 flex: 1 0 60%; 1862 border-radius: 4px; 1863 border: 2px solid rgba( 134, 134, 134, .125 ); 1864 background: rgba( 134, 134, 134, .125 ); 1865 display: block; 1866 margin: 0; 1867 margin-inline-end: .5rem; 1868 } 1869 1870 .searchform input::-webkit-input-placeholder, 1871 .searchform input::placeholder { 1872 color: rgba( 134, 134, 134, 1 ); 1873 opacity: .666; 1874 } 1875 1876 .searchform .btn { 1877 display: inline-flex; 1878 } 1879 1880 .searchhint { 1881 margin-top: 1rem; 1882 height: 1.5rem; 1883 } 1884 1885 #R-searchresults a.autocomplete-suggestion { 1886 display: block; 1887 font-size: 1.3rem; 1888 font-weight: 500; 1889 line-height: 1.5rem; 1890 padding: 1rem; 1891 text-decoration: none; 1892 } 1893 1894 #R-searchresults a.autocomplete-suggestion:after { 1895 height: 0; 1896 } 1897 1898 #R-searchresults .autocomplete-suggestion > .breadcrumbs { 1899 font-size: .9rem; 1900 font-weight: 400; 1901 margin-top: .167em; 1902 padding-left: .2em; 1903 padding-right: .2em; 1904 } 1905 1906 #R-searchresults .autocomplete-suggestion > .context { 1907 font-size: 1rem; 1908 font-weight: 300; 1909 margin-top: .66em; 1910 padding-left: .1em; 1911 padding-right: .1em; 1912 } 1913 1914 .badge { 1915 border-radius: 3px; 1916 display: inline-block; 1917 font-size: .8rem; 1918 font-weight: 500; 1919 vertical-align: middle; 1920 } 1921 1922 .badge > * { 1923 border-radius: 3px; 1924 border-style: solid; 1925 border-width: 1px; 1926 display: inline-block; 1927 padding: 0 .25rem 1928 } 1929 1930 .badge > .badge-title { 1931 background-color: rgba( 16, 16, 16, 1 ); 1932 border-inline-end: 0; 1933 border-start-end-radius: 0; 1934 border-end-end-radius: 0; 1935 color: rgba( 240, 240, 240, 1 ); 1936 filter: contrast(2); 1937 opacity: .75; 1938 } 1939 1940 .badge.badge-with-title > .badge-content { 1941 border-start-start-radius: 0; 1942 border-end-start-radius: 0; 1943 } 1944 1945 .badge-content:after { 1946 /* avoid breakage if no content is given */ 1947 content: "\200b"; 1948 } 1949 1950 /* task list and its checkboxes */ 1951 article ul > li:has(> input[type="checkbox"]) { 1952 list-style: none; 1953 margin-inline-start: -1rem; 1954 } 1955 1956 article ul > li:has(> input[type="checkbox"])::before { 1957 content: "\200B"; /* accessibilty for Safari https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */ 1958 } 1959 1960 /* https://moderncss.dev/pure-css-custom-checkbox-style/ */ 1961 article ul > li > input[type="checkbox"] { 1962 -webkit-appearance: none; 1963 appearance: none; 1964 /* For iOS < 15 */ 1965 border: 0.15em solid currentColor; 1966 border-radius: 0.15em; 1967 display: inline-grid; 1968 font: inherit; 1969 height: 1.15em; 1970 margin: 0; 1971 place-content: center; 1972 transform: translateY(-0.075em); 1973 width: 1.15em; 1974 } 1975 1976 article ul > li > input[type="checkbox"]::before { 1977 box-shadow: inset 1em 1em var(--INTERNAL-PRIMARY-color); 1978 clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); 1979 content: ""; 1980 height: 0.65em; 1981 transform: scale(0); 1982 transform-origin: bottom left; 1983 transition: 120ms transform ease-in-out; 1984 width: 0.65em; 1985 /* Windows High Contrast Mode fallback must be last */ 1986 background-color: CanvasText; 1987 } 1988 1989 article ul > li > input[type="checkbox"]:checked::before { 1990 transform: scale(1); 1991 } 1992 1993 /* CSS Lightbox https://codepen.io/gschier/pen/kyRXVx */ 1994 .lightbox-back { 1995 align-items: center; 1996 background: rgba( 0, 0, 0, .8 ); 1997 bottom: 0; 1998 display: none; 1999 justify-content: center; 2000 left: 0; 2001 position: fixed; 2002 right: 0; 2003 text-align: center; 2004 top: 0; 2005 white-space: nowrap; 2006 z-index: 1999; 2007 } 2008 2009 .lightbox-back:target { 2010 display: flex; 2011 } 2012 2013 .lightbox-back img { 2014 max-height: 95%; 2015 max-width: 95%; 2016 overflow: auto; 2017 padding: min(2vh, 2vw); 2018 } 2019 2020 /* basic menu list styles (non-collapsible) */ 2021 2022 #R-sidebar ul > li > :is( a, span ) { 2023 display: block; 2024 position: relative; 2025 } 2026 2027 #R-sidebar ul.space > li > * { 2028 padding-bottom: .125rem; 2029 padding-top: .125rem; 2030 } 2031 #R-sidebar ul.space > li > ul { 2032 padding-bottom: 0; 2033 padding-top: 0; 2034 } 2035 2036 #R-sidebar ul.morespace > li > * { 2037 padding-bottom: .25rem; 2038 padding-top: .25rem; 2039 } 2040 #R-sidebar ul.morespace > li > ul { 2041 padding-bottom: 0; 2042 padding-top: 0; 2043 } 2044 2045 #R-sidebar ul.enlarge > li > :is( a, span ) { 2046 font-size: 1.1rem; 2047 line-height: 2rem; 2048 } 2049 #R-sidebar ul.enlarge > li > a > .read-icon { 2050 margin-top: .5rem; 2051 } 2052 #R-sidebar ul.enlarge > li > ul > li:last-child { 2053 padding-bottom: 1rem; 2054 } 2055 2056 #R-sidebar ul ul { 2057 padding-inline-start: 1rem; 2058 } 2059 2060 /* collapsible menu style overrides */ 2061 2062 #R-sidebar ul.collapsible-menu > li { 2063 position: relative; 2064 } 2065 2066 #R-sidebar ul.collapsible-menu > li > input { 2067 -webkit-appearance: none; 2068 appearance: none; 2069 cursor: pointer; 2070 display: inline-block; 2071 margin-left: 0; 2072 margin-right: 0; 2073 margin-top: .65rem; 2074 position: absolute; 2075 width: 1rem; 2076 z-index: 1; 2077 } 2078 #R-sidebar ul.collapsible-menu.enlarge > li > input { 2079 margin-top: .9rem; 2080 } 2081 2082 #R-sidebar ul.collapsible-menu > li > label { 2083 cursor: pointer; 2084 display: inline-block; 2085 inset-inline-start: 0; 2086 margin-bottom: 0; /* nucleus */ 2087 padding-inline-start: .125rem; 2088 position: absolute; 2089 width: 1rem; 2090 z-index: 2; 2091 } 2092 #R-sidebar ul.collapsible-menu.enlarge > li > label { 2093 font-size: 1.1rem; 2094 line-height: 2rem; 2095 } 2096 2097 #R-sidebar ul.collapsible-menu > li > label:after { 2098 content: ""; 2099 display: block; 2100 height: 1px; 2101 transition: width 0.5s ease; 2102 width: 0%; 2103 } 2104 2105 #R-sidebar ul.collapsible-menu > li > label:hover:after { 2106 width: 100%; 2107 } 2108 2109 #R-sidebar ul.collapsible-menu > li > label > .fas { 2110 font-size: .8rem; 2111 width: .6rem; 2112 } 2113 2114 #R-sidebar ul.collapsible-menu > li > :is( a, span ) { 2115 display: inline-block; 2116 width: 100%; 2117 } 2118 2119 /* menu states for not(.collapsible-menu) */ 2120 2121 #R-sidebar ul ul { 2122 display: none; 2123 } 2124 2125 #R-sidebar ul > li.parent > ul, 2126 #R-sidebar ul > li.active > ul, 2127 #R-sidebar ul > li.alwaysopen > ul { 2128 display: block; 2129 } 2130 2131 /* closed menu */ 2132 2133 #R-sidebar ul.collapsible-menu > li > input + label ~ ul { 2134 display: none; 2135 } 2136 2137 #R-sidebar ul.collapsible-menu > li > input + label > .fa-chevron-down { 2138 display: none; 2139 } 2140 #R-sidebar ul.collapsible-menu > li > input + label > .fa-chevron-right { 2141 display: inline-block; 2142 } 2143 2144 /* open menu */ 2145 2146 #R-sidebar ul.collapsible-menu > li > input:checked + label ~ ul { 2147 display: block; 2148 } 2149 2150 #R-sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-down { 2151 display: inline-block; 2152 } 2153 #R-sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-right { 2154 display: none; 2155 } 2156 2157 /* adjust menu for RTL reading direction */ 2158 2159 html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right { 2160 transform: scaleX(-1); 2161 } 2162 2163 .columnize{ 2164 column-count: 2; 2165 } 2166 @media screen and (min-width: 79.25rem) { 2167 .columnize{ 2168 column-count: 3; 2169 } 2170 } 2171 2172 .columnize > *{ 2173 break-inside: avoid-column; 2174 } 2175 2176 .columnize .breadcrumbs{ 2177 font-size: .859625rem; 2178 } 2179 2180 #R-body .tab-panel{ 2181 margin-bottom: 1.5rem; 2182 margin-top: 1.5rem; 2183 } 2184 2185 #R-body .tab-nav{ 2186 display: flex; 2187 flex-wrap: wrap; 2188 } 2189 2190 #R-body .tab-nav-title{ 2191 font-size: .9rem; 2192 font-weight: 400; 2193 line-height: 1.42857143; 2194 padding: .2rem 0; 2195 margin-inline-start: .6rem; 2196 } 2197 2198 #R-body .tab-nav-button{ 2199 -webkit-appearance: none; 2200 appearance: none; 2201 background-color: transparent; 2202 border: 1px solid transparent; 2203 display: block; 2204 font-size: .9rem; 2205 font-weight: 300; 2206 line-height: 1.42857143; 2207 margin-inline-start: .6rem; 2208 } 2209 2210 #R-body .tab-nav-button.active{ 2211 border-radius: 2px 2px 0 0; 2212 cursor: default; 2213 } 2214 2215 #R-body .tab-nav-button > .tab-nav-text{ 2216 border-bottom-style: solid; 2217 border-bottom-width: .15rem; 2218 display: block; 2219 padding: .2rem .6rem 0 .6rem; 2220 } 2221 /* https://stackoverflow.com/a/46452396 */ 2222 #R-body .tab-nav-button.active > .tab-nav-text{ 2223 border-bottom-color: transparent; 2224 border-radius: 1px 1px 0 0; 2225 text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor; 2226 } 2227 @supports (-webkit-text-stroke-width: 0.04ex){ 2228 #R-body .tab-nav-button.active > .tab-nav-text{ 2229 text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor; 2230 -webkit-text-stroke-width: 0.04ex; 2231 } 2232 } 2233 2234 #R-body .tab-content{ 2235 border-style: solid; 2236 border-width: 1px; 2237 display: none; 2238 /* if setting a border to 1px, a browser instead sets it to 1dppx which is not 2239 usable as a unit yet, so we have to calculate it ourself */ 2240 margin-top: calc( -1px / var(--bpx) ); 2241 z-index: 10; 2242 } 2243 2244 #R-body .tab-content.active{ 2245 display: block; 2246 } 2247 2248 #R-body .tab-content-text{ 2249 padding: 1rem; 2250 } 2251 2252 /* remove margin if only a single code block is contained in the tab (FF without :has using .codify style) */ 2253 #R-body .tab-content.codify > .tab-content-text{ 2254 padding: 0; 2255 } 2256 #R-body .tab-content-text:has(> div.highlight:only-child){ 2257 padding: 0; 2258 } 2259 2260 /* remove border from code block if single in tab */ 2261 #R-body .tab-content-text > div.highlight:only-child > div, 2262 #R-body .tab-content-text > div.highlight:only-child pre:not(.mermaid), 2263 #R-body .tab-content-text > pre:not(.mermaid).pre-code:only-child{ 2264 border-width: 0; 2265 } 2266 2267 /* bordering the menu and topbar */ 2268 2269 #R-topbar { 2270 border-bottom-style: solid; 2271 border-bottom-width: 1px; 2272 } 2273 2274 #R-header-topbar { 2275 border-bottom-color: transparent; 2276 border-bottom-style: solid; 2277 border-bottom-width: 1px; 2278 border-inline-end-style: solid; 2279 border-inline-end-width: 1px; 2280 height: 3rem; 2281 position: absolute; 2282 top: 0; 2283 width: 100%; 2284 z-index: 1; 2285 } 2286 2287 #R-header-wrapper, 2288 #R-homelinks, 2289 #R-content-wrapper > * { 2290 border-inline-end-style: solid; 2291 border-inline-end-width: 1px; 2292 } 2293 2294 #topics > ul { 2295 margin-top: 1rem; 2296 } 2297 2298 #R-sidebar ul.collapsible-menu li.active > a{ 2299 border-style: solid; 2300 border-width: 1px; 2301 padding-bottom: calc( .25rem - var(--bpx1)*1px); 2302 padding-left: calc( 1rem - var(--bpx1)*1px); 2303 padding-right: calc( 1rem - var(--bpx1)*1px); 2304 padding-top: calc( .25rem - var(--bpx1)*1px); 2305 width: calc(100% + var(--bpx1)*1px); 2306 } 2307 2308 #R-menu-footer { 2309 padding-bottom: 1rem; 2310 } 2311 2312 #R-topics { 2313 padding-top: 1rem; 2314 } 2315 2316 .term-list ul, 2317 .term-list li { 2318 list-style: none; 2319 display: inline; 2320 padding: 0; 2321 } 2322 .term-list i ~ ul > li:before{ 2323 content: " " 2324 } 2325 .term-list ul > li ~ li:before { 2326 content: " | " 2327 }