/* See FiraSans-LICENSE.txt for the Fira Sans license. */ @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; src: local('Fira Sans'), url("FiraSans-Regular-018c141bf0843ffd.woff2") format("woff2"); font-display: swap; } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; src: local('Fira Sans Medium'), url("FiraSans-Medium-8f9a781e4970d388.woff2") format("woff2"); font-display: swap; } /* See SourceSerif4-LICENSE.md for the Source Serif 4 license. */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; src: local('Source Serif 4'), url("SourceSerif4-Regular-1f7d512b176f0f72.ttf.woff2") format("woff2"); font-display: swap; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; src: local('Source Serif 4 Italic'), url("SourceSerif4-It-d034fe4ef9d0fa00.ttf.woff2") format("woff2"); font-display: swap; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; src: local('Source Serif 4 Bold'), url("SourceSerif4-Bold-124a1ca42af929b6.ttf.woff2") format("woff2"); font-display: swap; } /* See SourceCodePro-LICENSE.txt for the Source Code Pro license. */ @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 400; /* Avoid using locally installed font because bad versions are in circulation: * see https://github.com/rust-lang/rust/issues/24355 */ src: url("SourceCodePro-Regular-562dcc5011b6de7d.ttf.woff2") format("woff2"); font-display: swap; } @font-face { font-family: 'Source Code Pro'; font-style: italic; font-weight: 400; src: url("SourceCodePro-It-1cc31594bf4f1f79.ttf.woff2") format("woff2"); font-display: swap; } @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 600; src: url("SourceCodePro-Semibold-d899c5a5c4aeb14a.ttf.woff2") format("woff2"); font-display: swap; } /* Avoid using legacy CJK serif fonts in Windows like Batang. */ @font-face { font-family: 'NanumBarunGothic'; src: url("NanumBarunGothic-0f09457c7a19b7c6.ttf.woff2") format("woff2"); font-display: swap; unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF; } * { box-sizing: border-box; } /* This part handles the "default" theme being used depending on the system one. */ html { content: ""; } @media (prefers-color-scheme: light) { html { content: "light"; } } @media (prefers-color-scheme: dark) { html { content: "dark"; } } /* General structure and fonts */ body { /* Line spacing at least 1.5 per Web Content Accessibility Guidelines https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */ font: 1rem/1.5 "Source Serif 4", NanumBarunGothic, serif; margin: 0; position: relative; /* We use overflow-wrap: break-word for Safari, which doesn't recognize `anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */ overflow-wrap: break-word; /* Then override it with `anywhere`, which is required to make non-Safari browsers break more aggressively when we want them to. */ overflow-wrap: anywhere; font-feature-settings: "kern", "liga"; background-color: var(--main-background-color); color: var(--main-color); } h1 { font-size: 1.5rem; /* 24px */ } h2 { font-size: 1.375rem; /* 22px */ } h3 { font-size: 1.25rem; /* 20px */ } h1, h2, h3, h4, h5, h6 { font-weight: 500; } h1, h2, h3, h4 { margin: 25px 0 15px 0; padding-bottom: 6px; } .docblock h3, .docblock h4, h5, h6 { margin: 15px 0 5px 0; } .docblock > h2:first-child, .docblock > h3:first-child, .docblock > h4:first-child, .docblock > h5:first-child, .docblock > h6:first-child { margin-top: 0; } .main-heading h1 { margin: 0; padding: 0; flex-grow: 1; /* We use overflow-wrap: break-word for Safari, which doesn't recognize `anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */ overflow-wrap: break-word; /* Then override it with `anywhere`, which is required to make non-Safari browsers break more aggressively when we want them to. */ overflow-wrap: anywhere; } .main-heading { display: flex; flex-wrap: wrap; padding-bottom: 6px; margin-bottom: 15px; } /* The only headings that get underlines are: Markdown-generated headings within the top-doc Rustdoc-generated h2 section headings (e.g. "Implementations", "Required Methods", etc) Underlines elsewhere in the documentation break up visual flow and tend to invert section hierarchies. */ .content h2, .top-doc .docblock > h3, .top-doc .docblock > h4 { border-bottom: 1px solid var(--headings-border-bottom-color); } h3.code-header { font-size: 1.125rem; /* 18px */ } h4.code-header { font-size: 1rem; } .code-header { font-weight: 600; margin: 0; padding: 0; } #crate-search, h1, h2, h3, h4, h5, h6, .sidebar, .mobile-topbar, .search-input, .search-results .result-name, .item-left > a, .out-of-band, span.since, a.srclink, #help-button > a, summary.hideme, .scraped-example-list, /* This selector is for the items listed in the "all items" page. */ ul.all-items { font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif; } #toggle-all-docs, a.anchor, .small-section-header a, #source-sidebar a, pre.rust a, .sidebar h2 a, .sidebar h3 a, .mobile-topbar h2 a, h1 a, .search-results a, .stab, .result-name .primitive > i, .result-name .keyword > i { color: var(--main-color); } .content span.enum, .content a.enum, .content span.struct, .content a.struct, .content span.union, .content a.union, .content span.primitive, .content a.primitive, .content span.type, .content a.type, .content span.foreigntype, .content a.foreigntype { color: var(--type-link-color); } .content span.trait, .content a.trait, .content span.traitalias, .content a.traitalias { color: var(--trait-link-color); } .content span.associatedtype, .content a.associatedtype, .content span.constant, .content a.constant, .content span.static, .content a.static { color: var(--assoc-item-link-color); } .content span.fn, .content a.fn, .content span.method, .content a.method, .content span.tymethod, .content a.tymethod { color: var(--function-link-color); } .content span.attr, .content a.attr, .content span.derive, .content a.derive, .content span.macro, .content a.macro { color: var(--macro-link-color); } .content span.mod, .content a.mod { color: var(--mod-link-color); } .content span.keyword, .content a.keyword { color: var(--keyword-link-color); } a { color: var(--link-color); text-decoration: none; } ol, ul { padding-left: 24px; } ul ul, ol ul, ul ol, ol ol { margin-bottom: .625em; } p { /* Paragraph spacing at least 1.5 times line spacing per Web Content Accessibility Guidelines. Line-height is 1.5rem, so line spacing is .5rem; .75em is 1.5 times that. https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */ margin: 0 0 .75em 0; } /* For the last child of a div, the margin will be taken care of by the margin-top of the next item. */ p:last-child { margin: 0; } /* Fix some style changes due to normalize.css 8 */ button { /* Buttons on Safari have different default padding than other platforms. Make them the same. */ padding: 1px 6px; /* Opinionated tweak: use pointer cursor as clickability signifier. */ cursor: pointer; } /* end tweaks for normalize.css 8 */ button#toggle-all-docs { padding: 0; background: none; border: none; /* iOS button gradient: https://stackoverflow.com/q/5438567 */ -webkit-appearance: none; opacity: 1; } .rustdoc { display: flex; flex-direction: row; flex-wrap: nowrap; } main { position: relative; flex-grow: 1; padding: 10px 15px 40px 45px; min-width: 0; /* avoid growing beyond the size limit */ } .source main { padding: 15px; } .width-limiter { max-width: 960px; margin-right: auto; } details:not(.toggle) summary { margin-bottom: .6em; } code, pre, a.test-arrow, .code-header { font-family: "Source Code Pro", monospace; } .docblock code, .docblock-short code { border-radius: 3px; padding: 0 0.125em; } .docblock pre code, .docblock-short pre code { padding: 0; } pre { padding: 14px; line-height: 1.5; /* https://github.com/rust-lang/rust/issues/105906 */ } .item-decl pre { overflow-x: auto; } /* This rule allows to have scrolling on the X axis. */ .item-decl .type-contents-toggle { contain: initial; } .source .content pre { padding: 20px; } .rustdoc.source .example-wrap > pre.src-line-numbers { padding: 20px 0 20px 4px; } img { max-width: 100%; } .sub-logo-container, .logo-container { /* zero text boxes so that computed line height = image height exactly */ line-height: 0; display: block; } .sub-logo-container { margin-right: 32px; } .sub-logo-container > img { height: 60px; width: 60px; object-fit: contain; } .rust-logo { filter: var(--rust-logo-filter); } .sidebar { font-size: 0.875rem; flex: 0 0 200px; overflow-y: scroll; position: sticky; height: 100vh; top: 0; left: 0; } .rustdoc.source .sidebar { flex-basis: 50px; border-right: 1px solid; overflow-x: hidden; /* The sidebar is by default hidden */ overflow-y: hidden; } .sidebar, .mobile-topbar, .sidebar-menu-toggle, #src-sidebar-toggle, #source-sidebar { background-color: var(--sidebar-background-color); } #src-sidebar-toggle > button:hover, #src-sidebar-toggle > button:focus { background-color: var(--sidebar-background-color-hover); } .source .sidebar > *:not(#src-sidebar-toggle) { visibility: hidden; } .source-sidebar-expanded .source .sidebar { overflow-y: auto; flex-basis: 300px; } .source-sidebar-expanded .source .sidebar > *:not(#src-sidebar-toggle) { visibility: visible; } #all-types { margin-top: 1em; } /* Improve the scrollbar display on firefox */ * { scrollbar-width: initial; scrollbar-color: var(--scrollbar-color); } .sidebar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-color); } /* Improve the scrollbar display on webkit-based browsers */ ::-webkit-scrollbar { width: 12px; } .sidebar::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0; background-color: var(--scrollbar-track-background-color); } .sidebar::-webkit-scrollbar-track { background-color: var(--scrollbar-track-background-color); } ::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-background-color); } /* Everything else */ .hidden { display: none !important; } .sidebar .logo-container { margin-top: 10px; margin-bottom: 10px; text-align: center; } .version { overflow-wrap: break-word; } .logo-container > img { height: 100px; width: 100px; } ul.block, .block li { padding: 0; margin: 0; list-style: none; } .sidebar-elems a, .sidebar > h2 a { display: block; padding: 0.25rem; /* 4px */ margin-left: -0.25rem; } .sidebar h2 { overflow-wrap: anywhere; padding: 0; margin: 0.7rem 0; } .sidebar h3 { font-size: 1.125rem; /* 18px */ padding: 0; margin: 0; } .sidebar-elems, .sidebar > h2 { padding-left: 24px; } .sidebar a { color: var(--sidebar-link-color); } .sidebar .current, .sidebar a:hover:not(.logo-container) { background-color: var(--sidebar-current-link-background-color); } .sidebar-elems .block { margin-bottom: 2em; } .sidebar-elems .block li a { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .mobile-topbar { display: none; } .rustdoc .example-wrap { display: flex; position: relative; margin-bottom: 10px; } /* For the last child of a div, the margin will be taken care of by the margin-top of the next item. */ .rustdoc .example-wrap:last-child { margin-bottom: 0px; } .rustdoc .example-wrap > pre { margin: 0; flex-grow: 1; overflow-x: auto; } .rustdoc .example-wrap > pre.example-line-numbers, .rustdoc .example-wrap > pre.src-line-numbers { flex-grow: 0; min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */ overflow: initial; text-align: right; -webkit-user-select: none; user-select: none; padding: 14px 8px; color: var(--src-line-numbers-span-color); } .rustdoc .example-wrap > pre.src-line-numbers { padding: 14px 0; } .src-line-numbers a, .src-line-numbers span { color: var(--src-line-numbers-span-color); padding: 0 8px; } .src-line-numbers :target { background-color: transparent; border-right: none; padding: 0 8px; } .src-line-numbers .line-highlighted { background-color: var(--src-line-number-highlighted-background-color); } .search-loading { text-align: center; } .docblock-short { overflow-wrap: break-word; overflow-wrap: anywhere; } /* Wrap non-pre code blocks (`text`) but not (```text```). */ .docblock :not(pre) > code, .docblock-short code { white-space: pre-wrap; } .top-doc .docblock h2 { font-size: 1.375rem; } .top-doc .docblock h3 { font-size: 1.25rem; } .top-doc .docblock h4, .top-doc .docblock h5 { font-size: 1.125rem; } .top-doc .docblock h6 { font-size: 1rem; } .docblock h5 { font-size: 1rem; } .docblock h6 { font-size: 0.875rem; } .docblock { margin-left: 24px; position: relative; } .docblock > :not(.more-examples-toggle):not(.example-wrap) { max-width: 100%; overflow-x: auto; } .out-of-band { flex-grow: 0; font-size: 1.125rem; } .docblock code, .docblock-short code, pre, .rustdoc.source .example-wrap { background-color: var(--code-block-background-color); } #main-content { position: relative; } .docblock table { margin: .5em 0; border-collapse: collapse; } .docblock table td, .docblock table th { padding: .5em; border: 1px solid var(--border-color); } .docblock table tbody tr:nth-child(2n) { background: var(--table-alt-row-background-color); } /* Shift "where ..." part of method or fn definition down a line */ .method .where, .fn .where, .where.fmt-newline { display: block; font-size: 0.875rem; } .item-info { display: block; margin-left: 24px; } .item-info code { font-size: 0.875rem; } #main-content > .item-info { margin-left: 0; } nav.sub { flex-grow: 1; flex-flow: row nowrap; margin: 4px 0 25px 0; display: flex; align-items: center; } .search-form { position: relative; display: flex; height: 34px; flex-grow: 1; } .source nav.sub { margin: 0 0 15px 0; } .small-section-header { /* fields use tags, but should get their own lines */ display: block; position: relative; } .small-section-header:hover > .anchor, .impl:hover > .anchor, .trait-impl:hover > .anchor, .variant:hover > .anchor { display: initial; } .anchor { display: none; position: absolute; left: -0.5em; background: none !important; } .anchor.field { left: -5px; } .small-section-header > .anchor { left: -15px; padding-right: 8px; } h2.small-section-header > .anchor { padding-right: 6px; } .main-heading a:hover, .example-wrap > pre.rust a:hover, .all-items a:hover, .docblock a:not(.test-arrow):not(.scrape-help):hover, .docblock-short a:not(.test-arrow):not(.scrape-help):hover, .item-info a { text-decoration: underline; } .crate.block a.current { font-weight: 500; } /* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap as much as needed on mobile (see tests/rustdoc-gui/type-declaration-overflow.goml for an example of why this matters). The `anywhere` value means: "Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes." https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#values For table layouts, that becomes a problem: the browser tries to make each column as narrow as possible, and `overflow-wrap: anywhere` means it can do so by breaking words - even if some other column could be shrunk without breaking words! This shows up, for instance, in the `Structs` / `Modules` / `Functions` (etcetera) sections of a module page, and when a docblock contains a table. So, for table layouts, override the default with break-word, which does _not_ affect min-content intrinsic sizes. */ table, .item-table { overflow-wrap: break-word; } .item-table { display: table; } .item-row { display: table-row; } .item-left, .item-right { display: table-cell; } .item-left { padding-right: 1.25rem; } .search-results-title { margin-top: 0; white-space: nowrap; /* flex layout allows shrinking the -element "#crate-search") to be shrunk */ min-width: 5em; } #crate-search { min-width: 115px; /* keep these two in sync with "@-moz-document url-prefix()" below */ padding: 0 23px 0 4px; /* prevents the s */ @-moz-document url-prefix() { #crate-search { padding-left: 0px; /* == 4px - 4px */ padding-right: 19px; /* == 23px - 4px */ } } /* pseudo-element for holding the dropdown-arrow image; needs to be a separate thing so that we can apply CSS-filters to change the arrow color in themes */ #crate-search-div::after { /* lets clicks through! */ pointer-events: none; /* completely covers the underlying div */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ""; background-repeat: no-repeat; background-size: 20px; background-position: calc(100% - 2px) 56%; /* image is black color */ background-image: url("down-arrow-927217e04c7463ac.svg"); /* changes the arrow image color */ filter: var(--crate-search-div-filter); } #crate-search-div:hover::after, #crate-search-div:focus-within::after { filter: var(--crate-search-div-hover-filter); } #crate-search > option { font-size: 1rem; } .search-input { /* Override Normalize.css: it has a rule that sets -webkit-appearance: textfield for search inputs. That causes rounded corners and no border on iOS Safari. */ -webkit-appearance: none; outline: none; border: 1px solid var(--border-color); border-radius: 2px; padding: 8px; font-size: 1rem; flex-grow: 1; background-color: var(--button-background-color); color: var(--search-color); } .search-input:focus { border-color: var(--search-input-focused-border-color); } .search-results { display: none; } .search-results.active { display: block; } .search-results > a { display: flex; /* A little margin ensures the browser's outlining of focused links has room to display. */ margin-left: 2px; margin-right: 2px; border-bottom: 1px solid var(--search-result-border-color); gap: 1em; } .search-results > a > div { flex: 1; } .search-results > a > div.desc { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .search-results a:hover, .search-results a:focus { background-color: var(--search-result-link-focus-background-color); } .search-results .result-name span.alias { color: var(--search-results-alias-color); } .search-results .result-name span.grey { color: var(--search-results-grey-color); } .popover { position: absolute; top: 100%; right: 0; z-index: 2; margin-top: 7px; border-radius: 3px; border: 1px solid var(--border-color); background-color: var(--main-background-color); color: var(--main-color); --popover-arrow-offset: 11px; } /* This rule is to draw the little arrow connecting the settings menu to the gear icon. */ .popover::before { content: ''; position: absolute; right: var(--popover-arrow-offset); border: solid var(--border-color); border-width: 1px 1px 0 0; background-color: var(--main-background-color); padding: 4px; transform: rotate(-45deg); top: -5px; } /* use larger max-width for help popover, but not for help.html */ #help.popover { max-width: 600px; --popover-arrow-offset: 48px; } #help dt { float: left; clear: left; margin-right: 0.5rem; } #help span.top, #help span.bottom { text-align: center; display: block; font-size: 1.125rem; } #help span.top { margin: 10px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 4px; margin-bottom: 6px; } #help span.bottom { clear: both; border-top: 1px solid var(--border-color); } .side-by-side > div { width: 50%; float: left; padding: 0 20px 20px 17px; } .item-info .stab { /* This min-height is needed to unify the height of the stab elements because some of them have emojis. */ min-height: 36px; display: flex; padding: 3px; margin-bottom: 5px; } .item-left .stab { margin-left: 0.3125em; } .stab { padding: 0 2px; font-size: 0.875rem; font-weight: normal; color: var(--main-color); background-color: var(--stab-background-color); width: fit-content; align-items: center; white-space: pre-wrap; border-radius: 3px; display: inline-flex; vertical-align: text-bottom; } .stab.portability > code { background: none; color: var(--stab-code-color); } .stab .emoji { font-size: 1.25rem; margin-right: 0.3rem; } /* Black one-pixel outline around emoji shapes */ .emoji { text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black; } .module-item.unstable, .import-item.unstable { opacity: 0.65; } .since { font-weight: normal; font-size: initial; } .rightside { padding-left: 12px; float: right; } .rightside:not(a), .out-of-band { color: var(--right-side-color); } pre.rust { tab-size: 4; -moz-tab-size: 4; } /* Code highlighting */ pre.rust .kw { color: var(--code-highlight-kw-color); } pre.rust .kw-2 { color: var(--code-highlight-kw-2-color); } pre.rust .lifetime { color: var(--code-highlight-lifetime-color); } pre.rust .prelude-ty { color: var(--code-highlight-prelude-color); } pre.rust .prelude-val { color: var(--code-highlight-prelude-val-color); } pre.rust .string { color: var(--code-highlight-string-color); } pre.rust .number { color: var(--code-highlight-number-color); } pre.rust .bool-val { color: var(--code-highlight-literal-color); } pre.rust .self { color: var(--code-highlight-self-color); } pre.rust .attr { color: var(--code-highlight-attribute-color); } pre.rust .macro, pre.rust .macro-nonterminal { color: var(--code-highlight-macro-color); } pre.rust .question-mark { font-weight: bold; color: var(--code-highlight-question-mark-color); } pre.rust .comment { color: var(--code-highlight-comment-color); } pre.rust .doccomment { color: var(--code-highlight-doc-comment-color); } .rustdoc.source .example-wrap pre.rust a { background: var(--codeblock-link-background); } .example-wrap.compile_fail, .example-wrap.should_panic { border-left: 2px solid var(--codeblock-error-color); } .ignore.example-wrap { border-left: 2px solid var(--codeblock-ignore-color); } .example-wrap.compile_fail:hover, .example-wrap.should_panic:hover { border-left: 2px solid var(--codeblock-error-hover-color); } .example-wrap.ignore:hover { border-left: 2px solid var(--codeblock-ignore-hover-color); } .example-wrap.compile_fail .tooltip, .example-wrap.should_panic .tooltip { color: var(--codeblock-error-color); } .example-wrap.ignore .tooltip { color: var(--codeblock-ignore-color); } .example-wrap.compile_fail:hover .tooltip, .example-wrap.should_panic:hover .tooltip { color: var(--codeblock-error-hover-color); } .example-wrap.ignore:hover .tooltip { color: var(--codeblock-ignore-hover-color); } .example-wrap .tooltip { position: absolute; display: block; left: -25px; top: 5px; } .example-wrap .tooltip:hover::after { padding: 5px 3px 3px 3px; border-radius: 6px; margin-left: 5px; font-size: 1rem; border: 1px solid var(--border-color); position: absolute; width: max-content; top: -2px; z-index: 1; background-color: var(--tooltip-background-color); color: var(--tooltip-color); } .example-wrap .tooltip:hover::before { content: " "; position: absolute; top: 50%; left: 16px; margin-top: -5px; z-index: 1; border: 5px solid transparent; border-right-color: var(--tooltip-background-color); } .example-wrap.ignore .tooltip:hover::after { content: "This example is not tested"; } .example-wrap.compile_fail .tooltip:hover::after { content: "This example deliberately fails to compile"; } .example-wrap.should_panic .tooltip:hover::after { content: "This example panics"; } .example-wrap.edition .tooltip:hover::after { content: "This code runs with edition " attr(data-edition); } .example-wrap.compile_fail .tooltip, .example-wrap.should_panic .tooltip, .example-wrap.ignore .tooltip { font-weight: bold; font-size: 1.25rem; } a.test-arrow { visibility: hidden; position: absolute; padding: 5px 10px 5px 10px; border-radius: 5px; font-size: 1.375rem; top: 5px; right: 5px; z-index: 1; color: var(--test-arrow-color); background-color: var(--test-arrow-background-color); } a.test-arrow:hover { color: var(--test-arrow-hover-color); background-color: var(--test-arrow-hover-background-color); } .example-wrap:hover .test-arrow { visibility: visible; } .code-attribute { font-weight: 300; color: var(--code-attribute-color); } .item-spacer { width: 100%; height: 12px; } .out-of-band > span.since { font-size: 1.25rem; } .sub-variant h4 { font-size: 1rem; font-weight: 400; margin-top: 0; margin-bottom: 0; } .sub-variant { margin-left: 24px; margin-bottom: 40px; } .sub-variant > .sub-variant-field { margin-left: 24px; } :target { padding-right: 3px; background-color: var(--target-background-color); border-right: 3px solid var(--target-border-color); } .notable-traits { color: inherit; margin-right: 15px; position: relative; } /* placeholder thunk so that the mouse can easily travel from "(i)" to popover the resulting "hover tunnel" is a stepped triangle, approximating https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */ .notable-traits:hover::after { position: absolute; top: calc(100% - 10px); left: -15px; right: -15px; height: 20px; content: "\00a0"; } .notable .content { margin: 0.25em 0.5em; } .notable .content pre, .notable .content code { background: transparent; margin: 0; padding: 0; font-size: 1.25rem; white-space: pre-wrap; } .notable .content > h3:first-child { margin: 0 0 5px 0; } .search-failed { text-align: center; margin-top: 20px; display: none; } .search-failed.active { display: block; } .search-failed > ul { text-align: left; max-width: 570px; margin-left: auto; margin-right: auto; } #search-tabs { display: flex; flex-direction: row; gap: 1px; margin-bottom: 4px; } #search-tabs button { text-align: center; font-size: 1.125rem; border: 0; border-top: 2px solid; flex: 1; line-height: 1.5; color: inherit; } #search-tabs .count { font-size: 1rem; color: var(--search-tab-title-count-color); } #src-sidebar-toggle { position: sticky; top: 0; left: 0; font-size: 1.25rem; border-bottom: 1px solid; display: flex; height: 40px; justify-content: stretch; align-items: stretch; z-index: 10; } #source-sidebar { width: 100%; overflow: auto; } #source-sidebar > .title { font-size: 1.5rem; text-align: center; border-bottom: 1px solid var(--border-color); margin-bottom: 6px; } #source-sidebar div.files > a:hover, details.dir-entry summary:hover, #source-sidebar div.files > a:focus, details.dir-entry summary:focus { background-color: var(--source-sidebar-background-hover); } #source-sidebar div.files > a.selected { background-color: var(--source-sidebar-background-selected); } #src-sidebar-toggle > button { font-size: inherit; font-weight: bold; background: none; color: inherit; text-align: center; border: none; outline: none; flex: 1 1; /* iOS button gradient: https://stackoverflow.com/q/5438567 */ -webkit-appearance: none; opacity: 1; } #settings-menu, #help-button { margin-left: 4px; display: flex; } #settings-menu > a, #help-button > a { display: flex; align-items: center; justify-content: center; background-color: var(--button-background-color); border: 1px solid var(--border-color); border-radius: 2px; color: var(--settings-button-color); /* Rare exception to specifying font sizes in rem. Since this is acting as an icon, it's okay to specify their sizes in pixels. */ font-size: 20px; width: 33px; } #settings-menu > a:hover, #settings-menu > a:focus, #help-button > a:hover, #help-button > a:focus { border-color: var(--settings-button-border-focus); } #copy-path { color: var(--copy-path-button-color); background: var(--main-background-color); height: 34px; margin-left: 10px; padding: 0; padding-left: 2px; border: 0; width: 33px; } #copy-path > img { filter: var(--copy-path-img-filter); } #copy-path:hover > img { filter: var(--copy-path-img-hover-filter); } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #settings-menu.rotate > a img { animation: rotating 2s linear infinite; } kbd { display: inline-block; padding: 3px 5px; font: 15px monospace; line-height: 10px; vertical-align: middle; border: solid 1px var(--border-color); border-radius: 3px; color: var(--kbd-color); background-color: var(--kbd-background); box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color); } ul.all-items > li { list-style: none; } details.dir-entry { padding-left: 4px; } details.dir-entry > summary { margin: 0 0 0 -4px; padding: 0 0 0 4px; cursor: pointer; } details.dir-entry div.folders, details.dir-entry div.files { padding-left: 23px; } details.dir-entry a { display: block; } /* We use CSS containment on the details elements because most sizeable elements of the page are contained in one of these. This also makes re-rendering faster on document changes (like closing and opening toggles). Unfortunately we can't yet specify contain: content or contain: strict because the [-]/[+] toggles extend past the boundaries of the
https://developer.mozilla.org/en-US/docs/Web/CSS/contain */ details.toggle { contain: layout; position: relative; } /* The hideme class is used on summary tags that contain a span with placeholder text shown only when the toggle is closed. For instance, "Expand description" or "Show methods". */ details.toggle > summary.hideme { cursor: pointer; font-size: 1rem; } details.toggle > summary { list-style: none; /* focus outline is shown on `::before` instead of this */ outline: none; } details.toggle > summary::-webkit-details-marker, details.toggle > summary::marker { display: none; } details.toggle > summary.hideme > span { margin-left: 9px; } details.toggle > summary::before { background: url("toggle-plus-1092eb4930d581b0.svg") no-repeat top left; content: ""; cursor: pointer; width: 16px; height: 16px; display: inline-block; vertical-align: middle; opacity: .5; filter: var(--toggle-filter); } details.toggle > summary.hideme > span, .more-examples-toggle summary, .more-examples-toggle .hide-more { color: var(--toggles-color); } /* Screen readers see the text version at the end the line. Visual readers see the icon at the start of the line, but small and transparent. */ details.toggle > summary::after { content: "Expand"; overflow: hidden; width: 0; height: 0; position: absolute; } details.toggle > summary.hideme::after { /* "hideme" toggles already have a description when they're contracted */ content: ""; } details.toggle > summary:focus::before, details.toggle > summary:hover::before { opacity: 1; } details.toggle > summary:focus-visible::before { /* The SVG is black, and gets turned white using a filter in the dark themes. Do the same with the outline. The dotted 1px style is copied from Firefox's focus ring style. */ outline: 1px dotted #000; outline-offset: 1px; } details.non-exhaustive { margin-bottom: 8px; } details.toggle > summary.hideme::before { position: relative; } details.toggle > summary:not(.hideme)::before { position: absolute; left: -24px; top: 4px; } .impl-items > details.toggle > summary:not(.hideme)::before { position: absolute; left: -24px; } /* When a "hideme" summary is open and the "Expand description" or "Show methods" text is hidden, we want the [-] toggle that remains to not affect the layout of the items to its right. To do that, we use absolute positioning. Note that we also set position: relative on the parent
to make this work properly. */ details.toggle[open] > summary.hideme { position: absolute; } details.toggle[open] > summary.hideme > span { display: none; } details.toggle[open] > summary::before { background: url("toggle-minus-31bbd6e4c77f5c96.svg") no-repeat top left; } details.toggle[open] > summary::after { content: "Collapse"; } /* This is needed in docblocks to have the "▶" element to be on the same line. */ .docblock summary > * { display: inline-block; } /* In case there is no documentation before a code block, we need to add some margin at the top to prevent an overlay between the "collapse toggle" and the information tooltip. However, it's not needed with smaller screen width because the doc/code block is always put "one line" below. */ .docblock > .example-wrap:first-child .tooltip { margin-top: 16px; } /* Media Queries */ /* WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY If you update this line, then you also need to update the line with the same warning in storage.js */ @media (max-width: 700px) { /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar, or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size. */ *[id] { scroll-margin-top: 45px; } .rustdoc { /* Sidebar should overlay main content, rather than pushing main content to the right. Turn off `display: flex` on the body element. */ display: block; } main { padding-left: 15px; padding-top: 0px; } .main-heading { flex-direction: column; } .out-of-band { text-align: left; margin-left: initial; padding: initial; } .out-of-band .since::before { content: "Since "; } /* Hide the logo and item name from the sidebar. Those are displayed in the mobile-topbar instead. */ .sidebar .logo-container, .sidebar .location { display: none; } .sidebar { position: fixed; top: 45px; /* Hide the sidebar offscreen while not in use. Doing this instead of display: none means the sidebar stays visible for screen readers, which is useful for navigation. */ left: -1000px; z-index: 11; /* Reduce height slightly to account for mobile topbar. */ height: calc(100vh - 45px); width: 200px; } /* The source view uses a different design for the sidebar toggle, and doesn't have a topbar, so don't bump down the main content or the sidebar. */ .source main, .rustdoc.source .sidebar { top: 0; padding: 0; height: 100vh; border: 0; } .sidebar.shown, .source-sidebar-expanded .source .sidebar, .rustdoc:not(.source) .sidebar:focus-within { left: 0; } .mobile-topbar h2 { padding-bottom: 0; margin: auto 0.5em auto auto; overflow: hidden; /* Rare exception to specifying font sizes in rem. Since the topbar height is specified in pixels, this also has to be specified in pixels to avoid overflowing the topbar when the user sets a bigger font size. */ font-size: 24px; } .mobile-topbar h2 a { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .mobile-topbar .logo-container > img { max-width: 35px; max-height: 35px; margin: 5px 0 5px 20px; } .mobile-topbar { display: flex; flex-direction: row; position: sticky; z-index: 10; font-size: 2rem; height: 45px; width: 100%; left: 0; top: 0; } .sidebar-menu-toggle { width: 45px; /* Rare exception to specifying font sizes in rem. Since this is acting as an icon, it's okay to specify its sizes in pixels. */ font-size: 32px; border: none; color: var(--main-color); } .sidebar-elems { margin-top: 1em; } .anchor { display: none !important; } #search-tabs .count { display: block; } #main-content > details.toggle > summary::before, #main-content > div > details.toggle > summary::before { left: -11px; } #src-sidebar-toggle { position: fixed; left: 1px; top: 100px; width: 30px; font-size: 1.5rem; padding: 0; z-index: 10; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border: 1px solid; border-left: 0; } .source-sidebar-expanded #src-sidebar-toggle { left: unset; top: unset; width: unset; border-top-right-radius: unset; border-bottom-right-radius: unset; position: sticky; border: 0; border-bottom: 1px solid; } /* We don't display these buttons on mobile devices. */ #copy-path, #help-button { display: none; } /* Display an alternating layout on tablets and phones */ .item-table, .item-row, .item-left, .item-right, .search-results > a, .search-results > a > div { display: block; } /* Display an alternating layout on tablets and phones */ .search-results > a { padding: 5px 0px; } .search-results > a > div.desc, .item-right { padding-left: 2em; } .source-sidebar-expanded .source .sidebar { max-width: 100vw; width: 100vw; } /* Position of the "[-]" element. */ details.toggle:not(.top-doc) > summary { margin-left: 10px; } .impl-items > details.toggle > summary:not(.hideme)::before, #main-content > details.toggle:not(.top-doc) > summary::before, #main-content > div > details.toggle > summary::before { left: -11px; } /* Align summary-nested and unnested item-info gizmos. */ .impl-items > .item-info { margin-left: 34px; } .source nav.sub { margin: 0; padding: 8px; } } /* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */ @media (min-width: 701px) { /* Places file-link for a scraped example on top of the example to save space. We only do this on large screens so the file-link doesn't overlap too much with the example's content. */ .scraped-example-title { position: absolute; z-index: 10; background: var(--main-background-color); bottom: 8px; right: 5px; padding: 2px 4px; box-shadow: 0 0 4px var(--main-background-color); } } @media print { nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path, details.toggle[open] > summary::before, details.toggle > summary::before, details.toggle.top-doc > summary { display: none; } .docblock { margin-left: 0; } main { padding: 10px; } } @media (max-width: 464px) { .docblock { margin-left: 12px; } .docblock code { overflow-wrap: break-word; overflow-wrap: anywhere; } nav.sub { flex-direction: column; } .search-form { align-self: stretch; } .sub-logo-container > img { height: 35px; width: 35px; } } .variant, .implementors-toggle > summary, .impl, #implementors-list > .docblock, .impl-items > section, .impl-items > .toggle > summary, .methods > section, .methods > .toggle > summary { margin-bottom: 0.75em; } .variants > .docblock, .implementors-toggle > .docblock, .impl-items > .toggle[open]:not(:last-child), .methods > .toggle[open]:not(:last-child), .implementors-toggle[open]:not(:last-child) { margin-bottom: 2em; } #trait-implementations-list .impl-items > .toggle:not(:last-child), #synthetic-implementations-list .impl-items > .toggle:not(:last-child), #blanket-implementations-list .impl-items > .toggle:not(:last-child) { margin-bottom: 1em; } /* Begin: styles for --scrape-examples feature */ .scraped-example-list .scrape-help { margin-left: 10px; padding: 0 4px; font-weight: normal; font-size: 12px; position: relative; bottom: 1px; border: 1px solid var(--scrape-example-help-border-color); border-radius: 50px; color: var(--scrape-example-help-color); } .scraped-example-list .scrape-help:hover { border-color: var(--scrape-example-help-hover-border-color); color: var(--scrape-example-help-hover-color); } .scraped-example { /* So .scraped-example-title can be positioned absolutely */ position: relative; } .scraped-example .code-wrapper { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .scraped-example:not(.expanded) .code-wrapper { /* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number * of lines shown in the un-expanded example code viewer. This pre needs to have * a max-height equal to line-height * N. The line-height is currently 1.5em, * and we include additional 10px for padding. */ max-height: calc(1.5em * 5 + 10px); } .scraped-example:not(.expanded) .code-wrapper pre { overflow-y: hidden; padding-bottom: 0; /* See above comment, should be the same max-height. */ max-height: calc(1.5em * 5 + 10px); } .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper, .more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre { /* See above comment, except this height is based on HIDDEN_MAX_LINES. */ max-height: calc(1.5em * 10 + 10px); } .scraped-example .code-wrapper .next, .scraped-example .code-wrapper .prev, .scraped-example .code-wrapper .expand { color: var(--main-color); position: absolute; top: 0.25em; z-index: 1; padding: 0; background: none; border: none; /* iOS button gradient: https://stackoverflow.com/q/5438567 */ -webkit-appearance: none; opacity: 1; } .scraped-example .code-wrapper .prev { right: 2.25em; } .scraped-example .code-wrapper .next { right: 1.25em; } .scraped-example .code-wrapper .expand { right: 0.25em; } .scraped-example:not(.expanded) .code-wrapper:before, .scraped-example:not(.expanded) .code-wrapper:after { content: " "; width: 100%; height: 5px; position: absolute; z-index: 1; } .scraped-example:not(.expanded) .code-wrapper:before { top: 0; } .scraped-example:not(.expanded) .code-wrapper:after { bottom: 0; } .scraped-example .code-wrapper .example-wrap { width: 100%; overflow-y: hidden; margin-bottom: 0; } .scraped-example:not(.expanded) .code-wrapper .example-wrap { overflow-x: hidden; } .scraped-example .example-wrap .rust span.highlight { background: var(--scrape-example-code-line-highlight); } .scraped-example .example-wrap .rust span.highlight.focus { background: var(--scrape-example-code-line-highlight-focus); } .more-examples-toggle { max-width: calc(100% + 25px); margin-top: 10px; margin-left: -25px; } .more-examples-toggle .hide-more { margin-left: 25px; cursor: pointer; } .more-scraped-examples { margin-left: 25px; position: relative; } .toggle-line { position: absolute; top: 5px; bottom: 0; right: calc(100% + 10px); padding: 0 4px; cursor: pointer; } .toggle-line-inner { min-width: 2px; height: 100%; background: var(--scrape-example-toggle-line-background); } .toggle-line:hover .toggle-line-inner { background: var(--scrape-example-toggle-line-hover-background); } .more-scraped-examples .scraped-example, .example-links { margin-top: 20px; } .more-scraped-examples .scraped-example:first-child { margin-top: 5px; } .example-links ul { margin-bottom: 0; } /* End: styles for --scrape-examples feature */