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         margin-top: 7px;
 906         border-radius: 3px;
 907         border: 1px solid var(--border-color);
 908         background-color: var(--main-background-color);
 909         color: var(--main-color);
 910         --popover-arrow-offset: 11px;
 911 }
 912
 913 /* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
 914 .popover::before {
 915         content: '';
 916         position: absolute;
 917         right: var(--popover-arrow-offset);
 918         border: solid var(--border-color);
 919         border-width: 1px 1px 0 0;
 920         background-color: var(--main-background-color);
 921         padding: 4px;
 922         transform: rotate(-45deg);
 923         top: -5px;
 924 }
 925
 926 /* use larger max-width for help popover, but not for help.html */
 927 #help.popover {
 928         max-width: 600px;
 929         --popover-arrow-offset: 48px;
 930 }
 931
 932 #help dt {
 933         float: left;
 934         clear: left;
 935         margin-right: 0.5rem;
 936 }
 937 #help span.top, #help span.bottom {
 938         text-align: center;
 939         display: block;
 940         font-size: 1.125rem;
 941 }
 942 #help span.top {
 943         margin: 10px 0;
 944         border-bottom: 1px solid var(--border-color);
 945         padding-bottom: 4px;
 946         margin-bottom: 6px;
 947 }
 948 #help span.bottom {
 949         clear: both;
 950         border-top: 1px solid var(--border-color);
 951 }
 952 .side-by-side > div {
 953         width: 50%;
 954         float: left;
 955         padding: 0 20px 20px 17px;
 956 }
 957
 958 .item-info .stab {
 959         /* This min-height is needed to unify the height of the stab elements because some of them
 960            have emojis.
 961         */
 962         min-height: 36px;
 963         display: flex;
 964         padding: 3px;
 965         margin-bottom: 5px;
 966 }
 967 .item-left .stab {
 968         margin-left: 0.3125em;
 969 }
 970 .stab {
 971         padding: 0 2px;
 972         font-size: 0.875rem;
 973         font-weight: normal;
 974         color: var(--main-color);
 975         background-color: var(--stab-background-color);
 976         width: fit-content;
 977         align-items: center;
 978         white-space: pre-wrap;
 979         border-radius: 3px;
 980         display: inline-flex;
 981         vertical-align: text-bottom;
 982 }
 983
 984 .stab.portability > code {
 985         background: none;
 986         color: var(--stab-code-color);
 987 }
 988
 989 .stab .emoji {
 990         font-size: 1.25rem;
 991         margin-right: 0.3rem;
 992 }
 993
 994 /* Black one-pixel outline around emoji shapes */
 995 .emoji {
 996         text-shadow:
 997                 1px 0 0 black,
 998                 -1px 0 0 black,
 999                 0  1px 0 black,
1000                 0 -1px 0 black;
1001 }
1002
1003 .module-item.unstable,
1004 .import-item.unstable {
1005         opacity: 0.65;
1006 }
1007
1008 .since {
1009         font-weight: normal;
1010         font-size: initial;
1011 }
1012
1013 .rightside {
1014         padding-left: 12px;
1015         float: right;
1016 }
1017
1018 .rightside:not(a),
1019 .out-of-band {
1020         color: var(--right-side-color);
1021 }
1022
1023 pre.rust {
1024         tab-size: 4;
1025         -moz-tab-size: 4;
1026 }
1027
1028 /* Code highlighting */
1029 pre.rust .kw {
1030         color: var(--code-highlight-kw-color);
1031 }
1032 pre.rust .kw-2 {
1033         color: var(--code-highlight-kw-2-color);
1034 }
1035 pre.rust .lifetime {
1036         color: var(--code-highlight-lifetime-color);
1037 }
1038 pre.rust .prelude-ty {
1039         color: var(--code-highlight-prelude-color);
1040 }
1041 pre.rust .prelude-val {
1042         color: var(--code-highlight-prelude-val-color);
1043 }
1044 pre.rust .string {
1045         color: var(--code-highlight-string-color);
1046 }
1047 pre.rust .number {
1048         color: var(--code-highlight-number-color);
1049 }
1050 pre.rust .bool-val {
1051         color: var(--code-highlight-literal-color);
1052 }
1053 pre.rust .self {
1054         color: var(--code-highlight-self-color);
1055 }
1056 pre.rust .attr {
1057         color: var(--code-highlight-attribute-color);
1058 }
1059 pre.rust .macro,
1060 pre.rust .macro-nonterminal {
1061         color: var(--code-highlight-macro-color);
1062 }
1063 pre.rust .question-mark {
1064         font-weight: bold;
1065         color: var(--code-highlight-question-mark-color);
1066 }
1067 pre.rust .comment {
1068         color: var(--code-highlight-comment-color);
1069 }
1070 pre.rust .doccomment {
1071         color: var(--code-highlight-doc-comment-color);
1072 }
1073
1074 .rustdoc.source .example-wrap pre.rust a {
1075         background: var(--codeblock-link-background);
1076 }
1077
1078 .example-wrap.compile_fail,
1079 .example-wrap.should_panic {
1080         border-left: 2px solid var(--codeblock-error-color);
1081 }
1082
1083 .ignore.example-wrap {
1084         border-left: 2px solid var(--codeblock-ignore-color);
1085 }
1086
1087 .example-wrap.compile_fail:hover,
1088 .example-wrap.should_panic:hover {
1089         border-left: 2px solid var(--codeblock-error-hover-color);
1090 }
1091
1092 .example-wrap.ignore:hover {
1093         border-left: 2px solid var(--codeblock-ignore-hover-color);
1094 }
1095
1096 .example-wrap.compile_fail .tooltip,
1097 .example-wrap.should_panic .tooltip {
1098         color: var(--codeblock-error-color);
1099 }
1100
1101 .example-wrap.ignore .tooltip {
1102         color:  var(--codeblock-ignore-color);
1103 }
1104
1105 .example-wrap.compile_fail:hover .tooltip,
1106 .example-wrap.should_panic:hover .tooltip {
1107         color: var(--codeblock-error-hover-color);
1108 }
1109
1110 .example-wrap.ignore:hover .tooltip {
1111         color: var(--codeblock-ignore-hover-color);
1112 }
1113
1114 .example-wrap .tooltip {
1115         position: absolute;
1116         display: block;
1117         left: -25px;
1118         top: 5px;
1119 }
1120
1121 .example-wrap .tooltip::after {
1122         display: none;
1123         text-align: center;
1124         padding: 5px 3px 3px 3px;
1125         border-radius: 6px;
1126         margin-left: 5px;
1127         font-size: 1rem;
1128         border: 1px solid var(--border-color);
1129         position: absolute;
1130         width: max-content;
1131         top: -2px;
1132         z-index: 1;
1133         background-color: var(--tooltip-background-color);
1134         color: var(--tooltip-color);
1135 }
1136
1137 .example-wrap .tooltip::before {
1138         content: " ";
1139         position: absolute;
1140         top: 50%;
1141         left: 16px;
1142         margin-top: -5px;
1143         display: none;
1144         z-index: 1;
1145         border: 5px solid transparent;
1146         border-right-color: var(--tooltip-background-color);
1147 }
1148
1149 .example-wrap.ignore .tooltip::after {
1150         content: "This example is not tested";
1151 }
1152 .example-wrap.compile_fail .tooltip::after {
1153         content: "This example deliberately fails to compile";
1154 }
1155 .example-wrap.should_panic .tooltip::after {
1156         content: "This example panics";
1157 }
1158 .example-wrap.edition .tooltip::after {
1159         content: "This code runs with edition " attr(data-edition);
1160 }
1161
1162 .example-wrap .tooltip:hover::before, .example-wrap .tooltip:hover::after {
1163         display: inline;
1164 }
1165
1166 .example-wrap.compile_fail .tooltip,
1167 .example-wrap.should_panic .tooltip,
1168 .example-wrap.ignore .tooltip {
1169         font-weight: bold;
1170         font-size: 1.25rem;
1171 }
1172
1173 a.test-arrow {
1174         visibility: hidden;
1175         position: absolute;
1176         padding: 5px 10px 5px 10px;
1177         border-radius: 5px;
1178         font-size: 1.375rem;
1179         top: 5px;
1180         right: 5px;
1181         z-index: 1;
1182         color: var(--test-arrow-color);
1183         background-color: var(--test-arrow-background-color);
1184 }
1185 a.test-arrow:hover {
1186         color: var(--test-arrow-hover-color);
1187         background-color: var(--test-arrow-hover-background-color);
1188 }
1189 .example-wrap:hover .test-arrow {
1190         visibility: visible;
1191 }
1192
1193 .code-attribute {
1194         font-weight: 300;
1195         color: var(--code-attribute-color);
1196 }
1197
1198 .item-spacer {
1199         width: 100%;
1200         height: 12px;
1201 }
1202
1203 .out-of-band > span.since {
1204         font-size: 1.25rem;
1205 }
1206
1207 .sub-variant h4 {
1208         font-size: 1rem;
1209         font-weight: 400;
1210         margin-top: 0;
1211         margin-bottom: 0;
1212 }
1213
1214 .sub-variant {
1215         margin-left: 24px;
1216         margin-bottom: 40px;
1217 }
1218
1219 .sub-variant > .sub-variant-field {
1220         margin-left: 24px;
1221 }
1222
1223 :target {
1224         padding-right: 3px;
1225         background-color: var(--target-background-color);
1226         border-right: 3px solid var(--target-border-color);
1227 }
1228
1229 .notable-traits {
1230         color: inherit;
1231         margin-right: 15px;
1232         position: relative;
1233 }
1234
1235 /* placeholder thunk so that the mouse can easily travel from "(i)" to popover
1236         the resulting "hover tunnel" is a stepped triangle, approximating
1237         https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */
1238 .notable-traits:hover::after {
1239         position: absolute;
1240         top: calc(100% - 10px);
1241         left: -15px;
1242         right: -15px;
1243         height: 20px;
1244         content: "\00a0";
1245 }
1246
1247 .notable .docblock {
1248         margin: 0.25em 0.5em;
1249 }
1250
1251 .notable .docblock pre, .notable .docblock code {
1252         background: transparent;
1253         margin: 0;
1254         padding: 0;
1255         font-size: 1.25rem;
1256         white-space: pre-wrap;
1257 }
1258
1259 .search-failed {
1260         text-align: center;
1261         margin-top: 20px;
1262         display: none;
1263 }
1264
1265 .search-failed.active {
1266         display: block;
1267 }
1268
1269 .search-failed > ul {
1270         text-align: left;
1271         max-width: 570px;
1272         margin-left: auto;
1273         margin-right: auto;
1274 }
1275
1276 #titles {
1277         display: flex;
1278         flex-direction: row;
1279         gap: 1px;
1280         margin-bottom: 4px;
1281 }
1282
1283 #titles > button {
1284         text-align: center;
1285         font-size: 1.125rem;
1286         border: 0;
1287         border-top: 2px solid;
1288         flex: 1;
1289         line-height: 1.5;
1290         color: inherit;
1291 }
1292
1293 #titles > button > div.count {
1294         display: inline-block;
1295         font-size: 1rem;
1296 }
1297
1298 #sidebar-toggle {
1299         position: sticky;
1300         top: 0;
1301         left: 0;
1302         font-size: 1.25rem;
1303         border-bottom: 1px solid;
1304         display: flex;
1305         height: 40px;
1306         justify-content: stretch;
1307         align-items: stretch;
1308         z-index: 10;
1309 }
1310 #source-sidebar {
1311         width: 100%;
1312         overflow: auto;
1313 }
1314 #source-sidebar > .title {
1315         font-size: 1.5rem;
1316         text-align: center;
1317         border-bottom: 1px solid var(--border-color);
1318         margin-bottom: 6px;
1319 }
1320 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
1321 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
1322         background-color: var(--source-sidebar-background-hover);
1323 }
1324 #source-sidebar div.files > a.selected {
1325         background-color: var(--source-sidebar-background-selected);
1326 }
1327 #sidebar-toggle > button {
1328         font-size: inherit;
1329         font-weight: bold;
1330         background: none;
1331         color: inherit;
1332         text-align: center;
1333         border: none;
1334         outline: none;
1335         flex: 1 1;
1336         /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1337         -webkit-appearance: none;
1338         opacity: 1;
1339 }
1340 #settings-menu, #help-button {
1341         margin-left: 4px;
1342         display: flex;
1343 }
1344
1345 #settings-menu > a, #help-button > a, #copy-path {
1346         width: 33px;
1347 }
1348
1349 #settings-menu > a, #help-button > a {
1350         display: flex;
1351         align-items: center;
1352         justify-content: center;
1353         background-color: var(--button-background-color);
1354         border: 1px solid var(--border-color);
1355         border-radius: 2px;
1356         color: var(--settings-button-color);
1357         /* Rare exception to specifying font sizes in rem. Since this is acting
1358            as an icon, it's okay to specify their sizes in pixels. */
1359         font-size: 20px;
1360 }
1361
1362 #settings-menu > a:hover, #settings-menu > a:focus,
1363 #help-button > a:hover, #help-button > a:focus {
1364         border-color: var(--settings-button-border-focus);
1365 }
1366
1367 #copy-path {
1368         color: var(--copy-path-button-color);
1369         background: var(--main-background-color);
1370         height: 34px;
1371         margin-left: 10px;
1372         padding: 0;
1373         padding-left: 2px;
1374         border: 0;
1375 }
1376 #copy-path > img {
1377         filter: var(--copy-path-img-filter);
1378 }
1379 #copy-path:hover > img {
1380         filter: var(--copy-path-img-hover-filter);
1381 }
1382
1383 @keyframes rotating {
1384         from {
1385                 transform: rotate(0deg);
1386         }
1387         to {
1388                 transform: rotate(360deg);
1389         }
1390 }
1391 #settings-menu.rotate > a img {
1392         animation: rotating 2s linear infinite;
1393 }
1394
1395 kbd {
1396         display: inline-block;
1397         padding: 3px 5px;
1398         font: 15px monospace;
1399         line-height: 10px;
1400         vertical-align: middle;
1401         border: solid 1px var(--border-color);
1402         border-radius: 3px;
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 .implementors-toggle > .docblock,
1876 .impl-items > .rustdoc-toggle[open]:not(:last-child),
1877 .methods > .rustdoc-toggle[open]:not(:last-child),
1878 .implementors-toggle[open]:not(:last-child) {
1879         margin-bottom: 2em;
1880 }
1881
1882 #trait-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1883 #synthetic-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1884 #blanket-implementations-list .impl-items > .rustdoc-toggle:not(:last-child) {
1885         margin-bottom: 1em;
1886 }
1887
1888 /* Begin: styles for --scrape-examples feature */
1889
1890 .scraped-example-list .scrape-help {
1891         margin-left: 10px;
1892         padding: 0 4px;
1893         font-weight: normal;
1894         font-size: 12px;
1895         position: relative;
1896         bottom: 1px;
1897         border-width: 1px;
1898         border-style: solid;
1899         border-radius: 50px;
1900 }
1901
1902 .scraped-example {
1903         /* So .scraped-example-title can be positioned absolutely */
1904         position: relative;
1905 }
1906
1907 .scraped-example .code-wrapper {
1908         position: relative;
1909         display: flex;
1910         flex-direction: row;
1911         flex-wrap: wrap;
1912         width: 100%;
1913 }
1914
1915 .scraped-example:not(.expanded) .code-wrapper {
1916         /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number
1917          * of lines shown in the un-expanded example code viewer. This pre needs to have
1918          * a max-height equal to line-height * N. The line-height is currently 1.5em,
1919          * and we include additional 10px for padding. */
1920          max-height: calc(1.5em * 5 + 10px);
1921 }
1922
1923 .scraped-example:not(.expanded) .code-wrapper pre {
1924         overflow-y: hidden;
1925         padding-bottom: 0;
1926         /* See above comment, should be the same max-height. */
1927         max-height: calc(1.5em * 5 + 10px);
1928 }
1929
1930 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper,
1931 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre {
1932         /* See above comment, except this height is based on HIDDEN_MAX_LINES. */
1933         max-height: calc(1.5em * 10 + 10px);
1934 }
1935
1936 .scraped-example .code-wrapper .next,
1937 .scraped-example .code-wrapper .prev,
1938 .scraped-example .code-wrapper .expand {
1939         color: var(--main-color);
1940         position: absolute;
1941         top: 0.25em;
1942         z-index: 1;
1943         padding: 0;
1944         background: none;
1945         border: none;
1946         /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1947         -webkit-appearance: none;
1948         opacity: 1;
1949 }
1950 .scraped-example .code-wrapper .prev {
1951         right: 2.25em;
1952 }
1953 .scraped-example .code-wrapper .next {
1954         right: 1.25em;
1955 }
1956 .scraped-example .code-wrapper .expand {
1957         right: 0.25em;
1958 }
1959
1960 .scraped-example:not(.expanded) .code-wrapper:before,
1961 .scraped-example:not(.expanded) .code-wrapper:after {
1962         content: " ";
1963         width: 100%;
1964         height: 5px;
1965         position: absolute;
1966         z-index: 1;
1967 }
1968 .scraped-example:not(.expanded) .code-wrapper:before {
1969         top: 0;
1970 }
1971 .scraped-example:not(.expanded) .code-wrapper:after {
1972         bottom: 0;
1973 }
1974
1975 .scraped-example .code-wrapper .src-line-numbers {
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 */