1/* When static files are updated, their suffixes need to be updated. 2 1. In the top directory run: 3 ./x.py doc --stage 1 library/core 4 2. Find the directory containing files named with updated suffixes: 5 find build -path '*'/stage1-std/'*'/static.files 6 3. Copy the filenames with updated suffixes from the directory. 7*/ 8 9:root { 10 --nav-sub-mobile-padding: 8px; 11 --search-typename-width: 6.75rem; 12} 13 14/* See FiraSans-LICENSE.txt for the Fira Sans license. */ 15@font-face { 16 font-family: 'Fira Sans'; 17 font-style: normal; 18 font-weight: 400; 19 src: local('Fira Sans'), 20 url("FiraSans-Regular-018c141bf0843ffd.woff2") format("woff2"); 21 font-display: swap; 22} 23@font-face { 24 font-family: 'Fira Sans'; 25 font-style: normal; 26 font-weight: 500; 27 src: local('Fira Sans Medium'), 28 url("FiraSans-Medium-8f9a781e4970d388.woff2") format("woff2"); 29 font-display: swap; 30} 31 32/* See SourceSerif4-LICENSE.md for the Source Serif 4 license. */ 33@font-face { 34 font-family: 'Source Serif 4'; 35 font-style: normal; 36 font-weight: 400; 37 src: local('Source Serif 4'), 38 url("SourceSerif4-Regular-46f98efaafac5295.ttf.woff2") format("woff2"); 39 font-display: swap; 40} 41@font-face { 42 font-family: 'Source Serif 4'; 43 font-style: italic; 44 font-weight: 400; 45 src: local('Source Serif 4 Italic'), 46 url("SourceSerif4-It-acdfaf1a8af734b1.ttf.woff2") format("woff2"); 47 font-display: swap; 48} 49@font-face { 50 font-family: 'Source Serif 4'; 51 font-style: normal; 52 font-weight: 700; 53 src: local('Source Serif 4 Bold'), 54 url("SourceSerif4-Bold-a2c9cd1067f8b328.ttf.woff2") format("woff2"); 55 font-display: swap; 56} 57 58/* See SourceCodePro-LICENSE.txt for the Source Code Pro license. */ 59@font-face { 60 font-family: 'Source Code Pro'; 61 font-style: normal; 62 font-weight: 400; 63 /* Avoid using locally installed font because bad versions are in circulation: 64 * see https://github.com/rust-lang/rust/issues/24355 */ 65 src: url("SourceCodePro-Regular-562dcc5011b6de7d.ttf.woff2") format("woff2"); 66 font-display: swap; 67} 68@font-face { 69 font-family: 'Source Code Pro'; 70 font-style: italic; 71 font-weight: 400; 72 src: url("SourceCodePro-It-1cc31594bf4f1f79.ttf.woff2") format("woff2"); 73 font-display: swap; 74} 75@font-face { 76 font-family: 'Source Code Pro'; 77 font-style: normal; 78 font-weight: 600; 79 src: url("SourceCodePro-Semibold-d899c5a5c4aeb14a.ttf.woff2") format("woff2"); 80 font-display: swap; 81} 82 83/* Avoid using legacy CJK serif fonts in Windows like Batang. */ 84@font-face { 85 font-family: 'NanumBarunGothic'; 86 src: url("NanumBarunGothic-0f09457c7a19b7c6.ttf.woff2") format("woff2"); 87 font-display: swap; 88 unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF; 89} 90 91* { 92 box-sizing: border-box; 93} 94 95/* General structure and fonts */ 96 97body { 98 /* Line spacing at least 1.5 per Web Content Accessibility Guidelines 99 https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */ 100 font: 1rem/1.5 "Source Serif 4", NanumBarunGothic, serif; 101 margin: 0; 102 position: relative; 103 /* We use overflow-wrap: break-word for Safari, which doesn't recognize 104 `anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */ 105 overflow-wrap: break-word; 106 /* Then override it with `anywhere`, which is required to make non-Safari browsers break 107 more aggressively when we want them to. */ 108 overflow-wrap: anywhere; 109 font-feature-settings: "kern", "liga"; 110 background-color: var(--main-background-color); 111 color: var(--main-color); 112} 113 114h1 { 115 font-size: 1.5rem; /* 24px */ 116} 117h2 { 118 font-size: 1.375rem; /* 22px */ 119} 120h3 { 121 font-size: 1.25rem; /* 20px */ 122} 123h1, h2, h3, h4, h5, h6 { 124 font-weight: 500; 125} 126h1, h2, h3, h4 { 127 margin: 25px 0 15px 0; 128 padding-bottom: 6px; 129} 130.docblock h3, .docblock h4, h5, h6 { 131 margin: 15px 0 5px 0; 132} 133.docblock > h2:first-child, 134.docblock > h3:first-child, 135.docblock > h4:first-child, 136.docblock > h5:first-child, 137.docblock > h6:first-child { 138 margin-top: 0; 139} 140.main-heading h1 { 141 margin: 0; 142 padding: 0; 143 flex-grow: 1; 144 /* We use overflow-wrap: break-word for Safari, which doesn't recognize 145 `anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */ 146 overflow-wrap: break-word; 147 /* Then override it with `anywhere`, which is required to make non-Safari browsers break 148 more aggressively when we want them to. */ 149 overflow-wrap: anywhere; 150} 151.main-heading { 152 display: flex; 153 flex-wrap: wrap; 154 padding-bottom: 6px; 155 margin-bottom: 15px; 156} 157/* The only headings that get underlines are: 158 Markdown-generated headings within the top-doc 159 Rustdoc-generated h2 section headings (e.g. "Implementations", "Required Methods", etc) 160 Underlines elsewhere in the documentation break up visual flow and tend to invert 161 section hierarchies. */ 162.content h2, 163.top-doc .docblock > h3, 164.top-doc .docblock > h4 { 165 border-bottom: 1px solid var(--headings-border-bottom-color); 166} 167/* while line-height 1.5 is required for any "block of text", 168 which WCAG defines as more than one sentence, it looks weird for 169 very large main headers */ 170h1, h2 { 171 line-height: 1.25; 172 padding-top: 3px; 173 padding-bottom: 9px; 174} 175h3.code-header { 176 font-size: 1.125rem; /* 18px */ 177} 178h4.code-header { 179 font-size: 1rem; 180} 181.code-header { 182 font-weight: 600; 183 margin: 0; 184 padding: 0; 185 white-space: pre-wrap; 186} 187 188#crate-search, 189h1, h2, h3, h4, h5, h6, 190.sidebar, 191.mobile-topbar, 192.search-input, 193.search-results .result-name, 194.item-name > a, 195.out-of-band, 196span.since, 197a.srclink, 198#help-button > a, 199summary.hideme, 200.scraped-example-list, 201/* This selector is for the items listed in the "all items" page. */ 202ul.all-items { 203 font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif; 204} 205 206#toggle-all-docs, 207a.anchor, 208.small-section-header a, 209#source-sidebar a, 210.rust a, 211.sidebar h2 a, 212.sidebar h3 a, 213.mobile-topbar h2 a, 214h1 a, 215.search-results a, 216.stab, 217.result-name i { 218 color: var(--main-color); 219} 220 221span.enum, a.enum, 222span.struct, a.struct, 223span.union, a.union, 224span.primitive, a.primitive, 225span.type, a.type, 226span.foreigntype, a.foreigntype { 227 color: var(--type-link-color); 228} 229 230span.trait, a.trait, 231span.traitalias, a.traitalias { 232 color: var(--trait-link-color); 233} 234 235span.associatedtype, a.associatedtype, 236span.constant, a.constant, 237span.static, a.static { 238 color: var(--assoc-item-link-color); 239} 240 241span.fn, a.fn, 242span.method, a.method, 243span.tymethod, a.tymethod { 244 color: var(--function-link-color); 245} 246 247span.attr, a.attr, 248span.derive, a.derive, 249span.macro, a.macro { 250 color: var(--macro-link-color); 251} 252 253span.mod, a.mod { 254 color: var(--mod-link-color); 255} 256 257span.keyword, a.keyword { 258 color: var(--keyword-link-color); 259} 260 261a { 262 color: var(--link-color); 263 text-decoration: none; 264} 265 266ol, ul { 267 padding-left: 24px; 268} 269ul ul, ol ul, ul ol, ol ol { 270 margin-bottom: .625em; 271} 272 273p { 274 /* Paragraph spacing at least 1.5 times line spacing per Web Content Accessibility Guidelines. 275 Line-height is 1.5rem, so line spacing is .5rem; .75em is 1.5 times that. 276 https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */ 277 margin: 0 0 .75em 0; 278} 279/* For the last child of a div, the margin will be taken care of 280 by the margin-top of the next item. */ 281p:last-child { 282 margin: 0; 283} 284 285/* Fix some style changes due to normalize.css 8 */ 286 287button { 288 /* Buttons on Safari have different default padding than other platforms. Make them the same. */ 289 padding: 1px 6px; 290 /* Opinionated tweak: use pointer cursor as clickability signifier. */ 291 cursor: pointer; 292} 293 294/* end tweaks for normalize.css 8 */ 295 296button#toggle-all-docs { 297 padding: 0; 298 background: none; 299 border: none; 300 /* iOS button gradient: https://stackoverflow.com/q/5438567 */ 301 -webkit-appearance: none; 302 opacity: 1; 303} 304 305.rustdoc { 306 display: flex; 307 flex-direction: row; 308 flex-wrap: nowrap; 309} 310 311main { 312 position: relative; 313 flex-grow: 1; 314 padding: 10px 15px 40px 45px; 315 min-width: 0; /* avoid growing beyond the size limit */ 316} 317 318.source main { 319 padding: 15px; 320} 321 322.width-limiter { 323 max-width: 960px; 324 margin-right: auto; 325} 326 327details:not(.toggle) summary { 328 margin-bottom: .6em; 329} 330 331code, pre, a.test-arrow, .code-header { 332 font-family: "Source Code Pro", monospace; 333} 334.docblock code, .docblock-short code { 335 border-radius: 3px; 336 padding: 0 0.125em; 337} 338.docblock pre code, .docblock-short pre code { 339 padding: 0; 340} 341pre { 342 padding: 14px; 343 line-height: 1.5; /* https://github.com/rust-lang/rust/issues/105906 */ 344} 345pre.item-decl { 346 overflow-x: auto; 347} 348/* This rule allows to have scrolling on the X axis. */ 349.item-decl .type-contents-toggle { 350 contain: initial; 351} 352 353.source .content pre { 354 padding: 20px; 355} 356.rustdoc.source .example-wrap pre.src-line-numbers { 357 padding: 20px 0 20px 4px; 358} 359 360img { 361 max-width: 100%; 362} 363 364.sub-logo-container, .logo-container { 365 /* zero text boxes so that computed line height = image height exactly */ 366 line-height: 0; 367 display: block; 368} 369 370.sub-logo-container { 371 margin-right: 32px; 372} 373 374.sub-logo-container > img { 375 height: 60px; 376 width: 60px; 377 object-fit: contain; 378} 379 380.rust-logo { 381 filter: var(--rust-logo-filter); 382} 383 384.sidebar { 385 font-size: 0.875rem; 386 flex: 0 0 200px; 387 overflow-y: scroll; 388 overscroll-behavior: contain; 389 position: sticky; 390 height: 100vh; 391 top: 0; 392 left: 0; 393} 394 395.rustdoc.source .sidebar { 396 flex-basis: 50px; 397 border-right: 1px solid; 398 overflow-x: hidden; 399 /* The sidebar is by default hidden */ 400 overflow-y: hidden; 401 z-index: 1; 402} 403 404.sidebar, .mobile-topbar, .sidebar-menu-toggle, 405#src-sidebar-toggle, #source-sidebar { 406 background-color: var(--sidebar-background-color); 407} 408 409#src-sidebar-toggle > button:hover, #src-sidebar-toggle > button:focus { 410 background-color: var(--sidebar-background-color-hover); 411} 412 413.source .sidebar > *:not(#src-sidebar-toggle) { 414 visibility: hidden; 415} 416 417.source-sidebar-expanded .source .sidebar { 418 overflow-y: auto; 419 flex-basis: 300px; 420} 421 422.source-sidebar-expanded .source .sidebar > *:not(#src-sidebar-toggle) { 423 visibility: visible; 424} 425 426#all-types { 427 margin-top: 1em; 428} 429 430/* Improve the scrollbar display on firefox */ 431* { 432 scrollbar-width: initial; 433 scrollbar-color: var(--scrollbar-color); 434} 435.sidebar { 436 scrollbar-width: thin; 437 scrollbar-color: var(--scrollbar-color); 438} 439 440/* Improve the scrollbar display on webkit-based browsers */ 441::-webkit-scrollbar { 442 width: 12px; 443} 444.sidebar::-webkit-scrollbar { 445 width: 8px; 446} 447::-webkit-scrollbar-track { 448 -webkit-box-shadow: inset 0; 449 background-color: var(--scrollbar-track-background-color); 450} 451.sidebar::-webkit-scrollbar-track { 452 background-color: var(--scrollbar-track-background-color); 453} 454::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { 455 background-color: var(--scrollbar-thumb-background-color); 456} 457 458/* Everything else */ 459 460.hidden { 461 display: none !important; 462} 463 464.sidebar .logo-container { 465 margin-top: 10px; 466 margin-bottom: 10px; 467 text-align: center; 468} 469 470.version { 471 overflow-wrap: break-word; 472} 473 474.logo-container > img { 475 height: 100px; 476 width: 100px; 477} 478 479ul.block, .block li { 480 padding: 0; 481 margin: 0; 482 list-style: none; 483} 484 485.sidebar-elems a, 486.sidebar > h2 a { 487 display: block; 488 padding: 0.25rem; /* 4px */ 489 margin-left: -0.25rem; 490} 491 492.sidebar h2 { 493 overflow-wrap: anywhere; 494 padding: 0; 495 margin: 0.7rem 0; 496} 497 498.sidebar h3 { 499 font-size: 1.125rem; /* 18px */ 500 padding: 0; 501 margin: 0; 502} 503 504.sidebar-elems, 505.sidebar > h2 { 506 padding-left: 24px; 507} 508 509.sidebar a { 510 color: var(--sidebar-link-color); 511} 512.sidebar .current, 513.sidebar a:hover:not(.logo-container) { 514 background-color: var(--sidebar-current-link-background-color); 515} 516 517.sidebar-elems .block { 518 margin-bottom: 2em; 519} 520 521.sidebar-elems .block li a { 522 white-space: nowrap; 523 text-overflow: ellipsis; 524 overflow: hidden; 525} 526 527.mobile-topbar { 528 display: none; 529} 530 531.rustdoc .example-wrap { 532 display: flex; 533 position: relative; 534 margin-bottom: 10px; 535} 536/* For the last child of a div, the margin will be taken care of 537 by the margin-top of the next item. */ 538.rustdoc .example-wrap:last-child { 539 margin-bottom: 0px; 540} 541 542.rustdoc .example-wrap pre { 543 margin: 0; 544 flex-grow: 1; 545} 546 547.rustdoc:not(.source) .example-wrap pre { 548 overflow: auto hidden; 549} 550 551.rustdoc .example-wrap pre.example-line-numbers, 552.rustdoc .example-wrap pre.src-line-numbers { 553 flex-grow: 0; 554 min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */ 555 overflow: initial; 556 text-align: right; 557 -webkit-user-select: none; 558 user-select: none; 559 padding: 14px 8px; 560 color: var(--src-line-numbers-span-color); 561} 562 563.rustdoc .example-wrap pre.src-line-numbers { 564 padding: 14px 0; 565} 566.src-line-numbers a, .src-line-numbers span { 567 color: var(--src-line-numbers-span-color); 568 padding: 0 8px; 569} 570.src-line-numbers :target { 571 background-color: transparent; 572 border-right: none; 573 padding: 0 8px; 574} 575.src-line-numbers .line-highlighted { 576 background-color: var(--src-line-number-highlighted-background-color); 577} 578 579.search-loading { 580 text-align: center; 581} 582 583.docblock-short { 584 overflow-wrap: break-word; 585 overflow-wrap: anywhere; 586} 587/* Wrap non-pre code blocks (`text`) but not (```text```). */ 588.docblock :not(pre) > code, 589.docblock-short code { 590 white-space: pre-wrap; 591} 592 593.top-doc .docblock h2 { font-size: 1.375rem; } 594.top-doc .docblock h3 { font-size: 1.25rem; } 595.top-doc .docblock h4, 596.top-doc .docblock h5 { 597 font-size: 1.125rem; 598} 599.top-doc .docblock h6 { 600 font-size: 1rem; 601} 602 603.docblock h5 { font-size: 1rem; } 604.docblock h6 { font-size: 0.875rem; } 605 606.docblock { 607 margin-left: 24px; 608 position: relative; 609} 610 611.docblock > :not(.more-examples-toggle):not(.example-wrap) { 612 max-width: 100%; 613 overflow-x: auto; 614} 615 616.out-of-band { 617 flex-grow: 0; 618 font-size: 1.125rem; 619} 620 621.docblock code, .docblock-short code, 622pre, .rustdoc.source .example-wrap { 623 background-color: var(--code-block-background-color); 624} 625 626#main-content { 627 position: relative; 628} 629 630.docblock table { 631 margin: .5em 0; 632 border-collapse: collapse; 633} 634 635.docblock table td, .docblock table th { 636 padding: .5em; 637 border: 1px solid var(--border-color); 638} 639 640.docblock table tbody tr:nth-child(2n) { 641 background: var(--table-alt-row-background-color); 642} 643 644/* Shift "where ..." part of method or fn definition down a line */ 645.method .where, 646.fn .where, 647.where.fmt-newline { 648 display: block; 649 white-space: pre-wrap; 650 font-size: 0.875rem; 651} 652 653.item-info { 654 display: block; 655 margin-left: 24px; 656} 657 658.item-info code { 659 font-size: 0.875rem; 660} 661 662#main-content > .item-info { 663 margin-left: 0; 664} 665 666nav.sub { 667 flex-grow: 1; 668 flex-flow: row nowrap; 669 margin: 4px 0 25px 0; 670 display: flex; 671 align-items: center; 672} 673.search-form { 674 position: relative; 675 display: flex; 676 height: 34px; 677 flex-grow: 1; 678} 679.source nav.sub { 680 margin: 0 0 15px 0; 681} 682 683.small-section-header { 684 /* fields use <span> tags, but should get their own lines */ 685 display: block; 686 position: relative; 687} 688 689.small-section-header:hover > .anchor, .impl:hover > .anchor, 690.trait-impl:hover > .anchor, .variant:hover > .anchor { 691 display: initial; 692} 693.anchor { 694 display: none; 695 position: absolute; 696 left: -0.5em; 697 background: none !important; 698} 699.anchor.field { 700 left: -5px; 701} 702.small-section-header > .anchor { 703 left: -15px; 704 padding-right: 8px; 705} 706h2.small-section-header > .anchor { 707 padding-right: 6px; 708} 709 710.main-heading a:hover, 711.example-wrap .rust a:hover, 712.all-items a:hover, 713.docblock a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover, 714.docblock-short a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover, 715.item-info a { 716 text-decoration: underline; 717} 718 719.crate.block a.current { font-weight: 500; } 720 721/* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap 722 as much as needed on mobile (see 723 tests/rustdoc-gui/type-declaration-overflow.goml for an example of why 724 this matters). The `anywhere` value means: 725 726 "Soft wrap opportunities introduced by the word break are considered when 727 calculating min-content intrinsic sizes." 728 729 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#values 730 731 For table layouts, that becomes a problem: the browser tries to make each 732 column as narrow as possible, and `overflow-wrap: anywhere` means it can do 733 so by breaking words - even if some other column could be shrunk without 734 breaking words! This shows up, for instance, in the `Structs` / `Modules` / 735 `Functions` (etcetera) sections of a module page, and when a docblock 736 contains a table. 737 738 So, for table layouts, override the default with break-word, which does 739 _not_ affect min-content intrinsic sizes. 740*/ 741table, 742.item-table { 743 overflow-wrap: break-word; 744} 745 746.item-table { 747 display: table; 748 padding: 0; 749 margin: 0; 750} 751.item-table > li { 752 display: table-row; 753} 754.item-table > li > div { 755 display: table-cell; 756} 757.item-table > li > .item-name { 758 padding-right: 1.25rem; 759} 760 761.search-results-title { 762 margin-top: 0; 763 white-space: nowrap; 764 /* flex layout allows shrinking the <select> appropriately if it becomes too large */ 765 display: flex; 766 /* make things look like in a line, despite the fact that we're using a layout 767 with boxes (i.e. from the flex layout) */ 768 align-items: baseline; 769} 770#crate-search-div { 771 /* ensures that 100% in properties of #crate-search-div:after 772 are relative to the size of this div */ 773 position: relative; 774 /* allows this div (and with it the <select>-element "#crate-search") to be shrunk */ 775 min-width: 5em; 776} 777#crate-search { 778 min-width: 115px; 779 /* keep these two in sync with "@-moz-document url-prefix()" below */ 780 padding: 0 23px 0 4px; 781 /* prevents the <select> from overflowing the containing div in case it's shrunk */ 782 max-width: 100%; 783 /* contents can overflow because of max-width limit, then show ellipsis */ 784 text-overflow: ellipsis; 785 border: 1px solid var(--border-color); 786 border-radius: 4px; 787 outline: none; 788 cursor: pointer; 789 -moz-appearance: none; 790 -webkit-appearance: none; 791 /* Removes default arrow from firefox */ 792 text-indent: 0.01px; 793 background-color: var(--main-background-color); 794 color: inherit; 795 line-height: 1.5; 796 font-weight: 500; 797} 798#crate-search:hover, #crate-search:focus { 799 border-color: var(--crate-search-hover-border); 800} 801/* cancel stylistic differences in padding in firefox 802for "appearance: none"-style (or equivalent) <select>s */ 803@-moz-document url-prefix() { 804 #crate-search { 805 padding-left: 0px; /* == 4px - 4px */ 806 padding-right: 19px; /* == 23px - 4px */ 807 } 808} 809/* pseudo-element for holding the dropdown-arrow image; needs to be a separate thing 810so that we can apply CSS-filters to change the arrow color in themes */ 811#crate-search-div::after { 812 /* lets clicks through! */ 813 pointer-events: none; 814 /* completely covers the underlying div */ 815 width: 100%; 816 height: 100%; 817 position: absolute; 818 top: 0; 819 left: 0; 820 content: ""; 821 background-repeat: no-repeat; 822 background-size: 20px; 823 background-position: calc(100% - 2px) 56%; 824 /* down arrow (image is black color) */ 825 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \ 826 width="128" height="128" viewBox="-30 -20 176 176"><path d="M111,40.5L64,87.499L17,40.5" \ 827 fill="none" stroke="black" strike-linecap="square" stroke-miterlimit="10" stroke-width="12"/> \ 828 </svg>'); 829 /* changes the arrow image color */ 830 filter: var(--crate-search-div-filter); 831} 832#crate-search-div:hover::after, #crate-search-div:focus-within::after { 833 filter: var(--crate-search-div-hover-filter); 834} 835#crate-search > option { 836 font-size: 1rem; 837} 838.search-input { 839 /* Override Normalize.css: it has a rule that sets 840 -webkit-appearance: textfield for search inputs. That 841 causes rounded corners and no border on iOS Safari. */ 842 -webkit-appearance: none; 843 outline: none; 844 border: 1px solid var(--border-color); 845 border-radius: 2px; 846 padding: 8px; 847 font-size: 1rem; 848 flex-grow: 1; 849 background-color: var(--button-background-color); 850 color: var(--search-color); 851} 852.search-input:focus { 853 border-color: var(--search-input-focused-border-color); 854} 855 856.search-results { 857 display: none; 858} 859 860.search-results.active { 861 display: block; 862} 863 864.search-results > a { 865 display: flex; 866 /* A little margin ensures the browser's outlining of focused links has room to display. */ 867 margin-left: 2px; 868 margin-right: 2px; 869 border-bottom: 1px solid var(--search-result-border-color); 870 gap: 1em; 871} 872 873.search-results > a > div.desc { 874 white-space: nowrap; 875 text-overflow: ellipsis; 876 overflow: hidden; 877 flex: 2; 878} 879 880.search-results a:hover, 881.search-results a:focus { 882 background-color: var(--search-result-link-focus-background-color); 883} 884 885.search-results .result-name { 886 display: flex; 887 align-items: center; 888 justify-content: start; 889 flex: 3; 890} 891.search-results .result-name span.alias { 892 color: var(--search-results-alias-color); 893} 894.search-results .result-name .grey { 895 color: var(--search-results-grey-color); 896} 897.search-results .result-name .typename { 898 color: var(--search-results-grey-color); 899 font-size: 0.875rem; 900 width: var(--search-typename-width); 901} 902.search-results .result-name .path { 903 word-break: break-all; 904 max-width: calc(100% - var(--search-typename-width)); 905 display: inline-block; 906} 907 908.popover { 909 position: absolute; 910 top: 100%; 911 right: 0; 912 z-index: 2; 913 margin-top: 7px; 914 border-radius: 3px; 915 border: 1px solid var(--border-color); 916 background-color: var(--main-background-color); 917 color: var(--main-color); 918 --popover-arrow-offset: 11px; 919} 920 921/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */ 922.popover::before { 923 content: ''; 924 position: absolute; 925 right: var(--popover-arrow-offset); 926 border: solid var(--border-color); 927 border-width: 1px 1px 0 0; 928 background-color: var(--main-background-color); 929 padding: 4px; 930 transform: rotate(-45deg); 931 top: -5px; 932} 933 934/* use larger max-width for help popover, but not for help.html */ 935#help.popover { 936 max-width: 600px; 937 --popover-arrow-offset: 48px; 938} 939 940#help dt { 941 float: left; 942 clear: left; 943 margin-right: 0.5rem; 944} 945#help span.top, #help span.bottom { 946 text-align: center; 947 display: block; 948 font-size: 1.125rem; 949} 950#help span.top { 951 margin: 10px 0; 952 border-bottom: 1px solid var(--border-color); 953 padding-bottom: 4px; 954 margin-bottom: 6px; 955} 956#help span.bottom { 957 clear: both; 958 border-top: 1px solid var(--border-color); 959} 960.side-by-side > div { 961 width: 50%; 962 float: left; 963 padding: 0 20px 20px 17px; 964} 965 966.item-info .stab { 967 /* This min-height is needed to unify the height of the stab elements because some of them 968 have emojis. 969 */ 970 min-height: 36px; 971 display: flex; 972 padding: 3px; 973 margin-bottom: 5px; 974 align-items: center; 975 vertical-align: text-bottom; 976} 977.item-name .stab { 978 margin-left: 0.3125em; 979} 980.stab { 981 padding: 0 2px; 982 font-size: 0.875rem; 983 font-weight: normal; 984 color: var(--main-color); 985 background-color: var(--stab-background-color); 986 width: fit-content; 987 white-space: pre-wrap; 988 border-radius: 3px; 989 display: inline; 990} 991 992.stab.portability > code { 993 background: none; 994 color: var(--stab-code-color); 995} 996 997.stab .emoji { 998 font-size: 1.25rem; 999 margin-right: 0.3rem; 1000} 1001 1002/* Black one-pixel outline around emoji shapes */ 1003.emoji { 1004 text-shadow: 1005 1px 0 0 black, 1006 -1px 0 0 black, 1007 0 1px 0 black, 1008 0 -1px 0 black; 1009} 1010 1011.since { 1012 font-weight: normal; 1013 font-size: initial; 1014} 1015 1016.rightside { 1017 padding-left: 12px; 1018 float: right; 1019} 1020 1021.rightside:not(a), 1022.out-of-band { 1023 color: var(--right-side-color); 1024} 1025 1026pre.rust { 1027 tab-size: 4; 1028 -moz-tab-size: 4; 1029} 1030 1031/* Code highlighting */ 1032pre.rust .kw { 1033 color: var(--code-highlight-kw-color); 1034} 1035pre.rust .kw-2 { 1036 color: var(--code-highlight-kw-2-color); 1037} 1038pre.rust .lifetime { 1039 color: var(--code-highlight-lifetime-color); 1040} 1041pre.rust .prelude-ty { 1042 color: var(--code-highlight-prelude-color); 1043} 1044pre.rust .prelude-val { 1045 color: var(--code-highlight-prelude-val-color); 1046} 1047pre.rust .string { 1048 color: var(--code-highlight-string-color); 1049} 1050pre.rust .number { 1051 color: var(--code-highlight-number-color); 1052} 1053pre.rust .bool-val { 1054 color: var(--code-highlight-literal-color); 1055} 1056pre.rust .self { 1057 color: var(--code-highlight-self-color); 1058} 1059pre.rust .attr { 1060 color: var(--code-highlight-attribute-color); 1061} 1062pre.rust .macro, 1063pre.rust .macro-nonterminal { 1064 color: var(--code-highlight-macro-color); 1065} 1066pre.rust .question-mark { 1067 font-weight: bold; 1068 color: var(--code-highlight-question-mark-color); 1069} 1070pre.rust .comment { 1071 color: var(--code-highlight-comment-color); 1072} 1073pre.rust .doccomment { 1074 color: var(--code-highlight-doc-comment-color); 1075} 1076 1077.rustdoc.source .example-wrap pre.rust a { 1078 background: var(--codeblock-link-background); 1079} 1080 1081.example-wrap.compile_fail, 1082.example-wrap.should_panic { 1083 border-left: 2px solid var(--codeblock-error-color); 1084} 1085 1086.ignore.example-wrap { 1087 border-left: 2px solid var(--codeblock-ignore-color); 1088} 1089 1090.example-wrap.compile_fail:hover, 1091.example-wrap.should_panic:hover { 1092 border-left: 2px solid var(--codeblock-error-hover-color); 1093} 1094 1095.example-wrap.ignore:hover { 1096 border-left: 2px solid var(--codeblock-ignore-hover-color); 1097} 1098 1099.example-wrap.compile_fail .tooltip, 1100.example-wrap.should_panic .tooltip { 1101 color: var(--codeblock-error-color); 1102} 1103 1104.example-wrap.ignore .tooltip { 1105 color: var(--codeblock-ignore-color); 1106} 1107 1108.example-wrap.compile_fail:hover .tooltip, 1109.example-wrap.should_panic:hover .tooltip { 1110 color: var(--codeblock-error-hover-color); 1111} 1112 1113.example-wrap.ignore:hover .tooltip { 1114 color: var(--codeblock-ignore-hover-color); 1115} 1116 1117.example-wrap .tooltip { 1118 position: absolute; 1119 display: block; 1120 left: -25px; 1121 top: 5px; 1122 margin: 0; 1123 line-height: 1; 1124} 1125 1126.example-wrap.compile_fail .tooltip, 1127.example-wrap.should_panic .tooltip, 1128.example-wrap.ignore .tooltip { 1129 font-weight: bold; 1130 font-size: 1.25rem; 1131} 1132 1133a.test-arrow { 1134 visibility: hidden; 1135 position: absolute; 1136 padding: 5px 10px 5px 10px; 1137 border-radius: 5px; 1138 font-size: 1.375rem; 1139 top: 5px; 1140 right: 5px; 1141 z-index: 1; 1142 color: var(--test-arrow-color); 1143 background-color: var(--test-arrow-background-color); 1144} 1145a.test-arrow:hover { 1146 color: var(--test-arrow-hover-color); 1147 background-color: var(--test-arrow-hover-background-color); 1148} 1149.example-wrap:hover .test-arrow { 1150 visibility: visible; 1151} 1152 1153.code-attribute { 1154 font-weight: 300; 1155 color: var(--code-attribute-color); 1156} 1157 1158.item-spacer { 1159 width: 100%; 1160 height: 12px; 1161 display: block; 1162} 1163 1164.out-of-band > span.since { 1165 font-size: 1.25rem; 1166} 1167 1168.sub-variant h4 { 1169 font-size: 1rem; 1170 font-weight: 400; 1171 margin-top: 0; 1172 margin-bottom: 0; 1173} 1174 1175.sub-variant { 1176 margin-left: 24px; 1177 margin-bottom: 40px; 1178} 1179 1180.sub-variant > .sub-variant-field { 1181 margin-left: 24px; 1182} 1183 1184:target { 1185 padding-right: 3px; 1186 background-color: var(--target-background-color); 1187 border-right: 3px solid var(--target-border-color); 1188} 1189 1190.code-header a.tooltip { 1191 color: inherit; 1192 margin-right: 15px; 1193 position: relative; 1194} 1195 1196.code-header a.tooltip:hover { 1197 color: var(--link-color); 1198} 1199 1200/* placeholder thunk so that the mouse can easily travel from "(i)" to popover 1201 the resulting "hover tunnel" is a stepped triangle, approximating 1202 https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */ 1203a.tooltip:hover::after { 1204 position: absolute; 1205 top: calc(100% - 10px); 1206 left: -15px; 1207 right: -15px; 1208 height: 20px; 1209 content: "\00a0"; 1210} 1211 1212/* This animation is layered onto the mistake-proofing delay for dismissing 1213 a hovered tooltip, to ensure it feels responsive even with the delay. 1214 */ 1215.fade-out { 1216 opacity: 0; 1217 transition: opacity 0.45s cubic-bezier(0, 0, 0.1, 1.0); 1218} 1219 1220.popover.tooltip .content { 1221 margin: 0.25em 0.5em; 1222} 1223 1224.popover.tooltip .content pre, .popover.tooltip .content code { 1225 background: transparent; 1226 margin: 0; 1227 padding: 0; 1228 font-size: 1.25rem; 1229 white-space: pre-wrap; 1230} 1231 1232.popover.tooltip .content > h3:first-child { 1233 margin: 0 0 5px 0; 1234} 1235 1236.search-failed { 1237 text-align: center; 1238 margin-top: 20px; 1239 display: none; 1240} 1241 1242.search-failed.active { 1243 display: block; 1244} 1245 1246.search-failed > ul { 1247 text-align: left; 1248 max-width: 570px; 1249 margin-left: auto; 1250 margin-right: auto; 1251} 1252 1253#search-tabs { 1254 display: flex; 1255 flex-direction: row; 1256 gap: 1px; 1257 margin-bottom: 4px; 1258} 1259 1260#search-tabs button { 1261 text-align: center; 1262 font-size: 1.125rem; 1263 border: 0; 1264 border-top: 2px solid; 1265 flex: 1; 1266 line-height: 1.5; 1267 color: inherit; 1268} 1269#search-tabs button:not(.selected) { 1270 background-color: var(--search-tab-button-not-selected-background); 1271 border-top-color: var(--search-tab-button-not-selected-border-top-color); 1272} 1273#search-tabs button:hover, #search-tabs button.selected { 1274 background-color: var(--search-tab-button-selected-background); 1275 border-top-color: var(--search-tab-button-selected-border-top-color); 1276} 1277 1278#search-tabs .count { 1279 font-size: 1rem; 1280 color: var(--search-tab-title-count-color); 1281} 1282 1283#search .error code { 1284 border-radius: 3px; 1285 background-color: var(--search-error-code-background-color); 1286} 1287 1288.search-corrections { 1289 font-weight: normal; 1290} 1291 1292#src-sidebar-toggle { 1293 position: sticky; 1294 top: 0; 1295 left: 0; 1296 font-size: 1.25rem; 1297 border-bottom: 1px solid; 1298 display: flex; 1299 height: 40px; 1300 justify-content: stretch; 1301 align-items: stretch; 1302 z-index: 10; 1303} 1304#source-sidebar { 1305 width: 100%; 1306 overflow: auto; 1307} 1308#source-sidebar > .title { 1309 font-size: 1.5rem; 1310 text-align: center; 1311 border-bottom: 1px solid var(--border-color); 1312 margin-bottom: 6px; 1313} 1314#source-sidebar div.files > a:hover, details.dir-entry summary:hover, 1315#source-sidebar div.files > a:focus, details.dir-entry summary:focus { 1316 background-color: var(--source-sidebar-background-hover); 1317} 1318#source-sidebar div.files > a.selected { 1319 background-color: var(--source-sidebar-background-selected); 1320} 1321#src-sidebar-toggle > button { 1322 font-size: inherit; 1323 font-weight: bold; 1324 background: none; 1325 color: inherit; 1326 text-align: center; 1327 border: none; 1328 outline: none; 1329 flex: 1 1; 1330 /* iOS button gradient: https://stackoverflow.com/q/5438567 */ 1331 -webkit-appearance: none; 1332 opacity: 1; 1333} 1334 1335#settings-menu, #help-button { 1336 margin-left: 4px; 1337 display: flex; 1338} 1339#settings-menu > a, #help-button > a { 1340 display: flex; 1341 align-items: center; 1342 justify-content: center; 1343 background-color: var(--button-background-color); 1344 border: 1px solid var(--border-color); 1345 border-radius: 2px; 1346 color: var(--settings-button-color); 1347 /* Rare exception to specifying font sizes in rem. Since this is acting 1348 as an icon, it's okay to specify their sizes in pixels. */ 1349 font-size: 20px; 1350 width: 33px; 1351} 1352 1353#settings-menu > a:hover, #settings-menu > a:focus, 1354#help-button > a:hover, #help-button > a:focus { 1355 border-color: var(--settings-button-border-focus); 1356} 1357 1358#copy-path { 1359 color: var(--copy-path-button-color); 1360 background: var(--main-background-color); 1361 height: 34px; 1362 margin-left: 10px; 1363 padding: 0; 1364 padding-left: 2px; 1365 border: 0; 1366 width: 33px; 1367} 1368#copy-path > img { 1369 filter: var(--copy-path-img-filter); 1370} 1371#copy-path:hover > img { 1372 filter: var(--copy-path-img-hover-filter); 1373} 1374 1375@keyframes rotating { 1376 from { 1377 transform: rotate(0deg); 1378 } 1379 to { 1380 transform: rotate(360deg); 1381 } 1382} 1383#settings-menu.rotate > a img { 1384 animation: rotating 2s linear infinite; 1385} 1386 1387kbd { 1388 display: inline-block; 1389 padding: 3px 5px; 1390 font: 15px monospace; 1391 line-height: 10px; 1392 vertical-align: middle; 1393 border: solid 1px var(--border-color); 1394 border-radius: 3px; 1395 color: var(--kbd-color); 1396 background-color: var(--kbd-background); 1397 box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color); 1398} 1399 1400ul.all-items > li { 1401 list-style: none; 1402} 1403 1404details.dir-entry { 1405 padding-left: 4px; 1406} 1407 1408details.dir-entry > summary { 1409 margin: 0 0 0 -4px; 1410 padding: 0 0 0 4px; 1411 cursor: pointer; 1412} 1413 1414details.dir-entry div.folders, details.dir-entry div.files { 1415 padding-left: 23px; 1416} 1417 1418details.dir-entry a { 1419 display: block; 1420} 1421 1422/* We use CSS containment on the details elements because most sizeable elements 1423 of the page are contained in one of these. This also makes re-rendering 1424 faster on document changes (like closing and opening toggles). 1425 Unfortunately we can't yet specify contain: content or contain: strict 1426 because the [-]/[+] toggles extend past the boundaries of the <details> 1427 https://developer.mozilla.org/en-US/docs/Web/CSS/contain */ 1428details.toggle { 1429 contain: layout; 1430 position: relative; 1431} 1432 1433/* The hideme class is used on summary tags that contain a span with 1434 placeholder text shown only when the toggle is closed. For instance, 1435 "Expand description" or "Show methods". */ 1436details.toggle > summary.hideme { 1437 cursor: pointer; 1438 font-size: 1rem; 1439} 1440 1441details.toggle > summary { 1442 list-style: none; 1443 /* focus outline is shown on `::before` instead of this */ 1444 outline: none; 1445} 1446details.toggle > summary::-webkit-details-marker, 1447details.toggle > summary::marker { 1448 display: none; 1449} 1450 1451details.toggle > summary.hideme > span { 1452 margin-left: 9px; 1453} 1454 1455details.toggle > summary::before { 1456 /* toggle plus */ 1457 background: url('data:image/svg+xml,<svg width="17" height="17" \ 1458shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \ 1459d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>') no-repeat top left; 1460 content: ""; 1461 cursor: pointer; 1462 width: 16px; 1463 height: 16px; 1464 display: inline-block; 1465 vertical-align: middle; 1466 opacity: .5; 1467 filter: var(--toggle-filter); 1468} 1469 1470details.toggle > summary.hideme > span, 1471.more-examples-toggle summary, .more-examples-toggle .hide-more { 1472 color: var(--toggles-color); 1473} 1474 1475/* Screen readers see the text version at the end the line. 1476 Visual readers see the icon at the start of the line, but small and transparent. */ 1477details.toggle > summary::after { 1478 content: "Expand"; 1479 overflow: hidden; 1480 width: 0; 1481 height: 0; 1482 position: absolute; 1483} 1484 1485details.toggle > summary.hideme::after { 1486 /* "hideme" toggles already have a description when they're contracted */ 1487 content: ""; 1488} 1489 1490details.toggle > summary:focus::before, 1491details.toggle > summary:hover::before { 1492 opacity: 1; 1493} 1494 1495details.toggle > summary:focus-visible::before { 1496 /* The SVG is black, and gets turned white using a filter in the dark themes. 1497 Do the same with the outline. 1498 The dotted 1px style is copied from Firefox's focus ring style. 1499 */ 1500 outline: 1px dotted #000; 1501 outline-offset: 1px; 1502} 1503 1504details.non-exhaustive { 1505 margin-bottom: 8px; 1506} 1507 1508details.toggle > summary.hideme::before { 1509 position: relative; 1510} 1511 1512details.toggle > summary:not(.hideme)::before { 1513 position: absolute; 1514 left: -24px; 1515 top: 4px; 1516} 1517 1518.impl-items > details.toggle > summary:not(.hideme)::before { 1519 position: absolute; 1520 left: -24px; 1521} 1522 1523/* When a "hideme" summary is open and the "Expand description" or "Show 1524 methods" text is hidden, we want the [-] toggle that remains to not 1525 affect the layout of the items to its right. To do that, we use 1526 absolute positioning. Note that we also set position: relative 1527 on the parent <details> to make this work properly. */ 1528details.toggle[open] > summary.hideme { 1529 position: absolute; 1530} 1531 1532details.toggle[open] > summary.hideme > span { 1533 display: none; 1534} 1535 1536details.toggle[open] > summary::before { 1537 /* toggle minus */ 1538 background: url('data:image/svg+xml,<svg width="17" height="17" \ 1539shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \ 1540d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>') no-repeat top left; 1541} 1542 1543details.toggle[open] > summary::after { 1544 content: "Collapse"; 1545} 1546 1547/* This is needed in docblocks to have the "▶" element to be on the same line. */ 1548.docblock summary > * { 1549 display: inline-block; 1550} 1551 1552/* In case there is no documentation before a code block, we need to add some margin at the top 1553to prevent an overlay between the "collapse toggle" and the information tooltip. 1554However, it's not needed with smaller screen width because the doc/code block is always put 1555"one line" below. */ 1556.docblock > .example-wrap:first-child .tooltip { 1557 margin-top: 16px; 1558} 1559 1560/* Media Queries */ 1561 1562/* 1563WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY 1564If you update this line, then you also need to update the line with the same warning 1565in source-script.js 1566*/ 1567@media (max-width: 700px) { 1568 /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar, 1569 or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured 1570 by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size. 1571 */ 1572 *[id] { 1573 scroll-margin-top: 45px; 1574 } 1575 1576 .rustdoc { 1577 /* Sidebar should overlay main content, rather than pushing main content to the right. 1578 Turn off `display: flex` on the body element. */ 1579 display: block; 1580 } 1581 1582 main { 1583 padding-left: 15px; 1584 padding-top: 0px; 1585 } 1586 1587 .main-heading { 1588 flex-direction: column; 1589 } 1590 1591 .out-of-band { 1592 text-align: left; 1593 margin-left: initial; 1594 padding: initial; 1595 } 1596 1597 .out-of-band .since::before { 1598 content: "Since "; 1599 } 1600 1601 /* Hide the logo and item name from the sidebar. Those are displayed 1602 in the mobile-topbar instead. */ 1603 .sidebar .logo-container, 1604 .sidebar .location { 1605 display: none; 1606 } 1607 1608 .sidebar { 1609 position: fixed; 1610 top: 45px; 1611 /* Hide the sidebar offscreen while not in use. Doing this instead of display: none means 1612 the sidebar stays visible for screen readers, which is useful for navigation. */ 1613 left: -1000px; 1614 z-index: 11; 1615 /* Reduce height slightly to account for mobile topbar. */ 1616 height: calc(100vh - 45px); 1617 width: 200px; 1618 } 1619 1620 /* The source view uses a different design for the sidebar toggle, and doesn't have a topbar, 1621 so don't bump down the main content or the sidebar. */ 1622 .source main, 1623 .rustdoc.source .sidebar { 1624 top: 0; 1625 padding: 0; 1626 height: 100vh; 1627 border: 0; 1628 } 1629 1630 .sidebar.shown, 1631 .source-sidebar-expanded .source .sidebar, 1632 .rustdoc:not(.source) .sidebar:focus-within { 1633 left: 0; 1634 } 1635 1636 .mobile-topbar h2 { 1637 padding-bottom: 0; 1638 margin: auto 0.5em auto auto; 1639 overflow: hidden; 1640 /* Rare exception to specifying font sizes in rem. Since the topbar 1641 height is specified in pixels, this also has to be specified in 1642 pixels to avoid overflowing the topbar when the user sets a bigger 1643 font size. */ 1644 font-size: 24px; 1645 } 1646 1647 .mobile-topbar h2 a { 1648 display: block; 1649 text-overflow: ellipsis; 1650 overflow: hidden; 1651 white-space: nowrap; 1652 } 1653 1654 .mobile-topbar .logo-container > img { 1655 max-width: 35px; 1656 max-height: 35px; 1657 margin: 5px 0 5px 20px; 1658 } 1659 1660 .mobile-topbar { 1661 display: flex; 1662 flex-direction: row; 1663 position: sticky; 1664 z-index: 10; 1665 font-size: 2rem; 1666 height: 45px; 1667 width: 100%; 1668 left: 0; 1669 top: 0; 1670 } 1671 1672 .sidebar-menu-toggle { 1673 width: 45px; 1674 /* Rare exception to specifying font sizes in rem. Since this is acting 1675 as an icon, it's okay to specify its sizes in pixels. */ 1676 font-size: 32px; 1677 border: none; 1678 color: var(--main-color); 1679 } 1680 1681 .sidebar-elems { 1682 margin-top: 1em; 1683 } 1684 1685 .anchor { 1686 display: none !important; 1687 } 1688 1689 #search-tabs .count { 1690 display: block; 1691 } 1692 1693 #main-content > details.toggle > summary::before, 1694 #main-content > div > details.toggle > summary::before { 1695 left: -11px; 1696 } 1697 1698 #src-sidebar-toggle { 1699 position: fixed; 1700 left: 1px; 1701 top: 100px; 1702 width: 30px; 1703 font-size: 1.5rem; 1704 padding: 0; 1705 z-index: 10; 1706 border-top-right-radius: 3px; 1707 border-bottom-right-radius: 3px; 1708 border: 1px solid; 1709 border-left: 0; 1710 } 1711 1712 .source-sidebar-expanded #src-sidebar-toggle { 1713 left: unset; 1714 top: unset; 1715 width: unset; 1716 border-top-right-radius: unset; 1717 border-bottom-right-radius: unset; 1718 position: sticky; 1719 border: 0; 1720 border-bottom: 1px solid; 1721 } 1722 1723 /* We don't display these buttons on mobile devices. */ 1724 #copy-path, #help-button { 1725 display: none; 1726 } 1727 1728 /* Display an alternating layout on tablets and phones */ 1729 .item-table, .item-row, .item-table > li, .item-table > li > div, 1730 .search-results > a, .search-results > a > div { 1731 display: block; 1732 } 1733 1734 /* Display an alternating layout on tablets and phones */ 1735 .search-results > a { 1736 padding: 5px 0px; 1737 } 1738 .search-results > a > div.desc, .item-table > li > div.desc { 1739 padding-left: 2em; 1740 } 1741 .search-results .result-name { 1742 display: block; 1743 } 1744 .search-results .result-name .typename { 1745 width: initial; 1746 margin-right: 0; 1747 } 1748 .search-results .result-name .typename, .search-results .result-name .path { 1749 display: inline; 1750 } 1751 1752 .source-sidebar-expanded .source .sidebar { 1753 max-width: 100vw; 1754 width: 100vw; 1755 } 1756 1757 /* Position of the "[-]" element. */ 1758 details.toggle:not(.top-doc) > summary { 1759 margin-left: 10px; 1760 } 1761 .impl-items > details.toggle > summary:not(.hideme)::before, 1762 #main-content > details.toggle:not(.top-doc) > summary::before, 1763 #main-content > div > details.toggle > summary::before { 1764 left: -11px; 1765 } 1766 1767 /* Align summary-nested and unnested item-info gizmos. */ 1768 .impl-items > .item-info { 1769 margin-left: 34px; 1770 } 1771 1772 .source nav.sub { 1773 margin: 0; 1774 padding: var(--nav-sub-mobile-padding); 1775 } 1776} 1777 1778/* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */ 1779@media (min-width: 701px) { 1780 /* Places file-link for a scraped example on top of the example to save space. 1781 We only do this on large screens so the file-link doesn't overlap too much 1782 with the example's content. */ 1783 .scraped-example-title { 1784 position: absolute; 1785 z-index: 10; 1786 background: var(--main-background-color); 1787 bottom: 8px; 1788 right: 5px; 1789 padding: 2px 4px; 1790 box-shadow: 0 0 4px var(--main-background-color); 1791 } 1792} 1793 1794@media print { 1795 nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path, 1796 details.toggle[open] > summary::before, details.toggle > summary::before, 1797 details.toggle.top-doc > summary { 1798 display: none; 1799 } 1800 1801 .docblock { 1802 margin-left: 0; 1803 } 1804 1805 main { 1806 padding: 10px; 1807 } 1808} 1809 1810@media (max-width: 464px) { 1811 .docblock { 1812 margin-left: 12px; 1813 } 1814 1815 .docblock code { 1816 overflow-wrap: break-word; 1817 overflow-wrap: anywhere; 1818 } 1819 1820 nav.sub { 1821 flex-direction: column; 1822 } 1823 1824 .search-form { 1825 align-self: stretch; 1826 } 1827 1828 .sub-logo-container > img { 1829 height: 35px; 1830 width: 35px; 1831 margin-bottom: var(--nav-sub-mobile-padding); 1832 } 1833} 1834 1835.variant, 1836.implementors-toggle > summary, 1837.impl, 1838#implementors-list > .docblock, 1839.impl-items > section, 1840.impl-items > .toggle > summary, 1841.methods > section, 1842.methods > .toggle > summary 1843{ 1844 margin-bottom: 0.75em; 1845} 1846 1847.variants > .docblock, 1848.implementors-toggle > .docblock, 1849.impl-items > .toggle[open]:not(:last-child), 1850.methods > .toggle[open]:not(:last-child), 1851.implementors-toggle[open]:not(:last-child) { 1852 margin-bottom: 2em; 1853} 1854 1855#trait-implementations-list .impl-items > .toggle:not(:last-child), 1856#synthetic-implementations-list .impl-items > .toggle:not(:last-child), 1857#blanket-implementations-list .impl-items > .toggle:not(:last-child) { 1858 margin-bottom: 1em; 1859} 1860 1861/* Begin: styles for --scrape-examples feature */ 1862 1863.scraped-example-list .scrape-help { 1864 margin-left: 10px; 1865 padding: 0 4px; 1866 font-weight: normal; 1867 font-size: 12px; 1868 position: relative; 1869 bottom: 1px; 1870 border: 1px solid var(--scrape-example-help-border-color); 1871 border-radius: 50px; 1872 color: var(--scrape-example-help-color); 1873} 1874.scraped-example-list .scrape-help:hover { 1875 border-color: var(--scrape-example-help-hover-border-color); 1876 color: var(--scrape-example-help-hover-color); 1877} 1878 1879.scraped-example { 1880 /* So .scraped-example-title can be positioned absolutely */ 1881 position: relative; 1882} 1883 1884.scraped-example .code-wrapper { 1885 position: relative; 1886 display: flex; 1887 flex-direction: row; 1888 flex-wrap: wrap; 1889 width: 100%; 1890} 1891 1892.scraped-example:not(.expanded) .code-wrapper { 1893 /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number 1894 * of lines shown in the un-expanded example code viewer. This pre needs to have 1895 * a max-height equal to line-height * N. The line-height is currently 1.5em, 1896 * and we include additional 10px for padding. */ 1897 max-height: calc(1.5em * 5 + 10px); 1898} 1899 1900.scraped-example:not(.expanded) .code-wrapper pre { 1901 overflow-y: hidden; 1902 padding-bottom: 0; 1903 /* See above comment, should be the same max-height. */ 1904 max-height: calc(1.5em * 5 + 10px); 1905} 1906 1907.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper, 1908.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre { 1909 /* See above comment, except this height is based on HIDDEN_MAX_LINES. */ 1910 max-height: calc(1.5em * 10 + 10px); 1911} 1912 1913.scraped-example .code-wrapper .next, 1914.scraped-example .code-wrapper .prev, 1915.scraped-example .code-wrapper .expand { 1916 color: var(--main-color); 1917 position: absolute; 1918 top: 0.25em; 1919 z-index: 1; 1920 padding: 0; 1921 background: none; 1922 border: none; 1923 /* iOS button gradient: https://stackoverflow.com/q/5438567 */ 1924 -webkit-appearance: none; 1925 opacity: 1; 1926} 1927.scraped-example .code-wrapper .prev { 1928 right: 2.25em; 1929} 1930.scraped-example .code-wrapper .next { 1931 right: 1.25em; 1932} 1933.scraped-example .code-wrapper .expand { 1934 right: 0.25em; 1935} 1936 1937.scraped-example:not(.expanded) .code-wrapper::before, 1938.scraped-example:not(.expanded) .code-wrapper::after { 1939 content: " "; 1940 width: 100%; 1941 height: 5px; 1942 position: absolute; 1943 z-index: 1; 1944} 1945.scraped-example:not(.expanded) .code-wrapper::before { 1946 top: 0; 1947 background: linear-gradient(to bottom, 1948 var(--scrape-example-code-wrapper-background-start), 1949 var(--scrape-example-code-wrapper-background-end)); 1950} 1951.scraped-example:not(.expanded) .code-wrapper::after { 1952 bottom: 0; 1953 background: linear-gradient(to top, 1954 var(--scrape-example-code-wrapper-background-start), 1955 var(--scrape-example-code-wrapper-background-end)); 1956} 1957 1958.scraped-example .code-wrapper .example-wrap { 1959 width: 100%; 1960 overflow-y: hidden; 1961 margin-bottom: 0; 1962} 1963 1964.scraped-example:not(.expanded) .code-wrapper .example-wrap { 1965 overflow-x: hidden; 1966} 1967 1968.scraped-example .example-wrap .rust span.highlight { 1969 background: var(--scrape-example-code-line-highlight); 1970} 1971.scraped-example .example-wrap .rust span.highlight.focus { 1972 background: var(--scrape-example-code-line-highlight-focus); 1973} 1974 1975.more-examples-toggle { 1976 max-width: calc(100% + 25px); 1977 margin-top: 10px; 1978 margin-left: -25px; 1979} 1980 1981.more-examples-toggle .hide-more { 1982 margin-left: 25px; 1983 cursor: pointer; 1984} 1985 1986.more-scraped-examples { 1987 margin-left: 25px; 1988 position: relative; 1989} 1990 1991.toggle-line { 1992 position: absolute; 1993 top: 5px; 1994 bottom: 0; 1995 right: calc(100% + 10px); 1996 padding: 0 4px; 1997 cursor: pointer; 1998} 1999 2000.toggle-line-inner { 2001 min-width: 2px; 2002 height: 100%; 2003 background: var(--scrape-example-toggle-line-background); 2004} 2005 2006.toggle-line:hover .toggle-line-inner { 2007 background: var(--scrape-example-toggle-line-hover-background); 2008} 2009 2010.more-scraped-examples .scraped-example, .example-links { 2011 margin-top: 20px; 2012} 2013 2014.more-scraped-examples .scraped-example:first-child { 2015 margin-top: 5px; 2016} 2017 2018.example-links ul { 2019 margin-bottom: 0; 2020} 2021 2022/* End: styles for --scrape-examples feature */ 2023