1 /* See FiraSans-LICENSE.txt for the Fira Sans license. */
3 font-family: 'Fira Sans';
6 src: local('Fira Sans'),
7 url("FiraSans-Regular-018c141bf0843ffd.woff2") format("woff2");
11 font-family: 'Fira Sans';
14 src: local('Fira Sans Medium'),
15 url("FiraSans-Medium-8f9a781e4970d388.woff2") format("woff2");
19 /* See SourceSerif4-LICENSE.md for the Source Serif 4 license. */
21 font-family: 'Source Serif 4';
24 src: local('Source Serif 4'),
25 url("SourceSerif4-Regular-1f7d512b176f0f72.ttf.woff2") format("woff2");
29 font-family: 'Source Serif 4';
32 src: local('Source Serif 4 Italic'),
33 url("SourceSerif4-It-d034fe4ef9d0fa00.ttf.woff2") format("woff2");
37 font-family: 'Source Serif 4';
40 src: local('Source Serif 4 Bold'),
41 url("SourceSerif4-Bold-124a1ca42af929b6.ttf.woff2") format("woff2");
45 /* See SourceCodePro-LICENSE.txt for the Source Code Pro license. */
47 font-family: 'Source Code Pro';
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");
56 font-family: 'Source Code Pro';
59 src: url("SourceCodePro-It-1cc31594bf4f1f79.ttf.woff2") format("woff2");
63 font-family: 'Source Code Pro';
66 src: url("SourceCodePro-Semibold-d899c5a5c4aeb14a.ttf.woff2") format("woff2");
70 /* Avoid using legacy CJK serif fonts in Windows like Batang. */
72 font-family: 'NanumBarunGothic';
73 src: url("NanumBarunGothic-0f09457c7a19b7c6.ttf.woff2") format("woff2");
75 unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
79 -webkit-box-sizing: border-box;
80 -moz-box-sizing: border-box;
81 box-sizing: border-box;
84 /* This part handles the "default" theme being used depending on the system one. */
88 @media (prefers-color-scheme: light) {
93 @media (prefers-color-scheme: dark) {
99 /* General structure and fonts */
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;
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;
114 -webkit-font-feature-settings: "kern", "liga";
115 -moz-font-feature-settings: "kern", "liga";
116 font-feature-settings: "kern", "liga";
118 background-color: var(--main-background-color);
119 color: var(--main-color);
123 font-size: 1.5rem; /* 24px */
126 font-size: 1.375rem; /* 22px */
129 font-size: 1.25rem; /* 20px */
131 h1, h2, h3, h4, h5, h6 {
135 margin: 25px 0 15px 0;
138 .docblock h3, .docblock h4, h5, h6 {
139 margin: 15px 0 5px 0;
141 .docblock > h2:first-child,
142 .docblock > h3:first-child,
143 .docblock > h4:first-child,
144 .docblock > h5:first-child,
145 .docblock > h6:first-child {
152 /* We use overflow-wrap: break-word for Safari, which doesn't recognize
153 `anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */
154 overflow-wrap: break-word;
155 /* Then override it with `anywhere`, which is required to make non-Safari browsers break
156 more aggressively when we want them to. */
157 overflow-wrap: anywhere;
165 /* The only headings that get underlines are:
166 Markdown-generated headings within the top-doc
167 Rustdoc-generated h2 section headings (e.g. "Implementations", "Required Methods", etc)
168 Underlines elsewhere in the documentation break up visual flow and tend to invert
169 section hierarchies. */
171 .top-doc .docblock > h3,
172 .top-doc .docblock > h4 {
173 border-bottom: 1px solid var(--headings-border-bottom-color);
176 font-size: 1.125rem; /* 18px */
188 h1, h2, h3, h4, h5, h6,
192 .search-results .result-name,
199 .scraped-example-list,
200 /* This selector is for the items listed in the "all items" page. */
202 font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
207 .small-section-header a,
216 .result-name .primitive > i, .result-name .keyword > i {
217 color: var(--main-color);
220 .content span.enum, .content a.enum,
221 .content span.struct, .content a.struct,
222 .content span.union, .content a.union,
223 .content span.primitive, .content a.primitive,
224 .content span.type, .content a.type,
225 .content span.foreigntype, .content a.foreigntype {
226 color: var(--type-link-color);
229 .content span.trait, .content a.trait,
230 .content span.traitalias, .content a.traitalias {
231 color: var(--trait-link-color);
234 .content span.associatedtype, .content a.associatedtype,
235 .content span.constant, .content a.constant,
236 .content span.static, .content a.static {
237 color: var(--assoc-item-link-color);
240 .content span.fn, .content a.fn,
241 .content span.method, .content a.method,
242 .content span.tymethod, .content a.tymethod {
243 color: var(--function-link-color);
246 .content span.attr, .content a.attr,
247 .content span.derive, .content a.derive,
248 .content span.macro, .content a.macro {
249 color: var(--macro-link-color);
252 .content span.mod, .content a.mod {
253 color: var(--mod-link-color);
256 .content span.keyword, .content a.keyword {
257 color: var(--keyword-link-color);
261 color: var(--link-color);
267 ul ul, ol ul, ul ol, ol ol {
268 margin-bottom: .625em;
272 /* Paragraph spacing at least 1.5 times line spacing per Web Content Accessibility Guidelines.
273 Line-height is 1.5rem, so line spacing is .5rem; .75em is 1.5 times that.
274 https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */
277 /* For the last child of a div, the margin will be taken care of
278 by the margin-top of the next item. */
283 /* Fix some style changes due to normalize.css 8 */
286 /* Buttons on Safari have different default padding than other platforms. Make them the same. */
288 /* Opinionated tweak: use pointer cursor as clickability signifier. */
292 /* end tweaks for normalize.css 8 */
294 button#toggle-all-docs {
298 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
299 -webkit-appearance: none;
312 padding: 10px 15px 40px 45px;
313 min-width: 0; /* avoid growing beyond the size limit */
325 .source .width-limiter {
329 details:not(.rustdoc-toggle) summary {
333 code, pre, a.test-arrow, .code-header {
334 font-family: "Source Code Pro", monospace;
336 .docblock code, .docblock-short code {
340 .docblock pre code, .docblock-short pre code {
350 .source .content pre {
362 .sub-logo-container, .logo-container {
363 /* zero text boxes so that computed line height = image height exactly */
367 .sub-logo-container > img {
374 filter: var(--rust-logo-filter);
377 .sidebar, .mobile-topbar, .sidebar-menu-toggle {
378 background-color: var(--sidebar-background-color);
391 .rustdoc.source .sidebar {
393 border-right: 1px solid;
395 /* The sidebar is by default hidden */
399 .source .sidebar, #sidebar-toggle, #source-sidebar {
400 background-color: var(--sidebar-background-color);
403 #sidebar-toggle > button:hover, #sidebar-toggle > button:focus {
404 background-color: var(--sidebar-background-color-hover);
407 .source .sidebar > *:not(#sidebar-toggle) {
411 .source-sidebar-expanded .source .sidebar {
416 .source-sidebar-expanded .source .sidebar > *:not(#sidebar-toggle) {
424 /* Improve the scrollbar display on firefox */
426 scrollbar-width: initial;
427 scrollbar-color: var(--scrollbar-color);
430 scrollbar-width: thin;
431 scrollbar-color: var(--scrollbar-color);
434 /* Improve the scrollbar display on webkit-based browsers */
435 ::-webkit-scrollbar {
438 .sidebar::-webkit-scrollbar {
441 ::-webkit-scrollbar-track {
442 -webkit-box-shadow: inset 0;
443 background-color: var(--scrollbar-track-background-color);
445 .sidebar::-webkit-scrollbar-track {
446 background-color: var(--scrollbar-track-background-color);
448 ::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
449 background-color: var(--scrollbar-thumb-background-color);
452 /* Everything else */
455 display: none !important;
458 .sidebar .logo-container {
465 overflow-wrap: break-word;
468 .logo-container > img {
473 ul.block, .block li {
482 padding: 0.25rem; /* 4px */
483 margin-left: -0.25rem;
487 overflow-wrap: anywhere;
493 font-size: 1.125rem; /* 18px */
503 .sidebar a, .sidebar .current {
504 color: var(--sidebar-link-color);
508 background-color: var(--sidebar-current-link-background-color);
511 .sidebar-elems .block {
515 .sidebar-elems .block li a {
517 text-overflow: ellipsis;
525 .source .content pre.rust {
529 .rustdoc .example-wrap {
534 /* For the last child of a div, the margin will be taken care of
535 by the margin-top of the next item. */
536 .rustdoc .example-wrap:last-child {
540 .rustdoc .example-wrap > pre {
546 .rustdoc .example-wrap > pre.example-line-numbers,
547 .rustdoc .example-wrap > pre.src-line-numbers {
551 -webkit-user-select: none;
552 -moz-user-select: none;
553 -ms-user-select: none;
557 .example-line-numbers {
560 border-top-left-radius: 5px;
561 border-bottom-left-radius: 5px;
562 border-color: var(--example-line-numbers-border-color);
565 .src-line-numbers a, .src-line-numbers span {
566 color: var(--src-line-numbers-span-color);
568 .src-line-numbers :target {
569 background-color: transparent;
573 .src-line-numbers .line-highlighted {
574 background-color: var(--src-line-number-highlighted-background-color);
582 overflow-wrap: break-word;
583 overflow-wrap: anywhere;
585 text-overflow: ellipsis;
587 /* Wrap non-pre code blocks (`text`) but not (```text```). */
588 .docblock > :not(pre) > code,
589 .docblock-short > code {
590 white-space: pre-wrap;
593 .top-doc .docblock h2 { font-size: 1.375rem; }
594 .top-doc .docblock h3 { font-size: 1.25rem; }
595 .top-doc .docblock h4,
596 .top-doc .docblock h5 {
599 .top-doc .docblock h6 {
603 .docblock h5 { font-size: 1rem; }
604 .docblock h6 { font-size: 0.875rem; }
611 .docblock > :not(.more-examples-toggle):not(.example-wrap) {
621 .docblock code, .docblock-short code,
622 pre, .rustdoc.source .example-wrap {
623 background-color: var(--code-block-background-color);
632 border-collapse: collapse;
635 .docblock table td, .docblock table th {
637 border: 1px solid var(--border-color);
640 .docblock table tbody tr:nth-child(2n) {
641 background: var(--table-alt-row-background-color);
644 /* Shift "where ..." part of method or fn definition down a line */
661 #main-content > .item-info {
667 flex-flow: row nowrap;
668 margin: 4px 0 25px 0;
681 .source .search-form {
686 text-decoration: none;
689 .small-section-header {
690 /* fields use <span> tags, but should get their own lines */
695 .small-section-header:hover > .anchor {
699 .impl:hover > .anchor, .trait-impl:hover > .anchor, .variant:hover > .anchor {
700 display: inline-block;
707 background: none !important;
712 .small-section-header > .anchor {
716 h2.small-section-header > .anchor {
720 .main-heading a:hover,
721 .example-wrap > pre.rust a:hover,
723 .docblock a:not(.test-arrow):not(.scrape-help):hover,
724 .docblock-short a:not(.test-arrow):not(.scrape-help):hover,
726 text-decoration: underline;
729 .crate.block a.current { font-weight: 500; }
731 /* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap
732 as much as needed on mobile (see
733 src/test/rustdoc-gui/type-declaration-overflow.goml for an example of why
734 this matters). The `anywhere` value means:
736 "Soft wrap opportunities introduced by the word break are considered when
737 calculating min-content intrinsic sizes."
739 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#values
741 For table layouts, that becomes a problem: the browser tries to make each
742 column as narrow as possible, and `overflow-wrap: anywhere` means it can do
743 so by breaking words - even if some other column could be shrunk without
744 breaking words! This shows up, for instance, in the `Structs` / `Modules` /
745 `Functions` (etcetera) sections of a module page, and when a docblock
748 So, for table layouts, override the default with break-word, which does
749 _not_ affect min-content intrinsic sizes.
753 overflow-wrap: break-word;
762 .item-left, .item-right {
766 padding-right: 1.25rem;
769 .search-results-title {
772 /* flex layout allows shrinking the <select> appropriately if it becomes too large */
774 /* make things look like in a line, despite the fact that we're using a layout
775 with boxes (i.e. from the flex layout) */
776 align-items: baseline;
779 /* ensures that 100% in properties of #crate-search-div:after
780 are relative to the size of this div */
782 /* allows this div (and with it the <select>-element "#crate-search") to be shrunk */
787 /* keep these two in sync with "@-moz-document url-prefix()" below */
788 padding: 0 23px 0 4px;
789 /* prevents the <select> from overflowing the containing div in case it's shrunk */
791 /* contents can overflow because of max-width limit, then show ellipsis */
792 text-overflow: ellipsis;
793 border: 1px solid var(--border-color);
797 -moz-appearance: none;
798 -webkit-appearance: none;
799 /* Removes default arrow from firefox */
801 background-color: var(--main-background-color);
806 #crate-search:hover, #crate-search:focus {
807 border-color: var(--crate-search-hover-border);
809 /* cancel stylistic differences in padding in firefox
810 for "appearance: none"-style (or equivalent) <select>s */
811 @-moz-document url-prefix() {
813 padding-left: 0px; /* == 4px - 4px */
814 padding-right: 19px; /* == 23px - 4px */
817 /* pseudo-element for holding the dropdown-arrow image; needs to be a separate thing
818 so that we can apply CSS-filters to change the arrow color in themes */
819 #crate-search-div::after {
820 /* lets clicks through! */
821 pointer-events: none;
822 /* completely covers the underlying div */
829 background-repeat: no-repeat;
830 background-size: 20px;
831 background-position: calc(100% - 2px) 56%;
832 /* image is black color */
833 background-image: url("down-arrow-927217e04c7463ac.svg");
834 /* changes the arrow image color */
835 filter: var(--crate-search-div-filter);
837 #crate-search-div:hover::after, #crate-search-div:focus-within::after {
838 filter: var(--crate-search-div-hover-filter);
840 #crate-search > option {
844 /* Override Normalize.css: it has a rule that sets
845 -webkit-appearance: textfield for search inputs. That
846 causes rounded corners and no border on iOS Safari. */
847 -webkit-appearance: none;
849 border: 1px solid var(--border-color);
854 background-color: var(--button-background-color);
855 color: var(--search-color);
857 .search-input:focus {
858 border-color: var(--search-input-focused-border-color);
865 .search-results.active {
869 .search-results > a {
871 /* A little margin ensures the browser's outlining of focused links has room to display. */
874 border-bottom: 1px solid var(--search-result-border-color);
878 .search-results > a > div {
882 .search-results > a > div.desc {
884 text-overflow: ellipsis;
888 .search-results a:hover,
889 .search-results a:focus {
890 background-color: var(--search-result-link-focus-background-color);
893 .search-results .result-name span.alias {
894 color: var(--search-results-alias-color);
896 .search-results .result-name span.grey {
897 color: var(--search-results-grey-color);
908 border: 1px solid var(--border-color);
909 --popover-arrow-offset: 11px;
912 /* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
916 right: var(--popover-arrow-offset);
917 border: solid var(--border-color);
918 border-width: 1px 1px 0 0;
920 transform: rotate(-45deg);
924 .popover, .popover::before {
925 background-color: var(--main-background-color);
926 color: var(--main-color);
929 /* use larger max-width for help popover, but not for help.html */
932 --popover-arrow-offset: 48px;
938 margin-right: 0.5rem;
940 #help span.top, #help span.bottom {
947 border-bottom: 1px solid var(--border-color);
953 border-top: 1px solid var(--border-color);
955 .side-by-side > div {
958 padding: 0 20px 20px 17px;
962 /* This min-height is needed to unify the height of the stab elements because some of them
971 margin-left: 0.3125em;
977 color: var(--main-color);
978 background-color: var(--stab-background-color);
981 white-space: pre-wrap;
983 display: inline-flex;
984 vertical-align: text-bottom;
987 .stab.portability > code {
989 color: var(--stab-code-color);
994 margin-right: 0.3rem;
997 /* Black one-pixel outline around emoji shapes */
1006 .module-item.unstable,
1007 .import-item.unstable {
1012 font-weight: normal;
1023 color: var(--right-side-color);
1031 /* Code highlighting */
1033 color: var(--code-highlight-kw-color);
1036 color: var(--code-highlight-kw-2-color);
1038 pre.rust .lifetime {
1039 color: var(--code-highlight-lifetime-color);
1041 pre.rust .prelude-ty {
1042 color: var(--code-highlight-prelude-color);
1044 pre.rust .prelude-val {
1045 color: var(--code-highlight-prelude-val-color);
1048 color: var(--code-highlight-string-color);
1051 color: var(--code-highlight-number-color);
1053 pre.rust .bool-val {
1054 color: var(--code-highlight-literal-color);
1057 color: var(--code-highlight-self-color);
1060 color: var(--code-highlight-attribute-color);
1063 pre.rust .macro-nonterminal {
1064 color: var(--code-highlight-macro-color);
1066 pre.rust .question-mark {
1068 color: var(--code-highlight-question-mark-color);
1071 color: var(--code-highlight-comment-color);
1073 pre.rust .doccomment {
1074 color: var(--code-highlight-doc-comment-color);
1077 .example-wrap.compile_fail,
1078 .example-wrap.should_panic {
1079 border-left: 2px solid var(--codeblock-error-color);
1082 .ignore.example-wrap {
1083 border-left: 2px solid var(--codeblock-ignore-color);
1086 .example-wrap.compile_fail:hover,
1087 .example-wrap.should_panic:hover {
1088 border-left: 2px solid var(--codeblock-error-hover-color);
1091 .example-wrap.ignore:hover {
1092 border-left: 2px solid var(--codeblock-ignore-hover-color);
1095 .example-wrap.compile_fail .tooltip,
1096 .example-wrap.should_panic .tooltip {
1097 color: var(--codeblock-error-color);
1100 .example-wrap.ignore .tooltip {
1101 color: var(--codeblock-ignore-color);
1104 .example-wrap.compile_fail:hover .tooltip,
1105 .example-wrap.should_panic:hover .tooltip {
1106 color: var(--codeblock-error-hover-color);
1109 .example-wrap.ignore:hover .tooltip {
1110 color: var(--codeblock-ignore-hover-color);
1113 .example-wrap .tooltip {
1120 .example-wrap .tooltip::after {
1123 padding: 5px 3px 3px 3px;
1127 border: 1px solid var(--border-color);
1132 background-color: var(--tooltip-background-color);
1133 color: var(--tooltip-color);
1136 .example-wrap .tooltip::before {
1144 border: 5px solid transparent;
1145 border-right-color: var(--tooltip-background-color);
1148 .example-wrap.ignore .tooltip::after {
1149 content: "This example is not tested";
1151 .example-wrap.compile_fail .tooltip::after {
1152 content: "This example deliberately fails to compile";
1154 .example-wrap.should_panic .tooltip::after {
1155 content: "This example panics";
1157 .example-wrap.edition .tooltip::after {
1158 content: "This code runs with edition " attr(data-edition);
1161 .example-wrap .tooltip:hover::before, .example-wrap .tooltip:hover::after {
1165 .example-wrap.compile_fail .tooltip,
1166 .example-wrap.should_panic .tooltip,
1167 .example-wrap.ignore .tooltip {
1175 padding: 5px 10px 5px 10px;
1177 font-size: 1.375rem;
1181 color: var(--test-arrow-color);
1182 background-color: var(--test-arrow-background-color);
1184 a.test-arrow:hover {
1185 color: var(--test-arrow-hover-color);
1186 background-color: var(--test-arrow-hover-background-color);
1188 .example-wrap:hover .test-arrow {
1189 visibility: visible;
1194 color: var(--code-attribute-color);
1202 .out-of-band > span.since {
1215 margin-bottom: 40px;
1218 .sub-variant > .sub-variant-field {
1224 background-color: var(--target-background-color);
1225 border-right: 3px solid var(--target-border-color);
1234 /* placeholder thunk so that the mouse can easily travel from "(i)" to popover
1235 the resulting "hover tunnel" is a stepped triangle, approximating
1236 https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */
1237 .notable-traits:hover::after {
1239 top: calc(100% - 10px);
1246 .notable .docblock {
1247 margin: 0.25em 0.5em;
1250 .notable .docblock pre, .notable .docblock code {
1251 background: transparent;
1255 white-space: pre-wrap;
1264 .search-failed.active {
1268 .search-failed > ul {
1277 flex-direction: row;
1284 font-size: 1.125rem;
1286 border-top: 2px solid;
1292 #titles > button > div.count {
1293 display: inline-block;
1302 border-bottom: 1px solid;
1305 justify-content: stretch;
1306 align-items: stretch;
1313 #source-sidebar > .title {
1316 border-bottom: 1px solid var(--border-color);
1319 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
1320 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
1321 background-color: var(--source-sidebar-background-hover);
1323 #source-sidebar div.files > a.selected {
1324 background-color: var(--source-sidebar-background-selected);
1326 #sidebar-toggle > button {
1335 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1336 -webkit-appearance: none;
1339 #settings-menu, #help-button {
1344 #settings-menu > a, #help-button > a, #copy-path {
1348 #settings-menu > a, #help-button > a {
1350 align-items: center;
1351 justify-content: center;
1352 background-color: var(--button-background-color);
1353 border: 1px solid var(--border-color);
1355 color: var(--settings-button-color);
1356 /* Rare exception to specifying font sizes in rem. Since this is acting
1357 as an icon, it's okay to specify their sizes in pixels. */
1361 #settings-menu > a:hover, #settings-menu > a:focus,
1362 #help-button > a:hover, #help-button > a:focus {
1363 border-color: var(--settings-button-border-focus);
1367 color: var(--copy-path-button-color);
1368 background: var(--main-background-color);
1376 filter: var(--copy-path-img-filter);
1378 #copy-path:hover > img {
1379 filter: var(--copy-path-img-hover-filter);
1382 @keyframes rotating {
1384 transform: rotate(0deg);
1387 transform: rotate(360deg);
1390 #settings-menu.rotate > a img {
1391 animation: rotating 2s linear infinite;
1395 display: inline-block;
1397 font: 15px monospace;
1399 vertical-align: middle;
1400 border: solid 1px var(--border-color);
1403 color: var(--kbd--color);
1404 background-color: var(--kbd-background);
1405 box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color);
1416 details.dir-entry > summary::after {
1423 /* set width to cover gap between arrow and text */
1427 details[open].dir-entry > summary::after {
1431 details.dir-entry > summary::-webkit-details-marker,
1432 details.dir-entry > summary::marker {
1436 details.dir-entry > summary {
1443 details.dir-entry div.folders, details.dir-entry div.files {
1447 details.dir-entry a {
1451 /* We use CSS containment on the details elements because most sizeable elements
1452 of the page are contained in one of these. This also makes re-rendering
1453 faster on document changes (like closing and opening toggles).
1454 Unfortunately we can't yet specify contain: content or contain: strict
1455 because the [-]/[+] toggles extend past the boundaries of the <details>
1456 https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
1457 details.rustdoc-toggle {
1462 /* The hideme class is used on summary tags that contain a span with
1463 placeholder text shown only when the toggle is closed. For instance,
1464 "Expand description" or "Show methods". */
1465 details.rustdoc-toggle > summary.hideme {
1470 details.rustdoc-toggle > summary {
1472 /* focus outline is shown on `::before` instead of this */
1475 details.rustdoc-toggle > summary::-webkit-details-marker,
1476 details.rustdoc-toggle > summary::marker {
1480 details.rustdoc-toggle > summary.hideme > span {
1484 details.rustdoc-toggle > summary::before {
1485 background: url("toggle-plus-1092eb4930d581b0.svg") no-repeat top left;
1490 display: inline-block;
1491 vertical-align: middle;
1493 filter: var(--toggle-filter);
1496 details.rustdoc-toggle > summary.hideme > span,
1497 .more-examples-toggle summary, .more-examples-toggle .hide-more {
1498 color: var(--toggles-color);
1501 /* Screen readers see the text version at the end the line.
1502 Visual readers see the icon at the start of the line, but small and transparent. */
1503 details.rustdoc-toggle > summary::after {
1511 details.rustdoc-toggle > summary.hideme::after {
1512 /* "hideme" toggles already have a description when they're contracted */
1516 details.rustdoc-toggle > summary:focus::before,
1517 details.rustdoc-toggle > summary:hover::before {
1521 details.rustdoc-toggle > summary:focus-visible::before {
1522 /* The SVG is black, and gets turned white using a filter in the dark themes.
1523 Do the same with the outline.
1524 The dotted 1px style is copied from Firefox's focus ring style.
1526 outline: 1px dotted #000;
1527 outline-offset: 1px;
1530 details.non-exhaustive {
1534 details.rustdoc-toggle > summary.hideme::before {
1538 details.rustdoc-toggle > summary:not(.hideme)::before {
1544 .impl-items > details.rustdoc-toggle > summary:not(.hideme)::before {
1549 /* When a "hideme" summary is open and the "Expand description" or "Show
1550 methods" text is hidden, we want the [-] toggle that remains to not
1551 affect the layout of the items to its right. To do that, we use
1552 absolute positioning. Note that we also set position: relative
1553 on the parent <details> to make this work properly. */
1554 details.rustdoc-toggle[open] > summary.hideme {
1558 details.rustdoc-toggle[open] > summary.hideme > span {
1562 details.rustdoc-toggle[open] > summary::before {
1563 background: url("toggle-minus-31bbd6e4c77f5c96.svg") no-repeat top left;
1566 details.rustdoc-toggle[open] > summary::after {
1567 content: "Collapse";
1570 /* This is needed in docblocks to have the "â–¶" element to be on the same line. */
1571 .docblock summary > * {
1572 display: inline-block;
1575 /* In case there is no documentation before a code block, we need to add some margin at the top
1576 to prevent an overlay between the "collapse toggle" and the information tooltip.
1577 However, it's not needed with smaller screen width because the doc/code block is always put
1578 "one line" below. */
1579 .docblock > .example-wrap:first-child .tooltip {
1586 WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
1587 If you update this line, then you also need to update the line with the same warning
1590 @media (max-width: 700px) {
1591 /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
1592 or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
1593 by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size.
1596 scroll-margin-top: 45px;
1600 /* Sidebar should overlay main content, rather than pushing main content to the right.
1601 Turn off `display: flex` on the body element. */
1611 flex-direction: column;
1616 margin-left: initial;
1620 .out-of-band .since::before {
1624 /* Hide the logo and item name from the sidebar. Those are displayed
1625 in the mobile-topbar instead. */
1626 .sidebar .sidebar-logo,
1627 .sidebar .location {
1634 /* Hide the sidebar offscreen while not in use. Doing this instead of display: none means
1635 the sidebar stays visible for screen readers, which is useful for navigation. */
1638 /* Reduce height slightly to account for mobile topbar. */
1639 height: calc(100vh - 45px);
1643 /* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
1644 so don't bump down the main content or the sidebar. */
1646 .rustdoc.source .sidebar {
1654 .source-sidebar-expanded .source .sidebar,
1655 .sidebar:focus-within {
1659 .rustdoc.source > .sidebar {
1665 margin: auto 0.5em auto auto;
1667 /* Rare exception to specifying font sizes in rem. Since the topbar
1668 height is specified in pixels, this also has to be specified in
1669 pixels to avoid overflowing the topbar when the user sets a bigger
1674 .mobile-topbar h2 a {
1676 text-overflow: ellipsis;
1678 white-space: nowrap;
1681 .mobile-topbar .logo-container > img {
1684 margin: 5px 0 5px 20px;
1689 flex-direction: row;
1699 .sidebar-menu-toggle {
1701 /* Rare exception to specifying font sizes in rem. Since this is acting
1702 as an icon, it's okay to specify its sizes in pixels. */
1705 color: var(--main-color);
1717 display: none !important;
1720 #titles > button > div.count {
1724 #main-content > details.rustdoc-toggle > summary::before,
1725 #main-content > div > details.rustdoc-toggle > summary::before {
1737 border-top-right-radius: 3px;
1738 border-bottom-right-radius: 3px;
1743 .source-sidebar-expanded #sidebar-toggle {
1747 border-top-right-radius: unset;
1748 border-bottom-right-radius: unset;
1751 border-bottom: 1px solid;
1754 /* We don't display these buttons on mobile devices. */
1755 #copy-path, #help-button {
1759 /* Display an alternating layout on tablets and phones */
1760 .item-table, .item-row, .item-left, .item-right,
1761 .search-results > a, .search-results > a > div {
1765 /* Display an alternating layout on tablets and phones */
1766 .search-results > a {
1769 .search-results > a > div.desc, .item-right {
1773 .source-sidebar-expanded .source .sidebar {
1778 /* Position of the "[-]" element. */
1779 details.rustdoc-toggle:not(.top-doc) > summary {
1782 .impl-items > details.rustdoc-toggle > summary:not(.hideme)::before,
1783 #main-content > details.rustdoc-toggle:not(.top-doc) > summary::before,
1784 #main-content > div > details.rustdoc-toggle > summary::before {
1788 /* Align summary-nested and unnested item-info gizmos. */
1789 .impl-items > .item-info {
1799 /* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */
1800 @media (min-width: 701px) {
1801 /* Places file-link for a scraped example on top of the example to save space.
1802 We only do this on large screens so the file-link doesn't overlap too much
1803 with the example's content. */
1804 .scraped-example-title {
1807 background: var(--main-background-color);
1811 box-shadow: 0 0 4px var(--main-background-color);
1816 nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path,
1817 details.rustdoc-toggle[open] > summary::before, details.rustdoc-toggle > summary::before,
1818 details.rustdoc-toggle.top-doc > summary {
1831 @media (max-width: 464px) {
1837 overflow-wrap: break-word;
1838 overflow-wrap: anywhere;
1842 flex-direction: column;
1846 align-self: stretch;
1849 .sub-logo-container > img {
1857 .source-sidebar-expanded #sidebar-toggle {
1863 .implementors-toggle > summary,
1865 #implementors-list > .docblock,
1866 .impl-items > section,
1867 .impl-items > .rustdoc-toggle > summary,
1869 .methods > .rustdoc-toggle > summary
1871 margin-bottom: 0.75em;
1874 .variants > .docblock,
1875 .impl-items > .rustdoc-toggle[open]:not(:last-child),
1876 .methods > .rustdoc-toggle[open]:not(:last-child),
1877 .implementors-toggle[open]:not(:last-child) {
1881 #trait-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1882 #synthetic-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1883 #blanket-implementations-list .impl-items > .rustdoc-toggle:not(:last-child) {
1887 /* Begin: styles for --scrape-examples feature */
1889 .scraped-example-list .scrape-help {
1892 font-weight: normal;
1897 border-style: solid;
1898 border-radius: 50px;
1902 /* So .scraped-example-title can be positioned absolutely */
1906 .scraped-example .code-wrapper {
1909 flex-direction: row;
1914 .scraped-example:not(.expanded) .code-wrapper {
1915 /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number
1916 * of lines shown in the un-expanded example code viewer. This pre needs to have
1917 * a max-height equal to line-height * N. The line-height is currently 1.5em,
1918 * and we include additional 10px for padding. */
1919 max-height: calc(1.5em * 5 + 10px);
1922 .scraped-example:not(.expanded) .code-wrapper pre {
1925 /* See above comment, should be the same max-height. */
1926 max-height: calc(1.5em * 5 + 10px);
1929 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper,
1930 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre {
1931 /* See above comment, except this height is based on HIDDEN_MAX_LINES. */
1932 max-height: calc(1.5em * 10 + 10px);
1935 .scraped-example .code-wrapper .next,
1936 .scraped-example .code-wrapper .prev,
1937 .scraped-example .code-wrapper .expand {
1938 color: var(--main-color);
1945 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1946 -webkit-appearance: none;
1949 .scraped-example .code-wrapper .prev {
1952 .scraped-example .code-wrapper .next {
1955 .scraped-example .code-wrapper .expand {
1959 .scraped-example:not(.expanded) .code-wrapper:before,
1960 .scraped-example:not(.expanded) .code-wrapper:after {
1967 .scraped-example:not(.expanded) .code-wrapper:before {
1970 .scraped-example:not(.expanded) .code-wrapper:after {
1974 .scraped-example .code-wrapper .src-line-numbers {
1979 .scraped-example .code-wrapper .src-line-numbers a,
1980 .scraped-example .code-wrapper .src-line-numbers span {
1984 .scraped-example .code-wrapper .example-wrap {
1986 grid-template-columns: max-content auto;
1993 .scraped-example:not(.expanded) .code-wrapper .example-wrap {
1997 .scraped-example .code-wrapper .example-wrap pre.rust {
1998 overflow-x: inherit;
2004 .more-examples-toggle {
2005 max-width: calc(100% + 25px);
2010 .more-examples-toggle .hide-more {
2016 .more-scraped-examples {
2019 flex-direction: row;
2022 .more-scraped-examples-inner {
2023 /* 20px is width of toggle-line + toggle-line-inner */
2024 width: calc(100% - 20px);
2028 align-self: stretch;
2035 .toggle-line-inner {
2040 .more-scraped-examples .scraped-example {
2041 margin-bottom: 20px;
2044 .more-scraped-examples .scraped-example:last-child {
2056 /* End: styles for --scrape-examples feature */