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