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