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

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