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;
541 -moz-user-select: none;
542 -ms-user-select: none;
545 color: var(--src-line-numbers-span-color);
548 .rustdoc .example-wrap > pre.src-line-numbers {
551 .src-line-numbers a, .src-line-numbers span {
552 color: var(--src-line-numbers-span-color);
555 .src-line-numbers :target {
556 background-color: transparent;
560 .src-line-numbers .line-highlighted {
561 background-color: var(--src-line-number-highlighted-background-color);
569 overflow-wrap: break-word;
570 overflow-wrap: anywhere;
572 /* Wrap non-pre code blocks (`text`) but not (```text```). */
573 .docblock :not(pre) > code,
574 .docblock-short code {
575 white-space: pre-wrap;
578 .top-doc .docblock h2 { font-size: 1.375rem; }
579 .top-doc .docblock h3 { font-size: 1.25rem; }
580 .top-doc .docblock h4,
581 .top-doc .docblock h5 {
584 .top-doc .docblock h6 {
588 .docblock h5 { font-size: 1rem; }
589 .docblock h6 { font-size: 0.875rem; }
596 .docblock > :not(.more-examples-toggle):not(.example-wrap) {
606 .docblock code, .docblock-short code,
607 pre, .rustdoc.source .example-wrap {
608 background-color: var(--code-block-background-color);
617 border-collapse: collapse;
620 .docblock table td, .docblock table th {
622 border: 1px solid var(--border-color);
625 .docblock table tbody tr:nth-child(2n) {
626 background: var(--table-alt-row-background-color);
629 /* Shift "where ..." part of method or fn definition down a line */
646 #main-content > .item-info {
652 flex-flow: row nowrap;
653 margin: 4px 0 25px 0;
668 text-decoration: none;
671 .small-section-header {
672 /* fields use <span> tags, but should get their own lines */
677 .small-section-header:hover > .anchor, .impl:hover > .anchor,
678 .trait-impl:hover > .anchor, .variant:hover > .anchor {
685 background: none !important;
690 .small-section-header > .anchor {
694 h2.small-section-header > .anchor {
698 .main-heading a:hover,
699 .example-wrap > pre.rust a:hover,
701 .docblock a:not(.test-arrow):not(.scrape-help):hover,
702 .docblock-short a:not(.test-arrow):not(.scrape-help):hover,
704 text-decoration: underline;
707 .crate.block a.current { font-weight: 500; }
709 /* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap
710 as much as needed on mobile (see
711 src/test/rustdoc-gui/type-declaration-overflow.goml for an example of why
712 this matters). The `anywhere` value means:
714 "Soft wrap opportunities introduced by the word break are considered when
715 calculating min-content intrinsic sizes."
717 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#values
719 For table layouts, that becomes a problem: the browser tries to make each
720 column as narrow as possible, and `overflow-wrap: anywhere` means it can do
721 so by breaking words - even if some other column could be shrunk without
722 breaking words! This shows up, for instance, in the `Structs` / `Modules` /
723 `Functions` (etcetera) sections of a module page, and when a docblock
726 So, for table layouts, override the default with break-word, which does
727 _not_ affect min-content intrinsic sizes.
731 overflow-wrap: break-word;
740 .item-left, .item-right {
744 padding-right: 1.25rem;
747 .search-results-title {
750 /* flex layout allows shrinking the <select> appropriately if it becomes too large */
752 /* make things look like in a line, despite the fact that we're using a layout
753 with boxes (i.e. from the flex layout) */
754 align-items: baseline;
757 /* ensures that 100% in properties of #crate-search-div:after
758 are relative to the size of this div */
760 /* allows this div (and with it the <select>-element "#crate-search") to be shrunk */
765 /* keep these two in sync with "@-moz-document url-prefix()" below */
766 padding: 0 23px 0 4px;
767 /* prevents the <select> from overflowing the containing div in case it's shrunk */
769 /* contents can overflow because of max-width limit, then show ellipsis */
770 text-overflow: ellipsis;
771 border: 1px solid var(--border-color);
775 -moz-appearance: none;
776 -webkit-appearance: none;
777 /* Removes default arrow from firefox */
779 background-color: var(--main-background-color);
784 #crate-search:hover, #crate-search:focus {
785 border-color: var(--crate-search-hover-border);
787 /* cancel stylistic differences in padding in firefox
788 for "appearance: none"-style (or equivalent) <select>s */
789 @-moz-document url-prefix() {
791 padding-left: 0px; /* == 4px - 4px */
792 padding-right: 19px; /* == 23px - 4px */
795 /* pseudo-element for holding the dropdown-arrow image; needs to be a separate thing
796 so that we can apply CSS-filters to change the arrow color in themes */
797 #crate-search-div::after {
798 /* lets clicks through! */
799 pointer-events: none;
800 /* completely covers the underlying div */
807 background-repeat: no-repeat;
808 background-size: 20px;
809 background-position: calc(100% - 2px) 56%;
810 /* image is black color */
811 background-image: url("down-arrow-927217e04c7463ac.svg");
812 /* changes the arrow image color */
813 filter: var(--crate-search-div-filter);
815 #crate-search-div:hover::after, #crate-search-div:focus-within::after {
816 filter: var(--crate-search-div-hover-filter);
818 #crate-search > option {
822 /* Override Normalize.css: it has a rule that sets
823 -webkit-appearance: textfield for search inputs. That
824 causes rounded corners and no border on iOS Safari. */
825 -webkit-appearance: none;
827 border: 1px solid var(--border-color);
832 background-color: var(--button-background-color);
833 color: var(--search-color);
835 .search-input:focus {
836 border-color: var(--search-input-focused-border-color);
843 .search-results.active {
847 .search-results > a {
849 /* A little margin ensures the browser's outlining of focused links has room to display. */
852 border-bottom: 1px solid var(--search-result-border-color);
856 .search-results > a > div {
860 .search-results > a > div.desc {
862 text-overflow: ellipsis;
866 .search-results a:hover,
867 .search-results a:focus {
868 background-color: var(--search-result-link-focus-background-color);
871 .search-results .result-name span.alias {
872 color: var(--search-results-alias-color);
874 .search-results .result-name span.grey {
875 color: var(--search-results-grey-color);
885 border: 1px solid var(--border-color);
886 background-color: var(--main-background-color);
887 color: var(--main-color);
888 --popover-arrow-offset: 11px;
891 /* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
895 right: var(--popover-arrow-offset);
896 border: solid var(--border-color);
897 border-width: 1px 1px 0 0;
898 background-color: var(--main-background-color);
900 transform: rotate(-45deg);
904 /* use larger max-width for help popover, but not for help.html */
907 --popover-arrow-offset: 48px;
913 margin-right: 0.5rem;
915 #help span.top, #help span.bottom {
922 border-bottom: 1px solid var(--border-color);
928 border-top: 1px solid var(--border-color);
930 .side-by-side > div {
933 padding: 0 20px 20px 17px;
937 /* This min-height is needed to unify the height of the stab elements because some of them
946 margin-left: 0.3125em;
952 color: var(--main-color);
953 background-color: var(--stab-background-color);
956 white-space: pre-wrap;
958 display: inline-flex;
959 vertical-align: text-bottom;
962 .stab.portability > code {
964 color: var(--stab-code-color);
969 margin-right: 0.3rem;
972 /* Black one-pixel outline around emoji shapes */
981 .module-item.unstable,
982 .import-item.unstable {
998 color: var(--right-side-color);
1006 /* Code highlighting */
1008 color: var(--code-highlight-kw-color);
1011 color: var(--code-highlight-kw-2-color);
1013 pre.rust .lifetime {
1014 color: var(--code-highlight-lifetime-color);
1016 pre.rust .prelude-ty {
1017 color: var(--code-highlight-prelude-color);
1019 pre.rust .prelude-val {
1020 color: var(--code-highlight-prelude-val-color);
1023 color: var(--code-highlight-string-color);
1026 color: var(--code-highlight-number-color);
1028 pre.rust .bool-val {
1029 color: var(--code-highlight-literal-color);
1032 color: var(--code-highlight-self-color);
1035 color: var(--code-highlight-attribute-color);
1038 pre.rust .macro-nonterminal {
1039 color: var(--code-highlight-macro-color);
1041 pre.rust .question-mark {
1043 color: var(--code-highlight-question-mark-color);
1046 color: var(--code-highlight-comment-color);
1048 pre.rust .doccomment {
1049 color: var(--code-highlight-doc-comment-color);
1052 .rustdoc.source .example-wrap pre.rust a {
1053 background: var(--codeblock-link-background);
1056 .example-wrap.compile_fail,
1057 .example-wrap.should_panic {
1058 border-left: 2px solid var(--codeblock-error-color);
1061 .ignore.example-wrap {
1062 border-left: 2px solid var(--codeblock-ignore-color);
1065 .example-wrap.compile_fail:hover,
1066 .example-wrap.should_panic:hover {
1067 border-left: 2px solid var(--codeblock-error-hover-color);
1070 .example-wrap.ignore:hover {
1071 border-left: 2px solid var(--codeblock-ignore-hover-color);
1074 .example-wrap.compile_fail .tooltip,
1075 .example-wrap.should_panic .tooltip {
1076 color: var(--codeblock-error-color);
1079 .example-wrap.ignore .tooltip {
1080 color: var(--codeblock-ignore-color);
1083 .example-wrap.compile_fail:hover .tooltip,
1084 .example-wrap.should_panic:hover .tooltip {
1085 color: var(--codeblock-error-hover-color);
1088 .example-wrap.ignore:hover .tooltip {
1089 color: var(--codeblock-ignore-hover-color);
1092 .example-wrap .tooltip {
1099 .example-wrap .tooltip:hover::after {
1100 padding: 5px 3px 3px 3px;
1104 border: 1px solid var(--border-color);
1109 background-color: var(--tooltip-background-color);
1110 color: var(--tooltip-color);
1113 .example-wrap .tooltip:hover::before {
1120 border: 5px solid transparent;
1121 border-right-color: var(--tooltip-background-color);
1124 .example-wrap.ignore .tooltip:hover::after {
1125 content: "This example is not tested";
1127 .example-wrap.compile_fail .tooltip:hover::after {
1128 content: "This example deliberately fails to compile";
1130 .example-wrap.should_panic .tooltip:hover::after {
1131 content: "This example panics";
1133 .example-wrap.edition .tooltip:hover::after {
1134 content: "This code runs with edition " attr(data-edition);
1137 .example-wrap.compile_fail .tooltip,
1138 .example-wrap.should_panic .tooltip,
1139 .example-wrap.ignore .tooltip {
1147 padding: 5px 10px 5px 10px;
1149 font-size: 1.375rem;
1153 color: var(--test-arrow-color);
1154 background-color: var(--test-arrow-background-color);
1156 a.test-arrow:hover {
1157 color: var(--test-arrow-hover-color);
1158 background-color: var(--test-arrow-hover-background-color);
1160 .example-wrap:hover .test-arrow {
1161 visibility: visible;
1166 color: var(--code-attribute-color);
1174 .out-of-band > span.since {
1187 margin-bottom: 40px;
1190 .sub-variant > .sub-variant-field {
1196 background-color: var(--target-background-color);
1197 border-right: 3px solid var(--target-border-color);
1206 /* placeholder thunk so that the mouse can easily travel from "(i)" to popover
1207 the resulting "hover tunnel" is a stepped triangle, approximating
1208 https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */
1209 .notable-traits:hover::after {
1211 top: calc(100% - 10px);
1218 .notable .docblock {
1219 margin: 0.25em 0.5em;
1222 .notable .docblock pre, .notable .docblock code {
1223 background: transparent;
1227 white-space: pre-wrap;
1236 .search-failed.active {
1240 .search-failed > ul {
1249 flex-direction: row;
1254 #search-tabs button {
1256 font-size: 1.125rem;
1258 border-top: 2px solid;
1264 #search-tabs .count {
1266 color: var(--search-tab-title-count-color);
1269 #src-sidebar-toggle {
1274 border-bottom: 1px solid;
1277 justify-content: stretch;
1278 align-items: stretch;
1285 #source-sidebar > .title {
1288 border-bottom: 1px solid var(--border-color);
1291 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
1292 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
1293 background-color: var(--source-sidebar-background-hover);
1295 #source-sidebar div.files > a.selected {
1296 background-color: var(--source-sidebar-background-selected);
1298 #src-sidebar-toggle > button {
1307 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1308 -webkit-appearance: none;
1312 #settings-menu, #help-button {
1316 #settings-menu > a, #help-button > a {
1318 align-items: center;
1319 justify-content: center;
1320 background-color: var(--button-background-color);
1321 border: 1px solid var(--border-color);
1323 color: var(--settings-button-color);
1324 /* Rare exception to specifying font sizes in rem. Since this is acting
1325 as an icon, it's okay to specify their sizes in pixels. */
1330 #settings-menu > a:hover, #settings-menu > a:focus,
1331 #help-button > a:hover, #help-button > a:focus {
1332 border-color: var(--settings-button-border-focus);
1336 color: var(--copy-path-button-color);
1337 background: var(--main-background-color);
1346 filter: var(--copy-path-img-filter);
1348 #copy-path:hover > img {
1349 filter: var(--copy-path-img-hover-filter);
1352 @keyframes rotating {
1354 transform: rotate(0deg);
1357 transform: rotate(360deg);
1360 #settings-menu.rotate > a img {
1361 animation: rotating 2s linear infinite;
1365 display: inline-block;
1367 font: 15px monospace;
1369 vertical-align: middle;
1370 border: solid 1px var(--border-color);
1372 color: var(--kbd-color);
1373 background-color: var(--kbd-background);
1374 box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color);
1385 details.dir-entry > summary {
1391 details.dir-entry div.folders, details.dir-entry div.files {
1395 details.dir-entry a {
1399 /* We use CSS containment on the details elements because most sizeable elements
1400 of the page are contained in one of these. This also makes re-rendering
1401 faster on document changes (like closing and opening toggles).
1402 Unfortunately we can't yet specify contain: content or contain: strict
1403 because the [-]/[+] toggles extend past the boundaries of the <details>
1404 https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
1405 details.rustdoc-toggle {
1410 /* The hideme class is used on summary tags that contain a span with
1411 placeholder text shown only when the toggle is closed. For instance,
1412 "Expand description" or "Show methods". */
1413 details.rustdoc-toggle > summary.hideme {
1418 details.rustdoc-toggle > summary {
1420 /* focus outline is shown on `::before` instead of this */
1423 details.rustdoc-toggle > summary::-webkit-details-marker,
1424 details.rustdoc-toggle > summary::marker {
1428 details.rustdoc-toggle > summary.hideme > span {
1432 details.rustdoc-toggle > summary::before {
1433 background: url("toggle-plus-1092eb4930d581b0.svg") no-repeat top left;
1438 display: inline-block;
1439 vertical-align: middle;
1441 filter: var(--toggle-filter);
1444 details.rustdoc-toggle > summary.hideme > span,
1445 .more-examples-toggle summary, .more-examples-toggle .hide-more {
1446 color: var(--toggles-color);
1449 /* Screen readers see the text version at the end the line.
1450 Visual readers see the icon at the start of the line, but small and transparent. */
1451 details.rustdoc-toggle > summary::after {
1459 details.rustdoc-toggle > summary.hideme::after {
1460 /* "hideme" toggles already have a description when they're contracted */
1464 details.rustdoc-toggle > summary:focus::before,
1465 details.rustdoc-toggle > summary:hover::before {
1469 details.rustdoc-toggle > summary:focus-visible::before {
1470 /* The SVG is black, and gets turned white using a filter in the dark themes.
1471 Do the same with the outline.
1472 The dotted 1px style is copied from Firefox's focus ring style.
1474 outline: 1px dotted #000;
1475 outline-offset: 1px;
1478 details.non-exhaustive {
1482 details.rustdoc-toggle > summary.hideme::before {
1486 details.rustdoc-toggle > summary:not(.hideme)::before {
1492 .impl-items > details.rustdoc-toggle > summary:not(.hideme)::before {
1497 /* When a "hideme" summary is open and the "Expand description" or "Show
1498 methods" text is hidden, we want the [-] toggle that remains to not
1499 affect the layout of the items to its right. To do that, we use
1500 absolute positioning. Note that we also set position: relative
1501 on the parent <details> to make this work properly. */
1502 details.rustdoc-toggle[open] > summary.hideme {
1506 details.rustdoc-toggle[open] > summary.hideme > span {
1510 details.rustdoc-toggle[open] > summary::before {
1511 background: url("toggle-minus-31bbd6e4c77f5c96.svg") no-repeat top left;
1514 details.rustdoc-toggle[open] > summary::after {
1515 content: "Collapse";
1518 /* This is needed in docblocks to have the "â–¶" element to be on the same line. */
1519 .docblock summary > * {
1520 display: inline-block;
1523 /* In case there is no documentation before a code block, we need to add some margin at the top
1524 to prevent an overlay between the "collapse toggle" and the information tooltip.
1525 However, it's not needed with smaller screen width because the doc/code block is always put
1526 "one line" below. */
1527 .docblock > .example-wrap:first-child .tooltip {
1534 WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
1535 If you update this line, then you also need to update the line with the same warning
1538 @media (max-width: 700px) {
1539 /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
1540 or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
1541 by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size.
1544 scroll-margin-top: 45px;
1548 /* Sidebar should overlay main content, rather than pushing main content to the right.
1549 Turn off `display: flex` on the body element. */
1559 flex-direction: column;
1564 margin-left: initial;
1568 .out-of-band .since::before {
1572 /* Hide the logo and item name from the sidebar. Those are displayed
1573 in the mobile-topbar instead. */
1574 .sidebar .logo-container,
1575 .sidebar .location {
1582 /* Hide the sidebar offscreen while not in use. Doing this instead of display: none means
1583 the sidebar stays visible for screen readers, which is useful for navigation. */
1586 /* Reduce height slightly to account for mobile topbar. */
1587 height: calc(100vh - 45px);
1591 /* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
1592 so don't bump down the main content or the sidebar. */
1594 .rustdoc.source .sidebar {
1602 .source-sidebar-expanded .source .sidebar,
1603 .sidebar:focus-within {
1607 .rustdoc.source > .sidebar {
1613 margin: auto 0.5em auto auto;
1615 /* Rare exception to specifying font sizes in rem. Since the topbar
1616 height is specified in pixels, this also has to be specified in
1617 pixels to avoid overflowing the topbar when the user sets a bigger
1622 .mobile-topbar h2 a {
1624 text-overflow: ellipsis;
1626 white-space: nowrap;
1629 .mobile-topbar .logo-container > img {
1632 margin: 5px 0 5px 20px;
1637 flex-direction: row;
1647 .sidebar-menu-toggle {
1649 /* Rare exception to specifying font sizes in rem. Since this is acting
1650 as an icon, it's okay to specify its sizes in pixels. */
1653 color: var(--main-color);
1665 display: none !important;
1668 #search-tabs .count {
1672 #main-content > details.rustdoc-toggle > summary::before,
1673 #main-content > div > details.rustdoc-toggle > summary::before {
1677 #src-sidebar-toggle {
1685 border-top-right-radius: 3px;
1686 border-bottom-right-radius: 3px;
1691 .source-sidebar-expanded #src-sidebar-toggle {
1695 border-top-right-radius: unset;
1696 border-bottom-right-radius: unset;
1699 border-bottom: 1px solid;
1702 /* We don't display these buttons on mobile devices. */
1703 #copy-path, #help-button {
1707 /* Display an alternating layout on tablets and phones */
1708 .item-table, .item-row, .item-left, .item-right,
1709 .search-results > a, .search-results > a > div {
1713 /* Display an alternating layout on tablets and phones */
1714 .search-results > a {
1717 .search-results > a > div.desc, .item-right {
1721 .source-sidebar-expanded .source .sidebar {
1726 /* Position of the "[-]" element. */
1727 details.rustdoc-toggle:not(.top-doc) > summary {
1730 .impl-items > details.rustdoc-toggle > summary:not(.hideme)::before,
1731 #main-content > details.rustdoc-toggle:not(.top-doc) > summary::before,
1732 #main-content > div > details.rustdoc-toggle > summary::before {
1736 /* Align summary-nested and unnested item-info gizmos. */
1737 .impl-items > .item-info {
1747 /* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */
1748 @media (min-width: 701px) {
1749 /* Places file-link for a scraped example on top of the example to save space.
1750 We only do this on large screens so the file-link doesn't overlap too much
1751 with the example's content. */
1752 .scraped-example-title {
1755 background: var(--main-background-color);
1759 box-shadow: 0 0 4px var(--main-background-color);
1764 nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path,
1765 details.rustdoc-toggle[open] > summary::before, details.rustdoc-toggle > summary::before,
1766 details.rustdoc-toggle.top-doc > summary {
1779 @media (max-width: 464px) {
1785 overflow-wrap: break-word;
1786 overflow-wrap: anywhere;
1790 flex-direction: column;
1794 align-self: stretch;
1797 .sub-logo-container > img {
1804 .implementors-toggle > summary,
1806 #implementors-list > .docblock,
1807 .impl-items > section,
1808 .impl-items > .rustdoc-toggle > summary,
1810 .methods > .rustdoc-toggle > summary
1812 margin-bottom: 0.75em;
1815 .variants > .docblock,
1816 .implementors-toggle > .docblock,
1817 .impl-items > .rustdoc-toggle[open]:not(:last-child),
1818 .methods > .rustdoc-toggle[open]:not(:last-child),
1819 .implementors-toggle[open]:not(:last-child) {
1823 #trait-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1824 #synthetic-implementations-list .impl-items > .rustdoc-toggle:not(:last-child),
1825 #blanket-implementations-list .impl-items > .rustdoc-toggle:not(:last-child) {
1829 /* Begin: styles for --scrape-examples feature */
1831 .scraped-example-list .scrape-help {
1834 font-weight: normal;
1838 border: 1px solid var(--scrape-example-help-border-color);
1839 border-radius: 50px;
1840 color: var(--scrape-example-help-color);
1842 .scraped-example-list .scrape-help:hover {
1843 border-color: var(--scrape-example-help-hover-border-color);
1844 color: var(--scrape-example-help-hover-color);
1848 /* So .scraped-example-title can be positioned absolutely */
1852 .scraped-example .code-wrapper {
1855 flex-direction: row;
1860 .scraped-example:not(.expanded) .code-wrapper {
1861 /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number
1862 * of lines shown in the un-expanded example code viewer. This pre needs to have
1863 * a max-height equal to line-height * N. The line-height is currently 1.5em,
1864 * and we include additional 10px for padding. */
1865 max-height: calc(1.5em * 5 + 10px);
1868 .scraped-example:not(.expanded) .code-wrapper pre {
1871 /* See above comment, should be the same max-height. */
1872 max-height: calc(1.5em * 5 + 10px);
1875 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper,
1876 .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre {
1877 /* See above comment, except this height is based on HIDDEN_MAX_LINES. */
1878 max-height: calc(1.5em * 10 + 10px);
1881 .scraped-example .code-wrapper .next,
1882 .scraped-example .code-wrapper .prev,
1883 .scraped-example .code-wrapper .expand {
1884 color: var(--main-color);
1891 /* iOS button gradient: https://stackoverflow.com/q/5438567 */
1892 -webkit-appearance: none;
1895 .scraped-example .code-wrapper .prev {
1898 .scraped-example .code-wrapper .next {
1901 .scraped-example .code-wrapper .expand {
1905 .scraped-example:not(.expanded) .code-wrapper:before,
1906 .scraped-example:not(.expanded) .code-wrapper:after {
1913 .scraped-example:not(.expanded) .code-wrapper:before {
1916 .scraped-example:not(.expanded) .code-wrapper:after {
1920 .scraped-example .code-wrapper .example-wrap {
1926 .scraped-example:not(.expanded) .code-wrapper .example-wrap {
1930 .scraped-example .example-wrap .rust span.highlight {
1931 background: var(--scrape-example-code-line-highlight);
1933 .scraped-example .example-wrap .rust span.highlight.focus {
1934 background: var(--scrape-example-code-line-highlight-focus);
1937 .more-examples-toggle {
1938 max-width: calc(100% + 25px);
1943 .more-examples-toggle .hide-more {
1948 .more-scraped-examples {
1957 right: calc(100% + 10px);
1962 .toggle-line-inner {
1965 background: var(--scrape-example-toggle-line-background);
1968 .toggle-line:hover .toggle-line-inner {
1969 background: var(--scrape-example-toggle-line-hover-background);
1972 .more-scraped-examples .scraped-example, .example-links {
1976 .more-scraped-examples .scraped-example:first-child {
1984 /* End: styles for --scrape-examples feature */