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 }
 884
 885 .search-results .desc > span {
 886         white-space: nowrap;
 887         text-overflow: ellipsis;
 888         overflow: hidden;
 889         display: block;
 890 }
 891
 892 .search-results > a {
 893         display: block;
 894         /* A little margin ensures the browser's outlining of focused links has room to display. */
 895         margin-left: 2px;
 896         margin-right: 2px;
 897         border-bottom: 1px solid #aaa3;
 898 }
 899
 900 .search-results > a > div {
 901         display: flex;
 902         flex-flow: row wrap;
 903 }
 904
 905 .search-results .result-name, .search-results div.desc {
 906         width: 50%;
 907 }
 908 .search-results .result-name {
 909         padding-right: 1em;
 910 }
 911
 912 .search-results a:hover,
 913 .search-results a:focus {
 914         background-color: var(--search-result-link-focus-background-color);
 915 }
 916
 917 .popover {
 918         font-size: 1rem;
 919         position: absolute;
 920         right: 0;
 921         z-index: 2;
 922         display: block;
 923         margin-top: 7px;
 924         border-radius: 3px;
 925         border: 1px solid var(--border-color);
 926         font-size: 1rem;
 927 }
 928
 929 /* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
 930 .popover::before {
 931         content: '';
 932         position: absolute;
 933         right: 11px;
 934         border: solid var(--border-color);
 935         border-width: 1px 1px 0 0;
 936         display: inline-block;
 937         padding: 4px;
 938         transform: rotate(-45deg);
 939         top: -5px;
 940 }
 941
 942 .popover, .popover::before {
 943         background-color: var(--main-background-color);
 944         color: var(--main-color);
 945 }
 946
 947 /* use larger max-width for help popover, but not for help.html */
 948 #help.popover {
 949         max-width: 600px;
 950 }
 951
 952 #help.popover::before {
 953         right: 48px;
 954 }
 955
 956 #help dt {
 957         float: left;
 958         clear: left;
 959         display: block;
 960         margin-right: 0.5rem;
 961 }
 962 #help span.top, #help span.bottom {
 963         text-align: center;
 964         display: block;
 965         font-size: 1.125rem;
 966 }
 967 #help span.top {
 968         margin: 10px 0;
 969         border-bottom: 1px solid var(--border-color);
 970         padding-bottom: 4px;
 971         margin-bottom: 6px;
 972 }
 973 #help span.bottom {
 974         clear: both;
 975         border-top: 1px solid var(--border-color);
 976 }
 977 .side-by-side > div {
 978         width: 50%;
 979         float: left;
 980         padding: 0 20px 20px 17px;
 981 }
 982
 983 .item-info .stab {
 984         width: fit-content;
 985         /* This min-height is needed to unify the height of the stab elements because some of them
 986            have emojis.
 987         */
 988         min-height: 36px;
 989         display: flex;
 990         align-items: center;
 991         white-space: pre-wrap;
 992 }
 993 .stab {
 994         padding: 3px;
 995         margin-bottom: 5px;
 996         font-size: 0.875rem;
 997         font-weight: normal;
 998         color: var(--main-color);
 999         background-color: var(--stab-background-color);
1000 }
1001
1002 .stab.portability > code {
1003         background: none;
1004         color: var(--stab-code-color);
1005 }
1006
1007 .stab .emoji {
1008         font-size: 1.25rem;
1009         margin-right: 0.3rem;
1010 }
1011
1012 /* This is to prevent the `.stab` elements to overflow the .docblock elements. */
1013 .docblock .stab {
1014         padding: 0 0.125em;
1015         margin-bottom: 0;
1016 }
1017
1018 /* Black one-pixel outline around emoji shapes */
1019 .emoji {
1020         text-shadow:
1021                 1px 0 0 black,
1022                 -1px 0 0 black,
1023                 0  1px 0 black,
1024                 0 -1px 0 black;
1025 }
1026
1027 .module-item .stab,
1028 .import-item .stab {
1029         border-radius: 3px;
1030         display: inline-block;
1031         font-size: 0.875rem;
1032         line-height: 1.2;
1033         margin-bottom: 0;
1034         margin-left: 0.3125em;
1035         padding: 2px;
1036         vertical-align: text-bottom;
1037 }
1038
1039 .module-item.unstable,
1040 .import-item.unstable {
1041         opacity: 0.65;
1042 }
1043
1044 .since {
1045         font-weight: normal;
1046         font-size: initial;
1047 }
1048
1049 .rightside {
1050         padding-left: 12px;
1051         padding-right: 2px;
1052         float: right;
1053 }
1054
1055 .rightside:not(a),
1056 .out-of-band {
1057         color: var(--right-side-color);
1058 }
1059
1060 pre.rust {
1061         tab-size: 4;
1062         -moz-tab-size: 4;
1063 }
1064
1065 /* Code highlighting */
1066 pre.rust .kw {
1067         color: var(--code-highlight-kw-color);
1068 }
1069 pre.rust .kw-2 {
1070         color: var(--code-highlight-kw-2-color);
1071 }
1072 pre.rust .lifetime {
1073         color: var(--code-highlight-lifetime-color);
1074 }
1075 pre.rust .prelude-ty {
1076         color: var(--code-highlight-prelude-color);
1077 }
1078 pre.rust .prelude-val {
1079         color: var(--code-highlight-prelude-val-color);
1080 }
1081 pre.rust .string {
1082         color: var(--code-highlight-string-color);
1083 }
1084 pre.rust .number {
1085         color: var(--code-highlight-number-color);
1086 }
1087 pre.rust .bool-val {
1088         color: var(--code-highlight-literal-color);
1089 }
1090 pre.rust .self {
1091         color: var(--code-highlight-self-color);
1092 }
1093 pre.rust .attr {
1094         color: var(--code-highlight-attribute-color);
1095 }
1096 pre.rust .macro,
1097 pre.rust .macro-nonterminal {
1098         color: var(--code-highlight-macro-color);
1099 }
1100 pre.rust .question-mark {
1101         font-weight: bold;
1102         color: var(--code-highlight-question-mark-color);
1103 }
1104 pre.rust .comment {
1105         color: var(--code-highlight-comment-color);
1106 }
1107 pre.rust .doccomment {
1108         color: var(--code-highlight-doc-comment-color);
1109 }
1110
1111 .example-wrap.compile_fail,
1112 .example-wrap.should_panic {
1113         border-left: 2px solid var(--codeblock-error-color);
1114 }
1115
1116 .ignore.example-wrap {
1117         border-left: 2px solid var(--codeblock-ignore-color);
1118 }
1119
1120 .example-wrap.compile_fail:hover,
1121 .example-wrap.should_panic:hover {
1122         border-left: 2px solid var(--codeblock-error-hover-color);
1123 }
1124
1125 .example-wrap.ignore:hover {
1126         border-left: 2px solid var(--codeblock-ignore-hover-color);
1127 }
1128
1129 .example-wrap.compile_fail .tooltip,
1130 .example-wrap.should_panic .tooltip {
1131         color: var(--codeblock-error-color);
1132 }
1133
1134 .example-wrap.ignore .tooltip {
1135         color:  var(--codeblock-ignore-color);
1136 }
1137
1138 .example-wrap.compile_fail:hover .tooltip,
1139 .example-wrap.should_panic:hover .tooltip {
1140         color: var(--codeblock-error-hover-color);
1141 }
1142
1143 .example-wrap.ignore:hover .tooltip {
1144         color: var(--codeblock-ignore-hover-color);
1145 }
1146
1147 .example-wrap .tooltip {
1148         position: absolute;
1149         display: block;
1150         cursor: pointer;
1151         left: -25px;
1152         top: 5px;
1153 }
1154
1155 .example-wrap .tooltip::after {
1156         display: none;
1157         text-align: center;
1158         padding: 5px 3px 3px 3px;
1159         border-radius: 6px;
1160         margin-left: 5px;
1161         font-size: 1rem;
1162         border: 1px solid var(--border-color);
1163         position: absolute;
1164         width: max-content;
1165         top: -2px;
1166         z-index: 1;
1167 }
1168
1169 .example-wrap .tooltip::before {
1170         content: " ";
1171         position: absolute;
1172         top: 50%;
1173         left: 16px;
1174         margin-top: -5px;
1175         border-width: 5px;
1176         border-style: solid;
1177         display: none;
1178         z-index: 1;
1179 }
1180
1181 .example-wrap.ignore .tooltip::after {
1182         content: "This example is not tested";
1183 }
1184 .example-wrap.compile_fail .tooltip::after {
1185         content: "This example deliberately fails to compile";
1186 }
1187 .example-wrap.should_panic .tooltip::after {
1188         content: "This example panics";
1189 }
1190 .example-wrap.edition .tooltip::after {
1191         content: "This code runs with edition " attr(data-edition);
1192 }
1193
1194 .example-wrap .tooltip:hover::before, .example-wrap .tooltip:hover::after {
1195         display: inline;
1196 }
1197
1198 .example-wrap.compile_fail .tooltip,
1199 .example-wrap.should_panic .tooltip,
1200 .example-wrap.ignore .tooltip {
1201         font-weight: bold;
1202         font-size: 1.25rem;
1203 }
1204
1205 a.test-arrow {
1206         display: inline-block;
1207         visibility: hidden;
1208         position: absolute;
1209         padding: 5px 10px 5px 10px;
1210         border-radius: 5px;
1211         font-size: 1.375rem;
1212         top: 5px;
1213         right: 5px;
1214         z-index: 1;
1215 }
1216 .example-wrap:hover .test-arrow {
1217         visibility: visible;
1218 }
1219
1220 .code-attribute {
1221         font-weight: 300;
1222         color: var(--code-attribute-color);
1223 }
1224
1225 .item-spacer {
1226         width: 100%;
1227         height: 12px;
1228 }
1229
1230 .out-of-band > span.since {
1231         font-size: 1.25rem;
1232 }
1233
1234 h3.variant {
1235         font-weight: 600;
1236         font-size: 1.125rem;
1237         margin-bottom: 10px;
1238 }
1239
1240 .sub-variant h4 {
1241         font-size: 1rem;
1242         font-weight: 400;
1243         margin-top: 0;
1244         margin-bottom: 0;
1245 }
1246
1247 .sub-variant {
1248         margin-left: 24px;
1249         margin-bottom: 40px;
1250 }
1251
1252 .sub-variant > .sub-variant-field {
1253         margin-left: 24px;
1254 }
1255
1256 :target > code, :target > .code-header {
1257         opacity: 1;
1258 }
1259
1260 :target {
1261         padding-right: 3px;
1262 }
1263
1264 .notable-traits-tooltip {
1265         display: inline-block;
1266         cursor: pointer;
1267 }
1268
1269 .notable-traits:hover .notable-traits-tooltiptext,
1270 .notable-traits .notable-traits-tooltiptext.force-tooltip {
1271         display: inline-block;
1272 }
1273
1274 .notable-traits .notable-traits-tooltiptext {
1275         display: none;
1276         padding: 5px 3px 3px 3px;
1277         border-radius: 6px;
1278         margin-left: 5px;
1279         z-index: 10;
1280         font-size: 1rem;
1281         cursor: default;
1282         position: absolute;
1283         border: 1px solid;
1284 }
1285
1286 .notable-traits-tooltip::after {
1287         /* The margin on the tooltip does not capture hover events,
1288            this extends the area of hover enough so that mouse hover is not
1289            lost when moving the mouse to the tooltip */
1290         content: "\00a0\00a0\00a0";
1291 }
1292
1293 .notable-traits .docblock {
1294         margin: 0;
1295 }
1296
1297 .notable-traits .notable {
1298         margin: 0;
1299         margin-bottom: 13px;
1300         font-size: 1.1875rem;
1301         font-weight: 600;
1302         display: block;
1303 }
1304
1305 .notable-traits .docblock code.content {
1306         margin: 0;
1307         padding: 0;
1308         font-size: 1.25rem;
1309 }
1310
1311 .search-failed {
1312         text-align: center;
1313         margin-top: 20px;
1314         display: none;
1315 }
1316
1317 .search-failed.active {
1318         display: block;
1319 }
1320
1321 .search-failed > ul {
1322         text-align: left;
1323         max-width: 570px;
1324         margin-left: auto;
1325         margin-right: auto;
1326 }
1327
1328 #titles {
1329         display: flex;
1330         flex-direction: row;
1331         gap: 1px;
1332         margin-bottom: 4px;
1333 }
1334
1335 #titles > button {
1336         text-align: center;
1337         font-size: 1.125rem;
1338         cursor: pointer;
1339         border: 0;
1340         border-top: 2px solid;
1341         flex: 1;
1342         line-height: 1.5;
1343         color: inherit;
1344 }
1345
1346 #titles > button > div.count {
1347         display: inline-block;
1348         font-size: 1rem;
1349 }
1350
1351 .notable-traits {
1352         cursor: pointer;
1353         z-index: 2;
1354         margin-left: 5px;
1355 }
1356
1357 #sidebar-toggle {
1358         position: sticky;
1359         top: 0;
1360         left: 0;
1361         font-size: 1.25rem;
1362         border-bottom: 1px solid;
1363         display: flex;
1364         height: 40px;
1365         justify-content: center;
1366         align-items: center;
1367         z-index: 10;
1368 }
1369 #source-sidebar {
1370         width: 100%;
1371         overflow: auto;
1372 }
1373 #source-sidebar > .title {
1374         font-size: 1.5rem;
1375         text-align: center;
1376         border-bottom: 1px solid var(--border-color);
1377         margin-bottom: 6px;
1378 }
1379 #sidebar-toggle > button {
1380         font-size: inherit;
1381         font-weight: bold;
1382         background: none;
1383         color: inherit;
1384         cursor: pointer;
1385         text-align: center;
1386         border: none;
1387         outline: none;
1388         position: absolute;
1389         top: 0;
1390         bottom: 0;
1391         left: 0;
1392         right: 0;
1393         /* work around button layout strangeness: https://stackoverflow.com/q/7271561 */
1394         width: 100%;
1395         /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1396         -webkit-appearance: none;
1397         opacity: 1;
1398 }
1399 #settings-menu, #help-button {
1400         margin-left: 4px;
1401         outline: none;
1402 }
1403
1404 #settings-menu > a, #help-button > a, #copy-path {
1405         width: 33px;
1406         cursor: pointer;
1407         line-height: 1.5;
1408 }
1409
1410 #settings-menu > a, #help-button > a {
1411         padding: 5px;
1412         height: 100%;
1413         display: block;
1414         background-color: var(--button-background-color);
1415         border: 1px solid var(--border-color);
1416         border-radius: 2px;
1417 }
1418
1419 #copy-path {
1420         color: var(--copy-path-button-color);
1421         background: var(--main-background-color);
1422         height: 34px;
1423         margin-left: 10px;
1424         padding: 0;
1425         padding-left: 2px;
1426         border: 0;
1427 }
1428 #copy-path > img {
1429         filter: var(--copy-path-img-filter);
1430 }
1431 #copy-path:hover > img {
1432         filter: var(--copy-path-img-hover-filter);
1433 }
1434
1435 @keyframes rotating {
1436         from {
1437                 transform: rotate(0deg);
1438         }
1439         to {
1440                 transform: rotate(360deg);
1441         }
1442 }
1443 #settings-menu.rotate > a img {
1444         animation: rotating 2s linear infinite;
1445 }
1446
1447 #help-button > a {
1448         text-align: center;
1449         /* Rare exception to specifying font sizes in rem. Since this is acting
1450            as an icon, it's okay to specify their sizes in pixels. */
1451         font-size: 20px;
1452         padding-top: 2px;
1453 }
1454
1455 kbd {
1456         display: inline-block;
1457         padding: 3px 5px;
1458         font: 15px monospace;
1459         line-height: 10px;
1460         vertical-align: middle;
1461         border: solid 1px var(--border-color);
1462         border-radius: 3px;
1463         cursor: default;
1464 }
1465
1466 ul.all-items > li {
1467         list-style: none;
1468 }
1469
1470 details.dir-entry {
1471         padding-left: 4px;
1472 }
1473
1474 details.dir-entry > summary::after {
1475         content: " ►";
1476         position: absolute;
1477         left: -15px;
1478         top: 0px;
1479         font-size: 80%;
1480         padding: 2px 0px;
1481         /* set width to cover gap between arrow and text */
1482         width: 25px;
1483 }
1484
1485 details[open].dir-entry > summary::after {
1486         content: " ▼";
1487 }
1488
1489 details.dir-entry > summary::-webkit-details-marker,
1490 details.dir-entry > summary::marker {
1491         display: none;
1492 }
1493
1494 details.dir-entry > summary {
1495         margin: 0 0 0 13px;
1496         list-style: none;
1497         cursor: pointer;
1498         position: relative;
1499 }
1500
1501 details.dir-entry div.folders, details.dir-entry div.files {
1502         padding-left: 23px;
1503 }
1504
1505 details.dir-entry a {
1506         display: block;
1507 }
1508
1509 /* We use CSS containment on the details elements because most sizeable elements
1510         of the page are contained in one of these. This also makes re-rendering
1511         faster on document changes (like closing and opening toggles).
1512         Unfortunately we can't yet specify contain: content or contain: strict
1513         because the [-]/[+] toggles extend past the boundaries of the <details>
1514         https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
1515 details.rustdoc-toggle {
1516         contain: layout;
1517         position: relative;
1518 }
1519
1520 /* The hideme class is used on summary tags that contain a span with
1521         placeholder text shown only when the toggle is closed. For instance,
1522         "Expand description" or "Show methods". */
1523 details.rustdoc-toggle > summary.hideme {
1524         cursor: pointer;
1525 }
1526
1527 details.rustdoc-toggle > summary {
1528         list-style: none;
1529         /* focus outline is shown on `::before` instead of this */
1530         outline: none;
1531 }
1532 details.rustdoc-toggle > summary::-webkit-details-marker,
1533 details.rustdoc-toggle > summary::marker {
1534         display: none;
1535 }
1536
1537 details.rustdoc-toggle > summary.hideme > span {
1538         margin-left: 9px;
1539 }
1540
1541 details.rustdoc-toggle > summary::before {
1542         content: "";
1543         cursor: pointer;
1544         width: 16px;
1545         height: 16px;
1546         background-repeat: no-repeat;
1547         background-position: top left;
1548         display: inline-block;
1549         vertical-align: middle;
1550         opacity: .5;
1551 }
1552
1553 details.rustdoc-toggle > summary.hideme > span,
1554 .more-examples-toggle summary, .more-examples-toggle .hide-more {
1555         color: var(--toggles-color);
1556 }
1557
1558 /* Screen readers see the text version at the end the line.
1559         Visual readers see the icon at the start of the line, but small and transparent. */
1560 details.rustdoc-toggle > summary::after {
1561         content: "Expand";
1562         overflow: hidden;
1563         width: 0;
1564         height: 0;
1565         position: absolute;
1566 }
1567
1568 details.rustdoc-toggle > summary.hideme::after {
1569         /* "hideme" toggles already have a description when they're contracted */
1570         content: "";
1571 }
1572
1573 details.rustdoc-toggle > summary:focus::before,
1574 details.rustdoc-toggle > summary:hover::before {
1575         opacity: 1;
1576 }
1577
1578 details.rustdoc-toggle > summary:focus-visible::before {
1579         /* The SVG is black, and gets turned white using a filter in the dark themes.
1580            Do the same with the outline.
1581            The dotted 1px style is copied from Firefox's focus ring style.
1582         */
1583         outline: 1px dotted #000;
1584         outline-offset: 1px;
1585 }
1586
1587 details.rustdoc-toggle.top-doc > summary,
1588 details.rustdoc-toggle.top-doc > summary::before,
1589 details.rustdoc-toggle.non-exhaustive > summary,
1590 details.rustdoc-toggle.non-exhaustive > summary::before {
1591         font-size: 1rem;
1592 }
1593
1594 details.non-exhaustive {
1595         margin-bottom: 8px;
1596 }
1597
1598 details.rustdoc-toggle > summary.hideme::before {
1599         position: relative;
1600 }
1601
1602 details.rustdoc-toggle > summary:not(.hideme)::before {
1603         position: absolute;
1604         left: -24px;
1605         top: 4px;
1606 }
1607
1608 .impl-items > details.rustdoc-toggle > summary:not(.hideme)::before {
1609         position: absolute;
1610         left: -24px;
1611 }
1612
1613 /* When a "hideme" summary is open and the "Expand description" or "Show
1614         methods" text is hidden, we want the [-] toggle that remains to not
1615         affect the layout of the items to its right. To do that, we use
1616         absolute positioning. Note that we also set position: relative
1617         on the parent <details> to make this work properly. */
1618 details.rustdoc-toggle[open] > summary.hideme {
1619         position: absolute;
1620 }
1621
1622 details.rustdoc-toggle[open] > summary.hideme > span {
1623         display: none;
1624 }
1625
1626 details.rustdoc-toggle[open] > summary::before,
1627 details.rustdoc-toggle[open] > summary.hideme::before {
1628         background-image: /* AUTOREPLACE: */url("toggle-minus.svg");
1629 }
1630
1631 details.rustdoc-toggle > summary::before {
1632         background-image: /* AUTOREPLACE: */url("toggle-plus.svg");
1633 }
1634
1635 details.rustdoc-toggle[open] > summary::before,
1636 details.rustdoc-toggle[open] > summary.hideme::before {
1637         width: 16px;
1638         height: 16px;
1639         background-repeat: no-repeat;
1640         background-position: top left;
1641         display: inline-block;
1642         content: "";
1643 }
1644
1645 details.rustdoc-toggle[open] > summary::after,
1646 details.rustdoc-toggle[open] > summary.hideme::after {
1647         content: "Collapse";
1648 }
1649
1650 /* This is needed in docblocks to have the "▶" element to be on the same line. */
1651 .docblock summary > * {
1652         display: inline-block;
1653 }
1654
1655 /* In case there is no documentation before a code block, we need to add some margin at the top
1656 to prevent an overlay between the "collapse toggle" and the information tooltip.
1657 However, it's not needed with smaller screen width because the doc/code block is always put
1658 "one line" below. */
1659 .docblock > .example-wrap:first-child .tooltip {
1660         margin-top: 16px;
1661 }
1662
1663 /* Media Queries */
1664
1665 /*
1666 WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
1667 If you update this line, then you also need to update the line with the same warning
1668 in storage.js
1669 */
1670 @media (max-width: 700px) {
1671         /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
1672            or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
1673            by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size.
1674         */
1675         *[id] {
1676                 scroll-margin-top: 45px;
1677         }
1678
1679         .rustdoc {
1680                 padding-top: 0px;
1681                 /* Sidebar should overlay main content, rather than pushing main content to the right.
1682                    Turn off `display: flex` on the body element. */
1683                 display: block;
1684         }
1685
1686         main {
1687                 padding-left: 15px;
1688                 padding-top: 0px;
1689         }
1690
1691         .main-heading {
1692                 flex-direction: column;
1693         }
1694
1695         .out-of-band {
1696                 text-align: left;
1697                 margin-left: initial;
1698                 padding: initial;
1699         }
1700
1701         .out-of-band .since::before {
1702                 content: "Since ";
1703         }
1704
1705         #copy-path {
1706                 display: none;
1707         }
1708
1709         /* Hide the logo and item name from the sidebar. Those are displayed
1710            in the mobile-topbar instead. */
1711         .sidebar .sidebar-logo,
1712         .sidebar .location {
1713                 display: none;
1714         }
1715
1716         .sidebar {
1717                 position: fixed;
1718                 top: 45px;
1719                 /* Hide the sidebar offscreen while not in use. Doing this instead of display: none means
1720                    the sidebar stays visible for screen readers, which is useful for navigation. */
1721                 left: -1000px;
1722                 margin: 0;
1723                 padding: 0;
1724                 z-index: 11;
1725                 /* Reduce height slightly to account for mobile topbar. */
1726                 height: calc(100vh - 45px);
1727         }
1728
1729         /* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
1730            so don't bump down the main content or the sidebar. */
1731         .source main,
1732         .rustdoc.source .sidebar {
1733                 top: 0;
1734                 padding: 0;
1735                 height: 100vh;
1736                 border: 0;
1737         }
1738
1739         .sidebar.shown,
1740         .source-sidebar-expanded .source .sidebar,
1741         .sidebar:focus-within {
1742                 left: 0;
1743         }
1744
1745         .rustdoc.source > .sidebar {
1746                 width: 0;
1747         }
1748
1749         .mobile-topbar h2 {
1750                 padding-bottom: 0;
1751                 margin: auto 0.5em auto auto;
1752                 overflow: hidden;
1753                 /* Rare exception to specifying font sizes in rem. Since the topbar
1754                    height is specified in pixels, this also has to be specified in
1755                    pixels to avoid overflowing the topbar when the user sets a bigger
1756                    font size. */
1757                 font-size: 24px;
1758         }
1759
1760         .mobile-topbar h2 a {
1761                 display: block;
1762                 text-overflow: ellipsis;
1763                 overflow: hidden;
1764                 white-space: nowrap;
1765         }
1766
1767         .mobile-topbar .logo-container {
1768                 max-height: 45px;
1769         }
1770
1771         .mobile-topbar .logo-container > img {
1772                 max-width: 35px;
1773                 max-height: 35px;
1774                 margin: 5px 0 5px 20px;
1775         }
1776
1777         .mobile-topbar {
1778                 display: flex;
1779                 flex-direction: row;
1780                 position: sticky;
1781                 z-index: 10;
1782                 font-size: 2rem;
1783                 height: 45px;
1784                 width: 100%;
1785                 left: 0;
1786                 top: 0;
1787         }
1788
1789         .sidebar-menu-toggle {
1790                 width: 45px;
1791                 /* Rare exception to specifying font sizes in rem. Since this is acting
1792                    as an icon, it's okay to specify its sizes in pixels. */
1793                 font-size: 32px;
1794                 border: none;
1795                 color: var(--main-color);
1796         }
1797
1798         .sidebar-elems {
1799                 margin-top: 1em;
1800                 background-color: var(--sidebar-background-color);
1801         }
1802
1803         .content {
1804                 margin-left: 0px;
1805         }
1806
1807         .anchor {
1808                 display: none !important;
1809         }
1810
1811         #titles > button > div.count {
1812                 display: block;
1813         }
1814
1815         /* Because of ios, we need to actually have a full height sidebar title so the
1816          * actual sidebar can show up. But then we need to make it transparent so we don't
1817          * hide content. The filler just allows to create the background for the sidebar
1818          * title. But because of the absolute position, I had to lower the z-index.
1819          */
1820         #sidebar-filler {
1821                 position: fixed;
1822                 left: 45px;
1823                 width: calc(100% - 45px);
1824                 top: 0;
1825                 height: 45px;
1826                 z-index: -1;
1827                 border-bottom: 1px solid;
1828         }
1829
1830         #main-content > details.rustdoc-toggle > summary::before,
1831         #main-content > div > details.rustdoc-toggle > summary::before {
1832                 left: -11px;
1833         }
1834
1835         #sidebar-toggle {
1836                 position: fixed;
1837                 left: 1px;
1838                 top: 100px;
1839                 width: 30px;
1840                 font-size: 1.5rem;
1841                 text-align: center;
1842                 padding: 0;
1843                 z-index: 10;
1844                 border-top-right-radius: 3px;
1845                 border-bottom-right-radius: 3px;
1846                 cursor: pointer;
1847                 border: 1px solid;
1848                 border-left: 0;
1849         }
1850
1851         .source-sidebar-expanded #sidebar-toggle {
1852                 left: unset;
1853                 top: unset;
1854                 width: unset;
1855                 border-top-right-radius: unset;
1856                 border-bottom-right-radius: unset;
1857                 position: sticky;
1858                 border: 0;
1859                 border-bottom: 1px solid;
1860         }
1861
1862         .notable-traits .notable-traits-tooltiptext {
1863                 left: 0;
1864                 top: 100%;
1865         }
1866
1867         /* We don't display the help button on mobile devices. */
1868         #help-button {
1869                 display: none;
1870         }
1871
1872         /* Display an alternating layout on tablets and phones */
1873         .item-table {
1874                 display: block;
1875         }
1876         .item-row {
1877                 display: flex;
1878                 flex-flow: column wrap;
1879         }
1880         .item-left, .item-right {
1881                 width: 100%;
1882         }
1883
1884         /* Display an alternating layout on tablets and phones */
1885         .search-results > a {
1886                 border-bottom: 1px solid #aaa9;
1887                 padding: 5px 0px;
1888         }
1889         .search-results .result-name, .search-results div.desc {
1890                 width: 100%;
1891         }
1892         .search-results div.desc, .item-right {
1893                 padding-left: 2em;
1894         }
1895
1896         .source-sidebar-expanded .source .sidebar {
1897                 max-width: 100vw;
1898                 width: 100vw;
1899         }
1900
1901         /* Position of the "[-]" element. */
1902         details.rustdoc-toggle:not(.top-doc) > summary {
1903                 margin-left: 10px;
1904         }
1905         .impl-items > details.rustdoc-toggle > summary:not(.hideme)::before,
1906         #main-content > details.rustdoc-toggle:not(.top-doc) > summary::before,
1907         #main-content > div > details.rustdoc-toggle > summary::before {
1908                 left: -11px;
1909         }
1910
1911         /* Align summary-nested and unnested item-info gizmos. */
1912         .impl-items > .item-info {
1913                 margin-left: 34px;
1914         }
1915
1916         .source nav.sub {
1917                 margin: 0;
1918                 padding: 8px;
1919         }
1920 }
1921
1922 @media print {
1923         nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path,
1924         details.rustdoc-toggle[open] > summary::before, details.rustdoc-toggle > summary::before,
1925         details.rustdoc-toggle.top-doc > summary {
1926                 display: none;
1927         }
1928
1929         .docblock {
1930                 margin-left: 0;
1931         }
1932
1933         main {
1934                 padding: 10px;
1935         }
1936 }
1937
1938 @media (max-width: 464px) {
1939         .docblock {
1940                 margin-left: 12px;
1941         }
1942
1943         .docblock code {
1944                 overflow-wrap: break-word;
1945                 overflow-wrap: anywhere;
1946         }
1947
1948         nav.sub {
1949                 flex-direction: column;
1950         }
1951
1952         .search-form {
1953                 align-self: stretch;
1954         }
1955
1956         .sub-logo-container > img {
1957                 height: 35px;
1958                 width: 35px;
1959         }
1960
1961         #sidebar-toggle {
1962                 top: 10px;
1963         }
1964         .source-sidebar-expanded #sidebar-toggle {
1965                 top: unset;
1966         }
1967 }
1968
1969 .implementors-toggle > summary,
1970 .impl,
1971 #implementors-list > .docblock,
1972 .impl-items > section,
1973 .impl-items > .rustdoc-toggle > summary,
1974 .methods > section,
1975 .methods > .rustdoc-toggle > summary
1976 {
1977         margin-bottom: 0.75em;
1978 }
1979
1980 .impl-items > .rustdoc-toggle[open]:not(:last-child),
1981 .methods > .rustdoc-toggle[open]:not(:last-child),
1982 .implementors-toggle[open]:not(:last-child) {
1983         margin-bottom: 2em;
1984 }
1985
1986 #trait-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1987 #synthetic-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1988 #blanket-implementations-list .impl-items > .rustdoc-toggle:not(:last-child) {
1989         margin-bottom: 1em;
1990 }
1991
1992 /* Begin: styles for --scrape-examples feature */
1993
1994 .scraped-example-list .scrape-help {
1995         margin-left: 10px;
1996         padding: 0 4px;
1997         font-weight: normal;
1998         font-size: 12px;
1999         position: relative;
2000         bottom: 1px;
2001         background: transparent;
2002         border-width: 1px;
2003         border-style: solid;
2004         border-radius: 50px;
2005 }
2006
2007 .scraped-example .code-wrapper {
2008         position: relative;
2009         display: flex;
2010         flex-direction: row;
2011         flex-wrap: wrap;
2012         width: 100%;
2013 }
2014
2015 .scraped-example:not(.expanded) .code-wrapper {
2016         max-height: 240px;
2017 }
2018
2019 .scraped-example:not(.expanded) .code-wrapper pre {
2020         overflow-y: hidden;
2021         max-height: 240px;
2022         padding-bottom: 0;
2023 }
2024
2025 .scraped-example .code-wrapper .next,
2026 .scraped-example .code-wrapper .prev,
2027 .scraped-example .code-wrapper .expand {
2028         position: absolute;
2029         top: 0.25em;
2030         z-index: 1;
2031         cursor: pointer;
2032 }
2033 .scraped-example .code-wrapper .prev {
2034         right: 2.25em;
2035 }
2036 .scraped-example .code-wrapper .next {
2037         right: 1.25em;
2038 }
2039 .scraped-example .code-wrapper .expand {
2040         right: 0.25em;
2041 }
2042
2043 .scraped-example:not(.expanded) .code-wrapper:before,
2044 .scraped-example:not(.expanded) .code-wrapper:after {
2045         content: " ";
2046         width: 100%;
2047         height: 5px;
2048         position: absolute;
2049         z-index: 1;
2050 }
2051 .scraped-example:not(.expanded) .code-wrapper:before {
2052         top: 0;
2053 }
2054 .scraped-example:not(.expanded) .code-wrapper:after {
2055         bottom: 0;
2056 }
2057
2058 .scraped-example .code-wrapper .src-line-numbers {
2059         margin: 0;
2060         padding: 14px 0;
2061 }
2062
2063 .scraped-example .code-wrapper .src-line-numbers span {
2064         padding: 0 14px;
2065 }
2066
2067 .scraped-example .code-wrapper .example-wrap {
2068         flex: 1;
2069         overflow-x: auto;
2070         overflow-y: hidden;
2071         margin-bottom: 0;
2072 }
2073
2074 .scraped-example:not(.expanded) .code-wrapper .example-wrap {
2075         overflow-x: hidden;
2076 }
2077
2078 .scraped-example .code-wrapper .example-wrap pre.rust {
2079         overflow-x: inherit;
2080         width: inherit;
2081         overflow-y: hidden;
2082 }
2083
2084
2085 .more-examples-toggle {
2086         max-width: calc(100% + 25px);
2087         margin-top: 10px;
2088         margin-left: -25px;
2089 }
2090
2091 .more-examples-toggle .hide-more {
2092         margin-left: 25px;
2093         margin-bottom: 5px;
2094         cursor: pointer;
2095 }
2096
2097 .more-scraped-examples {
2098         margin-left: 5px;
2099         display: flex;
2100         flex-direction: row;
2101 }
2102
2103 .more-scraped-examples-inner {
2104         /* 20px is width of toggle-line + toggle-line-inner */
2105         width: calc(100% - 20px);
2106 }
2107
2108 .toggle-line {
2109         align-self: stretch;
2110         margin-right: 10px;
2111         margin-top: 5px;
2112         padding: 0 4px;
2113         cursor: pointer;
2114 }
2115
2116 .toggle-line-inner {
2117         min-width: 2px;
2118         height: 100%;
2119 }
2120
2121 .more-scraped-examples .scraped-example {
2122         margin-bottom: 20px;
2123 }
2124
2125 .more-scraped-examples .scraped-example:last-child {
2126         margin-bottom: 0;
2127 }
2128
2129 .example-links a {
2130         margin-top: 20px;
2131 }
2132
2133 .example-links ul {
2134         margin-bottom: 0;
2135 }
2136
2137 /* End: styles for --scrape-examples feature */