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