| /* 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; |
| /* DEFAULT_SIDEBAR_WIDTH |
| see main.js for information on these values |
| and on the RUSTDOC_MOBILE_BREAKPOINT */ |
| --desktop-sidebar-width: 200px; |
| --src-sidebar-width: 300px; |
| --desktop-sidebar-z-index: 100; |
| } |
| |
| /* 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, |
| .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, .docblock > .warning { |
| /* 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, .docblock > .warning: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%; |
| } |
| |
| .logo-container { |
| /* zero text boxes so that computed line height = image height exactly */ |
| line-height: 0; |
| display: block; |
| } |
| |
| .rust-logo { |
| filter: var(--rust-logo-filter); |
| } |
| |
| .sidebar { |
| font-size: 0.875rem; |
| flex: 0 0 var(--desktop-sidebar-width); |
| width: var(--desktop-sidebar-width); |
| overflow-y: scroll; |
| overscroll-behavior: contain; |
| position: sticky; |
| height: 100vh; |
| top: 0; |
| left: 0; |
| z-index: var(--desktop-sidebar-z-index); |
| } |
| |
| .rustdoc.src .sidebar { |
| flex-basis: 50px; |
| width: 50px; |
| border-right: 1px solid; |
| overflow-x: hidden; |
| /* The sidebar is by default hidden */ |
| overflow-y: hidden; |
| } |
| |
| .hide-sidebar .sidebar, |
| .hide-sidebar .sidebar-resizer { |
| display: none; |
| } |
| |
| .sidebar-resizer { |
| touch-action: none; |
| width: 9px; |
| cursor: col-resize; |
| z-index: calc(var(--desktop-sidebar-z-index) + 1); |
| position: fixed; |
| height: 100%; |
| /* make sure there's a 1px gap between the scrollbar and resize handle */ |
| left: calc(var(--desktop-sidebar-width) + 1px); |
| } |
| |
| .rustdoc.src .sidebar-resizer { |
| /* when closed, place resizer glow on top of the normal src sidebar border (no need to |
| worry about sidebar) */ |
| left: 49px; |
| } |
| |
| .src-sidebar-expanded .src .sidebar-resizer { |
| /* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer |
| to right of it */ |
| left: var(--src-sidebar-width); |
| } |
| |
| .sidebar-resizing { |
| -moz-user-select: none; |
| -webkit-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| |
| .sidebar-resizing * { |
| cursor: col-resize !important; |
| } |
| |
| .sidebar-resizing .sidebar { |
| position: fixed; |
| } |
| .sidebar-resizing > body { |
| padding-left: var(--resizing-sidebar-width); |
| } |
| |
| .sidebar-resizer:hover, |
| .sidebar-resizer:active, |
| .sidebar-resizer:focus, |
| .sidebar-resizer.active { |
| width: 10px; |
| margin: 0; |
| /* when active or hovered, place resizer glow on top of the sidebar (right next to, or even |
| on top of, the scrollbar) */ |
| left: var(--desktop-sidebar-width); |
| border-left: solid 1px var(--sidebar-resizer-hover); |
| } |
| |
| .src-sidebar-expanded .rustdoc.src .sidebar-resizer:hover, |
| .src-sidebar-expanded .rustdoc.src .sidebar-resizer:active, |
| .src-sidebar-expanded .rustdoc.src .sidebar-resizer:focus, |
| .src-sidebar-expanded .rustdoc.src .sidebar-resizer.active { |
| /* when active or hovered, place resizer glow on top of the normal src sidebar border */ |
| left: calc(var(--src-sidebar-width) - 1px); |
| } |
| |
| @media (pointer: coarse) { |
| .sidebar-resizer { |
| /* too easy to hit the resizer while trying to hit the [-] toggle */ |
| display: none !important; |
| } |
| } |
| |
| .sidebar-resizer.active { |
| /* make the resize tool bigger when actually resizing, to avoid :hover styles on other stuff |
| while resizing */ |
| padding: 0 140px; |
| width: 2px; |
| margin-left: -140px; |
| border-left: none; |
| } |
| .sidebar-resizer.active:before { |
| border-left: solid 2px var(--sidebar-resizer-active); |
| display: block; |
| height: 100%; |
| content: ""; |
| } |
| |
| .sidebar, .mobile-topbar, .sidebar-menu-toggle, |
| #src-sidebar { |
| background-color: var(--sidebar-background-color); |
| } |
| |
| .src .sidebar > * { |
| visibility: hidden; |
| } |
| |
| .src-sidebar-expanded .src .sidebar { |
| overflow-y: auto; |
| flex-basis: var(--src-sidebar-width); |
| width: var(--src-sidebar-width); |
| } |
| |
| .src-sidebar-expanded .src .sidebar > * { |
| 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; |
| } |
| |
| .logo-container > img { |
| height: 48px; |
| width: 48px; |
| } |
| |
| 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; |
| margin-right: 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 > .version, |
| .sidebar > h2 { |
| padding-left: 24px; |
| } |
| |
| .sidebar a { |
| color: var(--sidebar-link-color); |
| } |
| .sidebar .current, |
| .sidebar .current a, |
| .sidebar-crate a.logo-container:hover + h2 a, |
| .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; |
| } |
| |
| .sidebar-crate { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| /* there's a 10px padding at the top of <main>, and a 4px margin at the |
| top of the search form. To line them up, add them. */ |
| margin: 14px 32px 1rem; |
| row-gap: 10px; |
| column-gap: 32px; |
| flex-wrap: wrap; |
| } |
| |
| .sidebar-crate h2 { |
| flex-grow: 1; |
| /* This setup with the margins and row-gap is designed to make flex-wrap |
| work the way we want. If they're in the side-by-side lockup, there |
| should be a 16px margin to the left of the logo (visually the same as |
| the 24px one on everything else, which are not giant circles) and 8px |
| between it and the crate's name and version. When they're line wrapped, |
| the logo needs to have the same margin on both sides of itself (to |
| center properly) and the crate name and version need 24px on their |
| left margin. */ |
| margin: 0 -8px; |
| /* To align this with the search bar, it should not be centered, even when |
| the logo is. */ |
| align-self: start; |
| } |
| |
| .sidebar-crate .logo-container { |
| /* The logo is expected to have 8px "slop" along its edges, so we can optically |
| center it. */ |
| margin: 0 -16px 0 -16px; |
| text-align: center; |
| } |
| |
| .sidebar-crate h2 a { |
| display: block; |
| margin: 0 calc(-24px + 0.25rem) 0 -0.2rem; |
| /* Align the sidebar crate link with the search bar, which have different |
| font sizes. |
| |
| | | font-size | line-height | total line-height | padding-y | total | |
| |:-------|----------:|------------:|------------------:|----------:|-------------:| |
| | crate | 1.375rem | 1.25 | 1.72rem | x | 2x+1.72rem | |
| | search | 1rem | 1.15 | 1.15rem | 8px | 1.15rem+16px | |
| |
| 2x + 1.72rem = 1.15rem + 16px |
| 2x = 1.15rem + 16px - 1.72rem |
| 2x = 16px - 0.57rem |
| x = ( 16px - 0.57rem ) / 2 |
| */ |
| padding: calc( ( 16px - 0.57rem ) / 2 ) 0.25rem; |
| padding-left: 0.2rem; |
| } |
| |
| .sidebar-crate h2 .version { |
| display: block; |
| font-weight: normal; |
| font-size: 1rem; |
| overflow-wrap: break-word; |
| } |
| |
| .sidebar-crate + .version { |
| margin-top: -1rem; |
| margin-bottom: 1rem; |
| } |
| |
| .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); |
| } |
| |
| /* "where ..." clauses with block display are also smaller */ |
| div.where { |
| 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; |
| } |
| |
| .section-header { |
| /* fields use <span> tags, but should get their own lines */ |
| display: block; |
| position: relative; |
| } |
| |
| .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; |
| } |
| .section-header > .anchor { |
| left: -15px; |
| padding-right: 8px; |
| } |
| h2.section-header > .anchor { |
| padding-right: 6px; |
| } |
| a.doc-anchor { |
| color: var(--main-color); |
| display: none; |
| position: absolute; |
| left: -17px; |
| /* We add this padding so that when the cursor moves from the heading's text to the anchor, |
| the anchor doesn't disappear. */ |
| padding-right: 5px; |
| /* And this padding is used to make the anchor larger and easier to click on. */ |
| padding-left: 3px; |
| } |
| *:hover > .doc-anchor { |
| display: block; |
| } |
| /* If the first element of the top doc block is a heading, we don't want to ever display its anchor |
| because of the `[-]` element which would overlap with it. */ |
| .top-doc > .docblock > *:first-child > .doc-anchor { |
| display: none !important; |
| } |
| |
| .main-heading a:hover, |
| .example-wrap .rust a:hover, |
| .all-items a:hover, |
| .docblock a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover:not(.doc-anchor), |
| .docblock-short a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover, |
| .item-info a { |
| text-decoration: underline; |
| } |
| |
| .crate.block li.current a { 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: calc(var(--desktop-sidebar-z-index) + 1); |
| 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; |
| } |
| |
| .setting-line { |
| margin: 1.2em 0.6em; |
| } |
| |
| .setting-radio input, .setting-check input { |
| margin-right: 0.3em; |
| height: 1.2rem; |
| width: 1.2rem; |
| border: 2px solid var(--settings-input-border-color); |
| outline: none; |
| -webkit-appearance: none; |
| cursor: pointer; |
| } |
| .setting-radio input { |
| border-radius: 50%; |
| } |
| |
| .setting-radio span, .setting-check span { |
| padding-bottom: 1px; |
| } |
| |
| .setting-radio { |
| margin-top: 0.1em; |
| margin-bottom: 0.1em; |
| min-width: 3.8em; |
| padding: 0.3em; |
| display: inline-flex; |
| align-items: center; |
| cursor: pointer; |
| } |
| .setting-radio + .setting-radio { |
| margin-left: 0.5em; |
| } |
| |
| .setting-check { |
| margin-right: 20px; |
| display: flex; |
| align-items: center; |
| cursor: pointer; |
| } |
| |
| .setting-radio input:checked { |
| box-shadow: inset 0 0 0 3px var(--main-background-color); |
| background-color: var(--settings-input-color); |
| } |
| .setting-check input:checked { |
| background-color: var(--settings-input-color); |
| border-width: 1px; |
| content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">\ |
| <path d="M7,25L17,32L33,12" fill="none" stroke="black" stroke-width="5"/>\ |
| <path d="M7,23L17,30L33,10" fill="none" stroke="white" stroke-width="5"/></svg>'); |
| } |
| .setting-radio input:focus, .setting-check input:focus { |
| box-shadow: 0 0 1px 1px var(--settings-input-color); |
| } |
| /* In here we combine both `:focus` and `:checked` properties. */ |
| .setting-radio input:checked:focus { |
| box-shadow: inset 0 0 0 3px var(--main-background-color), |
| 0 0 2px 2px var(--settings-input-color); |
| } |
| .setting-radio input:hover, .setting-check input:hover { |
| border-color: var(--settings-input-color) !important; |
| } |
| |
| /* 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 { |
| display: block; |
| padding: 3px; |
| margin-bottom: 5px; |
| } |
| .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; |
| vertical-align: baseline; |
| } |
| |
| .stab.portability > code { |
| background: none; |
| color: var(--stab-code-color); |
| } |
| |
| .stab .emoji, .item-info .stab::before { |
| font-size: 1.25rem; |
| } |
| .stab .emoji { |
| margin-right: 0.3rem; |
| } |
| .item-info .stab::before { |
| /* ensure badges with emoji and without it have same height */ |
| content: "\0"; |
| width: 0; |
| display: inline-block; |
| color: transparent; |
| } |
| |
| /* 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; |
| } |
| |
| /* This class only exists for users who want to draw attention to a particular element in their |
| documentation. */ |
| .content .docblock .warning { |
| border-left: 2px solid var(--warning-border-color); |
| padding: 14px; |
| position: relative; |
| /* The "!important" part is required because the rule is otherwise overruled in this CSS |
| selector: ".docblock > :not(.more-examples-toggle):not(.example-wrap)" */ |
| overflow-x: visible !important; |
| } |
| .content .docblock .warning::before { |
| color: var(--warning-border-color); |
| content: "ⓘ"; |
| position: absolute; |
| left: -25px; |
| top: 5px; |
| font-weight: bold; |
| font-size: 1.25rem; |
| } |
| .top-doc > .docblock >.warning:first-child::before { |
| top: 20px; |
| } |
| |
| 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; |
| font-variant-numeric: tabular-nums; |
| 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 { |
| width: 100%; |
| overflow: auto; |
| } |
| #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-title { |
| position: sticky; |
| top: 0; |
| display: flex; |
| padding: 8px 8px 0 48px; |
| margin-bottom: 7px; |
| background: var(--sidebar-background-color); |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| #settings-menu, #help-button { |
| margin-left: 4px; |
| display: flex; |
| } |
| #sidebar-button { |
| display: none; |
| line-height: 0; |
| } |
| .hide-sidebar #sidebar-button, |
| .src #sidebar-button { |
| display: flex; |
| margin-right: 4px; |
| position: fixed; |
| left: 6px; |
| height: 34px; |
| width: 34px; |
| background-color: var(--main-background-color); |
| z-index: 1; |
| } |
| .src #sidebar-button { |
| left: 8px; |
| z-index: calc(var(--desktop-sidebar-z-index) + 1); |
| } |
| .hide-sidebar .src #sidebar-button { |
| position: static; |
| } |
| #settings-menu > a, #help-button > a, #sidebar-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, |
| #sidebar-button > a:hover, #sidebar-button > a:focus { |
| border-color: var(--settings-button-border-focus); |
| } |
| |
| #sidebar-button > a:before { |
| content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" \ |
| fill="none" stroke="black">\ |
| <rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5"/>\ |
| <circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\ |
| <path d="m7.6121 3v16 M5.375 7.625h-2 m2 3h-2 m2 3h-2" stroke-width="1.25"/></svg>'); |
| width: 22px; |
| height: 22px; |
| } |
| |
| #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; |
| } |
| |
| /* sidebar button opens modal |
| use hamburger button */ |
| .src #sidebar-button > a:before, .sidebar-menu-toggle:before { |
| content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \ |
| viewBox="0 0 22 22" fill="none" stroke="black">\ |
| <path d="M3,5h16M3,11h16M3,17h16" stroke-width="2.75"/></svg>'); |
| opacity: 0.75; |
| } |
| .sidebar-menu-toggle:hover:before, |
| .sidebar-menu-toggle:active:before, |
| .sidebar-menu-toggle:focus:before { |
| opacity: 1; |
| } |
| |
| /* src sidebar button opens a folder view */ |
| .src #sidebar-button > a:before { |
| content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \ |
| viewBox="0 0 22 22" fill="none" stroke="black">\ |
| <path d="M16,9v-4h-6v-1l-2,-2h-4l-2,2v16h13L21,9h-15L2,19" stroke-width="1.25"/>\ |
| <path d="M15,7h-11v3" stroke-width="0.75"/>\ |
| <path d="M3.75,10v1.25" stroke-width="0.375"/></svg>'); |
| opacity: 0.75; |
| } |
| |
| /* Media Queries */ |
| |
| /* Make sure all the buttons line wrap at the same time */ |
| @media (max-width: 850px) { |
| #search-tabs .count { |
| display: block; |
| } |
| } |
| |
| /* |
| 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 and main.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, |
| .sidebar-resizer { |
| 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; |
| } |
| .src .search-form { |
| margin-left: 40px; |
| } |
| .hide-sidebar .search-form { |
| margin-left: 32px; |
| } |
| .hide-sidebar .src .search-form { |
| margin-left: 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; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| } |
| |
| .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; |
| } |
| |
| .hide-sidebar .mobile-topbar { |
| display: none; |
| } |
| |
| .sidebar-menu-toggle { |
| width: 45px; |
| border: none; |
| line-height: 0; |
| } |
| |
| .hide-sidebar .sidebar-menu-toggle { |
| display: none; |
| } |
| |
| .sidebar-elems { |
| margin-top: 1em; |
| } |
| |
| .anchor { |
| display: none !important; |
| } |
| |
| #main-content > details.toggle > summary::before, |
| #main-content > div > details.toggle > summary::before { |
| left: -11px; |
| } |
| |
| /* We don't display these buttons on mobile devices. */ |
| #copy-path, #help-button { |
| display: none; |
| } |
| |
| /* sidebar button becomes topbar button */ |
| #sidebar-button > a:before { |
| content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \ |
| viewBox="0 0 22 22" fill="none" stroke="black">\ |
| <rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5"/>\ |
| <circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\ |
| <path d="m3 7.375h16m0-3h-4" stroke-width="1.25"/></svg>'); |
| width: 22px; |
| height: 22px; |
| } |
| .sidebar-menu-toggle:before { |
| filter: var(--mobile-sidebar-menu-filter); |
| } |
| .sidebar-menu-toggle:hover { |
| background: var(--main-background-color); |
| } |
| |
| /* 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 { |
| position: fixed; |
| max-width: 100vw; |
| width: 100vw; |
| } |
| .src .src-sidebar-title { |
| padding-top: 0; |
| } |
| |
| /* 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; |
| } |
| } |
| |
| .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 */ |
| |
| /* Begin: styles for themes |
| |
| Keep the default light and dark themes synchronized with the ones |
| in noscript.css |
| |
| The special "Begin theme" and "End theme" below are used by a lot of |
| tooling to ensure different themes all define all the variables. Do not |
| alter their formatting. */ |
| |
| /* Begin theme: light */ |
| :root[data-theme="light"] { |
| --main-background-color: white; |
| --main-color: black; |
| --settings-input-color: #2196f3; |
| --settings-input-border-color: #717171; |
| --settings-button-color: #000; |
| --settings-button-border-focus: #717171; |
| --sidebar-background-color: #f5f5f5; |
| --sidebar-background-color-hover: #e0e0e0; |
| --code-block-background-color: #f5f5f5; |
| --scrollbar-track-background-color: #dcdcdc; |
| --scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6); |
| --scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9; |
| --headings-border-bottom-color: #ddd; |
| --border-color: #e0e0e0; |
| --button-background-color: #fff; |
| --right-side-color: grey; |
| --code-attribute-color: #999; |
| --toggles-color: #999; |
| --toggle-filter: none; |
| --mobile-sidebar-menu-filter: none; |
| --search-input-focused-border-color: #66afe9; |
| --copy-path-button-color: #999; |
| --copy-path-img-filter: invert(50%); |
| --copy-path-img-hover-filter: invert(35%); |
| --codeblock-error-hover-color: rgb(255, 0, 0); |
| --codeblock-error-color: rgba(255, 0, 0, .5); |
| --codeblock-ignore-hover-color: rgb(255, 142, 0); |
| --codeblock-ignore-color: rgba(255, 142, 0, .6); |
| --warning-border-color: #ff8e00; |
| --type-link-color: #ad378a; |
| --trait-link-color: #6e4fc9; |
| --assoc-item-link-color: #3873ad; |
| --function-link-color: #ad7c37; |
| --macro-link-color: #068000; |
| --keyword-link-color: #3873ad; |
| --mod-link-color: #3873ad; |
| --link-color: #3873ad; |
| --sidebar-link-color: #356da4; |
| --sidebar-current-link-background-color: #fff; |
| --search-result-link-focus-background-color: #ccc; |
| --search-result-border-color: #aaa3; |
| --search-color: #000; |
| --search-error-code-background-color: #d0cccc; |
| --search-results-alias-color: #000; |
| --search-results-grey-color: #999; |
| --search-tab-title-count-color: #888; |
| --search-tab-button-not-selected-border-top-color: #e6e6e6; |
| --search-tab-button-not-selected-background: #e6e6e6; |
| --search-tab-button-selected-border-top-color: #0089ff; |
| --search-tab-button-selected-background: #fff; |
| --stab-background-color: #fff5d6; |
| --stab-code-color: #000; |
| --code-highlight-kw-color: #8959a8; |
| --code-highlight-kw-2-color: #4271ae; |
| --code-highlight-lifetime-color: #b76514; |
| --code-highlight-prelude-color: #4271ae; |
| --code-highlight-prelude-val-color: #c82829; |
| --code-highlight-number-color: #718c00; |
| --code-highlight-string-color: #718c00; |
| --code-highlight-literal-color: #c82829; |
| --code-highlight-attribute-color: #c82829; |
| --code-highlight-self-color: #c82829; |
| --code-highlight-macro-color: #3e999f; |
| --code-highlight-question-mark-color: #ff9011; |
| --code-highlight-comment-color: #8e908c; |
| --code-highlight-doc-comment-color: #4d4d4c; |
| --src-line-numbers-span-color: #c67e2d; |
| --src-line-number-highlighted-background-color: #fdffd3; |
| --test-arrow-color: #f5f5f5; |
| --test-arrow-background-color: rgba(78, 139, 202, 0.2); |
| --test-arrow-hover-color: #f5f5f5; |
| --test-arrow-hover-background-color: rgb(78, 139, 202); |
| --target-background-color: #fdffd3; |
| --target-border-color: #ad7c37; |
| --kbd-color: #000; |
| --kbd-background: #fafbfc; |
| --kbd-box-shadow-color: #c6cbd1; |
| --rust-logo-filter: initial; |
| /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ |
| --crate-search-div-filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg) |
| brightness(114%) contrast(76%); |
| --crate-search-div-hover-filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg) |
| brightness(96%) contrast(93%); |
| --crate-search-hover-border: #717171; |
| --src-sidebar-background-selected: #fff; |
| --src-sidebar-background-hover: #e0e0e0; |
| --table-alt-row-background-color: #f5f5f5; |
| --codeblock-link-background: #eee; |
| --scrape-example-toggle-line-background: #ccc; |
| --scrape-example-toggle-line-hover-background: #999; |
| --scrape-example-code-line-highlight: #fcffd6; |
| --scrape-example-code-line-highlight-focus: #f6fdb0; |
| --scrape-example-help-border-color: #555; |
| --scrape-example-help-color: #333; |
| --scrape-example-help-hover-border-color: #000; |
| --scrape-example-help-hover-color: #000; |
| --scrape-example-code-wrapper-background-start: rgba(255, 255, 255, 1); |
| --scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0); |
| --sidebar-resizer-hover: hsl(207, 90%, 66%); |
| --sidebar-resizer-active: hsl(207, 90%, 54%); |
| } |
| /* End theme: light */ |
| |
| /* Begin theme: dark */ |
| :root[data-theme="dark"] { |
| --main-background-color: #353535; |
| --main-color: #ddd; |
| --settings-input-color: #2196f3; |
| --settings-input-border-color: #999; |
| --settings-button-color: #000; |
| --settings-button-border-focus: #ffb900; |
| --sidebar-background-color: #505050; |
| --sidebar-background-color-hover: #676767; |
| --code-block-background-color: #2A2A2A; |
| --scrollbar-track-background-color: #717171; |
| --scrollbar-thumb-background-color: rgba(32, 34, 37, .6); |
| --scrollbar-color: rgba(32,34,37,.6) #5a5a5a; |
| --headings-border-bottom-color: #d2d2d2; |
| --border-color: #e0e0e0; |
| --button-background-color: #f0f0f0; |
| --right-side-color: grey; |
| --code-attribute-color: #999; |
| --toggles-color: #999; |
| --toggle-filter: invert(100%); |
| --mobile-sidebar-menu-filter: invert(100%); |
| --search-input-focused-border-color: #008dfd; |
| --copy-path-button-color: #999; |
| --copy-path-img-filter: invert(50%); |
| --copy-path-img-hover-filter: invert(65%); |
| --codeblock-error-hover-color: rgb(255, 0, 0); |
| --codeblock-error-color: rgba(255, 0, 0, .5); |
| --codeblock-ignore-hover-color: rgb(255, 142, 0); |
| --codeblock-ignore-color: rgba(255, 142, 0, .6); |
| --warning-border-color: #ff8e00; |
| --type-link-color: #2dbfb8; |
| --trait-link-color: #b78cf2; |
| --assoc-item-link-color: #d2991d; |
| --function-link-color: #2bab63; |
| --macro-link-color: #09bd00; |
| --keyword-link-color: #d2991d; |
| --mod-link-color: #d2991d; |
| --link-color: #d2991d; |
| --sidebar-link-color: #fdbf35; |
| --sidebar-current-link-background-color: #444; |
| --search-result-link-focus-background-color: #616161; |
| --search-result-border-color: #aaa3; |
| --search-color: #111; |
| --search-error-code-background-color: #484848; |
| --search-results-alias-color: #fff; |
| --search-results-grey-color: #ccc; |
| --search-tab-title-count-color: #888; |
| --search-tab-button-not-selected-border-top-color: #252525; |
| --search-tab-button-not-selected-background: #252525; |
| --search-tab-button-selected-border-top-color: #0089ff; |
| --search-tab-button-selected-background: #353535; |
| --stab-background-color: #314559; |
| --stab-code-color: #e6e1cf; |
| --code-highlight-kw-color: #ab8ac1; |
| --code-highlight-kw-2-color: #769acb; |
| --code-highlight-lifetime-color: #d97f26; |
| --code-highlight-prelude-color: #769acb; |
| --code-highlight-prelude-val-color: #ee6868; |
| --code-highlight-number-color: #83a300; |
| --code-highlight-string-color: #83a300; |
| --code-highlight-literal-color: #ee6868; |
| --code-highlight-attribute-color: #ee6868; |
| --code-highlight-self-color: #ee6868; |
| --code-highlight-macro-color: #3e999f; |
| --code-highlight-question-mark-color: #ff9011; |
| --code-highlight-comment-color: #8d8d8b; |
| --code-highlight-doc-comment-color: #8ca375; |
| --src-line-numbers-span-color: #3b91e2; |
| --src-line-number-highlighted-background-color: #0a042f; |
| --test-arrow-color: #dedede; |
| --test-arrow-background-color: rgba(78, 139, 202, 0.2); |
| --test-arrow-hover-color: #dedede; |
| --test-arrow-hover-background-color: #4e8bca; |
| --target-background-color: #494a3d; |
| --target-border-color: #bb7410; |
| --kbd-color: #000; |
| --kbd-background: #fafbfc; |
| --kbd-box-shadow-color: #c6cbd1; |
| --rust-logo-filter: drop-shadow(1px 0 0px #fff) |
| drop-shadow(0 1px 0 #fff) |
| drop-shadow(-1px 0 0 #fff) |
| drop-shadow(0 -1px 0 #fff); |
| /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ |
| --crate-search-div-filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg) |
| brightness(90%) contrast(90%); |
| --crate-search-div-hover-filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) |
| brightness(100%) contrast(91%); |
| --crate-search-hover-border: #2196f3; |
| --src-sidebar-background-selected: #333; |
| --src-sidebar-background-hover: #444; |
| --table-alt-row-background-color: #2a2a2a; |
| --codeblock-link-background: #333; |
| --scrape-example-toggle-line-background: #999; |
| --scrape-example-toggle-line-hover-background: #c5c5c5; |
| --scrape-example-code-line-highlight: #5b3b01; |
| --scrape-example-code-line-highlight-focus: #7c4b0f; |
| --scrape-example-help-border-color: #aaa; |
| --scrape-example-help-color: #eee; |
| --scrape-example-help-hover-border-color: #fff; |
| --scrape-example-help-hover-color: #fff; |
| --scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1); |
| --scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0); |
| --sidebar-resizer-hover: hsl(207, 30%, 54%); |
| --sidebar-resizer-active: hsl(207, 90%, 54%); |
| } |
| /* End theme: dark */ |
| |
| /* Begin theme: ayu */ |
| /* |
| Based off of the Ayu theme |
| Original by Dempfi (https://github.com/dempfi/ayu) |
| */ |
| :root[data-theme="ayu"] { |
| --main-background-color: #0f1419; |
| --main-color: #c5c5c5; |
| --settings-input-color: #ffb454; |
| --settings-input-border-color: #999; |
| --settings-button-color: #fff; |
| --settings-button-border-focus: #e0e0e0; |
| --sidebar-background-color: #14191f; |
| --sidebar-background-color-hover: rgba(70, 70, 70, 0.33); |
| --code-block-background-color: #191f26; |
| --scrollbar-track-background-color: transparent; |
| --scrollbar-thumb-background-color: #5c6773; |
| --scrollbar-color: #5c6773 #24292f; |
| --headings-border-bottom-color: #5c6773; |
| --border-color: #5c6773; |
| --button-background-color: #141920; |
| --right-side-color: grey; |
| --code-attribute-color: #999; |
| --toggles-color: #999; |
| --toggle-filter: invert(100%); |
| --mobile-sidebar-menu-filter: invert(100%); |
| --search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */ |
| --copy-path-button-color: #fff; |
| --copy-path-img-filter: invert(70%); |
| --copy-path-img-hover-filter: invert(100%); |
| --codeblock-error-hover-color: rgb(255, 0, 0); |
| --codeblock-error-color: rgba(255, 0, 0, .5); |
| --codeblock-ignore-hover-color: rgb(255, 142, 0); |
| --codeblock-ignore-color: rgba(255, 142, 0, .6); |
| --warning-border-color: #ff8e00; |
| --type-link-color: #ffa0a5; |
| --trait-link-color: #39afd7; |
| --assoc-item-link-color: #39afd7; |
| --function-link-color: #fdd687; |
| --macro-link-color: #a37acc; |
| --keyword-link-color: #39afd7; |
| --mod-link-color: #39afd7; |
| --link-color: #39afd7; |
| --sidebar-link-color: #53b1db; |
| --sidebar-current-link-background-color: transparent; |
| --search-result-link-focus-background-color: #3c3c3c; |
| --search-result-border-color: #aaa3; |
| --search-color: #fff; |
| --search-error-code-background-color: #4f4c4c; |
| --search-results-alias-color: #c5c5c5; |
| --search-results-grey-color: #999; |
| --search-tab-title-count-color: #888; |
| --search-tab-button-not-selected-border-top-color: none; |
| --search-tab-button-not-selected-background: transparent !important; |
| --search-tab-button-selected-border-top-color: none; |
| --search-tab-button-selected-background: #141920 !important; |
| --stab-background-color: #314559; |
| --stab-code-color: #e6e1cf; |
| --code-highlight-kw-color: #ff7733; |
| --code-highlight-kw-2-color: #ff7733; |
| --code-highlight-lifetime-color: #ff7733; |
| --code-highlight-prelude-color: #69f2df; |
| --code-highlight-prelude-val-color: #ff7733; |
| --code-highlight-number-color: #b8cc52; |
| --code-highlight-string-color: #b8cc52; |
| --code-highlight-literal-color: #ff7733; |
| --code-highlight-attribute-color: #e6e1cf; |
| --code-highlight-self-color: #36a3d9; |
| --code-highlight-macro-color: #a37acc; |
| --code-highlight-question-mark-color: #ff9011; |
| --code-highlight-comment-color: #788797; |
| --code-highlight-doc-comment-color: #a1ac88; |
| --src-line-numbers-span-color: #5c6773; |
| --src-line-number-highlighted-background-color: rgba(255, 236, 164, 0.06); |
| --test-arrow-color: #788797; |
| --test-arrow-background-color: rgba(57, 175, 215, 0.09); |
| --test-arrow-hover-color: #c5c5c5; |
| --test-arrow-hover-background-color: rgba(57, 175, 215, 0.368); |
| --target-background-color: rgba(255, 236, 164, 0.06); |
| --target-border-color: rgba(255, 180, 76, 0.85); |
| --kbd-color: #c5c5c5; |
| --kbd-background: #314559; |
| --kbd-box-shadow-color: #5c6773; |
| --rust-logo-filter: drop-shadow(1px 0 0px #fff) |
| drop-shadow(0 1px 0 #fff) |
| drop-shadow(-1px 0 0 #fff) |
| drop-shadow(0 -1px 0 #fff); |
| /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ |
| --crate-search-div-filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) |
| brightness(94%) contrast(94%); |
| --crate-search-div-hover-filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg) |
| brightness(113%) contrast(76%); |
| --crate-search-hover-border: #e0e0e0; |
| --src-sidebar-background-selected: #14191f; |
| --src-sidebar-background-hover: #14191f; |
| --table-alt-row-background-color: #191f26; |
| --codeblock-link-background: #333; |
| --scrape-example-toggle-line-background: #999; |
| --scrape-example-toggle-line-hover-background: #c5c5c5; |
| --scrape-example-code-line-highlight: #5b3b01; |
| --scrape-example-code-line-highlight-focus: #7c4b0f; |
| --scrape-example-help-border-color: #aaa; |
| --scrape-example-help-color: #eee; |
| --scrape-example-help-hover-border-color: #fff; |
| --scrape-example-help-hover-color: #fff; |
| --scrape-example-code-wrapper-background-start: rgba(15, 20, 25, 1); |
| --scrape-example-code-wrapper-background-end: rgba(15, 20, 25, 0); |
| --sidebar-resizer-hover: hsl(34, 50%, 33%); |
| --sidebar-resizer-active: hsl(34, 100%, 66%); |
| } |
| |
| :root[data-theme="ayu"] h1, |
| :root[data-theme="ayu"] h2, |
| :root[data-theme="ayu"] h3, |
| :root[data-theme="ayu"] h4, |
| :where(:root[data-theme="ayu"]) h1 a, |
| :root[data-theme="ayu"] .sidebar h2 a, |
| :root[data-theme="ayu"] .sidebar h3 a { |
| color: #fff; |
| } |
| |
| :root[data-theme="ayu"] .docblock code { |
| color: #ffb454; |
| } |
| |
| :root[data-theme="ayu"] .docblock a > code { |
| color: #39AFD7 !important; |
| } |
| |
| :root[data-theme="ayu"] .code-header, |
| :root[data-theme="ayu"] .docblock pre > code, |
| :root[data-theme="ayu"] pre, |
| :root[data-theme="ayu"] pre > code, |
| :root[data-theme="ayu"] .item-info code, |
| :root[data-theme="ayu"] .rustdoc.source .example-wrap { |
| color: #e6e1cf; |
| } |
| |
| :root[data-theme="ayu"] .sidebar .current, |
| :root[data-theme="ayu"] .sidebar .current a, |
| :root[data-theme="ayu"] .sidebar a:hover, |
| :root[data-theme="ayu"] #src-sidebar div.files > a:hover, |
| :root[data-theme="ayu"] details.dir-entry summary:hover, |
| :root[data-theme="ayu"] #src-sidebar div.files > a:focus, |
| :root[data-theme="ayu"] details.dir-entry summary:focus, |
| :root[data-theme="ayu"] #src-sidebar div.files > a.selected { |
| color: #ffb44c; |
| } |
| |
| :root[data-theme="ayu"] .sidebar-elems .location { |
| color: #ff7733; |
| } |
| |
| :root[data-theme="ayu"] .src-line-numbers .line-highlighted { |
| color: #708090; |
| padding-right: 7px; |
| border-right: 1px solid #ffb44c; |
| } |
| |
| :root[data-theme="ayu"] .search-results a:hover, |
| :root[data-theme="ayu"] .search-results a:focus { |
| color: #fff !important; |
| background-color: #3c3c3c; |
| } |
| |
| :root[data-theme="ayu"] .search-results a { |
| color: #0096cf; |
| } |
| |
| :root[data-theme="ayu"] .search-results a div.desc { |
| color: #c5c5c5; |
| } |
| |
| :root[data-theme="ayu"] .result-name .primitive > i, |
| :root[data-theme="ayu"] .result-name .keyword > i { |
| color: #788797; |
| } |
| |
| :root[data-theme="ayu"] #search-tabs > button.selected { |
| border-bottom: 1px solid #ffb44c !important; |
| border-top: none; |
| } |
| :root[data-theme="ayu"] #search-tabs > button:not(.selected) { |
| border: none; |
| background-color: transparent !important; |
| } |
| :root[data-theme="ayu"] #search-tabs > button:hover { |
| border-bottom: 1px solid rgba(242, 151, 24, 0.3); |
| } |
| |
| :root[data-theme="ayu"] #settings-menu > a img, |
| :root[data-theme="ayu"] #sidebar-button > a:before { |
| filter: invert(100); |
| } |
| /* End theme: ayu */ |
| |
| /* End: styles for themes */ |
