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