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 {
530 .rustdoc .example-wrap {
535 /* For the last child of a div, the margin will be taken care of
536 by the margin-top of the next item. */
537 .rustdoc .example-wrap:last-child {
541 .rustdoc .example-wrap > pre {
547 .rustdoc .example-wrap > pre.example-line-numbers,
548 .rustdoc .example-wrap > pre.src-line-numbers {
552 -webkit-user-select: none;
553 -moz-user-select: none;
554 -ms-user-select: none;
558 .example-line-numbers {
561 border-top-left-radius: 5px;
562 border-bottom-left-radius: 5px;
563 border-color: var(--example-line-numbers-border-color);
566 .src-line-numbers a, .src-line-numbers span {
567 color: var(--src-line-numbers-span-color);
569 .src-line-numbers :target {
570 background-color: transparent;
574 .src-line-numbers .line-highlighted {
575 background-color: var(--src-line-number-highlighted-background-color);
583 overflow-wrap: break-word;
584 overflow-wrap: anywhere;
586 text-overflow: ellipsis;
588 /* Wrap non-pre code blocks (`text`) but not (```text```). */
589 .docblock > :not(pre) > code,
590 .docblock-short > code {
591 white-space: pre-wrap;
594 .top-doc .docblock h2 { font-size: 1.375rem; }
595 .top-doc .docblock h3 { font-size: 1.25rem; }
596 .top-doc .docblock h4,
597 .top-doc .docblock h5 {
600 .top-doc .docblock h6 {
604 .docblock h5 { font-size: 1rem; }
605 .docblock h6 { font-size: 0.875rem; }
612 .docblock > :not(.more-examples-toggle):not(.example-wrap) {
622 .docblock code, .docblock-short code,
623 pre, .rustdoc.source .example-wrap {
624 background-color: var(--code-block-background-color);
633 border-collapse: collapse;
636 .docblock table td, .docblock table th {
638 border: 1px solid var(--border-color);
641 .docblock table tbody tr:nth-child(2n) {
642 background: var(--table-alt-row-background-color);
645 /* Shift "where ..." part of method or fn definition down a line */
662 #main-content > .item-info {
668 flex-flow: row nowrap;
669 margin: 4px 0 25px 0;
682 .source .search-form {
687 text-decoration: none;
690 .small-section-header {
691 /* fields use <span> tags, but should get their own lines */
696 .small-section-header:hover > .anchor {
700 .impl:hover > .anchor, .trait-impl:hover > .anchor, .variant:hover > .anchor {
701 display: inline-block;
708 background: none !important;
713 .small-section-header > .anchor {
717 h2.small-section-header > .anchor {
721 .main-heading a:hover,
722 .example-wrap > pre.rust a:hover,
724 .docblock a:not(.test-arrow):not(.scrape-help):hover,
725 .docblock-short a:not(.test-arrow):not(.scrape-help):hover,
727 text-decoration: underline;
730 .crate.block a.current { font-weight: 500; }
732 /* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap
733 as much as needed on mobile (see
734 src/test/rustdoc-gui/type-declaration-overflow.goml for an example of why
735 this matters). The `anywhere` value means:
737 "Soft wrap opportunities introduced by the word break are considered when
738 calculating min-content intrinsic sizes."
740 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#values
742 For table layouts, that becomes a problem: the browser tries to make each
743 column as narrow as possible, and `overflow-wrap: anywhere` means it can do
744 so by breaking words - even if some other column could be shrunk without
745 breaking words! This shows up, for instance, in the `Structs` / `Modules` /
746 `Functions` (etcetera) sections of a module page, and when a docblock
749 So, for table layouts, override the default with break-word, which does
750 _not_ affect min-content intrinsic sizes.
754 overflow-wrap: break-word;
763 .item-left, .item-right {
767 padding-right: 1.25rem;
770 .search-results-title {
773 /* flex layout allows shrinking the <select> appropriately if it becomes too large */
775 /* make things look like in a line, despite the fact that we're using a layout
776 with boxes (i.e. from the flex layout) */
777 align-items: baseline;
780 /* ensures that 100% in properties of #crate-search-div:after
781 are relative to the size of this div */
783 /* allows this div (and with it the <select>-element "#crate-search") to be shrunk */
788 /* keep these two in sync with "@-moz-document url-prefix()" below */
789 padding: 0 23px 0 4px;
790 /* prevents the <select> from overflowing the containing div in case it's shrunk */
792 /* contents can overflow because of max-width limit, then show ellipsis */
793 text-overflow: ellipsis;
794 border: 1px solid var(--border-color);
798 -moz-appearance: none;
799 -webkit-appearance: none;
800 /* Removes default arrow from firefox */
802 background-color: var(--main-background-color);
807 #crate-search:hover, #crate-search:focus {
808 border-color: var(--crate-search-hover-border);
810 /* cancel stylistic differences in padding in firefox
811 for "appearance: none"-style (or equivalent) <select>s */
812 @-moz-document url-prefix() {
814 padding-left: 0px; /* == 4px - 4px */
815 padding-right: 19px; /* == 23px - 4px */
818 /* pseudo-element for holding the dropdown-arrow image; needs to be a separate thing
819 so that we can apply CSS-filters to change the arrow color in themes */
820 #crate-search-div::after {
821 /* lets clicks through! */
822 pointer-events: none;
823 /* completely covers the underlying div */
830 background-repeat: no-repeat;
831 background-size: 20px;
832 background-position: calc(100% - 2px) 56%;
833 /* image is black color */
834 background-image: url("down-arrow-927217e04c7463ac.svg");
835 /* changes the arrow image color */
836 filter: var(--crate-search-div-filter);
838 #crate-search-div:hover::after, #crate-search-div:focus-within::after {
839 filter: var(--crate-search-div-hover-filter);
841 #crate-search > option {
845 /* Override Normalize.css: it has a rule that sets
846 -webkit-appearance: textfield for search inputs. That
847 causes rounded corners and no border on iOS Safari. */
848 -webkit-appearance: none;
850 border: 1px solid var(--border-color);
855 background-color: var(--button-background-color);
856 color: var(--search-color);
858 .search-input:focus {
859 border-color: var(--search-input-focused-border-color);
866 .search-results.active {
870 .search-results > a {
872 /* A little margin ensures the browser's outlining of focused links has room to display. */
875 border-bottom: 1px solid var(--search-result-border-color);
879 .search-results > a > div {
883 .search-results > a > div.desc {
885 text-overflow: ellipsis;
889 .search-results a:hover,
890 .search-results a:focus {
891 background-color: var(--search-result-link-focus-background-color);
894 .search-results .result-name span.alias {
895 color: var(--search-results-alias-color);
897 .search-results .result-name span.grey {
898 color: var(--search-results-grey-color);
909 border: 1px solid var(--border-color);
910 --popover-arrow-offset: 11px;
913 /* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
917 right: var(--popover-arrow-offset);
918 border: solid var(--border-color);
919 border-width: 1px 1px 0 0;
921 transform: rotate(-45deg);
925 .popover, .popover::before {
926 background-color: var(--main-background-color);
927 color: var(--main-color);
930 /* use larger max-width for help popover, but not for help.html */
933 --popover-arrow-offset: 48px;
939 margin-right: 0.5rem;
941 #help span.top, #help span.bottom {
948 border-bottom: 1px solid var(--border-color);
954 border-top: 1px solid var(--border-color);
956 .side-by-side > div {
959 padding: 0 20px 20px 17px;
963 /* This min-height is needed to unify the height of the stab elements because some of them
972 margin-left: 0.3125em;
978 color: var(--main-color);
979 background-color: var(--stab-background-color);
982 white-space: pre-wrap;
984 display: inline-flex;
985 vertical-align: text-bottom;
988 .stab.portability > code {
990 color: var(--stab-code-color);
995 margin-right: 0.3rem;
998 /* Black one-pixel outline around emoji shapes */
1007 .module-item.unstable,
1008 .import-item.unstable {
1013 font-weight: normal;
1024 color: var(--right-side-color);
1032 /* Code highlighting */
1034 color: var(--code-highlight-kw-color);
1037 color: var(--code-highlight-kw-2-color);
1039 pre.rust .lifetime {
1040 color: var(--code-highlight-lifetime-color);
1042 pre.rust .prelude-ty {
1043 color: var(--code-highlight-prelude-color);
1045 pre.rust .prelude-val {
1046 color: var(--code-highlight-prelude-val-color);
1049 color: var(--code-highlight-string-color);
1052 color: var(--code-highlight-number-color);
1054 pre.rust .bool-val {
1055 color: var(--code-highlight-literal-color);
1058 color: var(--code-highlight-self-color);
1061 color: var(--code-highlight-attribute-color);
1064 pre.rust .macro-nonterminal {
1065 color: var(--code-highlight-macro-color);
1067 pre.rust .question-mark {
1069 color: var(--code-highlight-question-mark-color);
1072 color: var(--code-highlight-comment-color);
1074 pre.rust .doccomment {
1075 color: var(--code-highlight-doc-comment-color);
1078 .example-wrap.compile_fail,
1079 .example-wrap.should_panic {
1080 border-left: 2px solid var(--codeblock-error-color);
1083 .ignore.example-wrap {
1084 border-left: 2px solid var(--codeblock-ignore-color);
1087 .example-wrap.compile_fail:hover,
1088 .example-wrap.should_panic:hover {
1089 border-left: 2px solid var(--codeblock-error-hover-color);
1092 .example-wrap.ignore:hover {
1093 border-left: 2px solid var(--codeblock-ignore-hover-color);
1096 .example-wrap.compile_fail .tooltip,
1097 .example-wrap.should_panic .tooltip {
1098 color: var(--codeblock-error-color);
1101 .example-wrap.ignore .tooltip {
1102 color: var(--codeblock-ignore-color);
1105 .example-wrap.compile_fail:hover .tooltip,
1106 .example-wrap.should_panic:hover .tooltip {
1107 color: var(--codeblock-error-hover-color);
1110 .example-wrap.ignore:hover .tooltip {
1111 color: var(--codeblock-ignore-hover-color);
1114 .example-wrap .tooltip {
1121 .example-wrap .tooltip::after {
1124 padding: 5px 3px 3px 3px;
1128 border: 1px solid var(--border-color);
1133 background-color: var(--tooltip-background-color);
1134 color: var(--tooltip-color);
1137 .example-wrap .tooltip::before {
1145 border: 5px solid transparent;
1146 border-right-color: var(--tooltip-background-color);
1149 .example-wrap.ignore .tooltip::after {
1150 content: "This example is not tested";
1152 .example-wrap.compile_fail .tooltip::after {
1153 content: "This example deliberately fails to compile";
1155 .example-wrap.should_panic .tooltip::after {
1156 content: "This example panics";
1158 .example-wrap.edition .tooltip::after {
1159 content: "This code runs with edition " attr(data-edition);
1162 .example-wrap .tooltip:hover::before, .example-wrap .tooltip:hover::after {
1166 .example-wrap.compile_fail .tooltip,
1167 .example-wrap.should_panic .tooltip,
1168 .example-wrap.ignore .tooltip {
1176 padding: 5px 10px 5px 10px;
1178 font-size: 1.375rem;
1182 color: var(--test-arrow-color);
1183 background-color: var(--test-arrow-background-color);
1185 a.test-arrow:hover {
1186 color: var(--test-arrow-hover-color);
1187 background-color: var(--test-arrow-hover-background-color);
1189 .example-wrap:hover .test-arrow {
1190 visibility: visible;
1195 color: var(--code-attribute-color);
1203 .out-of-band > span.since {
1216 margin-bottom: 40px;
1219 .sub-variant > .sub-variant-field {
1225 background-color: var(--target-background-color);
1226 border-right: 3px solid var(--target-border-color);
1235 /* placeholder thunk so that the mouse can easily travel from "(i)" to popover
1236 the resulting "hover tunnel" is a stepped triangle, approximating
1237 https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */
1238 .notable-traits:hover::after {
1240 top: calc(100% - 10px);
1247 .notable .docblock {
1248 margin: 0.25em 0.5em;
1251 .notable .docblock pre, .notable .docblock code {
1252 background: transparent;
1256 white-space: pre-wrap;
1265 .search-failed.active {
1269 .search-failed > ul {
1278 flex-direction: row;
1285 font-size: 1.125rem;
1287 border-top: 2px solid;
1293 #titles > button > div.count {
1294 display: inline-block;
1303 border-bottom: 1px solid;
1306 justify-content: stretch;
1307 align-items: stretch;
1314 #source-sidebar > .title {
1317 border-bottom: 1px solid var(--border-color);
1320 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
1321 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
1322 background-color: var(--source-sidebar-background-hover);
1324 #source-sidebar div.files > a.selected {
1325 background-color: var(--source-sidebar-background-selected);
1327 #sidebar-toggle > button {
1336 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1337 -webkit-appearance: none;
1340 #settings-menu, #help-button {
1345 #settings-menu > a, #help-button > a, #copy-path {
1349 #settings-menu > a, #help-button > a {
1351 align-items: center;
1352 justify-content: center;
1353 background-color: var(--button-background-color);
1354 border: 1px solid var(--border-color);
1356 color: var(--settings-button-color);
1357 /* Rare exception to specifying font sizes in rem. Since this is acting
1358 as an icon, it's okay to specify their sizes in pixels. */
1362 #settings-menu > a:hover, #settings-menu > a:focus,
1363 #help-button > a:hover, #help-button > a:focus {
1364 border-color: var(--settings-button-border-focus);
1368 color: var(--copy-path-button-color);
1369 background: var(--main-background-color);
1377 filter: var(--copy-path-img-filter);
1379 #copy-path:hover > img {
1380 filter: var(--copy-path-img-hover-filter);
1383 @keyframes rotating {
1385 transform: rotate(0deg);
1388 transform: rotate(360deg);
1391 #settings-menu.rotate > a img {
1392 animation: rotating 2s linear infinite;
1396 display: inline-block;
1398 font: 15px monospace;
1400 vertical-align: middle;
1401 border: solid 1px var(--border-color);
1404 color: var(--kbd--color);
1405 background-color: var(--kbd-background);
1406 box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color);
1417 details.dir-entry > summary::after {
1424 /* set width to cover gap between arrow and text */
1428 details[open].dir-entry > summary::after {
1432 details.dir-entry > summary::-webkit-details-marker,
1433 details.dir-entry > summary::marker {
1437 details.dir-entry > summary {
1444 details.dir-entry div.folders, details.dir-entry div.files {
1448 details.dir-entry a {
1452 /* We use CSS containment on the details elements because most sizeable elements
1453 of the page are contained in one of these. This also makes re-rendering
1454 faster on document changes (like closing and opening toggles).
1455 Unfortunately we can't yet specify contain: content or contain: strict
1456 because the [-]/[+] toggles extend past the boundaries of the <details>
1457 https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
1458 details.rustdoc-toggle {
1463 /* The hideme class is used on summary tags that contain a span with
1464 placeholder text shown only when the toggle is closed. For instance,
1465 "Expand description" or "Show methods". */
1466 details.rustdoc-toggle > summary.hideme {
1471 details.rustdoc-toggle > summary {
1473 /* focus outline is shown on `::before` instead of this */
1476 details.rustdoc-toggle > summary::-webkit-details-marker,
1477 details.rustdoc-toggle > summary::marker {
1481 details.rustdoc-toggle > summary.hideme > span {
1485 details.rustdoc-toggle > summary::before {
1486 background: url("toggle-plus-1092eb4930d581b0.svg") no-repeat top left;
1491 display: inline-block;
1492 vertical-align: middle;
1494 filter: var(--toggle-filter);
1497 details.rustdoc-toggle > summary.hideme > span,
1498 .more-examples-toggle summary, .more-examples-toggle .hide-more {
1499 color: var(--toggles-color);
1502 /* Screen readers see the text version at the end the line.
1503 Visual readers see the icon at the start of the line, but small and transparent. */
1504 details.rustdoc-toggle > summary::after {
1512 details.rustdoc-toggle > summary.hideme::after {
1513 /* "hideme" toggles already have a description when they're contracted */
1517 details.rustdoc-toggle > summary:focus::before,
1518 details.rustdoc-toggle > summary:hover::before {
1522 details.rustdoc-toggle > summary:focus-visible::before {
1523 /* The SVG is black, and gets turned white using a filter in the dark themes.
1524 Do the same with the outline.
1525 The dotted 1px style is copied from Firefox's focus ring style.
1527 outline: 1px dotted #000;
1528 outline-offset: 1px;
1531 details.non-exhaustive {
1535 details.rustdoc-toggle > summary.hideme::before {
1539 details.rustdoc-toggle > summary:not(.hideme)::before {
1545 .impl-items > details.rustdoc-toggle > summary:not(.hideme)::before {
1550 /* When a "hideme" summary is open and the "Expand description" or "Show
1551 methods" text is hidden, we want the [-] toggle that remains to not
1552 affect the layout of the items to its right. To do that, we use
1553 absolute positioning. Note that we also set position: relative
1554 on the parent <details> to make this work properly. */
1555 details.rustdoc-toggle[open] > summary.hideme {
1559 details.rustdoc-toggle[open] > summary.hideme > span {
1563 details.rustdoc-toggle[open] > summary::before {
1564 background: url("toggle-minus-31bbd6e4c77f5c96.svg") no-repeat top left;
1567 details.rustdoc-toggle[open] > summary::after {
1568 content: "Collapse";
1571 /* This is needed in docblocks to have the "â–¶" element to be on the same line. */
1572 .docblock summary > * {
1573 display: inline-block;
1576 /* In case there is no documentation before a code block, we need to add some margin at the top
1577 to prevent an overlay between the "collapse toggle" and the information tooltip.
1578 However, it's not needed with smaller screen width because the doc/code block is always put
1579 "one line" below. */
1580 .docblock > .example-wrap:first-child .tooltip {
1587 WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
1588 If you update this line, then you also need to update the line with the same warning
1591 @media (max-width: 700px) {
1592 /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
1593 or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
1594 by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size.
1597 scroll-margin-top: 45px;
1601 /* Sidebar should overlay main content, rather than pushing main content to the right.
1602 Turn off `display: flex` on the body element. */
1612 flex-direction: column;
1617 margin-left: initial;
1621 .out-of-band .since::before {
1625 /* Hide the logo and item name from the sidebar. Those are displayed
1626 in the mobile-topbar instead. */
1627 .sidebar .sidebar-logo,
1628 .sidebar .location {
1635 /* Hide the sidebar offscreen while not in use. Doing this instead of display: none means
1636 the sidebar stays visible for screen readers, which is useful for navigation. */
1639 /* Reduce height slightly to account for mobile topbar. */
1640 height: calc(100vh - 45px);
1644 /* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
1645 so don't bump down the main content or the sidebar. */
1647 .rustdoc.source .sidebar {
1655 .source-sidebar-expanded .source .sidebar,
1656 .sidebar:focus-within {
1660 .rustdoc.source > .sidebar {
1666 margin: auto 0.5em auto auto;
1668 /* Rare exception to specifying font sizes in rem. Since the topbar
1669 height is specified in pixels, this also has to be specified in
1670 pixels to avoid overflowing the topbar when the user sets a bigger
1675 .mobile-topbar h2 a {
1677 text-overflow: ellipsis;
1679 white-space: nowrap;
1682 .mobile-topbar .logo-container > img {
1685 margin: 5px 0 5px 20px;
1690 flex-direction: row;
1700 .sidebar-menu-toggle {
1702 /* Rare exception to specifying font sizes in rem. Since this is acting
1703 as an icon, it's okay to specify its sizes in pixels. */
1706 color: var(--main-color);
1718 display: none !important;
1721 #titles > button > div.count {
1725 #main-content > details.rustdoc-toggle > summary::before,
1726 #main-content > div > details.rustdoc-toggle > summary::before {
1738 border-top-right-radius: 3px;
1739 border-bottom-right-radius: 3px;
1744 .source-sidebar-expanded #sidebar-toggle {
1748 border-top-right-radius: unset;
1749 border-bottom-right-radius: unset;
1752 border-bottom: 1px solid;
1755 /* We don't display these buttons on mobile devices. */
1756 #copy-path, #help-button {
1760 /* Display an alternating layout on tablets and phones */
1761 .item-table, .item-row, .item-left, .item-right,
1762 .search-results > a, .search-results > a > div {
1766 /* Display an alternating layout on tablets and phones */
1767 .search-results > a {
1770 .search-results > a > div.desc, .item-right {
1774 .source-sidebar-expanded .source .sidebar {
1779 /* Position of the "[-]" element. */
1780 details.rustdoc-toggle:not(.top-doc) > summary {
1783 .impl-items > details.rustdoc-toggle > summary:not(.hideme)::before,
1784 #main-content > details.rustdoc-toggle:not(.top-doc) > summary::before,
1785 #main-content > div > details.rustdoc-toggle > summary::before {
1789 /* Align summary-nested and unnested item-info gizmos. */
1790 .impl-items > .item-info {
1800 /* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */
1801 @media (min-width: 701px) {
1802 /* Places file-link for a scraped example on top of the example to save space.
1803 We only do this on large screens so the file-link doesn't overlap too much
1804 with the example's content. */
1805 .scraped-example-title {
1808 background: var(--main-background-color);
1812 box-shadow: 0 0 4px var(--main-background-color);
1817 nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path,
1818 details.rustdoc-toggle[open] > summary::before, details.rustdoc-toggle > summary::before,
1819 details.rustdoc-toggle.top-doc > summary {
1832 @media (max-width: 464px) {
1838 overflow-wrap: break-word;
1839 overflow-wrap: anywhere;
1843 flex-direction: column;
1847 align-self: stretch;
1850 .sub-logo-container > img {
1858 .source-sidebar-expanded #sidebar-toggle {
1864 .implementors-toggle > summary,
1866 #implementors-list > .docblock,
1867 .impl-items > section,
1868 .impl-items > .rustdoc-toggle > summary,
1870 .methods > .rustdoc-toggle > summary
1872 margin-bottom: 0.75em;
1875 .variants > .docblock,
1876 .impl-items > .rustdoc-toggle[open]:not(:last-child),
1877 .methods > .rustdoc-toggle[open]:not(:last-child),
1878 .implementors-toggle[open]:not(:last-child) {
1882 #trait-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1883 #synthetic-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1884 #blanket-implementations-list .impl-items > .rustdoc-toggle:not(:last-child) {
1888 /* Begin: styles for --scrape-examples feature */
1890 .scraped-example-list .scrape-help {
1893 font-weight: normal;
1898 border-style: solid;
1899 border-radius: 50px;
1903 /* So .scraped-example-title can be positioned absolutely */
1907 .scraped-example .code-wrapper {
1910 flex-direction: row;
1915 .scraped-example:not(.expanded) .code-wrapper {
1916 /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number
1917 * of lines shown in the un-expanded example code viewer. This pre needs to have
1918 * a max-height equal to line-height * N. The line-height is currently 1.5em,
1919 * and we include additional 10px for padding. */
1920 max-height: calc(1.5em * 5 + 10px);
1923 .scraped-example:not(.expanded) .code-wrapper pre {
1926 /* See above comment, should be the same max-height. */
1927 max-height: calc(1.5em * 5 + 10px);
1930 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper,
1931 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre {
1932 /* See above comment, except this height is based on HIDDEN_MAX_LINES. */
1933 max-height: calc(1.5em * 10 + 10px);
1936 .scraped-example .code-wrapper .next,
1937 .scraped-example .code-wrapper .prev,
1938 .scraped-example .code-wrapper .expand {
1939 color: var(--main-color);
1946 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1947 -webkit-appearance: none;
1950 .scraped-example .code-wrapper .prev {
1953 .scraped-example .code-wrapper .next {
1956 .scraped-example .code-wrapper .expand {
1960 .scraped-example:not(.expanded) .code-wrapper:before,
1961 .scraped-example:not(.expanded) .code-wrapper:after {
1968 .scraped-example:not(.expanded) .code-wrapper:before {
1971 .scraped-example:not(.expanded) .code-wrapper:after {
1975 .scraped-example .code-wrapper .src-line-numbers {
1980 .scraped-example .code-wrapper .src-line-numbers a,
1981 .scraped-example .code-wrapper .src-line-numbers span {
1985 .scraped-example .code-wrapper .example-wrap {
1987 grid-template-columns: max-content auto;
1994 .scraped-example:not(.expanded) .code-wrapper .example-wrap {
1998 .scraped-example .code-wrapper .example-wrap pre.rust {
1999 overflow-x: inherit;
2005 .more-examples-toggle {
2006 max-width: calc(100% + 25px);
2011 .more-examples-toggle .hide-more {
2017 .more-scraped-examples {
2020 flex-direction: row;
2023 .more-scraped-examples-inner {
2024 /* 20px is width of toggle-line + toggle-line-inner */
2025 width: calc(100% - 20px);
2029 align-self: stretch;
2036 .toggle-line-inner {
2041 .more-scraped-examples .scraped-example {
2042 margin-bottom: 20px;
2045 .more-scraped-examples .scraped-example:last-child {
2057 /* End: styles for --scrape-examples feature */