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