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