chrome-ae938929.css
1 /* CSS for UI elements (a.k.a. chrome) */ 2 3 html { 4 scrollbar-color: var(--scrollbar) transparent; 5 } 6 #mdbook-searchresults a, 7 .content a:link, 8 a:visited, 9 a > .hljs { 10 color: var(--links); 11 } 12 13 /* 14 mdbook-body-container is necessary because mobile browsers don't seem to like 15 overflow-x on the body tag when there is a <meta name="viewport"> tag. 16 */ 17 #mdbook-body-container { 18 /* 19 This is used when the sidebar pushes the body content off the side of 20 the screen on small screens. Without it, dragging on mobile Safari 21 will want to reposition the viewport in a weird way. 22 */ 23 overflow-x: clip; 24 } 25 26 /* Menu Bar */ 27 28 #mdbook-menu-bar, 29 #mdbook-menu-bar-hover-placeholder { 30 z-index: 101; 31 margin: auto calc(0px - var(--page-padding)); 32 } 33 #mdbook-menu-bar { 34 position: relative; 35 display: flex; 36 flex-wrap: wrap; 37 background-color: var(--bg); 38 border-block-end-color: var(--bg); 39 border-block-end-width: 1px; 40 border-block-end-style: solid; 41 } 42 #mdbook-menu-bar.sticky, 43 #mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar, 44 #mdbook-menu-bar:hover, 45 html.sidebar-visible #mdbook-menu-bar { 46 position: -webkit-sticky; 47 position: sticky; 48 top: 0 !important; 49 } 50 #mdbook-menu-bar-hover-placeholder { 51 position: sticky; 52 position: -webkit-sticky; 53 top: 0; 54 height: var(--menu-bar-height); 55 } 56 #mdbook-menu-bar.bordered { 57 border-block-end-color: var(--table-border-color); 58 } 59 #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button { 60 position: relative; 61 padding: 0 8px; 62 z-index: 10; 63 line-height: var(--menu-bar-height); 64 cursor: pointer; 65 transition: color 0.5s; 66 } 67 @media only screen and (max-width: 420px) { 68 #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button { 69 padding: 0 5px; 70 } 71 } 72 73 .icon-button { 74 border: none; 75 background: none; 76 padding: 0; 77 color: inherit; 78 } 79 .icon-button .fa-svg { 80 margin: 0; 81 } 82 83 .right-buttons { 84 margin: 0 15px; 85 } 86 .right-buttons a { 87 text-decoration: none; 88 } 89 90 .left-buttons { 91 display: flex; 92 margin: 0 5px; 93 } 94 html:not(.js) .left-buttons button { 95 display: none; 96 } 97 98 .menu-title { 99 display: inline-block; 100 font-weight: 200; 101 font-size: 2.4rem; 102 line-height: var(--menu-bar-height); 103 text-align: center; 104 margin: 0; 105 flex: 1; 106 white-space: nowrap; 107 overflow: hidden; 108 text-overflow: ellipsis; 109 } 110 .menu-title { 111 cursor: pointer; 112 } 113 114 .menu-bar, 115 .menu-bar:visited, 116 .nav-chapters, 117 .nav-chapters:visited, 118 .mobile-nav-chapters, 119 .mobile-nav-chapters:visited, 120 .menu-bar .icon-button, 121 .menu-bar a .fa-svg { 122 color: var(--icons); 123 } 124 125 .menu-bar .fa-svg:hover, 126 .menu-bar .icon-button:hover, 127 .nav-chapters:hover, 128 .mobile-nav-chapters .fa-svg:hover { 129 color: var(--icons-hover); 130 } 131 132 /* Nav Icons */ 133 134 .nav-chapters { 135 font-size: 2.5em; 136 text-align: center; 137 text-decoration: none; 138 139 position: fixed; 140 top: 0; 141 bottom: 0; 142 margin: 0; 143 max-width: 150px; 144 min-width: 90px; 145 146 display: flex; 147 justify-content: center; 148 align-content: center; 149 flex-direction: column; 150 151 transition: color 0.5s, background-color 0.5s; 152 } 153 154 .nav-chapters:hover { 155 text-decoration: none; 156 background-color: var(--theme-hover); 157 transition: background-color 0.15s, color 0.15s; 158 } 159 160 .nav-wrapper { 161 margin-block-start: 50px; 162 display: none; 163 } 164 165 .mobile-nav-chapters { 166 font-size: 2.5em; 167 text-align: center; 168 text-decoration: none; 169 width: 90px; 170 border-radius: 5px; 171 background-color: var(--sidebar-bg); 172 } 173 174 /* Only Firefox supports flow-relative values */ 175 .previous { float: left; } 176 [dir=rtl] .previous { float: right; } 177 178 /* Only Firefox supports flow-relative values */ 179 .next { 180 float: right; 181 right: var(--page-padding); 182 } 183 [dir=rtl] .next { 184 float: left; 185 right: unset; 186 left: var(--page-padding); 187 } 188 189 @media only screen and (max-width: 1080px) { 190 .nav-wide-wrapper { display: none; } 191 .nav-wrapper { display: block; } 192 } 193 194 /* sidebar-visible */ 195 @media only screen and (max-width: 1380px) { 196 #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; } 197 #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; } 198 } 199 200 /* Inline code */ 201 202 :not(pre) > .hljs { 203 display: inline; 204 padding: 0.1em 0.3em; 205 border-radius: 3px; 206 } 207 208 :not(pre):not(a) > .hljs { 209 color: var(--inline-code-color); 210 overflow-x: initial; 211 } 212 213 a:hover > .hljs { 214 text-decoration: underline; 215 } 216 217 pre { 218 position: relative; 219 } 220 pre > .buttons { 221 position: absolute; 222 z-index: 100; 223 right: 0px; 224 top: 2px; 225 margin: 0px; 226 padding: 2px 0px; 227 228 color: var(--sidebar-fg); 229 cursor: pointer; 230 visibility: hidden; 231 opacity: 0; 232 transition: visibility 0.1s linear, opacity 0.1s linear; 233 } 234 pre:hover > .buttons { 235 visibility: visible; 236 opacity: 1 237 } 238 pre > .buttons :hover { 239 color: var(--sidebar-active); 240 border-color: var(--icons-hover); 241 background-color: var(--theme-hover); 242 } 243 pre > .buttons button { 244 cursor: inherit; 245 margin: 0px 5px; 246 padding: 2px 3px 0px 4px; 247 font-size: 23px; 248 249 border-style: solid; 250 border-width: 1px; 251 border-radius: 4px; 252 border-color: var(--icons); 253 background-color: var(--theme-popup-bg); 254 transition: 100ms; 255 transition-property: color,border-color,background-color; 256 color: var(--icons); 257 } 258 259 pre > .buttons button.clip-button { 260 padding: 2px 4px 0px 6px; 261 } 262 pre > .buttons button.clip-button::before { 263 /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license 264 */ 265 content: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 24 25" \ 266 xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\ 267 <path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \ 268 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \ 269 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \ 270 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\ 271 <path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\ 272 </svg>'); 273 filter: var(--copy-button-filter); 274 } 275 pre > .buttons button.clip-button:hover::before { 276 filter: var(--copy-button-filter-hover); 277 } 278 279 @media (pointer: coarse) { 280 pre > .buttons button { 281 /* On mobile, make it easier to tap buttons. */ 282 padding: 0.3rem 1rem; 283 } 284 285 .sidebar-resize-indicator { 286 /* Hide resize indicator on devices with limited accuracy */ 287 display: none; 288 } 289 } 290 pre > code { 291 display: block; 292 padding: 1rem; 293 } 294 295 /* FIXME: ACE editors overlap their buttons because ACE does absolute 296 positioning within the code block which breaks padding. The only solution I 297 can think of is to move the padding to the outer pre tag (or insert a div 298 wrapper), but that would require fixing a whole bunch of CSS rules. 299 */ 300 .hljs.ace_editor { 301 padding: 0rem 0rem; 302 } 303 304 pre > .result { 305 margin-block-start: 10px; 306 } 307 308 /* Search */ 309 310 #mdbook-searchresults a { 311 text-decoration: none; 312 } 313 314 mark { 315 border-radius: 2px; 316 padding-block-start: 0; 317 padding-block-end: 1px; 318 padding-inline-start: 3px; 319 padding-inline-end: 3px; 320 margin-block-start: 0; 321 margin-block-end: -1px; 322 margin-inline-start: -3px; 323 margin-inline-end: -3px; 324 background-color: var(--search-mark-bg); 325 transition: background-color 300ms linear; 326 cursor: pointer; 327 } 328 329 mark.fade-out { 330 background-color: rgba(0,0,0,0) !important; 331 cursor: auto; 332 } 333 334 .searchbar-outer { 335 margin-inline-start: auto; 336 margin-inline-end: auto; 337 max-width: var(--content-max-width); 338 } 339 340 #mdbook-searchbar-outer.searching #mdbook-searchbar { 341 padding-right: 30px; 342 } 343 #mdbook-searchbar-outer .spinner-wrapper { 344 display: none; 345 } 346 #mdbook-searchbar-outer.searching .spinner-wrapper { 347 display: block; 348 } 349 350 .search-wrapper { 351 position: relative; 352 } 353 354 .spinner-wrapper { 355 --spinner-margin: 2px; 356 position: absolute; 357 margin-block-start: calc(var(--searchbar-margin-block-start) + var(--spinner-margin)); 358 right: var(--spinner-margin); 359 top: 0; 360 bottom: var(--spinner-margin); 361 padding: 6px; 362 background-color: var(--bg); 363 } 364 365 #fa-spin { 366 animation: rotating 2s linear infinite; 367 display: inline-block; 368 } 369 370 @keyframes rotating { 371 from { 372 transform: rotate(0deg); 373 } 374 to { 375 transform: rotate(360deg); 376 } 377 } 378 379 #mdbook-searchbar { 380 width: 100%; 381 margin-block-start: var(--searchbar-margin-block-start); 382 margin-block-end: 0; 383 margin-inline-start: auto; 384 margin-inline-end: auto; 385 padding: 10px 16px; 386 transition: box-shadow 300ms ease-in-out; 387 border: 1px solid var(--searchbar-border-color); 388 border-radius: 3px; 389 background-color: var(--searchbar-bg); 390 color: var(--searchbar-fg); 391 } 392 #mdbook-searchbar:focus, 393 #mdbook-searchbar.active { 394 box-shadow: 0 0 3px var(--searchbar-shadow-color); 395 } 396 397 .searchresults-header { 398 font-weight: bold; 399 font-size: 1em; 400 padding-block-start: 18px; 401 padding-block-end: 0; 402 padding-inline-start: 5px; 403 padding-inline-end: 0; 404 color: var(--searchresults-header-fg); 405 } 406 407 .searchresults-outer { 408 margin-inline-start: auto; 409 margin-inline-end: auto; 410 max-width: var(--content-max-width); 411 border-block-end: 1px dashed var(--searchresults-border-color); 412 } 413 414 ul#mdbook-searchresults { 415 list-style: none; 416 padding-inline-start: 20px; 417 } 418 ul#mdbook-searchresults li { 419 margin: 10px 0px; 420 padding: 2px; 421 border-radius: 2px; 422 } 423 ul#mdbook-searchresults li.focus { 424 background-color: var(--searchresults-li-bg); 425 } 426 ul#mdbook-searchresults span.teaser { 427 display: block; 428 clear: both; 429 margin-block-start: 5px; 430 margin-block-end: 0; 431 margin-inline-start: 20px; 432 margin-inline-end: 0; 433 font-size: 0.8em; 434 } 435 ul#mdbook-searchresults span.teaser em { 436 font-weight: bold; 437 font-style: normal; 438 } 439 440 /* Sidebar */ 441 442 .sidebar { 443 position: fixed; 444 left: 0; 445 top: 0; 446 bottom: 0; 447 width: var(--sidebar-width); 448 font-size: 0.875em; 449 box-sizing: border-box; 450 -webkit-overflow-scrolling: touch; 451 overscroll-behavior-y: contain; 452 background-color: var(--sidebar-bg); 453 color: var(--sidebar-fg); 454 } 455 .sidebar-iframe-inner { 456 --padding: 10px; 457 458 background-color: var(--sidebar-bg); 459 padding: var(--padding); 460 margin: 0; 461 font-size: 1.4rem; 462 color: var(--sidebar-fg); 463 min-height: calc(100vh - var(--padding) * 2); 464 } 465 .sidebar-iframe-outer { 466 border: none; 467 height: 100%; 468 position: absolute; 469 top: 0; 470 bottom: 0; 471 left: 0; 472 right: 0; 473 } 474 [dir=rtl] .sidebar { left: unset; right: 0; } 475 .sidebar-resizing { 476 -moz-user-select: none; 477 -webkit-user-select: none; 478 -ms-user-select: none; 479 user-select: none; 480 } 481 html:not(.sidebar-resizing) .sidebar { 482 transition: transform 0.3s; /* Animation: slide away */ 483 } 484 .sidebar code { 485 line-height: 2em; 486 } 487 .sidebar .sidebar-scrollbox { 488 overflow-y: auto; 489 position: absolute; 490 top: 0; 491 bottom: 0; 492 left: 0; 493 right: 0; 494 padding: 10px 10px; 495 } 496 .sidebar .sidebar-resize-handle { 497 position: absolute; 498 cursor: col-resize; 499 width: 0; 500 right: calc(var(--sidebar-resize-indicator-width) * -1); 501 top: 0; 502 bottom: 0; 503 display: flex; 504 align-items: center; 505 } 506 507 .sidebar-resize-handle .sidebar-resize-indicator { 508 width: 100%; 509 height: 16px; 510 color: var(--icons); 511 margin-inline-start: var(--sidebar-resize-indicator-space); 512 display: flex; 513 align-items: center; 514 justify-content: flex-start; 515 } 516 .sidebar-resize-handle .sidebar-resize-indicator::before { 517 content: ""; 518 width: 2px; 519 height: 12px; 520 border-left: dotted 2px currentColor; 521 } 522 .sidebar-resize-handle .sidebar-resize-indicator::after { 523 content: ""; 524 width: 2px; 525 height: 16px; 526 border-left: dotted 2px currentColor; 527 } 528 529 [dir=rtl] .sidebar .sidebar-resize-handle { 530 left: calc(var(--sidebar-resize-indicator-width) * -1); 531 right: unset; 532 } 533 .js .sidebar .sidebar-resize-handle { 534 cursor: col-resize; 535 width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space)); 536 } 537 538 html:not(.js) .sidebar-resize-handle { 539 display: none; 540 } 541 542 /* sidebar-hidden */ 543 #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar { 544 transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); 545 } 546 [dir=rtl] #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar { 547 transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); 548 } 549 .sidebar::-webkit-scrollbar { 550 background: var(--sidebar-bg); 551 } 552 .sidebar::-webkit-scrollbar-thumb { 553 background: var(--scrollbar); 554 } 555 556 /* sidebar-visible */ 557 #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { 558 transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); 559 } 560 [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { 561 transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); 562 } 563 @media only screen and (min-width: 620px) { 564 #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { 565 transform: none; 566 margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)); 567 } 568 [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { 569 transform: none; 570 } 571 } 572 573 .chapter { 574 list-style: none outside none; 575 padding-inline-start: 0; 576 line-height: 2.2em; 577 } 578 579 .chapter li { 580 color: var(--sidebar-non-existant); 581 } 582 583 /* This is a span wrapping the chapter link and the fold chevron. */ 584 .chapter-link-wrapper { 585 /* Used to position the chevron to the right, allowing the text to wrap before it. */ 586 display: flex; 587 } 588 589 .chapter li a { 590 /* Remove underlines. */ 591 text-decoration: none; 592 color: var(--sidebar-fg); 593 } 594 595 .chapter li a:hover { 596 color: var(--sidebar-active); 597 } 598 599 .chapter li a.active { 600 color: var(--sidebar-active); 601 } 602 603 /* This is the toggle chevron. */ 604 .chapter-fold-toggle { 605 cursor: pointer; 606 /* Positions the chevron to the side. */ 607 margin-inline-start: auto; 608 padding: 0 10px; 609 user-select: none; 610 opacity: 0.68; 611 } 612 613 .chapter-fold-toggle div { 614 transition: transform 0.5s; 615 } 616 617 /* collapse the section */ 618 .chapter li:not(.expanded) > ol { 619 display: none; 620 } 621 622 .chapter li.chapter-item { 623 line-height: 1.5em; 624 margin-block-start: 0.6em; 625 } 626 627 /* When expanded, rotate the chevron to point down. */ 628 .chapter li.expanded > span > .chapter-fold-toggle div { 629 transform: rotate(90deg); 630 } 631 632 .chapter a.current-header { 633 color: var(--sidebar-active); 634 } 635 636 .on-this-page { 637 margin-left: 22px; 638 border-inline-start: 4px solid var(--sidebar-header-border-color); 639 padding-left: 8px; 640 } 641 642 .on-this-page > ol { 643 padding-left: 0; 644 } 645 646 /* Horizontal line in chapter list. */ 647 .spacer { 648 width: 100%; 649 height: 3px; 650 margin: 5px 0px; 651 } 652 .chapter .spacer { 653 background-color: var(--sidebar-spacer); 654 } 655 656 /* On touch devices, add more vertical spacing to make it easier to tap links. */ 657 @media (-moz-touch-enabled: 1), (pointer: coarse) { 658 .chapter li a { padding: 5px 0; } 659 .spacer { margin: 10px 0; } 660 } 661 662 .section { 663 list-style: none outside none; 664 padding-inline-start: 20px; 665 line-height: 1.9em; 666 } 667 668 /* Theme Menu Popup */ 669 670 .theme-popup { 671 position: absolute; 672 left: 10px; 673 top: var(--menu-bar-height); 674 z-index: 1000; 675 border-radius: 4px; 676 font-size: 0.7em; 677 color: var(--fg); 678 background: var(--theme-popup-bg); 679 border: 1px solid var(--theme-popup-border); 680 margin: 0; 681 padding: 0; 682 list-style: none; 683 display: none; 684 /* Don't let the children's background extend past the rounded corners. */ 685 overflow: hidden; 686 } 687 [dir=rtl] .theme-popup { left: unset; right: 10px; } 688 .theme-popup .default { 689 color: var(--icons); 690 } 691 .theme-popup .theme { 692 width: 100%; 693 border: 0; 694 margin: 0; 695 padding: 2px 20px; 696 line-height: 25px; 697 white-space: nowrap; 698 text-align: start; 699 cursor: pointer; 700 color: inherit; 701 background: inherit; 702 font-size: inherit; 703 } 704 .theme-popup .theme:hover { 705 background-color: var(--theme-hover); 706 } 707 708 .theme-selected::before { 709 display: inline-block; 710 content: "✓"; 711 margin-inline-start: -14px; 712 width: 14px; 713 } 714 715 /* The container for the help popup that covers the whole window. */ 716 #mdbook-help-container { 717 /* Position and size for the whole window. */ 718 position: fixed; 719 top: 0; 720 left: 0; 721 right: 0; 722 bottom: 0; 723 /* This uses flex layout (which is set in book.js), and centers the popup 724 in the window.*/ 725 display: none; 726 align-items: center; 727 justify-content: center; 728 z-index: 1000; 729 /* Dim out the book while the popup is visible. */ 730 background: var(--overlay-bg); 731 } 732 733 /* The popup help box. */ 734 #mdbook-help-popup { 735 box-shadow: 0 4px 24px rgba(0,0,0,0.15); 736 min-width: 300px; 737 max-width: 500px; 738 width: 100%; 739 box-sizing: border-box; 740 display: flex; 741 flex-direction: column; 742 align-items: center; 743 background-color: var(--bg); 744 color: var(--fg); 745 border-width: 1px; 746 border-color: var(--theme-popup-border); 747 border-style: solid; 748 border-radius: 8px; 749 padding: 10px; 750 } 751 752 .mdbook-help-title { 753 text-align: center; 754 /* mdbook's margin for h2 is way too large. */ 755 margin: 10px; 756 }