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