rust/src/librustdoc/html/static/css/rustdoc.css

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

2163 lines
44 KiB
CSS
Raw Normal View History

/* 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'),
2022-04-21 10:57:57 +02:00
url("FiraSans-Regular.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 500;
src: local('Fira Sans Medium'),
2022-04-21 10:57:57 +02:00
url("FiraSans-Medium.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'),
2022-04-21 10:57:57 +02:00
url("SourceSerif4-Regular.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'),
2022-04-21 10:57:57 +02:00
url("SourceSerif4-It.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'),
2022-04-21 10:57:57 +02:00
url("SourceSerif4-Bold.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 */
2022-04-21 10:57:57 +02:00
src: url("SourceCodePro-Regular.ttf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: 'Source Code Pro';
font-style: italic;
font-weight: 400;
2022-04-21 10:57:57 +02:00
src: url("SourceCodePro-It.ttf.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 600;
2022-04-21 10:57:57 +02:00
src: url("SourceCodePro-Semibold.ttf.woff2") format("woff2");
font-display: swap;
}
2021-10-12 04:47:34 +09:00
/* Avoid using legacy CJK serif fonts in Windows like Batang. */
@font-face {
font-family: 'NanumBarunGothic';
2022-04-21 10:57:57 +02:00
src: url("NanumBarunGothic.ttf.woff2") format("woff2");
font-display: swap;
unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
* {
2020-07-15 17:20:46 +02:00
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
2019-05-27 15:57:44 +02:00
/* This part handles the "default" theme being used depending on the system one. */
html {
content: "";
}
@media (prefers-color-scheme: light) {
html {
content: "light";
}
}
@media (prefers-color-scheme: dark) {
html {
content: "dark";
}
}
2013-10-14 21:32:12 +02:00
/* 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;
-webkit-font-feature-settings: "kern", "liga";
-moz-font-feature-settings: "kern", "liga";
font-feature-settings: "kern", "liga";
background-color: var(--main-background-color);
color: var(--main-color);
}
2014-04-27 09:07:12 +03:00
h1 {
font-size: 1.5rem; /* 24px */
2014-04-27 09:07:12 +03:00
}
h2 {
font-size: 1.375rem; /* 22px */
2014-04-27 09:07:12 +03:00
}
h3 {
font-size: 1.25rem; /* 20px */
2014-04-27 09:07:12 +03:00
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
2021-10-18 21:04:38 -07:00
}
h1, h2, h3, h4 {
margin: 25px 0 15px 0;
padding-bottom: 6px;
}
.docblock h3, .docblock h4, h5, h6 {
2021-10-18 21:04:38 -07:00
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;
}
h1.fqn {
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;
justify-content: space-between;
padding-bottom: 6px;
margin-bottom: 15px;
}
#toggle-all-docs {
text-decoration: none;
}
/* 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 {
2022-07-27 15:36:27 +02:00
border-bottom: 1px solid var(--headings-border-bottom-color);
}
h3.code-header {
font-size: 1.125rem; /* 18px */
}
h4.code-header {
font-size: 1rem;
}
.code-header {
font-weight: 600;
border-bottom-style: none;
margin: 0;
padding: 0;
}
#crate-search,
h1, h2, h3, h4, h5, h6,
.sidebar,
.mobile-topbar,
.search-input,
.search-results .result-name,
.item-left > a,
.out-of-band,
span.since,
a.srclink,
#help-button > a,
2022-07-18 17:45:54 +02:00
details.rustdoc-toggle.top-doc > summary,
details.rustdoc-toggle.non-exhaustive > summary,
.scraped-example-title,
.more-examples-toggle summary, .more-examples-toggle .hide-more,
.example-links a,
/* This selector is for the items listed in the "all items" page. */
ul.all-items {
font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
}
a#toggle-all-docs,
a.anchor,
.small-section-header a,
#source-sidebar a,
pre.rust a,
.sidebar h2 a,
.sidebar h3 a,
.mobile-topbar h2 a,
h1 a,
.search-results a,
.module-item .stab,
.import-item .stab,
.result-name .primitive > i, .result-name .keyword > i,
.method .where,
.fn .where,
.where.fmt-newline {
color: var(--main-color);
}
.content span.enum, .content a.enum,
.content span.struct, .content a.struct,
.content span.union, .content a.union,
.content span.primitive, .content a.primitive,
.content span.type, .content a.type,
.content span.foreigntype, .content a.foreigntype {
color: var(--type-link-color);
}
.content span.trait, .content a.trait,
.content span.traitalias, .content a.traitalias {
color: var(--trait-link-color);
}
.content span.associatedtype, .content a.associatedtype,
.content span.constant, .content a.constant,
.content span.static, .content a.static {
color: var(--assoc-item-link-color);
}
.content span.fn, .content a.fn,
.content .fnname,
.content span.method, .content a.method,
.content span.tymethod, .content a.tymethod {
color: var(--function-link-color);
}
.content span.attr, .content a.attr,
.content span.derive, .content a.derive,
.content span.macro, .content a.macro {
color: var(--macro-link-color);
}
.content span.mod, .content a.mod {
color: var(--mod-link-color);
}
.content span.keyword, .content a.keyword {
color: var(--keyword-link-color);
}
a {
color: var(--link-color);
}
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;
}
2017-08-18 17:09:51 +02:00
summary {
outline: none;
}
/* 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;
}
/* end tweaks for normalize.css 8 */
.rustdoc {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
main {
position: relative;
flex-grow: 1;
padding: 10px 15px 40px 45px;
min-width: 0;
}
2021-10-10 00:52:14 +02:00
.source main {
padding: 15px;
}
.width-limiter {
max-width: 960px;
margin-right: auto;
}
.source .width-limiter {
2021-10-10 00:52:14 +02:00
max-width: unset;
}
details:not(.rustdoc-toggle) summary {
margin-bottom: .6em;
}
code, pre, a.test-arrow, .code-header {
font-family: "Source Code Pro", monospace;
}
2016-09-09 11:54:12 +08:00
.docblock code, .docblock-short code {
border-radius: 3px;
padding: 0 0.125em;
}
.docblock pre code, .docblock-short pre code {
padding: 0;
2015-07-12 19:42:42 -04:00
}
pre {
padding: 14px;
2014-04-25 17:34:32 +09:00
}
.item-decl pre {
overflow-x: auto;
}
2014-04-25 17:34:32 +09:00
.source .content pre {
padding: 20px;
}
img {
max-width: 100%;
}
.source .content {
overflow: visible;
}
2021-10-24 22:41:48 +02:00
.sub-logo-container {
line-height: 0;
2021-10-24 22:41:48 +02:00
}
.sub-logo-container > img {
2021-10-24 22:41:48 +02:00
height: 60px;
width: 60px;
object-fit: contain;
}
.sidebar, .mobile-topbar, .sidebar-menu-toggle {
background-color: var(--sidebar-background-color);
}
.sidebar {
font-size: 0.875rem;
width: 200px;
min-width: 200px;
overflow-y: scroll;
position: sticky;
height: 100vh;
2021-11-29 15:55:05 +01:00
top: 0;
left: 0;
}
.rustdoc.source .sidebar {
2021-10-24 21:59:53 +02:00
width: 50px;
min-width: 0px;
max-width: 300px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
border-right: 1px solid;
overflow-x: hidden;
2021-10-24 21:59:53 +02:00
/* The sidebar is by default hidden */
overflow-y: hidden;
}
.rustdoc.source .sidebar .sidebar-logo {
display: none;
}
.source .sidebar, #sidebar-toggle, #source-sidebar {
background-color: var(--sidebar-background-color);
}
2022-07-03 11:42:44 -07:00
#sidebar-toggle > button:hover, #sidebar-toggle > button:focus {
background-color: var(--sidebar-background-color-hover);
}
.source .sidebar > *:not(#sidebar-toggle) {
2021-10-24 21:59:53 +02:00
visibility: hidden;
}
.source-sidebar-expanded .source .sidebar {
2021-10-24 21:59:53 +02:00
overflow-y: auto;
width: 300px;
2021-10-24 21:59:53 +02:00
}
.source-sidebar-expanded .source .sidebar > *:not(#sidebar-toggle) {
2021-10-24 21:59:53 +02:00
visibility: visible;
2021-10-10 00:52:14 +02:00
}
#all-types {
margin-top: 1em;
}
/* Improve the scrollbar display on firefox */
* {
scrollbar-width: initial;
scrollbar-color: var(--scrollbar-color);
}
.sidebar {
2020-04-01 16:12:40 +02:00
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color);
2020-04-01 16:12:40 +02:00
}
/* Improve the scrollbar display on webkit-based browsers */
::-webkit-scrollbar {
width: 12px;
}
2020-04-01 16:12:40 +02:00
.sidebar::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
2020-04-01 16:12:40 +02:00
-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 {
2018-02-01 23:40:23 +01:00
display: none !important;
}
.sidebar .logo-container {
2021-10-24 21:59:53 +02:00
display: flex;
margin-top: 10px;
2021-10-24 21:59:53 +02:00
margin-bottom: 10px;
justify-content: center;
}
.version {
overflow-wrap: break-word;
}
2019-04-29 11:45:06 +02:00
.logo-container > img {
2021-10-24 21:59:53 +02:00
height: 100px;
width: 100px;
2019-04-29 11:45:06 +02:00
}
ul.block, .block li {
padding: 0;
margin: 0;
list-style: none;
}
.block a,
.sidebar h2 a,
.sidebar h3 a {
display: block;
padding: 0.25rem;
margin-left: -0.25rem;
text-overflow: ellipsis;
overflow: hidden;
}
.sidebar h2 {
overflow-wrap: anywhere;
padding: 0;
margin: 0;
margin-top: 0.7rem;
margin-bottom: 0.7rem;
}
.sidebar h3 {
font-size: 1.125rem; /* 18px */
padding: 0;
margin: 0;
}
.sidebar-elems,
.sidebar > h2 {
padding-left: 24px;
}
.sidebar a, .sidebar .current {
color: var(--sidebar-link-color);
}
.sidebar .current,
.sidebar a:hover {
background-color: var(--sidebar-current-link-background-color);
}
.sidebar-elems .block {
margin-bottom: 2em;
}
.sidebar-elems .block li a {
white-space: nowrap;
}
.mobile-topbar {
display: none;
}
.source .content pre.rust {
white-space: pre;
overflow: auto;
padding-left: 0;
}
2017-12-04 22:11:21 +01:00
.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;
}
2018-10-08 22:51:37 +02:00
pre.example-line-numbers {
2018-10-08 22:51:37 +02:00
overflow: initial;
border: 1px solid;
padding: 13px 8px;
text-align: right;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
2018-10-08 22:51:37 +02:00
}
.src-line-numbers {
text-align: right;
}
.rustdoc:not(.source) .example-wrap > pre:not(.example-line-numbers) {
2018-10-08 22:51:37 +02:00
width: 100%;
2018-12-02 19:12:37 +01:00
overflow-x: auto;
2018-10-08 22:51:37 +02:00
}
.rustdoc:not(.source) .example-wrap > pre.src-line-numbers {
2021-10-19 20:08:30 -07:00
width: auto;
overflow-x: visible;
}
.rustdoc .example-wrap > pre {
2018-11-10 21:58:47 +01:00
margin: 0;
}
.search-loading {
text-align: center;
}
.content > .example-wrap pre.src-line-numbers {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.src-line-numbers span {
2018-02-01 23:40:23 +01:00
cursor: pointer;
}
.docblock-short {
overflow-wrap: break-word;
overflow-wrap: anywhere;
overflow: hidden;
text-overflow: ellipsis;
}
/* 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; }
2022-07-27 15:00:43 +02:00
.top-doc .docblock h3 { font-size: 1.25rem; }
2021-05-16 20:47:03 -07:00
.top-doc .docblock h4,
2021-10-18 21:04:38 -07:00
.top-doc .docblock h5 {
font-size: 1.125rem;
2021-10-18 21:04:38 -07:00
}
.top-doc .docblock h6 {
font-size: 1rem;
2021-05-16 20:47:03 -07:00
}
.docblock h5 { font-size: 1rem; }
.docblock h6 { font-size: 0.875rem; }
2016-05-27 12:04:56 +02:00
.docblock {
margin-left: 24px;
position: relative;
2016-05-27 12:04:56 +02:00
}
.docblock > :not(.more-examples-toggle):not(.example-wrap) {
max-width: 100%;
overflow-x: auto;
}
.out-of-band {
2021-04-22 22:33:54 +02:00
flex-grow: 0;
font-size: 1.125rem;
font-weight: normal;
2016-05-05 04:46:45 +02:00
}
.docblock code, .docblock-short code,
pre, .rustdoc.source .example-wrap {
background-color: var(--code-block-background-color);
}
2021-11-29 17:14:05 +01:00
#main-content {
2018-02-01 23:40:23 +01:00
position: relative;
}
.docblock table {
margin: .5em 0;
2019-02-11 22:22:56 +01:00
width: calc(100% - 2px);
2021-07-17 23:39:18 +02:00
overflow-x: auto;
display: block;
border-collapse: collapse;
}
.docblock table td {
padding: .5em;
border: 1px dashed var(--border-color);
rustdoc: remove outdated CSS `.content table` etc The `.content table` / `.content td` / `.content tr` family of selectors date back to 4fd061c426902b0904c65e64a3780b21f9ab3afb, when module indexes and other parts of rustdoc used `<table>` tags for layout and content presentation. The `.content td h1, .content td h2` has only been changed since then to tweak the font size in dd5ff428edbc7cd4fa600b81f27bbec28589704f. https://github.com/rust-lang/rust/blob/4fd061c426902b0904c65e64a3780b21f9ab3afb/src/rustdoc_ng/html/static/main.css#L155-L162 This CSS would have affected: * search result tables, which were removed in b615c0c85469c94041a5e68b9d8b68dcf799f9f1 * module item tables, which were removed in 6020c79ddeafe8d9760b27c14c39da81bac9b4a6 * docblock tables from markdown, which still exist It may also have affected a few other tables over the last decade, but they've been gradually replaced with grid layouts and flexbox to make layouts that work better on narrow viewports. For example, 34bd2b845b3acd84c5a9bddae3ff8081c19ec5e9. These rules have no affect on the appearance of docblock tables =============================================================== .content table { border-spacing: 0 5px; } According to MDN, [border-spacing] only has an effect when `border-collapse` is `separate`. However, `border-collapse: collapse` is set globally for all tables, so this rule does nothing. [border-spacing]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing .content td p:first-child { margin-top: 0; } Tables with paragraphs in them are impossible without dropping down to raw HTML. Also, the rustdoc stylesheet sets paragraphs to have no top margin anyway, so this rule is a no-op. .content td h1, .content td h2 { margin-left: 0; font-size: 1.125rem; } Tables with headers in them are impossible without dropping down to raw HTML. This is considered unlikely, especially since it looks weird right now (`.docblock h2` has an underline that is redundant with the table cell's own border). .content tr:first-child td { border-top: 0; } This has no effect because of border collapsing. This rule is removed, because tables look fine without it ========================================================= .content td:first-child { padding-right: 20px; } By removing this rule, the first cell in each row has the same padding as all other cells in the row. This rule is kept, and converted to directly target `.docblock` =============================================================== .content td { vertical-align: top; } Removing this rule would cause it to be aligned to the middle instead.
2022-09-13 12:25:32 -07:00
vertical-align: top;
}
.docblock table th {
padding: .5em;
text-align: left;
border: 1px solid var(--border-color);
}
/* Shift "where ..." part of method or fn definition down a line */
.method .where,
.fn .where,
.where.fmt-newline {
2017-03-09 19:02:59 +01:00
display: block;
font-size: 0.875rem;
}
.item-info {
display: block;
margin-left: 24px;
}
.item-info code {
font-size: 0.875rem;
}
2021-11-29 17:14:05 +01:00
#main-content > .item-info {
margin-top: 0;
margin-left: 0;
}
nav.sub {
2021-10-24 22:41:48 +02:00
flex-grow: 1;
flex-flow: row nowrap;
margin: 4px 0 25px 0;
display: flex;
align-items: center;
}
nav.sub form {
flex-grow: 1;
}
.source nav.sub {
margin: 0 0 15px 0;
}
.source nav.sub form {
margin-left: 32px;
2021-10-10 00:52:14 +02:00
}
a {
text-decoration: none;
}
2021-06-17 09:57:48 +02:00
.small-section-header {
display: flex;
justify-content: space-between;
position: relative;
}
2017-08-08 22:16:08 +02:00
.small-section-header:hover > .anchor {
display: initial;
}
.impl:hover > .anchor, .trait-impl:hover > .anchor {
2017-08-28 22:40:09 +02:00
display: inline-block;
position: absolute;
}
2017-08-08 22:16:08 +02:00
.anchor {
display: none;
position: absolute;
left: -0.5em;
2021-08-06 16:47:35 +02:00
background: none !important;
2017-08-08 22:16:08 +02:00
}
.anchor.field {
left: -5px;
}
.small-section-header > .anchor {
2021-08-06 16:47:35 +02:00
left: -15px;
padding-right: 8px;
}
h2.small-section-header > .anchor {
padding-right: 6px;
}
2021-08-06 16:47:35 +02:00
.anchor::before {
content: '§';
2017-08-08 22:16:08 +02:00
}
.main-heading a:hover,
.example-wrap > pre.rust a:hover,
.all-items a:hover,
.docblock a:not(.test-arrow):not(.scrape-help):hover,
.docblock-short a:not(.test-arrow):not(.scrape-help):hover,
.item-info a {
text-decoration: underline;
}
.crate.block a.current { font-weight: 500; }
/* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap
as much as needed on mobile (see
src/test/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 {
2021-10-11 00:38:56 +02:00
display: table;
}
.item-row {
display: table-row;
}
.item-left, .item-right {
display: table-cell;
}
.item-left {
padding-right: 1.25rem;
}
2018-04-13 22:54:09 +02:00
.search-container {
position: relative;
2022-01-20 14:18:59 +01:00
display: flex;
height: 34px;
2018-04-13 22:54:09 +02:00
}
.search-results-title {
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
margin-top: 0;
white-space: nowrap;
/* flex layout allows shrinking the <select> appropriately if it becomes too large */
display: inline-flex;
max-width: 100%;
/* 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;
}
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
#crate-search-div {
display: inline-block;
/* 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;
}
2018-10-01 00:47:54 +02:00
#crate-search {
min-width: 115px;
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
padding: 0;
/* keep these two in sync with "@-moz-document url-prefix()" below */
padding-left: 4px;
padding-right: 23px;
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
/* 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;
2018-10-01 00:47:54 +02:00
outline: none;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none;
/* Removes default arrow from firefox */
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
text-indent: 0.01px;
background-color: var(--main-background-color);
color: inherit;
line-height: 1.5;
font-weight: 500;
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
}
/* cancel stylistic differences in padding in firefox
for "appearance: none"-style (or equivalent) <select>s */
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
@-moz-document url-prefix() {
#crate-search {
padding-left: 0px; /* == 4px - 4px */
padding-right: 19px; /* == 23px - 4px */
}
}
/* pseudo-element for holding the dropdown-arrow image; needs to be a separate thing
so that we can apply CSS-filters to change the arrow color in themes */
#crate-search-div::after {
/* lets clicks through! */
pointer-events: none;
/* completely covers the underlying div */
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
2018-11-29 01:29:49 +01:00
background-repeat: no-repeat;
2018-12-08 16:35:51 +01:00
background-size: 20px;
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
background-position: calc(100% - 2px) 56%;
/* image is black color, themes should apply a "filter" property to change the color */
background-image: /* AUTOREPLACE: */url("down-arrow.svg");
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
}
#crate-search > option {
font-size: 1rem;
2018-10-01 00:47:54 +02:00
}
.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;
/* Override Normalize.css: we have margins and do
not want to overflow - the `moz` attribute is necessary
until Firefox 29, too early to drop at this point */
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
outline: none;
border: 1px solid var(--border-color);
2022-01-20 14:18:59 +01:00
border-radius: 2px;
padding: 8px;
font-size: 1rem;
width: 100%;
background-color: var(--button-background-color);
color: var(--search-color);
}
2022-09-02 15:08:23 +02:00
.search-input:focus {
border-color: var(--search-input-focused-border-color);
}
2021-05-09 12:56:21 -07:00
.search-results {
display: none;
padding-bottom: 2em;
}
.search-results.active {
display: block;
2021-05-21 23:11:06 +02:00
/* prevent overhanging tabs from moving the first result */
clear: both;
2021-05-09 12:56:21 -07:00
}
.search-results .desc > span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
2021-05-21 16:39:03 +02:00
.search-results > a {
2021-05-21 23:11:06 +02:00
display: block;
2021-05-09 12:56:21 -07:00
/* A little margin ensures the browser's outlining of focused links has room to display. */
margin-left: 2px;
margin-right: 2px;
2021-05-21 23:11:06 +02:00
border-bottom: 1px solid #aaa3;
}
2021-05-21 16:39:03 +02:00
.search-results > a > div {
display: flex;
2021-05-21 23:11:06 +02:00
flex-flow: row wrap;
}
.search-results .result-name, .search-results div.desc, .search-results .result-description {
width: 50%;
2021-05-21 16:39:03 +02:00
}
2021-05-21 23:54:49 +02:00
.search-results .result-name {
2021-05-21 23:11:06 +02:00
padding-right: 1em;
2021-05-21 16:39:03 +02:00
}
.search-results a:hover,
.search-results a:focus {
background-color: var(--search-result-link-focus-background-color);
}
.popover {
font-size: 1rem;
position: absolute;
right: 0;
z-index: 2;
display: block;
margin-top: 7px;
border-radius: 3px;
border: 1px solid var(--border-color);
font-size: 1rem;
}
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
.popover::before {
content: '';
position: absolute;
right: 11px;
border: solid var(--border-color);
border-width: 1px 1px 0 0;
display: inline-block;
padding: 4px;
transform: rotate(-45deg);
top: -5px;
}
.popover, .popover::before {
background-color: var(--main-background-color);
color: var(--main-color);
}
/* use larger max-width for help popover, but not for help.html */
#help.popover {
max-width: 600px;
}
#help.popover::before {
right: 48px;
}
#help dt {
float: left;
clear: left;
display: block;
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;
}
2021-07-18 12:25:49 +02:00
.item-info .stab {
width: fit-content;
/* This min-height is needed to unify the height of the stab elements because some of them
have emojis.
*/
min-height: 36px;
display: flex;
align-items: center;
white-space: pre-wrap;
2021-07-18 12:25:49 +02:00
}
.stab {
padding: 3px;
margin-bottom: 5px;
font-size: 0.875rem;
font-weight: normal;
color: var(--main-color);
background-color: var(--stab-background-color);
}
.stab.portability > code {
background: none;
color: var(--stab-code-color);
}
.stab .emoji {
font-size: 1.25rem;
2022-08-18 15:47:39 +02:00
margin-right: 0.3rem;
}
/* This is to prevent the `.stab` elements to overflow the .docblock elements. */
.docblock .stab {
padding: 0 0.125em;
margin-bottom: 0;
}
/* 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;
}
2021-04-13 17:23:27 +02:00
.module-item .stab,
.import-item .stab {
border-radius: 3px;
display: inline-block;
font-size: 0.875rem;
line-height: 1.2;
margin-bottom: 0;
margin-left: 0.3125em;
padding: 2px;
vertical-align: text-bottom;
}
2021-04-13 17:23:27 +02:00
.module-item.unstable,
.import-item.unstable {
opacity: 0.65;
}
.since {
font-weight: normal;
font-size: initial;
}
.rightside {
padding-left: 12px;
padding-right: 2px;
2022-08-27 00:37:04 +02:00
float: right;
}
2022-09-02 15:08:23 +02:00
.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 .attribute {
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);
}
2022-09-09 16:18:14 +02:00
.example-wrap.compile_fail,
.example-wrap.should_panic {
2022-09-08 23:40:13 +02:00
border-left: 2px solid var(--codeblock-error-color);
}
2022-09-09 16:18:14 +02:00
.ignore.example-wrap {
2022-09-08 23:40:13 +02:00
border-left: 2px solid var(--codeblock-ignore-color);
}
2022-09-09 16:18:14 +02:00
.example-wrap.compile_fail:hover,
.example-wrap.should_panic:hover {
2022-09-08 23:40:13 +02:00
border-left: 2px solid var(--codeblock-error-hover-color);
}
2022-09-09 16:18:14 +02:00
.example-wrap.ignore:hover {
2022-09-08 23:40:13 +02:00
border-left: 2px solid var(--codeblock-ignore-hover-color);
}
2022-09-09 16:18:14 +02:00
.example-wrap.compile_fail .tooltip,
.example-wrap.should_panic .tooltip {
2022-09-08 23:40:13 +02:00
color: var(--codeblock-error-color);
}
2022-09-09 16:18:14 +02:00
.example-wrap.ignore .tooltip {
2022-09-08 23:40:13 +02:00
color: var(--codeblock-ignore-color);
}
2022-09-09 16:18:14 +02:00
.example-wrap.compile_fail:hover .tooltip,
.example-wrap.should_panic:hover .tooltip {
2022-09-08 23:40:13 +02:00
color: var(--codeblock-error-hover-color);
}
2022-09-09 16:18:14 +02:00
.example-wrap.ignore:hover .tooltip {
2022-09-08 23:40:13 +02:00
color: var(--codeblock-ignore-hover-color);
}
2022-09-09 16:18:14 +02:00
.example-wrap .tooltip {
position: absolute;
display: block;
cursor: pointer;
left: -25px;
top: 5px;
}
.example-wrap .tooltip::after {
display: none;
text-align: center;
padding: 5px 3px 3px 3px;
border-radius: 6px;
margin-left: 5px;
font-size: 1rem;
border: 1px solid var(--border-color);
position: absolute;
width: max-content;
top: -2px;
z-index: 1;
}
.example-wrap .tooltip::before {
content: " ";
position: absolute;
top: 50%;
left: 16px;
margin-top: -5px;
border-width: 5px;
border-style: solid;
display: none;
z-index: 1;
}
.example-wrap.ignore .tooltip::after {
content: "This example is not tested";
}
.example-wrap.compile_fail .tooltip::after {
content: "This example deliberately fails to compile";
}
.example-wrap.should_panic .tooltip::after {
content: "This example panics";
}
.example-wrap.edition .tooltip::after {
content: "This code runs with edition " attr(data-edition);
}
.example-wrap .tooltip:hover::before, .example-wrap .tooltip:hover::after {
display: inline;
}
.example-wrap.compile_fail .tooltip,
.example-wrap.should_panic .tooltip,
.example-wrap.ignore .tooltip {
font-weight: bold;
font-size: 1.25rem;
}
a.test-arrow {
display: inline-block;
visibility: hidden;
position: absolute;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 1.375rem;
top: 5px;
right: 5px;
z-index: 1;
}
.example-wrap:hover .test-arrow {
visibility: visible;
}
2022-08-27 00:37:04 +02:00
a.test-arrow:hover {
text-decoration: none;
}
2021-04-17 18:08:50 -07:00
.code-attribute {
font-weight: 300;
2022-09-02 15:08:23 +02:00
color: var(--code-attribute-color);
2021-04-17 18:08:50 -07:00
}
2017-07-09 00:40:29 +02:00
.item-spacer {
width: 100%;
height: 12px;
}
.out-of-band > span.since {
font-size: 1.25rem;
2016-05-10 21:01:10 +02:00
}
h3.variant {
font-weight: 600;
font-size: 1.125rem;
margin-bottom: 10px;
2018-10-19 01:34:46 +02:00
}
.sub-variant h4 {
font-size: 1rem;
font-weight: 400;
margin-top: 0;
margin-bottom: 0;
2018-10-19 01:34:46 +02:00
}
.sub-variant {
margin-left: 24px;
margin-bottom: 40px;
2018-10-19 01:34:46 +02:00
}
.sub-variant > .sub-variant-field {
margin-left: 24px;
}
:target > code, :target > .code-header {
2017-03-09 19:02:59 +01:00
opacity: 1;
2016-05-16 22:36:13 +02:00
}
:target {
padding-right: 3px;
}
.notable-traits-tooltip {
display: inline-block;
cursor: pointer;
}
.notable-traits:hover .notable-traits-tooltiptext,
.notable-traits .notable-traits-tooltiptext.force-tooltip {
display: inline-block;
}
.notable-traits .notable-traits-tooltiptext {
display: none;
padding: 5px 3px 3px 3px;
border-radius: 6px;
margin-left: 5px;
z-index: 10;
font-size: 1rem;
cursor: default;
position: absolute;
border: 1px solid;
}
.notable-traits-tooltip::after {
/* The margin on the tooltip does not capture hover events,
this extends the area of hover enough so that mouse hover is not
lost when moving the mouse to the tooltip */
2020-07-15 17:20:46 +02:00
content: "\00a0\00a0\00a0";
}
.notable-traits .notable, .notable-traits .docblock {
margin: 0;
}
2021-06-02 21:16:33 +02:00
.notable-traits .notable {
margin: 0;
margin-bottom: 13px;
font-size: 1.1875rem;
2021-06-02 21:16:33 +02:00
font-weight: 600;
display: block;
2021-06-02 21:16:33 +02:00
}
2022-09-09 16:18:14 +02:00
.notable-traits .docblock code.content {
2020-07-15 17:20:46 +02:00
margin: 0;
padding: 0;
font-size: 1.25rem;
}
.search-failed {
text-align: center;
margin-top: 20px;
2021-05-09 12:56:21 -07:00
display: none;
}
.search-failed.active {
display: block;
}
.search-failed > ul {
text-align: left;
max-width: 570px;
margin-left: auto;
margin-right: auto;
}
#titles {
display: flex;
flex-direction: row;
gap: 1px;
margin-bottom: 4px;
}
#titles > button {
text-align: center;
font-size: 1.125rem;
cursor: pointer;
border: 0;
2018-10-16 19:07:41 +02:00
border-top: 2px solid;
flex: 1;
line-height: 1.5;
color: inherit;
}
2017-11-02 01:01:51 +01:00
#titles > button > div.count {
2017-11-02 01:01:51 +01:00
display: inline-block;
font-size: 1rem;
2017-11-02 01:01:51 +01:00
}
2017-11-15 20:04:02 +01:00
.notable-traits {
cursor: pointer;
z-index: 2;
2020-07-06 14:13:47 -07:00
margin-left: 5px;
}
#sidebar-toggle {
2021-10-24 21:59:53 +02:00
position: sticky;
top: 0;
left: 0;
font-size: 1.25rem;
2021-10-24 21:59:53 +02:00
border-bottom: 1px solid;
display: flex;
height: 40px;
justify-content: center;
align-items: center;
z-index: 10;
}
#source-sidebar {
2021-12-14 11:48:30 +01:00
width: 100%;
overflow: auto;
}
#source-sidebar > .title {
font-size: 1.5rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
margin-bottom: 6px;
}
#sidebar-toggle > button {
font-size: inherit;
font-weight: bold;
background: none;
color: inherit;
cursor: pointer;
text-align: center;
border: none;
outline: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* work around button layout strangeness: https://stackoverflow.com/q/7271561 */
width: 100%;
/* iOS button gradient: https://stackoverflow.com/q/5438567 */
-webkit-appearance: none;
opacity: 1;
}
#settings-menu, #help-button {
2022-01-20 14:18:59 +01:00
margin-left: 4px;
2019-04-29 23:43:39 +02:00
outline: none;
}
#settings-menu > a, #help-button > a, #copy-path {
2022-01-20 14:18:59 +01:00
width: 33px;
cursor: pointer;
line-height: 1.5;
}
#settings-menu > a, #help-button > a {
2022-05-10 16:09:41 +02:00
padding: 5px;
height: 100%;
display: block;
background-color: var(--button-background-color);
border: 1px solid var(--border-color);
border-radius: 2px;
2022-05-10 16:09:41 +02:00
}
2022-09-02 15:08:23 +02:00
#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;
2022-09-02 15:08:23 +02:00
}
#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);
}
}
2022-05-11 23:11:18 +02:00
#settings-menu.rotate > a img {
animation: rotating 2s linear infinite;
}
#help-button > a {
2020-08-10 16:42:11 +02:00
text-align: center;
/* Rare exception to specifying font sizes in rem. Since this is acting
as an icon, it's okay to specify their sizes in pixels. */
2022-01-20 14:18:59 +01:00
font-size: 20px;
padding-top: 2px;
2020-08-10 16:42:11 +02:00
}
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;
cursor: default;
}
ul.all-items > li {
list-style: none;
}
details.dir-entry {
padding-left: 4px;
}
details.dir-entry > summary::after {
content: " ►";
position: absolute;
left: -15px;
top: 0px;
font-size: 80%;
padding: 2px 0px;
/* set width to cover gap between arrow and text */
width: 25px;
}
details[open].dir-entry > summary::after {
content: " ▼";
}
details.dir-entry > summary::-webkit-details-marker,
details.dir-entry > summary::marker {
display: none;
}
details.dir-entry > summary {
margin: 0 0 0 13px;
list-style: none;
cursor: pointer;
position: relative;
}
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.rustdoc-toggle {
contain: layout;
2022-10-21 10:31:33 -07:00
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.rustdoc-toggle > summary.hideme {
cursor: pointer;
}
details.rustdoc-toggle > summary {
list-style: none;
}
details.rustdoc-toggle > summary::-webkit-details-marker,
details.rustdoc-toggle > summary::marker {
display: none;
}
details.rustdoc-toggle > summary.hideme > span {
margin-left: 9px;
}
details.rustdoc-toggle > summary::before {
content: "";
cursor: pointer;
width: 16px;
height: 16px;
2021-07-31 16:23:51 +02:00
background-repeat: no-repeat;
background-position: top left;
display: inline-block;
vertical-align: middle;
opacity: .5;
}
2022-09-02 15:08:23 +02:00
details.rustdoc-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.rustdoc-toggle > summary::after {
content: "Expand";
overflow: hidden;
width: 0;
height: 0;
position: absolute;
}
details.rustdoc-toggle > summary.hideme::after {
/* "hideme" toggles already have a description when they're contracted */
content: "";
}
details.rustdoc-toggle > summary:focus::before,
details.rustdoc-toggle > summary:hover::before {
opacity: 1;
}
details.rustdoc-toggle.top-doc > summary,
details.rustdoc-toggle.top-doc > summary::before,
details.rustdoc-toggle.non-exhaustive > summary,
details.rustdoc-toggle.non-exhaustive > summary::before {
font-size: 1rem;
}
details.non-exhaustive {
margin-bottom: 8px;
}
details.rustdoc-toggle > summary.hideme::before {
position: relative;
}
details.rustdoc-toggle > summary:not(.hideme)::before {
position: absolute;
left: -24px;
top: 4px;
}
.impl-items > details.rustdoc-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.rustdoc-toggle[open] > summary.hideme {
position: absolute;
}
details.rustdoc-toggle[open] > summary.hideme > span {
display: none;
}
details.rustdoc-toggle[open] > summary::before,
details.rustdoc-toggle[open] > summary.hideme::before {
background-image: /* AUTOREPLACE: */url("toggle-minus.svg");
}
2022-07-14 14:59:25 +02:00
details.rustdoc-toggle > summary::before {
background-image: /* AUTOREPLACE: */url("toggle-plus.svg");
}
details.rustdoc-toggle[open] > summary::before,
details.rustdoc-toggle[open] > summary.hideme::before {
width: 16px;
height: 16px;
2021-07-31 16:23:51 +02:00
background-repeat: no-repeat;
background-position: top left;
display: inline-block;
content: "";
}
details.rustdoc-toggle[open] > summary::after,
details.rustdoc-toggle[open] > summary.hideme::after {
content: "Collapse";
}
/* This is needed in docblocks to have the "▶" element to be on the same line. */
.docblock summary > * {
display: inline-block;
}
/* In case there is no documentation before a code block, we need to add some margin at the top
to prevent an overlay between the "collapse toggle" and the information tooltip.
However, it's not needed with smaller screen width because the doc/code block is always put
"one line" below. */
.docblock > .example-wrap:first-child .tooltip {
margin-top: 16px;
}
/* Media Queries */
/*
WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
If you update this line, then you also need to update the line with the same warning
in storage.js
*/
@media (max-width: 700px) {
/* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size.
*/
*[id] {
scroll-margin-top: 45px;
}
.rustdoc {
padding-top: 0px;
/* 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 ";
}
#copy-path {
display: none;
}
/* Hide the logo and item name from the sidebar. Those are displayed
in the mobile-topbar instead. */
.sidebar .sidebar-logo,
.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;
margin-left: 0;
margin: 0;
padding: 0;
z-index: 11;
/* Reduce height slightly to account for mobile topbar. */
height: calc(100vh - 45px);
}
/* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
so don't bump down the main content or the sidebar. */
.source main,
.rustdoc.source .sidebar {
top: 0;
padding: 0;
height: 100vh;
border: 0;
}
.sidebar.shown,
.source-sidebar-expanded .source .sidebar,
.sidebar:focus-within {
left: 0;
}
.rustdoc.source > .sidebar {
width: 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 {
max-height: 45px;
}
.mobile-topbar .logo-container > img {
2019-04-29 11:45:06 +02:00
max-width: 35px;
max-height: 35px;
margin-left: 20px;
margin-top: 5px;
margin-bottom: 5px;
2019-04-29 11:45:06 +02:00
}
.mobile-topbar {
display: flex;
flex-direction: row;
position: sticky;
z-index: 10;
font-size: 2rem;
height: 45px;
width: 100%;
left: 0;
2021-11-29 15:55:05 +01:00
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 {
2022-08-27 00:37:04 +02:00
margin-top: 1em;
background-color: var(--sidebar-background-color);
}
.content {
margin-left: 0px;
}
.anchor {
display: none !important;
}
2018-10-06 18:51:56 +02:00
#titles > button > div.count {
display: block;
2017-12-18 21:27:19 +01:00
}
2017-12-20 00:44:44 +01:00
/* Because of ios, we need to actually have a full height sidebar title so the
* actual sidebar can show up. But then we need to make it transparent so we don't
* hide content. The filler just allows to create the background for the sidebar
* title. But because of the absolute position, I had to lower the z-index.
*/
#sidebar-filler {
position: fixed;
left: 45px;
width: calc(100% - 45px);
top: 0;
height: 45px;
z-index: -1;
border-bottom: 1px solid;
}
2021-11-29 17:14:05 +01:00
#main-content > details.rustdoc-toggle > summary::before,
#main-content > div > details.rustdoc-toggle > summary::before {
left: -11px;
}
#sidebar-toggle {
2021-10-24 21:59:53 +02:00
position: fixed;
left: 1px;
top: 100px;
width: 30px;
font-size: 1.5rem;
text-align: center;
padding: 0;
2021-10-24 21:59:53 +02:00
z-index: 10;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
cursor: pointer;
border: 1px solid;
border-left: 0;
}
.source-sidebar-expanded #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;
}
.notable-traits .notable-traits-tooltiptext {
left: 0;
top: 100%;
}
2020-10-15 17:28:42 +02:00
/* We don't display the help button on mobile devices. */
#help-button {
2020-10-15 17:28:42 +02:00
display: none;
}
/* Display an alternating layout on tablets and phones */
.item-table {
display: block;
}
.item-row {
display: flex;
flex-flow: column wrap;
}
.item-left, .item-right {
width: 100%;
}
2021-05-21 23:11:06 +02:00
/* Display an alternating layout on tablets and phones */
.search-results > a {
border-bottom: 1px solid #aaa9;
padding: 5px 0px;
2021-05-21 23:11:06 +02:00
}
.search-results .result-name, .search-results div.desc, .search-results .result-description {
2021-05-21 23:11:06 +02:00
width: 100%;
}
.search-results div.desc, .search-results .result-description, .item-right {
2021-05-21 23:11:06 +02:00
padding-left: 2em;
}
2021-12-14 11:48:30 +01:00
.source-sidebar-expanded .source .sidebar {
2021-12-14 11:48:30 +01:00
max-width: 100vw;
width: 100vw;
}
2021-12-29 18:54:33 +01:00
/* Position of the "[-]" element. */
details.rustdoc-toggle:not(.top-doc) > summary {
margin-left: 10px;
}
.impl-items > details.rustdoc-toggle > summary:not(.hideme)::before,
#main-content > details.rustdoc-toggle:not(.top-doc) > summary::before,
#main-content > div > details.rustdoc-toggle > summary::before {
left: -11px;
}
/* Align summary-nested and unnested item-info gizmos. */
.impl-items > .item-info {
margin-left: 34px;
}
.source nav.sub {
margin: 0;
padding: 8px;
}
2017-12-18 21:27:19 +01:00
}
2019-04-29 23:43:39 +02:00
@media print {
nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path,
2022-07-08 01:54:55 -04:00
details.rustdoc-toggle[open] > summary::before, details.rustdoc-toggle > summary::before,
details.rustdoc-toggle.top-doc > summary {
2019-04-29 23:43:39 +02:00
display: none;
}
2022-07-08 01:54:55 -04:00
.docblock {
margin-left: 0;
}
main {
padding: 10px;
2022-07-08 01:54:55 -04:00
}
2019-04-29 23:43:39 +02:00
}
2017-12-18 21:27:19 +01:00
2021-01-31 13:42:16 +01:00
@media (max-width: 464px) {
.docblock {
margin-left: 12px;
}
.docblock code {
overflow-wrap: break-word;
overflow-wrap: anywhere;
}
2021-10-24 22:41:48 +02:00
nav.sub {
2021-10-24 22:41:48 +02:00
flex-direction: column;
}
nav.sub form {
align-self: stretch;
2021-10-24 22:41:48 +02:00
}
.sub-logo-container > img {
2021-10-24 22:41:48 +02:00
height: 35px;
width: 35px;
}
2021-11-29 15:55:05 +01:00
#sidebar-toggle {
2021-11-29 15:55:05 +01:00
top: 10px;
}
.source-sidebar-expanded #sidebar-toggle {
top: unset;
}
}
.method-toggle summary,
.implementors-toggle summary,
.impl,
#implementors-list > .docblock,
.impl-items > section,
.methods > section
{
margin-bottom: 0.75em;
}
2022-10-21 10:31:33 -07:00
.method-toggle[open]:not(:last-child),
.implementors-toggle[open]:not(:last-child) {
margin-bottom: 2em;
}
#trait-implementations-list .method-toggle:not(:last-child),
#synthetic-implementations-list .method-toggle:not(:last-child),
#blanket-implementations-list .method-toggle:not(:last-child) {
margin-bottom: 1em;
}
/* Begin: styles for --scrape-examples feature */
2022-02-14 19:49:39 -08:00
.scraped-example-list .scrape-help {
margin-left: 10px;
padding: 0 4px;
font-weight: normal;
font-size: 12px;
position: relative;
bottom: 1px;
background: transparent;
border-width: 1px;
border-style: solid;
border-radius: 50px;
}
.scraped-example .code-wrapper {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.scraped-example:not(.expanded) .code-wrapper {
max-height: 240px;
}
.scraped-example:not(.expanded) .code-wrapper pre {
overflow-y: hidden;
max-height: 240px;
padding-bottom: 0;
}
.scraped-example:not(.expanded) .code-wrapper pre.src-line-numbers {
overflow-x: hidden;
}
.scraped-example .code-wrapper .prev {
position: absolute;
top: 0.25em;
right: 2.25em;
z-index: 100;
cursor: pointer;
}
.scraped-example .code-wrapper .next {
position: absolute;
top: 0.25em;
right: 1.25em;
z-index: 100;
cursor: pointer;
}
.scraped-example .code-wrapper .expand {
position: absolute;
top: 0.25em;
right: 0.25em;
z-index: 100;
cursor: pointer;
}
.scraped-example:not(.expanded) .code-wrapper:before {
content: " ";
width: 100%;
height: 5px;
position: absolute;
z-index: 100;
top: 0;
}
.scraped-example:not(.expanded) .code-wrapper:after {
content: " ";
width: 100%;
height: 5px;
position: absolute;
z-index: 100;
bottom: 0;
}
.scraped-example .code-wrapper .src-line-numbers {
margin: 0;
padding: 14px 0;
}
.scraped-example .code-wrapper .src-line-numbers span {
padding: 0 14px;
}
.scraped-example .code-wrapper .example-wrap {
flex: 1;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 0;
}
.scraped-example:not(.expanded) .code-wrapper .example-wrap {
overflow-x: hidden;
}
.scraped-example .code-wrapper .example-wrap pre.rust {
overflow-x: inherit;
width: inherit;
overflow-y: hidden;
}
.more-examples-toggle {
max-width: calc(100% + 25px);
margin-top: 10px;
margin-left: -25px;
}
.more-examples-toggle .hide-more {
margin-left: 25px;
margin-bottom: 5px;
cursor: pointer;
}
.more-scraped-examples {
margin-left: 5px;
display: flex;
flex-direction: row;
}
.more-scraped-examples-inner {
/* 20px is width of toggle-line + toggle-line-inner */
width: calc(100% - 20px);
}
.toggle-line {
align-self: stretch;
margin-right: 10px;
margin-top: 5px;
padding: 0 4px;
cursor: pointer;
}
.toggle-line-inner {
min-width: 2px;
height: 100%;
}
.more-scraped-examples .scraped-example {
margin-bottom: 20px;
}
.more-scraped-examples .scraped-example:last-child {
margin-bottom: 0;
}
.example-links a {
margin-top: 20px;
}
.example-links ul {
margin-bottom: 0;
}
/* End: styles for --scrape-examples feature */