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