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