| /* When static files are updated, their suffixes need to be updated. |
| 1. In the top directory run: |
| ./x.py doc --stage 1 library/core |
| 2. Find the directory containing files named with updated suffixes: |
| find build -path '*'/stage1-std/'*'/static.files |
| 3. Copy the filenames with updated suffixes from the directory. |
| */ |
| |
| :root { |
| --nav-sub-mobile-padding: 8px; |
| --search-typename-width: 6.75rem; |
| } |
| |
| /* 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-46f98efaafac5295.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-acdfaf1a8af734b1.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-a2c9cd1067f8b328.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; |
| } |
| |
| /* 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); |
| } |
| /* while line-height 1.5 is required for any "block of text", |
| which WCAG defines as more than one sentence, it looks weird for |
| very large main headers */ |
| h1, h2 { |
| line-height: 1.25; |
| padding-top: 3px; |
| padding-bottom: 9px; |
| } |
| h3.code-header { |
| font-size: 1.125rem; /* 18px */ |
| } |
| h4.code-header { |
| font-size: 1rem; |
| } |
| .code-header { |
| font-weight: 600; |
| margin: 0; |
| padding: 0; |
| white-space: pre-wrap; |
| } |
| |
| #crate-search, |
| h1, h2, h3, h4, h5, h6, |
| .sidebar, |
| .mobile-topbar, |
| .search-input, |
| .search-results .result-name, |
| .item-name > a, |
| .out-of-band, |
| span.since, |
| a.src, |
| #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, |
| #src-sidebar a, |
| .rust a, |
| .sidebar h2 a, |
| .sidebar h3 a, |
| .mobile-topbar h2 a, |
| h1 a, |
| .search-results a, |
| .stab, |
| .result-name i { |
| color: var(--main-color); |
| } |
| |
| span.enum, a.enum, |
| span.struct, a.struct, |
| span.union, a.union, |
| span.primitive, a.primitive, |
| span.type, a.type, |
| span.foreigntype, a.foreigntype { |
| color: var(--type-link-color); |
| } |
| |
| span.trait, a.trait, |
| span.traitalias, a.traitalias { |
| color: var(--trait-link-color); |
| } |
| |
| span.associatedtype, a.associatedtype, |
| span.constant, a.constant, |
| span.static, a.static { |
| color: var(--assoc-item-link-color); |
| } |
| |
| span.fn, a.fn, |
| span.method, a.method, |
| span.tymethod, a.tymethod { |
| color: var(--function-link-color); |
| } |
| |
| span.attr, a.attr, |
| span.derive, a.derive, |
| span.macro, a.macro { |
| color: var(--macro-link-color); |
| } |
| |
| span.mod, a.mod { |
| color: var(--mod-link-color); |
| } |
| |
| span.keyword, 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 */ |
| } |
| |
| .src 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 */ |
| } |
| pre.item-decl { |
| overflow-x: auto; |
| } |
| /* This rule allows to have scrolling on the X axis. */ |
| .item-decl .type-contents-toggle { |
| contain: initial; |
| } |
| |
| .src .content pre { |
| padding: 20px; |
| } |
| .rustdoc.src .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; |
| overscroll-behavior: contain; |
| position: sticky; |
| height: 100vh; |
| top: 0; |
| left: 0; |
| } |
| |
| .rustdoc.src .sidebar { |
| flex-basis: 50px; |
| border-right: 1px solid; |
| overflow-x: hidden; |
| /* The sidebar is by default hidden */ |
| overflow-y: hidden; |
| z-index: 1; |
| } |
| |
| .sidebar, .mobile-topbar, .sidebar-menu-toggle, |
| #src-sidebar-toggle, #src-sidebar { |
| background-color: var(--sidebar-background-color); |
| } |
| |
| #src-sidebar-toggle > button:hover, #src-sidebar-toggle > button:focus { |
| background-color: var(--sidebar-background-color-hover); |
| } |
| |
| .src .sidebar > *:not(#src-sidebar-toggle) { |
| visibility: hidden; |
| } |
| |
| .src-sidebar-expanded .src .sidebar { |
| overflow-y: auto; |
| flex-basis: 300px; |
| } |
| |
| .src-sidebar-expanded .src .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; |
| } |
| |
| .rustdoc:not(.src) .example-wrap pre { |
| overflow: auto hidden; |
| } |
| |
| .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.src .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; |
| white-space: pre-wrap; |
| 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; |
| } |
| .src nav.sub { |
| margin: 0 0 15px 0; |
| } |
| |
| .small-section-header { |
| /* fields use <span> 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 .rust a:hover, |
| .all-items a:hover, |
| .docblock a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover, |
| .docblock-short a:not(.test-arrow):not(.scrape-help):not(.tooltip):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; |
| padding: 0; |
| margin: 0; |
| } |
| .item-table > li { |
| display: table-row; |
| } |
| .item-table > li > div { |
| display: table-cell; |
| } |
| .item-table > li > .item-name { |
| padding-right: 1.25rem; |
| } |
| |
| .search-results-title { |
| margin-top: 0; |
| white-space: nowrap; |
| /* flex layout allows shrinking the <select> appropriately if it becomes too large */ |
| display: flex; |
| /* make things look like in a line, despite the fact that we're using a layout |
| with boxes (i.e. from the flex layout) */ |
| align-items: baseline; |
| } |
| #crate-search-div { |
| /* ensures that 100% in properties of #crate-search-div:after |
| are relative to the size of this div */ |
| position: relative; |
| /* allows this div (and with it the <select>-element "#crate-search") to be shrunk */ |
| min-width: 5em; |
| } |
| #crate-search { |
| min-width: 115px; |
| padding: 0 23px 0 4px; |
| /* prevents the <select> from overflowing the containing div in case it's shrunk */ |
| max-width: 100%; |
| /* contents can overflow because of max-width limit, then show ellipsis */ |
| text-overflow: ellipsis; |
| border: 1px solid var(--border-color); |
| border-radius: 4px; |
| outline: none; |
| cursor: pointer; |
| -moz-appearance: none; |
| -webkit-appearance: none; |
| /* Removes default arrow from firefox */ |
| text-indent: 0.01px; |
| background-color: var(--main-background-color); |
| color: inherit; |
| line-height: 1.5; |
| font-weight: 500; |
| } |
| #crate-search:hover, #crate-search:focus { |
| border-color: var(--crate-search-hover-border); |
| } |
| /* 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%; |
| /* down arrow (image is black color) */ |
| background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \ |
| width="128" height="128" viewBox="-30 -20 176 176"><path d="M111,40.5L64,87.499L17,40.5" \ |
| fill="none" stroke="black" strike-linecap="square" stroke-miterlimit="10" stroke-width="12"/> \ |
| </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.desc { |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| flex: 2; |
| } |
| |
| .search-results a:hover, |
| .search-results a:focus { |
| background-color: var(--search-result-link-focus-background-color); |
| } |
| |
| .search-results .result-name { |
| display: flex; |
| align-items: center; |
| justify-content: start; |
| flex: 3; |
| } |
| .search-results .result-name .alias { |
| color: var(--search-results-alias-color); |
| } |
| .search-results .result-name .grey { |
| color: var(--search-results-grey-color); |
| } |
| .search-results .result-name .typename { |
| color: var(--search-results-grey-color); |
| font-size: 0.875rem; |
| width: var(--search-typename-width); |
| } |
| .search-results .result-name .path { |
| word-break: break-all; |
| max-width: calc(100% - var(--search-typename-width)); |
| display: inline-block; |
| } |
| .search-results .result-name .path > * { |
| display: inline; |
| } |
| |
| .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; |
| align-items: center; |
| vertical-align: text-bottom; |
| } |
| .item-name .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; |
| white-space: pre-wrap; |
| border-radius: 3px; |
| display: inline; |
| } |
| |
| .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; |
| } |
| |
| .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.src .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; |
| margin: 0; |
| line-height: 1; |
| } |
| |
| .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; |
| display: block; |
| } |
| |
| .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); |
| } |
| |
| .code-header a.tooltip { |
| color: inherit; |
| margin-right: 15px; |
| position: relative; |
| } |
| |
| .code-header a.tooltip:hover { |
| color: var(--link-color); |
| } |
| |
| /* 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 */ |
| a.tooltip:hover::after { |
| position: absolute; |
| top: calc(100% - 10px); |
| left: -15px; |
| right: -15px; |
| height: 20px; |
| content: "\00a0"; |
| } |
| |
| /* This animation is layered onto the mistake-proofing delay for dismissing |
| a hovered tooltip, to ensure it feels responsive even with the delay. |
| */ |
| .fade-out { |
| opacity: 0; |
| transition: opacity 0.45s cubic-bezier(0, 0, 0.1, 1.0); |
| } |
| |
| .popover.tooltip .content { |
| margin: 0.25em 0.5em; |
| } |
| |
| .popover.tooltip .content pre, .popover.tooltip .content code { |
| background: transparent; |
| margin: 0; |
| padding: 0; |
| font-size: 1.25rem; |
| white-space: pre-wrap; |
| } |
| |
| .popover.tooltip .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 button:not(.selected) { |
| background-color: var(--search-tab-button-not-selected-background); |
| border-top-color: var(--search-tab-button-not-selected-border-top-color); |
| } |
| #search-tabs button:hover, #search-tabs button.selected { |
| background-color: var(--search-tab-button-selected-background); |
| border-top-color: var(--search-tab-button-selected-border-top-color); |
| } |
| |
| #search-tabs .count { |
| font-size: 1rem; |
| color: var(--search-tab-title-count-color); |
| } |
| |
| #search .error code { |
| border-radius: 3px; |
| background-color: var(--search-error-code-background-color); |
| } |
| |
| .search-corrections { |
| font-weight: normal; |
| } |
| |
| #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; |
| } |
| #src-sidebar { |
| width: 100%; |
| overflow: auto; |
| } |
| #src-sidebar > .title { |
| font-size: 1.5rem; |
| text-align: center; |
| border-bottom: 1px solid var(--border-color); |
| margin-bottom: 6px; |
| } |
| #src-sidebar div.files > a:hover, details.dir-entry summary:hover, |
| #src-sidebar div.files > a:focus, details.dir-entry summary:focus { |
| background-color: var(--src-sidebar-background-hover); |
| } |
| #src-sidebar div.files > a.selected { |
| background-color: var(--src-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 <details> |
| 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 { |
| /* toggle plus */ |
| background: url('data:image/svg+xml,<svg width="17" height="17" \ |
| shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \ |
| d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></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 <details> 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 { |
| /* toggle minus */ |
| background: url('data:image/svg+xml,<svg width="17" height="17" \ |
| shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \ |
| d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></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 src-script.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. */ |
| .src main, |
| .rustdoc.src .sidebar { |
| top: 0; |
| padding: 0; |
| height: 100vh; |
| border: 0; |
| } |
| |
| .sidebar.shown, |
| .src-sidebar-expanded .src .sidebar, |
| .rustdoc:not(.src) .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; |
| } |
| |
| .src-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-table > li, .item-table > li > div, |
| .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-table > li > div.desc { |
| padding-left: 2em; |
| } |
| .search-results .result-name { |
| display: block; |
| } |
| .search-results .result-name .typename { |
| width: initial; |
| margin-right: 0; |
| } |
| .search-results .result-name .typename, .search-results .result-name .path { |
| display: inline; |
| } |
| |
| .src-sidebar-expanded .src .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; |
| } |
| |
| .src nav.sub { |
| margin: 0; |
| padding: var(--nav-sub-mobile-padding); |
| } |
| } |
| |
| /* 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.src, #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; |
| margin-bottom: var(--nav-sub-mobile-padding); |
| } |
| } |
| |
| .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; |
| background: linear-gradient(to bottom, |
| var(--scrape-example-code-wrapper-background-start), |
| var(--scrape-example-code-wrapper-background-end)); |
| } |
| .scraped-example:not(.expanded) .code-wrapper::after { |
| bottom: 0; |
| background: linear-gradient(to top, |
| var(--scrape-example-code-wrapper-background-start), |
| var(--scrape-example-code-wrapper-background-end)); |
| } |
| |
| .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 */ |