src/librustdoc/html/static/css/rustdoc.css

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