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 .docblock {
1218         margin: 0.25em 0.5em;
1219 }
1220
1221 .notable .docblock pre, .notable .docblock code {
1222         background: transparent;
1223         margin: 0;
1224         padding: 0;
1225         font-size: 1.25rem;
1226         white-space: pre-wrap;
1227 }
1228
1229 .search-failed {
1230         text-align: center;
1231         margin-top: 20px;
1232         display: none;
1233 }
1234
1235 .search-failed.active {
1236         display: block;
1237 }
1238
1239 .search-failed > ul {
1240         text-align: left;
1241         max-width: 570px;
1242         margin-left: auto;
1243         margin-right: auto;
1244 }
1245
1246 #search-tabs {
1247         display: flex;
1248         flex-direction: row;
1249         gap: 1px;
1250         margin-bottom: 4px;
1251 }
1252
1253 #search-tabs button {
1254         text-align: center;
1255         font-size: 1.125rem;
1256         border: 0;
1257         border-top: 2px solid;
1258         flex: 1;
1259         line-height: 1.5;
1260         color: inherit;
1261 }
1262
1263 #search-tabs .count {
1264         font-size: 1rem;
1265         color: var(--search-tab-title-count-color);
1266 }
1267
1268 #src-sidebar-toggle {
1269         position: sticky;
1270         top: 0;
1271         left: 0;
1272         font-size: 1.25rem;
1273         border-bottom: 1px solid;
1274         display: flex;
1275         height: 40px;
1276         justify-content: stretch;
1277         align-items: stretch;
1278         z-index: 10;
1279 }
1280 #source-sidebar {
1281         width: 100%;
1282         overflow: auto;
1283 }
1284 #source-sidebar > .title {
1285         font-size: 1.5rem;
1286         text-align: center;
1287         border-bottom: 1px solid var(--border-color);
1288         margin-bottom: 6px;
1289 }
1290 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
1291 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
1292         background-color: var(--source-sidebar-background-hover);
1293 }
1294 #source-sidebar div.files > a.selected {
1295         background-color: var(--source-sidebar-background-selected);
1296 }
1297 #src-sidebar-toggle > button {
1298         font-size: inherit;
1299         font-weight: bold;
1300         background: none;
1301         color: inherit;
1302         text-align: center;
1303         border: none;
1304         outline: none;
1305         flex: 1 1;
1306         /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1307         -webkit-appearance: none;
1308         opacity: 1;
1309 }
1310
1311 #settings-menu, #help-button {
1312         margin-left: 4px;
1313         display: flex;
1314 }
1315 #settings-menu > a, #help-button > a {
1316         display: flex;
1317         align-items: center;
1318         justify-content: center;
1319         background-color: var(--button-background-color);
1320         border: 1px solid var(--border-color);
1321         border-radius: 2px;
1322         color: var(--settings-button-color);
1323         /* Rare exception to specifying font sizes in rem. Since this is acting
1324            as an icon, it's okay to specify their sizes in pixels. */
1325         font-size: 20px;
1326         width: 33px;
1327 }
1328
1329 #settings-menu > a:hover, #settings-menu > a:focus,
1330 #help-button > a:hover, #help-button > a:focus {
1331         border-color: var(--settings-button-border-focus);
1332 }
1333
1334 #copy-path {
1335         color: var(--copy-path-button-color);
1336         background: var(--main-background-color);
1337         height: 34px;
1338         margin-left: 10px;
1339         padding: 0;
1340         padding-left: 2px;
1341         border: 0;
1342         width: 33px;
1343 }
1344 #copy-path > img {
1345         filter: var(--copy-path-img-filter);
1346 }
1347 #copy-path:hover > img {
1348         filter: var(--copy-path-img-hover-filter);
1349 }
1350
1351 @keyframes rotating {
1352         from {
1353                 transform: rotate(0deg);
1354         }
1355         to {
1356                 transform: rotate(360deg);
1357         }
1358 }
1359 #settings-menu.rotate > a img {
1360         animation: rotating 2s linear infinite;
1361 }
1362
1363 kbd {
1364         display: inline-block;
1365         padding: 3px 5px;
1366         font: 15px monospace;
1367         line-height: 10px;
1368         vertical-align: middle;
1369         border: solid 1px var(--border-color);
1370         border-radius: 3px;
1371         color: var(--kbd-color);
1372         background-color: var(--kbd-background);
1373         box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color);
1374 }
1375
1376 ul.all-items > li {
1377         list-style: none;
1378 }
1379
1380 details.dir-entry {
1381         padding-left: 4px;
1382 }
1383
1384 details.dir-entry > summary {
1385         margin: 0 0 0 -4px;
1386         padding: 0 0 0 4px;
1387         cursor: pointer;
1388 }
1389
1390 details.dir-entry div.folders, details.dir-entry div.files {
1391         padding-left: 23px;
1392 }
1393
1394 details.dir-entry a {
1395         display: block;
1396 }
1397
1398 /* We use CSS containment on the details elements because most sizeable elements
1399         of the page are contained in one of these. This also makes re-rendering
1400         faster on document changes (like closing and opening toggles).
1401         Unfortunately we can't yet specify contain: content or contain: strict
1402         because the [-]/[+] toggles extend past the boundaries of the <details>
1403         https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
1404 details.toggle {
1405         contain: layout;
1406         position: relative;
1407 }
1408
1409 /* The hideme class is used on summary tags that contain a span with
1410         placeholder text shown only when the toggle is closed. For instance,
1411         "Expand description" or "Show methods". */
1412 details.toggle > summary.hideme {
1413         cursor: pointer;
1414         font-size: 1rem;
1415 }
1416
1417 details.toggle > summary {
1418         list-style: none;
1419         /* focus outline is shown on `::before` instead of this */
1420         outline: none;
1421 }
1422 details.toggle > summary::-webkit-details-marker,
1423 details.toggle > summary::marker {
1424         display: none;
1425 }
1426
1427 details.toggle > summary.hideme > span {
1428         margin-left: 9px;
1429 }
1430
1431 details.toggle > summary::before {
1432         background: url("toggle-plus-1092eb4930d581b0.svg") no-repeat top left;
1433         content: "";
1434         cursor: pointer;
1435         width: 16px;
1436         height: 16px;
1437         display: inline-block;
1438         vertical-align: middle;
1439         opacity: .5;
1440         filter: var(--toggle-filter);
1441 }
1442
1443 details.toggle > summary.hideme > span,
1444 .more-examples-toggle summary, .more-examples-toggle .hide-more {
1445         color: var(--toggles-color);
1446 }
1447
1448 /* Screen readers see the text version at the end the line.
1449         Visual readers see the icon at the start of the line, but small and transparent. */
1450 details.toggle > summary::after {
1451         content: "Expand";
1452         overflow: hidden;
1453         width: 0;
1454         height: 0;
1455         position: absolute;
1456 }
1457
1458 details.toggle > summary.hideme::after {
1459         /* "hideme" toggles already have a description when they're contracted */
1460         content: "";
1461 }
1462
1463 details.toggle > summary:focus::before,
1464 details.toggle > summary:hover::before {
1465         opacity: 1;
1466 }
1467
1468 details.toggle > summary:focus-visible::before {
1469         /* The SVG is black, and gets turned white using a filter in the dark themes.
1470            Do the same with the outline.
1471            The dotted 1px style is copied from Firefox's focus ring style.
1472         */
1473         outline: 1px dotted #000;
1474         outline-offset: 1px;
1475 }
1476
1477 details.non-exhaustive {
1478         margin-bottom: 8px;
1479 }
1480
1481 details.toggle > summary.hideme::before {
1482         position: relative;
1483 }
1484
1485 details.toggle > summary:not(.hideme)::before {
1486         position: absolute;
1487         left: -24px;
1488         top: 4px;
1489 }
1490
1491 .impl-items > details.toggle > summary:not(.hideme)::before {
1492         position: absolute;
1493         left: -24px;
1494 }
1495
1496 /* When a "hideme" summary is open and the "Expand description" or "Show
1497         methods" text is hidden, we want the [-] toggle that remains to not
1498         affect the layout of the items to its right. To do that, we use
1499         absolute positioning. Note that we also set position: relative
1500         on the parent <details> to make this work properly. */
1501 details.toggle[open] > summary.hideme {
1502         position: absolute;
1503 }
1504
1505 details.toggle[open] > summary.hideme > span {
1506         display: none;
1507 }
1508
1509 details.toggle[open] > summary::before {
1510         background: url("toggle-minus-31bbd6e4c77f5c96.svg") no-repeat top left;
1511 }
1512
1513 details.toggle[open] > summary::after {
1514         content: "Collapse";
1515 }
1516
1517 /* This is needed in docblocks to have the "▶" element to be on the same line. */
1518 .docblock summary > * {
1519         display: inline-block;
1520 }
1521
1522 /* In case there is no documentation before a code block, we need to add some margin at the top
1523 to prevent an overlay between the "collapse toggle" and the information tooltip.
1524 However, it's not needed with smaller screen width because the doc/code block is always put
1525 "one line" below. */
1526 .docblock > .example-wrap:first-child .tooltip {
1527         margin-top: 16px;
1528 }
1529
1530 /* Media Queries */
1531
1532 /*
1533 WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
1534 If you update this line, then you also need to update the line with the same warning
1535 in storage.js
1536 */
1537 @media (max-width: 700px) {
1538         /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
1539            or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
1540            by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size.
1541         */
1542         *[id] {
1543                 scroll-margin-top: 45px;
1544         }
1545
1546         .rustdoc {
1547                 /* Sidebar should overlay main content, rather than pushing main content to the right.
1548                    Turn off `display: flex` on the body element. */
1549                 display: block;
1550         }
1551
1552         main {
1553                 padding-left: 15px;
1554                 padding-top: 0px;
1555         }
1556
1557         .main-heading {
1558                 flex-direction: column;
1559         }
1560
1561         .out-of-band {
1562                 text-align: left;
1563                 margin-left: initial;
1564                 padding: initial;
1565         }
1566
1567         .out-of-band .since::before {
1568                 content: "Since ";
1569         }
1570
1571         /* Hide the logo and item name from the sidebar. Those are displayed
1572            in the mobile-topbar instead. */
1573         .sidebar .logo-container,
1574         .sidebar .location {
1575                 display: none;
1576         }
1577
1578         .sidebar {
1579                 position: fixed;
1580                 top: 45px;
1581                 /* Hide the sidebar offscreen while not in use. Doing this instead of display: none means
1582                    the sidebar stays visible for screen readers, which is useful for navigation. */
1583                 left: -1000px;
1584                 z-index: 11;
1585                 /* Reduce height slightly to account for mobile topbar. */
1586                 height: calc(100vh - 45px);
1587                 width: 200px;
1588         }
1589
1590         /* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
1591            so don't bump down the main content or the sidebar. */
1592         .source main,
1593         .rustdoc.source .sidebar {
1594                 top: 0;
1595                 padding: 0;
1596                 height: 100vh;
1597                 border: 0;
1598         }
1599
1600         .sidebar.shown,
1601         .source-sidebar-expanded .source .sidebar,
1602         .rustdoc:not(.source) .sidebar:focus-within {
1603                 left: 0;
1604         }
1605
1606         .mobile-topbar h2 {
1607                 padding-bottom: 0;
1608                 margin: auto 0.5em auto auto;
1609                 overflow: hidden;
1610                 /* Rare exception to specifying font sizes in rem. Since the topbar
1611                    height is specified in pixels, this also has to be specified in
1612                    pixels to avoid overflowing the topbar when the user sets a bigger
1613                    font size. */
1614                 font-size: 24px;
1615         }
1616
1617         .mobile-topbar h2 a {
1618                 display: block;
1619                 text-overflow: ellipsis;
1620                 overflow: hidden;
1621                 white-space: nowrap;
1622         }
1623
1624         .mobile-topbar .logo-container > img {
1625                 max-width: 35px;
1626                 max-height: 35px;
1627                 margin: 5px 0 5px 20px;
1628         }
1629
1630         .mobile-topbar {
1631                 display: flex;
1632                 flex-direction: row;
1633                 position: sticky;
1634                 z-index: 10;
1635                 font-size: 2rem;
1636                 height: 45px;
1637                 width: 100%;
1638                 left: 0;
1639                 top: 0;
1640         }
1641
1642         .sidebar-menu-toggle {
1643                 width: 45px;
1644                 /* Rare exception to specifying font sizes in rem. Since this is acting
1645                    as an icon, it's okay to specify its sizes in pixels. */
1646                 font-size: 32px;
1647                 border: none;
1648                 color: var(--main-color);
1649         }
1650
1651         .sidebar-elems {
1652                 margin-top: 1em;
1653         }
1654
1655         .anchor {
1656                 display: none !important;
1657         }
1658
1659         #search-tabs .count {
1660                 display: block;
1661         }
1662
1663         #main-content > details.toggle > summary::before,
1664         #main-content > div > details.toggle > summary::before {
1665                 left: -11px;
1666         }
1667
1668         #src-sidebar-toggle {
1669                 position: fixed;
1670                 left: 1px;
1671                 top: 100px;
1672                 width: 30px;
1673                 font-size: 1.5rem;
1674                 padding: 0;
1675                 z-index: 10;
1676                 border-top-right-radius: 3px;
1677                 border-bottom-right-radius: 3px;
1678                 border: 1px solid;
1679                 border-left: 0;
1680         }
1681
1682         .source-sidebar-expanded #src-sidebar-toggle {
1683                 left: unset;
1684                 top: unset;
1685                 width: unset;
1686                 border-top-right-radius: unset;
1687                 border-bottom-right-radius: unset;
1688                 position: sticky;
1689                 border: 0;
1690                 border-bottom: 1px solid;
1691         }
1692
1693         /* We don't display these buttons on mobile devices. */
1694         #copy-path, #help-button {
1695                 display: none;
1696         }
1697
1698         /* Display an alternating layout on tablets and phones */
1699         .item-table, .item-row, .item-left, .item-right,
1700         .search-results > a, .search-results > a > div {
1701                 display: block;
1702         }
1703
1704         /* Display an alternating layout on tablets and phones */
1705         .search-results > a {
1706                 padding: 5px 0px;
1707         }
1708         .search-results > a > div.desc, .item-right {
1709                 padding-left: 2em;
1710         }
1711
1712         .source-sidebar-expanded .source .sidebar {
1713                 max-width: 100vw;
1714                 width: 100vw;
1715         }
1716
1717         /* Position of the "[-]" element. */
1718         details.toggle:not(.top-doc) > summary {
1719                 margin-left: 10px;
1720         }
1721         .impl-items > details.toggle > summary:not(.hideme)::before,
1722         #main-content > details.toggle:not(.top-doc) > summary::before,
1723         #main-content > div > details.toggle > summary::before {
1724                 left: -11px;
1725         }
1726
1727         /* Align summary-nested and unnested item-info gizmos. */
1728         .impl-items > .item-info {
1729                 margin-left: 34px;
1730         }
1731
1732         .source nav.sub {
1733                 margin: 0;
1734                 padding: 8px;
1735         }
1736 }
1737
1738 /* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */
1739 @media (min-width: 701px) {
1740         /* Places file-link for a scraped example on top of the example to save space.
1741            We only do this on large screens so the file-link doesn't overlap too much
1742                  with the example's content. */
1743         .scraped-example-title {
1744                 position: absolute;
1745                 z-index: 10;
1746                 background: var(--main-background-color);
1747                 bottom: 8px;
1748                 right: 5px;
1749                 padding: 2px 4px;
1750                 box-shadow: 0 0 4px var(--main-background-color);
1751         }
1752 }
1753
1754 @media print {
1755         nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path,
1756         details.toggle[open] > summary::before, details.toggle > summary::before,
1757         details.toggle.top-doc > summary {
1758                 display: none;
1759         }
1760
1761         .docblock {
1762                 margin-left: 0;
1763         }
1764
1765         main {
1766                 padding: 10px;
1767         }
1768 }
1769
1770 @media (max-width: 464px) {
1771         .docblock {
1772                 margin-left: 12px;
1773         }
1774
1775         .docblock code {
1776                 overflow-wrap: break-word;
1777                 overflow-wrap: anywhere;
1778         }
1779
1780         nav.sub {
1781                 flex-direction: column;
1782         }
1783
1784         .search-form {
1785                 align-self: stretch;
1786         }
1787
1788         .sub-logo-container > img {
1789                 height: 35px;
1790                 width: 35px;
1791         }
1792 }
1793
1794 .variant,
1795 .implementors-toggle > summary,
1796 .impl,
1797 #implementors-list > .docblock,
1798 .impl-items > section,
1799 .impl-items > .toggle > summary,
1800 .methods > section,
1801 .methods > .toggle > summary
1802 {
1803         margin-bottom: 0.75em;
1804 }
1805
1806 .variants > .docblock,
1807 .implementors-toggle > .docblock,
1808 .impl-items > .toggle[open]:not(:last-child),
1809 .methods > .toggle[open]:not(:last-child),
1810 .implementors-toggle[open]:not(:last-child) {
1811         margin-bottom: 2em;
1812 }
1813
1814 #trait-implementations-list .impl-items > .toggle:not(:last-child),
1815 #synthetic-implementations-list .impl-items > .toggle:not(:last-child),
1816 #blanket-implementations-list .impl-items > .toggle:not(:last-child) {
1817         margin-bottom: 1em;
1818 }
1819
1820 /* Begin: styles for --scrape-examples feature */
1821
1822 .scraped-example-list .scrape-help {
1823         margin-left: 10px;
1824         padding: 0 4px;
1825         font-weight: normal;
1826         font-size: 12px;
1827         position: relative;
1828         bottom: 1px;
1829         border: 1px solid var(--scrape-example-help-border-color);
1830         border-radius: 50px;
1831         color: var(--scrape-example-help-color);
1832 }
1833 .scraped-example-list .scrape-help:hover {
1834         border-color: var(--scrape-example-help-hover-border-color);
1835         color: var(--scrape-example-help-hover-color);
1836 }
1837
1838 .scraped-example {
1839         /* So .scraped-example-title can be positioned absolutely */
1840         position: relative;
1841 }
1842
1843 .scraped-example .code-wrapper {
1844         position: relative;
1845         display: flex;
1846         flex-direction: row;
1847         flex-wrap: wrap;
1848         width: 100%;
1849 }
1850
1851 .scraped-example:not(.expanded) .code-wrapper {
1852         /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number
1853          * of lines shown in the un-expanded example code viewer. This pre needs to have
1854          * a max-height equal to line-height * N. The line-height is currently 1.5em,
1855          * and we include additional 10px for padding. */
1856          max-height: calc(1.5em * 5 + 10px);
1857 }
1858
1859 .scraped-example:not(.expanded) .code-wrapper pre {
1860         overflow-y: hidden;
1861         padding-bottom: 0;
1862         /* See above comment, should be the same max-height. */
1863         max-height: calc(1.5em * 5 + 10px);
1864 }
1865
1866 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper,
1867 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre {
1868         /* See above comment, except this height is based on HIDDEN_MAX_LINES. */
1869         max-height: calc(1.5em * 10 + 10px);
1870 }
1871
1872 .scraped-example .code-wrapper .next,
1873 .scraped-example .code-wrapper .prev,
1874 .scraped-example .code-wrapper .expand {
1875         color: var(--main-color);
1876         position: absolute;
1877         top: 0.25em;
1878         z-index: 1;
1879         padding: 0;
1880         background: none;
1881         border: none;
1882         /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1883         -webkit-appearance: none;
1884         opacity: 1;
1885 }
1886 .scraped-example .code-wrapper .prev {
1887         right: 2.25em;
1888 }
1889 .scraped-example .code-wrapper .next {
1890         right: 1.25em;
1891 }
1892 .scraped-example .code-wrapper .expand {
1893         right: 0.25em;
1894 }
1895
1896 .scraped-example:not(.expanded) .code-wrapper:before,
1897 .scraped-example:not(.expanded) .code-wrapper:after {
1898         content: " ";
1899         width: 100%;
1900         height: 5px;
1901         position: absolute;
1902         z-index: 1;
1903 }
1904 .scraped-example:not(.expanded) .code-wrapper:before {
1905         top: 0;
1906 }
1907 .scraped-example:not(.expanded) .code-wrapper:after {
1908         bottom: 0;
1909 }
1910
1911 .scraped-example .code-wrapper .example-wrap {
1912         width: 100%;
1913         overflow-y: hidden;
1914         margin-bottom: 0;
1915 }
1916
1917 .scraped-example:not(.expanded) .code-wrapper .example-wrap {
1918         overflow-x: hidden;
1919 }
1920
1921 .scraped-example .example-wrap .rust span.highlight {
1922         background: var(--scrape-example-code-line-highlight);
1923 }
1924 .scraped-example .example-wrap .rust span.highlight.focus {
1925         background: var(--scrape-example-code-line-highlight-focus);
1926 }
1927
1928 .more-examples-toggle {
1929         max-width: calc(100% + 25px);
1930         margin-top: 10px;
1931         margin-left: -25px;
1932 }
1933
1934 .more-examples-toggle .hide-more {
1935         margin-left: 25px;
1936         cursor: pointer;
1937 }
1938
1939 .more-scraped-examples {
1940         margin-left: 25px;
1941         position: relative;
1942 }
1943
1944 .toggle-line {
1945         position: absolute;
1946         top: 5px;
1947         bottom: 0;
1948         right: calc(100% + 10px);
1949         padding: 0 4px;
1950         cursor: pointer;
1951 }
1952
1953 .toggle-line-inner {
1954         min-width: 2px;
1955         height: 100%;
1956         background: var(--scrape-example-toggle-line-background);
1957 }
1958
1959 .toggle-line:hover .toggle-line-inner {
1960         background: var(--scrape-example-toggle-line-hover-background);
1961 }
1962
1963 .more-scraped-examples .scraped-example, .example-links {
1964         margin-top: 20px;
1965 }
1966
1967 .more-scraped-examples .scraped-example:first-child {
1968         margin-top: 5px;
1969 }
1970
1971 .example-links ul {
1972         margin-bottom: 0;
1973 }
1974
1975 /* End: styles for --scrape-examples feature */