src/librustdoc/html/static/css/rustdoc.css

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