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