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 box-sizing: border-box;
82 /* This part handles the "default" theme being used depending on the system one. */
86 @media (prefers-color-scheme: light) {
91 @media (prefers-color-scheme: dark) {
97 /* General structure and fonts */
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;
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);
117 font-size: 1.5rem; /* 24px */
120 font-size: 1.375rem; /* 22px */
123 font-size: 1.25rem; /* 20px */
125 h1, h2, h3, h4, h5, h6 {
129 margin: 25px 0 15px 0;
132 .docblock h3, .docblock h4, h5, h6 {
133 margin: 15px 0 5px 0;
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 {
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;
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. */
165 .top-doc .docblock > h3,
166 .top-doc .docblock > h4 {
167 border-bottom: 1px solid var(--headings-border-bottom-color);
170 font-size: 1.125rem; /* 18px */
182 h1, h2, h3, h4, h5, h6,
186 .search-results .result-name,
193 .scraped-example-list,
194 /* This selector is for the items listed in the "all items" page. */
196 font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
201 .small-section-header a,
210 .result-name .primitive > i, .result-name .keyword > i {
211 color: var(--main-color);
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);
223 .content span.trait, .content a.trait,
224 .content span.traitalias, .content a.traitalias {
225 color: var(--trait-link-color);
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);
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);
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);
246 .content span.mod, .content a.mod {
247 color: var(--mod-link-color);
250 .content span.keyword, .content a.keyword {
251 color: var(--keyword-link-color);
255 color: var(--link-color);
261 ul ul, ol ul, ul ol, ol ol {
262 margin-bottom: .625em;
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 */
271 /* For the last child of a div, the margin will be taken care of
272 by the margin-top of the next item. */
277 /* Fix some style changes due to normalize.css 8 */
280 /* Buttons on Safari have different default padding than other platforms. Make them the same. */
282 /* Opinionated tweak: use pointer cursor as clickability signifier. */
286 /* end tweaks for normalize.css 8 */
288 button#toggle-all-docs {
292 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
293 -webkit-appearance: none;
306 padding: 10px 15px 40px 45px;
307 min-width: 0; /* avoid growing beyond the size limit */
319 details:not(.rustdoc-toggle) summary {
323 code, pre, a.test-arrow, .code-header {
324 font-family: "Source Code Pro", monospace;
326 .docblock code, .docblock-short code {
330 .docblock pre code, .docblock-short pre code {
335 line-height: 1.5; /* https://github.com/rust-lang/rust/issues/105906 */
341 .source .content pre {
344 .rustdoc.source .example-wrap > pre.src-line-numbers {
345 padding: 20px 0 20px 4px;
352 .sub-logo-container, .logo-container {
353 /* zero text boxes so that computed line height = image height exactly */
358 .sub-logo-container {
362 .sub-logo-container > img {
369 filter: var(--rust-logo-filter);
382 .rustdoc.source .sidebar {
384 border-right: 1px solid;
386 /* The sidebar is by default hidden */
390 .sidebar, .mobile-topbar, .sidebar-menu-toggle,
391 #src-sidebar-toggle, #source-sidebar {
392 background-color: var(--sidebar-background-color);
395 #src-sidebar-toggle > button:hover, #src-sidebar-toggle > button:focus {
396 background-color: var(--sidebar-background-color-hover);
399 .source .sidebar > *:not(#src-sidebar-toggle) {
403 .source-sidebar-expanded .source .sidebar {
408 .source-sidebar-expanded .source .sidebar > *:not(#src-sidebar-toggle) {
416 /* Improve the scrollbar display on firefox */
418 scrollbar-width: initial;
419 scrollbar-color: var(--scrollbar-color);
422 scrollbar-width: thin;
423 scrollbar-color: var(--scrollbar-color);
426 /* Improve the scrollbar display on webkit-based browsers */
427 ::-webkit-scrollbar {
430 .sidebar::-webkit-scrollbar {
433 ::-webkit-scrollbar-track {
434 -webkit-box-shadow: inset 0;
435 background-color: var(--scrollbar-track-background-color);
437 .sidebar::-webkit-scrollbar-track {
438 background-color: var(--scrollbar-track-background-color);
440 ::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
441 background-color: var(--scrollbar-thumb-background-color);
444 /* Everything else */
447 display: none !important;
450 .sidebar .logo-container {
457 overflow-wrap: break-word;
460 .logo-container > img {
465 ul.block, .block li {
474 padding: 0.25rem; /* 4px */
475 margin-left: -0.25rem;
479 overflow-wrap: anywhere;
485 font-size: 1.125rem; /* 18px */
495 .sidebar a, .sidebar .current {
496 color: var(--sidebar-link-color);
499 .sidebar a:hover:not(.logo-container) {
500 background-color: var(--sidebar-current-link-background-color);
503 .sidebar-elems .block {
507 .sidebar-elems .block li a {
509 text-overflow: ellipsis;
517 .rustdoc .example-wrap {
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 {
528 .rustdoc .example-wrap > pre {
534 .rustdoc .example-wrap > pre.example-line-numbers,
535 .rustdoc .example-wrap > pre.src-line-numbers {
537 min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */
540 -webkit-user-select: none;
543 color: var(--src-line-numbers-span-color);
546 .rustdoc .example-wrap > pre.src-line-numbers {
549 .src-line-numbers a, .src-line-numbers span {
550 color: var(--src-line-numbers-span-color);
553 .src-line-numbers :target {
554 background-color: transparent;
558 .src-line-numbers .line-highlighted {
559 background-color: var(--src-line-number-highlighted-background-color);
567 overflow-wrap: break-word;
568 overflow-wrap: anywhere;
570 /* Wrap non-pre code blocks (`text`) but not (```text```). */
571 .docblock :not(pre) > code,
572 .docblock-short code {
573 white-space: pre-wrap;
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 {
582 .top-doc .docblock h6 {
586 .docblock h5 { font-size: 1rem; }
587 .docblock h6 { font-size: 0.875rem; }
594 .docblock > :not(.more-examples-toggle):not(.example-wrap) {
604 .docblock code, .docblock-short code,
605 pre, .rustdoc.source .example-wrap {
606 background-color: var(--code-block-background-color);
615 border-collapse: collapse;
618 .docblock table td, .docblock table th {
620 border: 1px solid var(--border-color);
623 .docblock table tbody tr:nth-child(2n) {
624 background: var(--table-alt-row-background-color);
627 /* Shift "where ..." part of method or fn definition down a line */
644 #main-content > .item-info {
650 flex-flow: row nowrap;
651 margin: 4px 0 25px 0;
666 text-decoration: none;
669 .small-section-header {
670 /* fields use <span> tags, but should get their own lines */
675 .small-section-header:hover > .anchor, .impl:hover > .anchor,
676 .trait-impl:hover > .anchor, .variant:hover > .anchor {
683 background: none !important;
688 .small-section-header > .anchor {
692 h2.small-section-header > .anchor {
696 .main-heading a:hover,
697 .example-wrap > pre.rust a:hover,
699 .docblock a:not(.test-arrow):not(.scrape-help):hover,
700 .docblock-short a:not(.test-arrow):not(.scrape-help):hover,
702 text-decoration: underline;
705 .crate.block a.current { font-weight: 500; }
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:
712 "Soft wrap opportunities introduced by the word break are considered when
713 calculating min-content intrinsic sizes."
715 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#values
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
724 So, for table layouts, override the default with break-word, which does
725 _not_ affect min-content intrinsic sizes.
729 overflow-wrap: break-word;
738 .item-left, .item-right {
742 padding-right: 1.25rem;
745 .search-results-title {
748 /* flex layout allows shrinking the <select> appropriately if it becomes too large */
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;
755 /* ensures that 100% in properties of #crate-search-div:after
756 are relative to the size of this div */
758 /* allows this div (and with it the <select>-element "#crate-search") to be shrunk */
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 */
767 /* contents can overflow because of max-width limit, then show ellipsis */
768 text-overflow: ellipsis;
769 border: 1px solid var(--border-color);
773 -moz-appearance: none;
774 -webkit-appearance: none;
775 /* Removes default arrow from firefox */
777 background-color: var(--main-background-color);
782 #crate-search:hover, #crate-search:focus {
783 border-color: var(--crate-search-hover-border);
785 /* cancel stylistic differences in padding in firefox
786 for "appearance: none"-style (or equivalent) <select>s */
787 @-moz-document url-prefix() {
789 padding-left: 0px; /* == 4px - 4px */
790 padding-right: 19px; /* == 23px - 4px */
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 */
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);
813 #crate-search-div:hover::after, #crate-search-div:focus-within::after {
814 filter: var(--crate-search-div-hover-filter);
816 #crate-search > option {
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;
825 border: 1px solid var(--border-color);
830 background-color: var(--button-background-color);
831 color: var(--search-color);
833 .search-input:focus {
834 border-color: var(--search-input-focused-border-color);
841 .search-results.active {
845 .search-results > a {
847 /* A little margin ensures the browser's outlining of focused links has room to display. */
850 border-bottom: 1px solid var(--search-result-border-color);
854 .search-results > a > div {
858 .search-results > a > div.desc {
860 text-overflow: ellipsis;
864 .search-results a:hover,
865 .search-results a:focus {
866 background-color: var(--search-result-link-focus-background-color);
869 .search-results .result-name span.alias {
870 color: var(--search-results-alias-color);
872 .search-results .result-name span.grey {
873 color: var(--search-results-grey-color);
883 border: 1px solid var(--border-color);
884 background-color: var(--main-background-color);
885 color: var(--main-color);
886 --popover-arrow-offset: 11px;
889 /* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
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);
898 transform: rotate(-45deg);
902 /* use larger max-width for help popover, but not for help.html */
905 --popover-arrow-offset: 48px;
911 margin-right: 0.5rem;
913 #help span.top, #help span.bottom {
920 border-bottom: 1px solid var(--border-color);
926 border-top: 1px solid var(--border-color);
928 .side-by-side > div {
931 padding: 0 20px 20px 17px;
935 /* This min-height is needed to unify the height of the stab elements because some of them
944 margin-left: 0.3125em;
950 color: var(--main-color);
951 background-color: var(--stab-background-color);
954 white-space: pre-wrap;
956 display: inline-flex;
957 vertical-align: text-bottom;
960 .stab.portability > code {
962 color: var(--stab-code-color);
967 margin-right: 0.3rem;
970 /* Black one-pixel outline around emoji shapes */
979 .module-item.unstable,
980 .import-item.unstable {
996 color: var(--right-side-color);
1004 /* Code highlighting */
1006 color: var(--code-highlight-kw-color);
1009 color: var(--code-highlight-kw-2-color);
1011 pre.rust .lifetime {
1012 color: var(--code-highlight-lifetime-color);
1014 pre.rust .prelude-ty {
1015 color: var(--code-highlight-prelude-color);
1017 pre.rust .prelude-val {
1018 color: var(--code-highlight-prelude-val-color);
1021 color: var(--code-highlight-string-color);
1024 color: var(--code-highlight-number-color);
1026 pre.rust .bool-val {
1027 color: var(--code-highlight-literal-color);
1030 color: var(--code-highlight-self-color);
1033 color: var(--code-highlight-attribute-color);
1036 pre.rust .macro-nonterminal {
1037 color: var(--code-highlight-macro-color);
1039 pre.rust .question-mark {
1041 color: var(--code-highlight-question-mark-color);
1044 color: var(--code-highlight-comment-color);
1046 pre.rust .doccomment {
1047 color: var(--code-highlight-doc-comment-color);
1050 .rustdoc.source .example-wrap pre.rust a {
1051 background: var(--codeblock-link-background);
1054 .example-wrap.compile_fail,
1055 .example-wrap.should_panic {
1056 border-left: 2px solid var(--codeblock-error-color);
1059 .ignore.example-wrap {
1060 border-left: 2px solid var(--codeblock-ignore-color);
1063 .example-wrap.compile_fail:hover,
1064 .example-wrap.should_panic:hover {
1065 border-left: 2px solid var(--codeblock-error-hover-color);
1068 .example-wrap.ignore:hover {
1069 border-left: 2px solid var(--codeblock-ignore-hover-color);
1072 .example-wrap.compile_fail .tooltip,
1073 .example-wrap.should_panic .tooltip {
1074 color: var(--codeblock-error-color);
1077 .example-wrap.ignore .tooltip {
1078 color: var(--codeblock-ignore-color);
1081 .example-wrap.compile_fail:hover .tooltip,
1082 .example-wrap.should_panic:hover .tooltip {
1083 color: var(--codeblock-error-hover-color);
1086 .example-wrap.ignore:hover .tooltip {
1087 color: var(--codeblock-ignore-hover-color);
1090 .example-wrap .tooltip {
1097 .example-wrap .tooltip:hover::after {
1098 padding: 5px 3px 3px 3px;
1102 border: 1px solid var(--border-color);
1107 background-color: var(--tooltip-background-color);
1108 color: var(--tooltip-color);
1111 .example-wrap .tooltip:hover::before {
1118 border: 5px solid transparent;
1119 border-right-color: var(--tooltip-background-color);
1122 .example-wrap.ignore .tooltip:hover::after {
1123 content: "This example is not tested";
1125 .example-wrap.compile_fail .tooltip:hover::after {
1126 content: "This example deliberately fails to compile";
1128 .example-wrap.should_panic .tooltip:hover::after {
1129 content: "This example panics";
1131 .example-wrap.edition .tooltip:hover::after {
1132 content: "This code runs with edition " attr(data-edition);
1135 .example-wrap.compile_fail .tooltip,
1136 .example-wrap.should_panic .tooltip,
1137 .example-wrap.ignore .tooltip {
1145 padding: 5px 10px 5px 10px;
1147 font-size: 1.375rem;
1151 color: var(--test-arrow-color);
1152 background-color: var(--test-arrow-background-color);
1154 a.test-arrow:hover {
1155 color: var(--test-arrow-hover-color);
1156 background-color: var(--test-arrow-hover-background-color);
1158 .example-wrap:hover .test-arrow {
1159 visibility: visible;
1164 color: var(--code-attribute-color);
1172 .out-of-band > span.since {
1185 margin-bottom: 40px;
1188 .sub-variant > .sub-variant-field {
1194 background-color: var(--target-background-color);
1195 border-right: 3px solid var(--target-border-color);
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 {
1209 top: calc(100% - 10px);
1216 .notable .docblock {
1217 margin: 0.25em 0.5em;
1220 .notable .docblock pre, .notable .docblock code {
1221 background: transparent;
1225 white-space: pre-wrap;
1234 .search-failed.active {
1238 .search-failed > ul {
1247 flex-direction: row;
1252 #search-tabs button {
1254 font-size: 1.125rem;
1256 border-top: 2px solid;
1262 #search-tabs .count {
1264 color: var(--search-tab-title-count-color);
1267 #src-sidebar-toggle {
1272 border-bottom: 1px solid;
1275 justify-content: stretch;
1276 align-items: stretch;
1283 #source-sidebar > .title {
1286 border-bottom: 1px solid var(--border-color);
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);
1293 #source-sidebar div.files > a.selected {
1294 background-color: var(--source-sidebar-background-selected);
1296 #src-sidebar-toggle > button {
1305 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1306 -webkit-appearance: none;
1310 #settings-menu, #help-button {
1314 #settings-menu > a, #help-button > a {
1316 align-items: center;
1317 justify-content: center;
1318 background-color: var(--button-background-color);
1319 border: 1px solid var(--border-color);
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. */
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);
1334 color: var(--copy-path-button-color);
1335 background: var(--main-background-color);
1344 filter: var(--copy-path-img-filter);
1346 #copy-path:hover > img {
1347 filter: var(--copy-path-img-hover-filter);
1350 @keyframes rotating {
1352 transform: rotate(0deg);
1355 transform: rotate(360deg);
1358 #settings-menu.rotate > a img {
1359 animation: rotating 2s linear infinite;
1363 display: inline-block;
1365 font: 15px monospace;
1367 vertical-align: middle;
1368 border: solid 1px var(--border-color);
1370 color: var(--kbd-color);
1371 background-color: var(--kbd-background);
1372 box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color);
1383 details.dir-entry > summary {
1389 details.dir-entry div.folders, details.dir-entry div.files {
1393 details.dir-entry a {
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 {
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 {
1416 details.rustdoc-toggle > summary {
1418 /* focus outline is shown on `::before` instead of this */
1421 details.rustdoc-toggle > summary::-webkit-details-marker,
1422 details.rustdoc-toggle > summary::marker {
1426 details.rustdoc-toggle > summary.hideme > span {
1430 details.rustdoc-toggle > summary::before {
1431 background: url("toggle-plus-1092eb4930d581b0.svg") no-repeat top left;
1436 display: inline-block;
1437 vertical-align: middle;
1439 filter: var(--toggle-filter);
1442 details.rustdoc-toggle > summary.hideme > span,
1443 .more-examples-toggle summary, .more-examples-toggle .hide-more {
1444 color: var(--toggles-color);
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 {
1457 details.rustdoc-toggle > summary.hideme::after {
1458 /* "hideme" toggles already have a description when they're contracted */
1462 details.rustdoc-toggle > summary:focus::before,
1463 details.rustdoc-toggle > summary:hover::before {
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.
1472 outline: 1px dotted #000;
1473 outline-offset: 1px;
1476 details.non-exhaustive {
1480 details.rustdoc-toggle > summary.hideme::before {
1484 details.rustdoc-toggle > summary:not(.hideme)::before {
1490 .impl-items > details.rustdoc-toggle > summary:not(.hideme)::before {
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 {
1504 details.rustdoc-toggle[open] > summary.hideme > span {
1508 details.rustdoc-toggle[open] > summary::before {
1509 background: url("toggle-minus-31bbd6e4c77f5c96.svg") no-repeat top left;
1512 details.rustdoc-toggle[open] > summary::after {
1513 content: "Collapse";
1516 /* This is needed in docblocks to have the "â–¶" element to be on the same line. */
1517 .docblock summary > * {
1518 display: inline-block;
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 {
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
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.
1542 scroll-margin-top: 45px;
1546 /* Sidebar should overlay main content, rather than pushing main content to the right.
1547 Turn off `display: flex` on the body element. */
1557 flex-direction: column;
1562 margin-left: initial;
1566 .out-of-band .since::before {
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 {
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. */
1584 /* Reduce height slightly to account for mobile topbar. */
1585 height: calc(100vh - 45px);
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. */
1592 .rustdoc.source .sidebar {
1600 .source-sidebar-expanded .source .sidebar,
1601 .rustdoc:not(.source) .sidebar:focus-within {
1607 margin: auto 0.5em auto auto;
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
1616 .mobile-topbar h2 a {
1618 text-overflow: ellipsis;
1620 white-space: nowrap;
1623 .mobile-topbar .logo-container > img {
1626 margin: 5px 0 5px 20px;
1631 flex-direction: row;
1641 .sidebar-menu-toggle {
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. */
1647 color: var(--main-color);
1655 display: none !important;
1658 #search-tabs .count {
1662 #main-content > details.rustdoc-toggle > summary::before,
1663 #main-content > div > details.rustdoc-toggle > summary::before {
1667 #src-sidebar-toggle {
1675 border-top-right-radius: 3px;
1676 border-bottom-right-radius: 3px;
1681 .source-sidebar-expanded #src-sidebar-toggle {
1685 border-top-right-radius: unset;
1686 border-bottom-right-radius: unset;
1689 border-bottom: 1px solid;
1692 /* We don't display these buttons on mobile devices. */
1693 #copy-path, #help-button {
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 {
1703 /* Display an alternating layout on tablets and phones */
1704 .search-results > a {
1707 .search-results > a > div.desc, .item-right {
1711 .source-sidebar-expanded .source .sidebar {
1716 /* Position of the "[-]" element. */
1717 details.rustdoc-toggle:not(.top-doc) > summary {
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 {
1726 /* Align summary-nested and unnested item-info gizmos. */
1727 .impl-items > .item-info {
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 {
1745 background: var(--main-background-color);
1749 box-shadow: 0 0 4px var(--main-background-color);
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 {
1769 @media (max-width: 464px) {
1775 overflow-wrap: break-word;
1776 overflow-wrap: anywhere;
1780 flex-direction: column;
1784 align-self: stretch;
1787 .sub-logo-container > img {
1794 .implementors-toggle > summary,
1796 #implementors-list > .docblock,
1797 .impl-items > section,
1798 .impl-items > .rustdoc-toggle > summary,
1800 .methods > .rustdoc-toggle > summary
1802 margin-bottom: 0.75em;
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) {
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) {
1819 /* Begin: styles for --scrape-examples feature */
1821 .scraped-example-list .scrape-help {
1824 font-weight: normal;
1828 border: 1px solid var(--scrape-example-help-border-color);
1829 border-radius: 50px;
1830 color: var(--scrape-example-help-color);
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);
1838 /* So .scraped-example-title can be positioned absolutely */
1842 .scraped-example .code-wrapper {
1845 flex-direction: row;
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);
1858 .scraped-example:not(.expanded) .code-wrapper pre {
1861 /* See above comment, should be the same max-height. */
1862 max-height: calc(1.5em * 5 + 10px);
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);
1871 .scraped-example .code-wrapper .next,
1872 .scraped-example .code-wrapper .prev,
1873 .scraped-example .code-wrapper .expand {
1874 color: var(--main-color);
1881 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1882 -webkit-appearance: none;
1885 .scraped-example .code-wrapper .prev {
1888 .scraped-example .code-wrapper .next {
1891 .scraped-example .code-wrapper .expand {
1895 .scraped-example:not(.expanded) .code-wrapper:before,
1896 .scraped-example:not(.expanded) .code-wrapper:after {
1903 .scraped-example:not(.expanded) .code-wrapper:before {
1906 .scraped-example:not(.expanded) .code-wrapper:after {
1910 .scraped-example .code-wrapper .example-wrap {
1916 .scraped-example:not(.expanded) .code-wrapper .example-wrap {
1920 .scraped-example .example-wrap .rust span.highlight {
1921 background: var(--scrape-example-code-line-highlight);
1923 .scraped-example .example-wrap .rust span.highlight.focus {
1924 background: var(--scrape-example-code-line-highlight-focus);
1927 .more-examples-toggle {
1928 max-width: calc(100% + 25px);
1933 .more-examples-toggle .hide-more {
1938 .more-scraped-examples {
1947 right: calc(100% + 10px);
1952 .toggle-line-inner {
1955 background: var(--scrape-example-toggle-line-background);
1958 .toggle-line:hover .toggle-line-inner {
1959 background: var(--scrape-example-toggle-line-hover-background);
1962 .more-scraped-examples .scraped-example, .example-links {
1966 .more-scraped-examples .scraped-example:first-child {
1974 /* End: styles for --scrape-examples feature */