diff options
Diffstat (limited to '')
| -rw-r--r-- | src/librustdoc/html/static/css/noscript.css | 6 | ||||
| -rw-r--r-- | src/librustdoc/html/static/css/rustdoc.css | 1226 | ||||
| -rw-r--r-- | src/librustdoc/html/static/css/settings.css | 22 | ||||
| -rw-r--r-- | src/librustdoc/html/static/css/themes/ayu.css | 386 | ||||
| -rw-r--r-- | src/librustdoc/html/static/css/themes/dark.css | 318 | ||||
| -rw-r--r-- | src/librustdoc/html/static/css/themes/light.css | 313 |
6 files changed, 715 insertions, 1556 deletions
diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 0a19a99ab..301f03a16 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -14,7 +14,11 @@ rules. display: none; } -.sub { +nav.sub { /* The search bar and related controls don't work without JS */ display: none; } + +.source .sidebar { + display: none; +} diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 83fe14550..1cc954a98 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -132,19 +132,29 @@ h1, h2, h3, h4, h5, h6 { font-weight: 500; } h1, h2, h3, h4 { - margin: 20px 0 15px 0; + 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; +} h1.fqn { margin: 0; padding: 0; - border-bottom-color: var(--headings-border-bottom-color); -} -h2, h3, h4 { - border-bottom-color: var(--headings-border-bottom-color); + 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; @@ -153,9 +163,6 @@ h2, h3, h4 { padding-bottom: 6px; margin-bottom: 15px; } -.main-heading a:hover { - text-decoration: underline; -} #toggle-all-docs { text-decoration: none; } @@ -164,7 +171,7 @@ h2, h3, h4 { 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. */ -h2, +.content h2, .top-doc .docblock > h3, .top-doc .docblock > h4 { border-bottom: 1px solid var(--headings-border-bottom-color); @@ -177,60 +184,31 @@ h4.code-header { } .code-header { font-weight: 600; - border-bottom-style: none; margin: 0; padding: 0; - margin-top: 0.6em; - margin-bottom: 0.4em; -} -.impl, -.impl-items .method, -.methods .method, -.impl-items .type, -.methods .type, -.impl-items .associatedconstant, -.methods .associatedconstant, -.impl-items .associatedtype, -.methods .associatedtype { - flex-basis: 100%; - font-weight: 600; - position: relative; -} - -div.impl-items > div { - padding-left: 0; } +#crate-search, h1, h2, h3, h4, h5, h6, .sidebar, .mobile-topbar, -a.source, .search-input, .search-results .result-name, -.content table td:first-child > a, .item-left > a, .out-of-band, span.since, -#source-sidebar, #sidebar-toggle, -details.rustdoc-toggle > summary::before, -div.impl-items > div:not(.docblock):not(.item-info), -.content ul.crate a.crate, a.srclink, -#main-content > .since, -#help-button > button, +#help-button > a, 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, .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. */ -#main-content > ul.docblock > li > a { +ul.all-items { font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif; } -h1, h2, h3, h4, a#toggle-all-docs, a.anchor, .small-section-header a, @@ -239,17 +217,62 @@ pre.rust a, .sidebar h2 a, .sidebar h3 a, .mobile-topbar h2 a, -.in-band a, +h1 a, .search-results a, .module-item .stab, .import-item .stab, .result-name .primitive > i, .result-name .keyword > i, -.content .method .where, -.content .fn .where, -.content .where.fmt-newline { +.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; } @@ -263,32 +286,14 @@ p { https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */ margin: 0 0 .75em 0; } - -summary { - outline: none; +/* For the last child of a div, the margin will be taken care of + by the margin-top of the next item. */ +p:last-child { + margin: 0; } /* Fix some style changes due to normalize.css 8 */ -td, -th { - padding: 0; -} - -table { - border-collapse: collapse; -} - -button, -input, -optgroup, -select, -textarea { - color: inherit; - font: inherit; - margin: 0; -} - button { /* Buttons on Safari have different default padding than other platforms. Make them the same. */ padding: 1px 6px; @@ -339,9 +344,6 @@ code, pre, a.test-arrow, .code-header { pre { padding: 14px; } -.docblock.item-decl { - margin-left: 0; -} .item-decl pre { overflow-x: auto; } @@ -354,37 +356,15 @@ img { max-width: 100%; } -li { - position: relative; -} - .source .content { - max-width: none; overflow: visible; - margin-left: 0px; -} - -nav.sub { - position: relative; - font-size: 1rem; -} - -.sub-container { - display: flex; - flex-direction: row; - flex-wrap: nowrap; } .sub-logo-container { - display: none; - margin-right: 20px; + line-height: 0; } -.source .sub-logo-container { - display: block; -} - -.source .sub-logo-container > img { +.sub-logo-container > img { height: 60px; width: 60px; object-fit: contain; @@ -396,7 +376,7 @@ nav.sub { .sidebar { font-size: 0.875rem; - width: 250px; + width: 200px; min-width: 200px; overflow-y: scroll; position: sticky; @@ -405,15 +385,6 @@ nav.sub { left: 0; } -.sidebar-elems, -.sidebar > .location { - padding-left: 24px; -} - -.sidebar .location { - overflow-wrap: anywhere; -} - .rustdoc.source .sidebar { width: 50px; min-width: 0px; @@ -427,10 +398,6 @@ nav.sub { overflow-y: hidden; } -.rustdoc.source .sidebar .sidebar-logo { - display: none; -} - .source .sidebar, #sidebar-toggle, #source-sidebar { background-color: var(--sidebar-background-color); } @@ -440,16 +407,15 @@ nav.sub { } .source .sidebar > *:not(#sidebar-toggle) { - opacity: 0; visibility: hidden; } .source-sidebar-expanded .source .sidebar { overflow-y: auto; + width: 300px; } .source-sidebar-expanded .source .sidebar > *:not(#sidebar-toggle) { - opacity: 1; visibility: visible; } @@ -507,25 +473,15 @@ nav.sub { width: 100px; } -.location:empty { - border: none; -} - -.location a:first-of-type { - font-weight: 500; -} - -.block { - padding: 0; -} -.block ul, .block li { +ul.block, .block li { padding: 0; margin: 0; list-style: none; } .block a, -h2.location a { +.sidebar h2 a, +.sidebar h3 a { display: block; padding: 0.25rem; margin-left: -0.25rem; @@ -535,8 +491,7 @@ h2.location a { } .sidebar h2 { - border-bottom: none; - font-weight: 500; + overflow-wrap: anywhere; padding: 0; margin: 0; margin-top: 0.7rem; @@ -545,11 +500,23 @@ h2.location a { .sidebar h3 { font-size: 1.125rem; /* 18px */ - font-weight: 500; 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; } @@ -563,91 +530,70 @@ h2.location a { } .source .content pre.rust { - white-space: pre; overflow: auto; padding-left: 0; } .rustdoc .example-wrap { - display: inline-flex; + 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; +} -.example-wrap { - position: relative; - width: 100%; +.rustdoc .example-wrap > pre { + margin: 0; + flex-grow: 1; + overflow-x: auto; } -.example-wrap > pre.line-number { +.rustdoc .example-wrap > pre.example-line-numbers, +.rustdoc .example-wrap > pre.src-line-numbers { + flex-grow: 0; overflow: initial; + text-align: right; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.example-line-numbers { border: 1px solid; padding: 13px 8px; - text-align: right; border-top-left-radius: 5px; border-bottom-left-radius: 5px; + border-color: var(--example-line-numbers-border-color); } -.example-wrap > pre.rust a:hover { - text-decoration: underline; -} - -.line-numbers { - text-align: right; -} -.rustdoc:not(.source) .example-wrap > pre:not(.line-number) { - width: 100%; - overflow-x: auto; +.src-line-numbers span { + cursor: pointer; + color: var(--src-line-numbers-span-color); } - -.rustdoc:not(.source) .example-wrap > pre.line-numbers { - width: auto; - overflow-x: visible; +.src-line-numbers .line-highlighted { + background-color: var(--src-line-number-highlighted-background-color); } - -.rustdoc .example-wrap > pre { - margin: 0; -} - -#search { - position: relative; +.src-line-numbers :target { + background-color: transparent; } .search-loading { text-align: center; } -#results > table { - width: 100%; - table-layout: fixed; -} - -.content > .example-wrap pre.line-numbers { - position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.line-numbers span { - cursor: pointer; -} - .docblock-short { overflow-wrap: break-word; overflow-wrap: anywhere; -} -.docblock-short p { - display: inline; -} - -.docblock-short p { overflow: hidden; text-overflow: ellipsis; - margin: 0; } /* Wrap non-pre code blocks (`text`) but not (```text```). */ .docblock > :not(pre) > code, -.docblock-short > :not(pre) > code { +.docblock-short > code { white-space: pre-wrap; } @@ -663,42 +609,20 @@ h2.location a { .docblock h5 { font-size: 1rem; } .docblock h6 { font-size: 0.875rem; } -.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 { - border-bottom-color: var(--headings-border-bottom-color); -} .docblock { margin-left: 24px; position: relative; } -.docblock > :not(.information):not(.more-examples-toggle) { +.docblock > :not(.more-examples-toggle):not(.example-wrap) { max-width: 100%; overflow-x: auto; } -.content .out-of-band { +.out-of-band { flex-grow: 0; font-size: 1.125rem; - font-weight: normal; - float: right; -} - -.method > .code-header, .trait-impl > .code-header { - max-width: calc(100% - 41px); - display: block; -} - -.content .in-band { - flex-grow: 1; - margin: 0px; - padding: 0px; - overflow-wrap: break-word; - overflow-wrap: anywhere; -} - -.in-band > code, .in-band > .code-header { - display: inline-block; } .docblock code, .docblock-short code, @@ -709,118 +633,42 @@ pre, .rustdoc.source .example-wrap { #main-content { position: relative; } -#main-content > .since { - top: inherit; -} - -.content table:not(.table-display) { - border-spacing: 0 5px; -} -.content td { vertical-align: top; } -.content td:first-child { padding-right: 20px; } -.content td p:first-child { margin-top: 0; } -.content td h1, .content td h2 { margin-left: 0; font-size: 1.125rem; } -.content tr:first-child td { border-top: 0; } .docblock table { margin: .5em 0; width: calc(100% - 2px); overflow-x: auto; display: block; + border-collapse: collapse; } .docblock table td { padding: .5em; - border: 1px dashed; + border: 1px dashed var(--border-color); + vertical-align: top; } .docblock table th { padding: .5em; text-align: left; - border: 1px solid; -} - -.fields + table { - margin-bottom: 1em; -} - -.content .item-list { - list-style-type: none; - padding: 0; + border: 1px solid var(--border-color); } -.content .multi-column { - -moz-column-count: 5; - -moz-column-gap: 2.5em; - -webkit-column-count: 5; - -webkit-column-gap: 2.5em; - column-count: 5; - column-gap: 2.5em; -} -.content .multi-column li { width: 100%; display: inline-block; } - -.content > .methods > .method { - font-size: 1rem; - position: relative; -} /* Shift "where ..." part of method or fn definition down a line */ -.content .method .where, -.content .fn .where, -.content .where.fmt-newline { +.method .where, +.fn .where, +.where.fmt-newline { display: block; font-size: 0.875rem; } -.content .methods > div:not(.notable-traits):not(.method) { - margin-left: 40px; - margin-bottom: 15px; -} - -.content .docblock > .impl-items { - margin-left: 20px; - margin-top: -34px; -} -.content .docblock >.impl-items .table-display { - margin: 0; -} -.content .docblock >.impl-items table td { - padding: 0; -} -.content .docblock > .impl-items .table-display, .impl-items table td { - border: none; -} - .item-info { display: block; -} - -.content .item-info code { - font-size: 0.875rem; -} - -.content .item-info { - position: relative; margin-left: 24px; } -.sub-variant > div > .item-info { - margin-top: initial; -} - -.content .impl-items .docblock, .content .impl-items .item-info { - margin-bottom: .6em; -} - -.content .impl-items > .item-info { - margin-left: 40px; -} - -.methods > .item-info, .content .impl-items > .item-info { - margin-top: -8px; -} - -.impl-items { - flex-basis: 100%; +.item-info code { + font-size: 0.875rem; } #main-content > .item-info { @@ -830,31 +678,26 @@ pre, .rustdoc.source .example-wrap { nav.sub { flex-grow: 1; - margin-bottom: 25px; -} -.source nav.sub { - margin-left: 32px; + flex-flow: row nowrap; + margin: 4px 0 25px 0; + display: flex; + align-items: center; } -nav.main { - padding: 20px 0; - text-align: center; +.search-form { + position: relative; + display: flex; + height: 34px; + flex-grow: 1; } -nav.main .current { - border-top: 1px solid; - border-bottom: 1px solid; +.source nav.sub { + margin: 0 0 15px 0; } -nav.main .separator { - border: 1px solid; - display: inline-block; - height: 23px; - margin: 0 20px; +.source .search-form { + margin-left: 32px; } -nav.sum { text-align: right; } -nav.sub form { display: inline; } a { text-decoration: none; - background: transparent; } .small-section-header { @@ -867,9 +710,7 @@ a { display: initial; } -.in-band:hover > .anchor, .impl:hover > .anchor, .method.trait-impl:hover > .anchor, -.type.trait-impl:hover > .anchor, .associatedconstant.trait-impl:hover > .anchor, -.associatedtype.trait-impl:hover > .anchor { +.impl:hover > .anchor, .trait-impl:hover > .anchor { display: inline-block; position: absolute; } @@ -893,12 +734,16 @@ h2.small-section-header > .anchor { content: 'ยง'; } -.docblock a:not(.srclink):not(.test-arrow):not(.scrape-help):hover, -.docblock-short a:not(.srclink):not(.test-arrow):not(.scrape-help):hover, .item-info a { +.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; } -.block a.current.crate { font-weight: 500; } +.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 @@ -938,61 +783,92 @@ table, padding-right: 1.25rem; } -.search-container { - position: relative; - display: flex; - height: 34px; -} -.search-container > * { - height: 100%; -} .search-results-title { - display: inline; + 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; } -#search-settings { - font-size: 1.5rem; - font-weight: 500; - margin-bottom: 20px; +#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; } #crate-search { min-width: 115px; - margin-top: 5px; - padding-left: 0.15em; + padding: 0; + /* keep these two in sync with "@-moz-document url-prefix()" below */ + padding-left: 4px; padding-right: 23px; - border: 1px solid; + /* 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; +} +/* cancel stylistic differences in padding in firefox +for "appearance: none"-style (or equivalent) <select>s */ +@-moz-document url-prefix() { + #crate-search { + padding-left: 0px; /* == 4px - 4px */ + padding-right: 19px; /* == 23px - 4px */ + } +} +/* pseudo-element for holding the dropdown-arrow image; needs to be a separate thing +so that we can apply CSS-filters to change the arrow color in themes */ +#crate-search-div::after { + /* lets clicks through! */ + pointer-events: none; + /* completely covers the underlying div */ + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + content: ""; background-repeat: no-repeat; - background-color: transparent; background-size: 20px; - background-position: calc(100% - 1px) 56%; + 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"); - max-width: 100%; - text-overflow: ellipsis; } -.search-container { - margin-top: 4px; +#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; - /* 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; + border: 1px solid var(--border-color); border-radius: 2px; padding: 8px; font-size: 1rem; - width: 100%; + 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 { @@ -1015,7 +891,6 @@ table, .search-results > a { display: block; - width: 100%; /* A little margin ensures the browser's outlining of focused links has room to display. */ margin-left: 2px; margin-right: 2px; @@ -1027,17 +902,16 @@ table, flex-flow: row wrap; } -.search-results .result-name, .search-results div.desc, .search-results .result-description { +.search-results .result-name, .search-results div.desc { width: 50%; } .search-results .result-name { padding-right: 1em; } -.search-results .result-name > span { - display: inline-block; - margin: 0; - font-weight: normal; +.search-results a:hover, +.search-results a:focus { + background-color: var(--search-result-link-focus-background-color); } .popover { @@ -1048,7 +922,7 @@ table, display: block; margin-top: 7px; border-radius: 3px; - border: 1px solid; + border: 1px solid var(--border-color); font-size: 1rem; } @@ -1057,7 +931,7 @@ table, content: ''; position: absolute; right: 11px; - border: solid; + border: solid var(--border-color); border-width: 1px 1px 0 0; display: inline-block; padding: 4px; @@ -1070,39 +944,35 @@ table, color: var(--main-color); } -#help-button .popover { +/* use larger max-width for help popover, but not for help.html */ +#help.popover { max-width: 600px; } -#help-button .popover::before { +#help.popover::before { right: 48px; } -#help-button dt { +#help dt { float: left; clear: left; display: block; margin-right: 0.5rem; } -#help-button span.top, #help-button span.bottom { +#help span.top, #help span.bottom { text-align: center; display: block; font-size: 1.125rem; } -#help-button span.top { - text-align: center; - display: block; +#help span.top { margin: 10px 0; - border-bottom: 1px solid; + border-bottom: 1px solid var(--border-color); padding-bottom: 4px; margin-bottom: 6px; } -#help-button span.bottom { +#help span.bottom { clear: both; - border-top: 1px solid; -} -.side-by-side { - text-align: initial; + border-top: 1px solid var(--border-color); } .side-by-side > div { width: 50%; @@ -1125,14 +995,24 @@ table, margin-bottom: 5px; font-size: 0.875rem; font-weight: normal; + color: var(--main-color); + background-color: var(--stab-background-color); } -.stab p { - display: inline; - margin: 0; + +.stab.portability > code { + background: none; + color: var(--stab-code-color); } .stab .emoji { font-size: 1.25rem; + 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 */ @@ -1169,37 +1049,157 @@ table, .rightside { padding-left: 12px; padding-right: 2px; - position: initial; + float: right; } -.impl-items .srclink, .impl .srclink, .methods .srclink { - /* Override header settings otherwise it's too bold */ - font-weight: normal; - font-size: 1rem; +.rightside:not(a), +.out-of-band { + color: var(--right-side-color); } -.rightside { - float: right; +pre.rust { + tab-size: 4; + -moz-tab-size: 4; } -.variants_table { - width: 100%; +/* 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); } -.variants_table tbody tr td:first-child { - width: 1%; /* make the variant name as small as possible */ +.example-wrap.compile_fail, +.example-wrap.should_panic { + border-left: 2px solid var(--codeblock-error-color); } -td.summary-column { - width: 100%; +.ignore.example-wrap { + border-left: 2px solid var(--codeblock-ignore-color); } -.summary { - padding-right: 0px; +.example-wrap.compile_fail:hover, +.example-wrap.should_panic:hover { + border-left: 2px solid var(--codeblock-error-hover-color); } -pre.rust .question-mark { +.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; + 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 { @@ -1216,12 +1216,10 @@ a.test-arrow { .example-wrap:hover .test-arrow { visibility: visible; } -a.test-arrow:hover{ - text-decoration: none; -} .code-attribute { font-weight: 300; + color: var(--code-attribute-color); } .item-spacer { @@ -1230,7 +1228,6 @@ a.test-arrow:hover{ } .out-of-band > span.since { - position: initial; font-size: 1.25rem; } @@ -1238,13 +1235,11 @@ h3.variant { font-weight: 600; font-size: 1.125rem; margin-bottom: 10px; - border-bottom: none; } .sub-variant h4 { font-size: 1rem; font-weight: 400; - border-bottom: none; margin-top: 0; margin-bottom: 0; } @@ -1258,12 +1253,6 @@ h3.variant { margin-left: 24px; } -.toggle-label { - display: inline-block; - margin-left: 4px; - margin-top: 3px; -} - :target > code, :target > .code-header { opacity: 1; } @@ -1272,61 +1261,6 @@ h3.variant { padding-right: 3px; } -.information { - position: absolute; - left: -25px; - margin-top: 7px; - z-index: 1; -} - -.tooltip { - position: relative; - display: inline-block; - cursor: pointer; -} - -.tooltip::after { - display: none; - text-align: center; - padding: 5px 3px 3px 3px; - border-radius: 6px; - margin-left: 5px; - font-size: 1rem; -} - -.tooltip.ignore::after { - content: "This example is not tested"; -} -.tooltip.compile_fail::after { - content: "This example deliberately fails to compile"; -} -.tooltip.should_panic::after { - content: "This example panics"; -} -.tooltip.edition::after { - content: "This code runs with edition " attr(data-edition); -} - -.tooltip::before { - content: " "; - position: absolute; - top: 50%; - left: 16px; - margin-top: -5px; - border-width: 5px; - border-style: solid; - display: none; -} - -.tooltip:hover::before, .tooltip:hover::after { - display: inline; -} - -.tooltip.compile_fail, .tooltip.should_panic, .tooltip.ignore { - font-weight: bold; - font-size: 1.25rem; -} - .notable-traits-tooltip { display: inline-block; cursor: pointer; @@ -1356,7 +1290,7 @@ h3.variant { content: "\00a0\00a0\00a0"; } -.notable-traits .notable, .notable-traits .docblock { +.notable-traits .docblock { margin: 0; } @@ -1368,22 +1302,12 @@ h3.variant { display: block; } -.notable-traits .docblock code.content{ +.notable-traits .docblock code.content { margin: 0; padding: 0; font-size: 1.25rem; } -/* Example code has the "Run" button that needs to be positioned relative to the pre */ -pre.rust.rust-example-rendered { - position: relative; -} - -pre.rust { - tab-size: 4; - -moz-tab-size: 4; -} - .search-failed { text-align: center; margin-top: 20px; @@ -1402,27 +1326,21 @@ pre.rust { } #titles { - height: 35px; + display: flex; + flex-direction: row; + gap: 1px; + margin-bottom: 4px; } #titles > button { - float: left; - width: 33.3%; text-align: center; font-size: 1.125rem; cursor: pointer; border: 0; border-top: 2px solid; -} - -#titles > button:first-child:last-child { - margin-right: 1px; - width: calc(100% - 1px); -} - -#titles > button:not(:last-child) { - margin-right: 1px; - width: calc(33.3% - 1px); + flex: 1; + line-height: 1.5; + color: inherit; } #titles > button > div.count { @@ -1440,7 +1358,6 @@ pre.rust { position: sticky; top: 0; left: 0; - font-weight: bold; font-size: 1.25rem; border-bottom: 1px solid; display: flex; @@ -1451,16 +1368,17 @@ pre.rust { } #source-sidebar { width: 100%; - z-index: 1; overflow: auto; } #source-sidebar > .title { font-size: 1.5rem; text-align: center; - border-bottom: 1px solid; + 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; @@ -1483,23 +1401,35 @@ pre.rust { outline: none; } -#copy-path { - height: 34px; -} -#settings-menu > a, #help-button > button, #copy-path { - padding: 5px; +#settings-menu > a, #help-button > a, #copy-path { width: 33px; - border: 1px solid; - border-radius: 2px; cursor: pointer; + line-height: 1.5; } -#settings-menu { - padding: 0; -} -#settings-menu > a, #help-button > button { + +#settings-menu > a, #help-button > a { padding: 5px; height: 100%; display: block; + background-color: var(--button-background-color); + border: 1px solid var(--border-color); + border-radius: 2px; +} + +#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; +} +#copy-path > img { + filter: var(--copy-path-img-filter); +} +#copy-path:hover > img { + filter: var(--copy-path-img-hover-filter); } @keyframes rotating { @@ -1514,26 +1444,7 @@ pre.rust { animation: rotating 2s linear infinite; } -.setting-line .radio-line input:checked { - box-shadow: inset 0 0 0 3px var(--main-background-color); - background-color: var(--settings-input-color); -} -.setting-line .radio-line input:focus { - box-shadow: 0 0 1px 1px var(--settings-input-color); -} -/* In here we combine both `:focus` and `:checked` properties. */ -.setting-line .radio-line input:checked:focus { - box-shadow: inset 0 0 0 3px var(--main-background-color), - 0 0 2px 2px var(--settings-input-color); -} -.setting-line .radio-line input:hover { - border-color: var(--settings-input-color) !important; -} -input:checked + .slider { - background-color: var(--settings-input-color); -} - -#help-button > button { +#help-button > a { 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. */ @@ -1541,105 +1452,50 @@ input:checked + .slider { padding-top: 2px; } -#copy-path { - background: initial; - margin-left: 10px; - padding: 0; - padding-left: 2px; - border: 0; -} - -#theme-choices { - display: none; - position: absolute; - left: 0; - top: 28px; - border: 1px solid; - border-radius: 3px; - z-index: 1; - cursor: pointer; -} - -#theme-choices > button { - border: none; - width: 100%; - padding: 4px 8px; - text-align: center; - background: rgba(0,0,0,0); - overflow-wrap: normal; -} - -#theme-choices > button:not(:first-child) { - border-top: 1px solid; -} - kbd { display: inline-block; padding: 3px 5px; font: 15px monospace; line-height: 10px; vertical-align: middle; - border: solid 1px; + border: solid 1px var(--border-color); border-radius: 3px; cursor: default; } -.hidden-by-impl-hider, -.hidden-by-usual-hider { - /* important because of conflicting rule for small screens */ - display: none !important; -} - -#implementations-list > h3 > span.in-band { - width: 100%; -} - -.table-display { - width: 100%; - border: 0; - border-collapse: collapse; - border-spacing: 0; - font-size: 1rem; -} - -.table-display tr td:first-child { - padding-right: 0; -} - -.table-display tr td:last-child { - float: right; -} -.table-display .out-of-band { - position: relative; - font-size: 1.125rem; - display: block; +ul.all-items > li { + list-style: none; } -.table-display td:hover .anchor { - display: block; - top: 2px; - left: -5px; +details.dir-entry { + padding-left: 4px; } -#main-content > ul { - padding-left: 10px; -} -#main-content > ul > li { - list-style: none; +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; } -.non-exhaustive { - margin-bottom: 1em; +details[open].dir-entry > summary::after { + content: " โผ"; } -details.dir-entry { - padding-left: 4px; +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-position: outside; + list-style: none; cursor: pointer; + position: relative; } details.dir-entry div.folders, details.dir-entry div.files { @@ -1650,6 +1506,17 @@ 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; + 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". */ @@ -1659,6 +1526,8 @@ details.rustdoc-toggle > summary.hideme { details.rustdoc-toggle > summary { list-style: none; + /* focus outline is shown on `::before` instead of this */ + outline: none; } details.rustdoc-toggle > summary::-webkit-details-marker, details.rustdoc-toggle > summary::marker { @@ -1681,6 +1550,11 @@ details.rustdoc-toggle > summary::before { opacity: .5; } +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 { @@ -1701,6 +1575,15 @@ details.rustdoc-toggle > summary:hover::before { opacity: 1; } +details.rustdoc-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.rustdoc-toggle.top-doc > summary, details.rustdoc-toggle.top-doc > summary::before, details.rustdoc-toggle.non-exhaustive > summary, @@ -1736,10 +1619,6 @@ details.rustdoc-toggle[open] > summary.hideme { position: absolute; } -details.rustdoc-toggle { - position: relative; -} - details.rustdoc-toggle[open] > summary.hideme > span { display: none; } @@ -1773,37 +1652,20 @@ details.rustdoc-toggle[open] > summary.hideme::after { display: inline-block; } -/* 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 plus the media query with (max-width: 700px) -*/ -@media (min-width: 701px) { - /* 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 > .information:first-child > .tooltip { - margin-top: 16px; - } - - /* When we expand the sidebar on the source code page, we hide the logo on the left of the - search bar to have more space. */ - .source-sidebar-expanded .source .sidebar + main .width-limiter .sub-logo-container.rust-logo { - display: none; - } - - .source-sidebar-expanded .source .sidebar { - width: 300px; - } +/* 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 plus the media query with (min-width: 701px) +in storage.js */ @media (max-width: 700px) { /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar, @@ -1826,18 +1688,17 @@ in storage.js plus the media query with (min-width: 701px) padding-top: 0px; } - .rustdoc, .main-heading { flex-direction: column; } - .content .out-of-band { + .out-of-band { text-align: left; margin-left: initial; padding: initial; } - .content .out-of-band .since::before { + .out-of-band .since::before { content: "Since "; } @@ -1852,10 +1713,6 @@ in storage.js plus the media query with (min-width: 701px) display: none; } - .sidebar-elems { - margin-top: 1em; - } - .sidebar { position: fixed; top: 45px; @@ -1887,24 +1744,13 @@ in storage.js plus the media query with (min-width: 701px) } .rustdoc.source > .sidebar { - position: fixed; - margin: 0; - z-index: 11; width: 0; } - .mobile-topbar .location a { - padding: 0; - margin: 0; - } - - .mobile-topbar .location { - border: none; - padding: 0; + .mobile-topbar h2 { + padding-bottom: 0; margin: auto 0.5em auto auto; - text-overflow: ellipsis; overflow: hidden; - white-space: nowrap; /* 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 @@ -1912,6 +1758,13 @@ in storage.js plus the media query with (min-width: 701px) font-size: 24px; } + .mobile-topbar h2 a { + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + .mobile-topbar .logo-container { max-height: 45px; } @@ -1936,56 +1789,30 @@ in storage.js plus the media query with (min-width: 701px) top: 0; } - .source .mobile-topbar { - display: none; - } - .sidebar-menu-toggle { width: 45px; /* Rare exception to specifying font sizes in rem. Since this is acting as an icon, it's okay to specify its sizes in pixels. */ font-size: 32px; border: none; + color: var(--main-color); } .sidebar-elems { + margin-top: 1em; background-color: var(--sidebar-background-color); } - .source nav:not(.sidebar).sub { - margin-left: 32px; - } - .content { margin-left: 0px; } - .source .content { - margin-top: 10px; - } - - #search { - margin-left: 0; - padding: 0; - } - .anchor { display: none !important; } - .notable-traits { - position: absolute; - left: -22px; - top: 24px; - } - #titles > button > div.count { - float: left; - width: 100%; - } - - #titles { - height: 50px; + display: block; } /* Because of ios, we need to actually have a full height sidebar title so the @@ -2020,7 +1847,6 @@ in storage.js plus the media query with (min-width: 701px) border-top-right-radius: 3px; border-bottom-right-radius: 3px; cursor: pointer; - font-weight: bold; border: 1px solid; border-left: 0; } @@ -2036,14 +1862,6 @@ in storage.js plus the media query with (min-width: 701px) border-bottom: 1px solid; } - #source-sidebar { - z-index: 11; - } - - #main-content > .line-numbers { - margin-top: 0; - } - .notable-traits .notable-traits-tooltiptext { left: 0; top: 100%; @@ -2071,10 +1889,10 @@ in storage.js plus the media query with (min-width: 701px) border-bottom: 1px solid #aaa9; padding: 5px 0px; } - .search-results .result-name, .search-results div.desc, .search-results .result-description { + .search-results .result-name, .search-results div.desc { width: 100%; } - .search-results div.desc, .search-results .result-description, .item-right { + .search-results div.desc, .item-right { padding-left: 2em; } @@ -2092,10 +1910,20 @@ in storage.js plus the media query with (min-width: 701px) #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; + } } @media print { - nav.sidebar, nav.sub, .content .out-of-band, a.srclink, #copy-path, + nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path, details.rustdoc-toggle[open] > summary::before, details.rustdoc-toggle > summary::before, details.rustdoc-toggle.top-doc > summary { display: none; @@ -2111,19 +1939,6 @@ in storage.js plus the media query with (min-width: 701px) } @media (max-width: 464px) { - #titles, #titles > button { - height: 73px; - } - - #main-content > table:not(.table-display) td { - word-break: break-word; - width: 50%; - } - - #crate-search { - border-radius: 4px; - } - .docblock { margin-left: 12px; } @@ -2133,15 +1948,15 @@ in storage.js plus the media query with (min-width: 701px) overflow-wrap: anywhere; } - .sub-container { + nav.sub { flex-direction: column; } - .sub-logo-container { - align-self: center; + .search-form { + align-self: stretch; } - .source .sub-logo-container > img { + .sub-logo-container > img { height: 35px; width: 35px; } @@ -2154,23 +1969,24 @@ in storage.js plus the media query with (min-width: 701px) } } -.method-toggle summary, -.implementors-toggle summary, -.impl { +.method-toggle > summary, +.implementors-toggle > summary, +.impl, +#implementors-list > .docblock, +.impl-items > section, +.methods > section +{ margin-bottom: 0.75em; } -.method-toggle[open] { +.method-toggle[open]:not(:last-child), +.implementors-toggle[open]:not(:last-child) { margin-bottom: 2em; } -.implementors-toggle[open] { - margin-bottom: 2em; -} - -#trait-implementations-list .method-toggle, -#synthetic-implementations-list .method-toggle, -#blanket-implementations-list .method-toggle { +#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; } @@ -2207,10 +2023,6 @@ in storage.js plus the media query with (min-width: 701px) padding-bottom: 0; } -.scraped-example:not(.expanded) .code-wrapper pre.line-numbers { - overflow-x: hidden; -} - .scraped-example .code-wrapper .prev { position: absolute; top: 0.25em; @@ -2253,12 +2065,12 @@ in storage.js plus the media query with (min-width: 701px) bottom: 0; } -.scraped-example .code-wrapper .line-numbers { +.scraped-example .code-wrapper .src-line-numbers { margin: 0; padding: 14px 0; } -.scraped-example .code-wrapper .line-numbers span { +.scraped-example .code-wrapper .src-line-numbers span { padding: 0 14px; } diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css index e82ec0426..83939f63b 100644 --- a/src/librustdoc/html/static/css/settings.css +++ b/src/librustdoc/html/static/css/settings.css @@ -12,7 +12,8 @@ margin-right: 0.3em; height: 1.2rem; width: 1.2rem; - border: 1px solid; + color: inherit; + border: 1px solid currentColor; outline: none; -webkit-appearance: none; cursor: pointer; @@ -88,3 +89,22 @@ input:checked + .slider:before { #settings .setting-line { margin: 1.2em 0.6em; } + +.setting-line .radio-line input:checked { + box-shadow: inset 0 0 0 3px var(--main-background-color); + background-color: var(--settings-input-color); +} +.setting-line .radio-line input:focus { + box-shadow: 0 0 1px 1px var(--settings-input-color); +} +/* In here we combine both `:focus` and `:checked` properties. */ +.setting-line .radio-line input:checked:focus { + box-shadow: inset 0 0 0 3px var(--main-background-color), + 0 0 2px 2px var(--settings-input-color); +} +.setting-line .radio-line input:hover { + border-color: var(--settings-input-color) !important; +} +input:checked + .slider { + background-color: var(--settings-input-color); +} diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index c42cac59b..fdfdb3e19 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -14,6 +14,50 @@ Original by Dempfi (https://github.com/dempfi/ayu) --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; + --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); + --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; + --stab-background-color: #314559; + --stab-code-color: #e6e1cf; + --search-color: #fff; + --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; + --example-line-numbers-border-color: none; + --src-line-numbers-span-color: #5c6773; + --src-line-number-highlighted-background-color: rgba(255, 236, 164, 0.06); } .slider { @@ -29,17 +73,13 @@ input:focus + .slider { h1, h2, h3, h4 { color: white; } -h1.fqn a { +h1 a { color: #fff; } h4 { border: none; } -.in-band { - background-color: #0f1419; -} - .docblock code { color: #ffb454; } @@ -49,7 +89,7 @@ h4 { .docblock pre > code, pre > code { color: #e6e1cf; } -span code { +.item-info code { color: #e6e1cf; } .docblock a > code { @@ -68,7 +108,6 @@ pre, .rustdoc.source .example-wrap { .sidebar .current, .sidebar a:hover { - background-color: transparent; color: #ffb44c; } @@ -76,25 +115,20 @@ pre, .rustdoc.source .example-wrap { color: #ff7733; } -.line-numbers span { color: #5c6773; } -.line-numbers .line-highlighted { +.src-line-numbers .line-highlighted { color: #708090; - background-color: rgba(255, 236, 164, 0.06); padding-right: 4px; border-right: 1px solid #ffb44c; } -.docblock table td, .docblock table th { - border-color: #5c6773; -} - .search-results a:hover { - background-color: #777; + color: #fff !important; + background-color: #3c3c3c; } .search-results a:focus { - color: #000 !important; - background-color: #c6afb3; + color: #fff !important; + background-color: #3c3c3c; } .search-results a { color: #0096cf; @@ -105,97 +139,27 @@ pre, .rustdoc.source .example-wrap { .content .item-info::before { color: #ccc; } -.content span.foreigntype, .content a.foreigntype { color: #ffa0a5; } -.content span.union, .content a.union { color: #ffa0a5; } -.content span.constant, .content a.constant, -.content span.static, .content a.static { color: #39AFD7; } -.content span.primitive, .content a.primitive { color: #ffa0a5; } -.content span.traitalias, .content a.traitalias { color: #39AFD7; } -.content span.keyword, .content a.keyword { color: #39AFD7; } - -.content span.externcrate, .content span.mod, .content a.mod { - color: #39AFD7; -} -.content span.struct, .content a.struct { - color: #ffa0a5; -} -.content span.enum, .content a.enum { - color: #ffa0a5; -} -.content span.trait, .content a.trait { - color: #39AFD7; -} -.content span.type, .content a.type { - color: #39AFD7; -} -.content span.type, -.content a.type, -.block a.current.type { color: #39AFD7; } -.content span.associatedtype, -.content a.associatedtype, -.block a.current.associatedtype { color: #39AFD7; } -.content span.fn, .content a.fn, .content span.method, -.content a.method, .content span.tymethod, -.content a.tymethod, .content .fnname { - color: #fdd687; -} -.content span.attr, .content a.attr, .content span.derive, -.content a.derive, .content span.macro, .content a.macro { - color: #a37acc; -} - -.sidebar a { color: #53b1db; } -.sidebar a.current.type { color: #53b1db; } -.sidebar a.current.associatedtype { color: #53b1db; } - -pre.rust .comment { color: #788797; } -pre.rust .doccomment { color: #a1ac88; } - -nav.main .current { - border-top-color: #5c6773; - border-bottom-color: #5c6773; -} -nav.main .separator { - border: 1px solid #5c6773; -} -a { - color: #39AFD7; -} - .sidebar h2 a, .sidebar h3 a { color: white; } -.search-results a { - color: #0096cf; -} body.source .example-wrap pre.rust a { background: #333; } -details.rustdoc-toggle > summary.hideme > span, -details.rustdoc-toggle > summary::before { - color: #999; -} - details.rustdoc-toggle > summary::before { filter: invert(100%); } -#crate-search, .search-input { - background-color: #141920; - border-color: #424c57; +#crate-search-div::after { + /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ + filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) brightness(94%) contrast(94%); } - -#crate-search { - /* Without the `!important`, the border-color is ignored for `<select>`... - It cannot be in the group above because `.search-input` has a different border color on - hover. */ - border-color: #424c57 !important; +#crate-search:hover, #crate-search:focus { + border-color: #e0e0e0 !important; } - -.search-input { - color: #ffffff; +#crate-search-div:hover::after, #crate-search-div:focus-within::after { + filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg) brightness(113%) contrast(76%); } .module-item .stab, @@ -203,63 +167,10 @@ details.rustdoc-toggle > summary::before { color: #000; } -/* Created this empty rule to satisfy the theme checks. */ -.stab.empty-impl {} -.stab.must_implement {} - -.stab.unstable, -.stab.deprecated, -.stab.portability, -.stab.empty-impl, -.stab.must_implement { - color: #c5c5c5; - background: #314559 !important; - border-style: none !important; - border-radius: 4px; - padding: 3px 6px 3px 6px; -} - -.stab.portability > code { - color: #e6e1cf; - background: none; -} - -.rightside, -.out-of-band { - color: grey; -} - .result-name .primitive > i, .result-name .keyword > i { color: #788797; } -.line-numbers :target { background-color: transparent; } - -/* Code highlighting */ -pre.rust .number, pre.rust .string { color: #b8cc52; } -pre.rust .kw, pre.rust .kw-2, pre.rust .prelude-ty, -pre.rust .bool-val, pre.rust .prelude-val, -pre.rust .op, pre.rust .lifetime { color: #ff7733; } -pre.rust .macro, pre.rust .macro-nonterminal { color: #a37acc; } -pre.rust .question-mark { - color: #ff9011; -} -pre.rust .self { - color: #36a3d9; - font-style: italic; -} -pre.rust .attribute { - color: #e6e1cf; -} -pre.rust .attribute .ident, pre.rust .attribute .op { - color: #e6e1cf; -} - -.example-wrap > pre.line-number { - color: #5c67736e; - border: none; -} - a.test-arrow { font-size: 100%; color: #788797; @@ -272,64 +183,11 @@ a.test-arrow:hover { color: #c5c5c5; } -.toggle-label, -.code-attribute { - color: #999; -} - :target { background: rgba(255, 236, 164, 0.06); border-right: 3px solid rgba(255, 180, 76, 0.85); } -pre.compile_fail { - border-left: 2px solid rgba(255,0,0,.4); -} - -pre.compile_fail:hover, .information:hover + pre.compile_fail { - border-left: 2px solid #f00; -} - -pre.should_panic { - border-left: 2px solid rgba(255,0,0,.4); -} - -pre.should_panic:hover, .information:hover + pre.should_panic { - border-left: 2px solid #f00; -} - -pre.ignore { - border-left: 2px solid rgba(255,142,0,.6); -} - -pre.ignore:hover, .information:hover + pre.ignore { - border-left: 2px solid #ff9200; -} - -.tooltip.compile_fail { - color: rgba(255,0,0,.5); -} - -.information > .compile_fail:hover { - color: #f00; -} - -.tooltip.should_panic { - color: rgba(255,0,0,.5); -} - -.information > .should_panic:hover { - color: #f00; -} - -.tooltip.ignore { - color: rgba(255,142,0,.6); -} - -.information > .ignore:hover { - color: #ff9200; -} - .search-failed a { color: #39AFD7; } @@ -337,7 +195,6 @@ pre.ignore:hover, .information:hover + pre.ignore { .tooltip::after { background-color: #314559; color: #c5c5c5; - border: 1px solid #5c6773; } .tooltip::before { @@ -346,11 +203,6 @@ pre.ignore:hover, .information:hover + pre.ignore { .notable-traits-tooltiptext { background-color: #314559; - border-color: #5c6773; -} - -.notable-traits-tooltiptext .notable { - border-bottom-color: #5c6773; } #titles > button.selected { @@ -378,99 +230,19 @@ individually rather than as a group) */ /* FIXME: these rules should be at the bottom of the file but currently must be above the `@media (max-width: 700px)` rules due to a bug in the css checker */ /* see https://github.com/rust-lang/rust/pull/71237#issuecomment-618170143 */ -.search-input:focus {} -.content span.attr,.content a.attr,.block a.current.attr,.content span.derive,.content a.derive, -.block a.current.derive,.content span.macro,.content a.macro,.block a.current.macro {} -.content span.struct,.content a.struct,.block a.current.struct {} -#titles>button:hover,#titles>button.selected {} -.content span.typedef,.content a.typedef,.block a.current.typedef {} -.content span.union,.content a.union,.block a.current.union {} pre.rust .lifetime {} -.stab.unstable {} -h2, -h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod) {} -.content span.enum,.content a.enum,.block a.current.enum {} -.content span.constant,.content a.constant,.block a.current.constant,.content span.static, -.content a.static, .block a.current.static {} -.content span.keyword,.content a.keyword,.block a.current.keyword {} -pre.rust .comment {} -.content span.traitalias,.content a.traitalias,.block a.current.traitalias {} -.content span.fn,.content a.fn,.block a.current.fn,.content span.method,.content a.method, -.block a.current.method,.content span.tymethod,.content a.tymethod,.block a.current.tymethod, -.content .fnname {} pre.rust .kw {} -pre.rust .self,pre.rust .bool-val,pre.rust .prelude-val,pre.rust .attribute, -pre.rust .attribute .ident {} -.content span.foreigntype,.content a.foreigntype,.block a.current.foreigntype {} -pre.rust .doccomment {} -.stab.deprecated {} -.content a.attr,.content a.derive,.content a.macro {} -.stab.portability {} -.content span.primitive,.content a.primitive,.block a.current.primitive {} -.content span.externcrate,.content span.mod,.content a.mod,.block a.current.mod {} -pre.rust .kw-2,pre.rust .prelude-ty {} -.content span.trait,.content a.trait,.block a.current.trait {} - -.search-results a:focus span {} -a.result-trait:focus {} -a.result-traitalias:focus {} -a.result-mod:focus, -a.result-externcrate:focus {} -a.result-mod:focus {} -a.result-externcrate:focus {} -a.result-enum:focus {} -a.result-struct:focus {} -a.result-union:focus {} -a.result-fn:focus, -a.result-method:focus, -a.result-tymethod:focus {} -a.result-type:focus {} -a.result-associatedtype:focus {} -a.result-foreigntype:focus {} -a.result-attr:focus, -a.result-derive:focus, -a.result-macro:focus {} -a.result-constant:focus, -a.result-static:focus {} -a.result-primitive:focus {} -a.result-keyword:focus {} - -.sidebar a.current.enum {} -.sidebar a.current.struct {} -.sidebar a.current.foreigntype {} -.sidebar a.current.attr, -.sidebar a.current.derive, -.sidebar a.current.macro {} -.sidebar a.current.union {} -.sidebar a.current.constant -.sidebar a.current.static {} -.sidebar a.current.primitive {} -.sidebar a.current.externcrate -.sidebar a.current.mod {} -.sidebar a.current.trait {} -.sidebar a.current.traitalias {} -.sidebar a.current.fn, -.sidebar a.current.method, -.sidebar a.current.tymethod {} -.sidebar a.current.keyword {} - -@media (max-width: 700px) { - .sidebar-elems { - border-right-color: #5c6773; - } -} +#titles > button:hover, #titles > button.selected {} +pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val, pre.rust .attribute {} +pre.rust .kw-2, pre.rust .prelude-ty {} kbd { color: #c5c5c5; background-color: #314559; - border-color: #5c6773; - border-bottom-color: #5c6773; box-shadow: inset 0 -1px 0 #5c6773; } -#settings-menu > a, #help-button > button { - border-color: #5c6773; - background-color: #0f1419; +#settings-menu > a, #help-button > a { color: #fff; } @@ -478,39 +250,11 @@ kbd { filter: invert(100); } -.popover, .popover::before, -#help-button span.top, #help-button span.bottom { - border-color: #5c6773; -} - -#copy-path { - color: #fff; -} -#copy-path > img { - filter: invert(70%); -} -#copy-path:hover > img { - filter: invert(100%); -} - #settings-menu > a:hover, #settings-menu > a:focus, -#help-button > button:hover, #help-button > button:focus { +#help-button > a:hover, #help-button > a:focus { border-color: #e0e0e0; } -#theme-choices { - border-color: #5c6773; - background-color: #0f1419; -} - -#theme-choices > button:not(:first-child) { - border-top-color: #5c6773; -} - -#theme-choices > button:hover, #theme-choices > button:focus { - background-color: rgba(110, 110, 110, 0.33); -} - .search-results .result-name span.alias { color: #c5c5c5; } @@ -520,7 +264,6 @@ kbd { #source-sidebar > .title { color: #fff; - border-bottom-color: #5c6773; } #source-sidebar div.files > a:hover, details.dir-entry summary:hover, #source-sidebar div.files > a:focus, details.dir-entry summary:focus { @@ -540,9 +283,6 @@ kbd { border-color: white; color: white; } -.more-examples-toggle summary, .more-examples-toggle .hide-more { - color: #999; -} .scraped-example .example-wrap .rust span.highlight { background: rgb(91, 59, 1); } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index a550eb1c1..361d3d4a2 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -9,6 +9,50 @@ --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; + --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); + --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; + --stab-background-color: #314559; + --stab-code-color: #e6e1cf; + --search-color: #111; + --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; + --example-line-numbers-border-color: #4a4949; + --src-line-numbers-span-color: #3b91e2; + --src-line-number-highlighted-background-color: #0a042f; } .slider { @@ -21,10 +65,6 @@ input:focus + .slider { box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); } -.in-band { - background-color: #353535; -} - .rust-logo { filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) @@ -32,175 +72,25 @@ input:focus + .slider { drop-shadow(0 -1px 0 #fff) } -.sidebar .current, -.sidebar a:hover { - background: #444; -} - -.line-numbers span { color: #3B91E2; } -.line-numbers .line-highlighted { - background-color: #0a042f !important; -} - -.docblock table td, .docblock table th { - border-color: #ddd; -} - -.search-results a:hover { - background-color: #777; -} - -.search-results a:focus { - color: #eee !important; - background-color: #616161; -} -.search-results a:focus span { color: #eee !important; } -a.result-trait:focus { background-color: #013191; } -a.result-traitalias:focus { background-color: #013191; } -a.result-mod:focus, -a.result-externcrate:focus { background-color: #884719; } -a.result-enum:focus { background-color: #194e9f; } -a.result-struct:focus { background-color: #194e9f; } -a.result-union:focus { background-color: #194e9f; } -a.result-fn:focus, -a.result-method:focus, -a.result-tymethod:focus { background-color: #4950ed; } -a.result-type:focus { background-color: #194e9f; } -a.result-associatedtype:focus { background-color: #884719; } -a.result-foreigntype:focus { background-color: #194e9f; } -a.result-attr:focus, -a.result-derive:focus, -a.result-macro:focus { background-color: #217d1c; } -a.result-constant:focus, -a.result-static:focus { background-color: #884719; } -a.result-primitive:focus { background-color: #194e9f; } -a.result-keyword:focus { background-color: #884719; } - .content .item-info::before { color: #ccc; } -.content span.enum, .content a.enum, .block a.current.enum { color: #2dbfb8; } -.content span.struct, .content a.struct, .block a.current.struct { color: #2dbfb8; } -.content span.type, .content a.type, .block a.current.type { color: #2dbfb8; } -.content span.associatedtype, -.content a.associatedtype, -.block a.current.associatedtype { color: #D2991D; } -.content span.foreigntype, .content a.foreigntype, .block a.current.foreigntype { color: #2dbfb8; } -.content span.attr, .content a.attr, .block a.current.attr, -.content span.derive, .content a.derive, .block a.current.derive, -.content span.macro, .content a.macro, .block a.current.macro { color: #09bd00; } -.content span.union, .content a.union, .block a.current.union { color: #2dbfb8; } -.content span.constant, .content a.constant, .block a.current.constant, -.content span.static, .content a.static, .block a.current.static { color: #D2991D; } -.content span.primitive, .content a.primitive, .block a.current.primitive { color: #2dbfb8; } -.content span.externcrate, -.content span.mod, .content a.mod, .block a.current.mod { color: #D2991D; } -.content span.trait, .content a.trait, .block a.current.trait { color: #b78cf2; } -.content span.traitalias, .content a.traitalias, .block a.current.traitalias { color: #b78cf2; } -.content span.fn, .content a.fn, .block a.current.fn, -.content span.method, .content a.method, .block a.current.method, -.content span.tymethod, .content a.tymethod, .block a.current.tymethod, -.content .fnname{ color: #2BAB63; } -.content span.keyword, .content a.keyword, .block a.current.keyword { color: #D2991D; } - -.sidebar a { color: #fdbf35; } -.sidebar a.current.enum { color: #12ece2; } -.sidebar a.current.struct { color: #12ece2; } -.sidebar a.current.type { color: #12ece2; } -.sidebar a.current.associatedtype { color: #fdbf35; } -.sidebar a.current.foreigntype { color: #12ece2; } -.sidebar a.current.attr, -.sidebar a.current.derive, -.sidebar a.current.macro { color: #0be900; } -.sidebar a.current.union { color: #12ece2; } -.sidebar a.current.constant -.sidebar a.current.static { color: #fdbf35; } -.sidebar a.current.primitive { color: #12ece2; } -.sidebar a.current.externcrate -.sidebar a.current.mod { color: #fdbf35; } -.sidebar a.current.trait { color: #cca7ff; } -.sidebar a.current.traitalias { color: #cca7ff; } -.sidebar a.current.fn, -.sidebar a.current.method, -.sidebar a.current.tymethod { color: #32d479; } -.sidebar a.current.keyword { color: #fdbf35; } - -pre.rust .comment { color: #8d8d8b; } -pre.rust .doccomment { color: #8ca375; } - -nav.main .current { - border-top-color: #eee; - border-bottom-color: #eee; -} -nav.main .separator { - border-color: #eee; -} - -a { - color: #D2991D; -} - body.source .example-wrap pre.rust a { background: #333; } -details.rustdoc-toggle > summary.hideme > span, -details.rustdoc-toggle > summary::before { - color: #999; -} - details.rustdoc-toggle > summary::before { filter: invert(100%); } -#crate-search, .search-input { - color: #111; - background-color: #f0f0f0; - border-color: #f0f0f0; -} - -#crate-search { - /* Without the `!important`, the border-color is ignored for `<select>`... - It cannot be in the group above because `.search-input` has a different border color on - hover. */ - border-color: #f0f0f0 !important; -} - -.search-input { - border-color: #e0e0e0; -} - -.search-input:focus { - border-color: #008dfd; -} - -.stab.empty-impl { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; } -.stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; } -.stab.deprecated { background: #ffc4c4; border-color: #db7b7b; color: #2f2f2f; } -.stab.must_implement { background: #F3DFFF; border-color: #b07bdb; color: #2f2f2f; } -.stab.portability { background: #F3DFFF; border-color: #b07bdb; color: #2f2f2f; } -.stab.portability > code { background: none; } - -.rightside, -.out-of-band { - color: grey; +#crate-search-div::after { + /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ + filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg) brightness(90%) contrast(90%); } - -.line-numbers :target { background-color: transparent; } - -/* Code highlighting */ -pre.rust .kw { color: #ab8ac1; } -pre.rust .kw-2, pre.rust .prelude-ty { color: #769acb; } -pre.rust .number, pre.rust .string { color: #83a300; } -pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val, -pre.rust .attribute, pre.rust .attribute .ident { color: #ee6868; } -pre.rust .macro, pre.rust .macro-nonterminal { color: #3E999F; } -pre.rust .lifetime { color: #d97f26; } -pre.rust .question-mark { - color: #ff9011; +#crate-search:hover, #crate-search:focus { + border-color: #2196f3 !important; } - -.example-wrap > pre.line-number { - border-color: #4a4949; +#crate-search-div:hover::after, #crate-search-div:focus-within::after { + filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%); } a.test-arrow { @@ -212,64 +102,11 @@ a.test-arrow:hover{ background-color: #4e8bca; } -.toggle-label, -.code-attribute { - color: #999; -} - :target { background-color: #494a3d; border-right: 3px solid #bb7410; } -pre.compile_fail { - border-left: 2px solid rgba(255,0,0,.8); -} - -pre.compile_fail:hover, .information:hover + pre.compile_fail { - border-left: 2px solid #f00; -} - -pre.should_panic { - border-left: 2px solid rgba(255,0,0,.8); -} - -pre.should_panic:hover, .information:hover + pre.should_panic { - border-left: 2px solid #f00; -} - -pre.ignore { - border-left: 2px solid rgba(255,142,0,.6); -} - -pre.ignore:hover, .information:hover + pre.ignore { - border-left: 2px solid #ff9200; -} - -.tooltip.compile_fail { - color: rgba(255,0,0,.8); -} - -.information > .compile_fail:hover { - color: #f00; -} - -.tooltip.should_panic { - color: rgba(255,0,0,.8); -} - -.information > .should_panic:hover { - color: #f00; -} - -.tooltip.ignore { - color: rgba(255,142,0,.6); -} - -.information > .ignore:hover { - color: #ff9200; -} - .search-failed a { color: #0089ff; } @@ -286,11 +123,6 @@ pre.ignore:hover, .information:hover + pre.ignore { .notable-traits-tooltiptext { background-color: #111; - border-color: #777; -} - -.notable-traits-tooltiptext .notable { - border-bottom-color: #d2d2d2; } #titles > button:not(.selected) { @@ -307,59 +139,21 @@ pre.ignore:hover, .information:hover + pre.ignore { color: #888; } -@media (max-width: 700px) { - .sidebar-elems { - border-right-color: #000; - } -} - kbd { color: #000; background-color: #fafbfc; - border-color: #d1d5da; - border-bottom-color: #c6cbd1; box-shadow: inset 0 -1px 0 #c6cbd1; } -#settings-menu > a, #help-button > button { - border-color: #e0e0e0; - background: #f0f0f0; +#settings-menu > a, #help-button > a { color: #000; } #settings-menu > a:hover, #settings-menu > a:focus, -#help-button > button:hover, #help-button > button:focus { +#help-button > a:hover, #help-button > a:focus { border-color: #ffb900; } -.popover, .popover::before, -#help-button span.top, #help-button span.bottom { - border-color: #d2d2d2; -} - -#copy-path { - color: #999; -} -#copy-path > img { - filter: invert(50%); -} -#copy-path:hover > img { - filter: invert(65%); -} - -#theme-choices { - border-color: #e0e0e0; - background-color: #353535; -} - -#theme-choices > button:not(:first-child) { - border-top-color: #e0e0e0; -} - -#theme-choices > button:hover, #theme-choices > button:focus { - background-color: #4e4e4e; -} - .search-results .result-name span.alias { color: #fff; } @@ -367,9 +161,6 @@ kbd { color: #ccc; } -#source-sidebar > .title { - border-bottom-color: #ccc; -} #source-sidebar div.files > a:hover, details.dir-entry summary:hover, #source-sidebar div.files > a:focus, details.dir-entry summary:focus { background-color: #444; @@ -386,9 +177,6 @@ kbd { border-color: white; color: white; } -.more-examples-toggle summary, .more-examples-toggle .hide-more { - color: #999; -} .scraped-example .example-wrap .rust span.highlight { background: rgb(91, 59, 1); } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index b751acff1..5eb4bbcf8 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -9,6 +9,50 @@ --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; + --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); + --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; + --stab-background-color: #fff5d6; + --stab-code-color: #000; + --search-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; + --example-line-numbers-border-color: #c7c7c7; + --src-line-numbers-span-color: #c67e2d; + --src-line-number-highlighted-background-color: #fdffd3; } .slider { @@ -21,175 +65,27 @@ input:focus + .slider { box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); } -.in-band { - background-color: white; -} - .rust-logo { /* This rule exists to force other themes to explicitly style the logo. * Rustdoc has a custom linter for this purpose. */ } -.sidebar .current, -.sidebar a:hover { - background-color: #fff; -} - -.line-numbers span { color: #c67e2d; } -.line-numbers .line-highlighted { - background-color: #FDFFD3 !important; -} - -.docblock table td, .docblock table th { - border-color: #ddd; -} - -.search-results a:hover { - background-color: #ddd; -} - -.search-results a:focus { - color: #000 !important; - background-color: #ccc; -} -.search-results a:focus span { color: #000 !important; } -a.result-trait:focus { background-color: #c7b6ff; } -a.result-traitalias:focus { background-color: #c7b6ff; } -a.result-mod:focus, -a.result-externcrate:focus { background-color: #afc6e4; } -a.result-enum:focus { background-color: #e7b1a0; } -a.result-struct:focus { background-color: #e7b1a0; } -a.result-union:focus { background-color: #e7b1a0; } -a.result-fn:focus, -a.result-method:focus, -a.result-tymethod:focus { background-color: #c6afb3; } -a.result-type:focus { background-color: #e7b1a0; } -a.result-associatedtype:focus { background-color: #afc6e4; } -a.result-foreigntype:focus { background-color: #e7b1a0; } -a.result-attr:focus, -a.result-derive:focus, -a.result-macro:focus { background-color: #8ce488; } -a.result-constant:focus, -a.result-static:focus { background-color: #afc6e4; } -a.result-primitive:focus { background-color: #e7b1a0; } -a.result-keyword:focus { background-color: #afc6e4; } - .content .item-info::before { color: #ccc; } -.content span.enum, .content a.enum, .block a.current.enum { color: #AD378A; } -.content span.struct, .content a.struct, .block a.current.struct { color: #AD378A; } -.content span.type, .content a.type, .block a.current.type { color: #AD378A; } -.content span.foreigntype, .content a.foreigntype, .block a.current.foreigntype { color: #3873AD; } -.content span.associatedtype, -.content a.associatedtype, -.block a.current.associatedtype { color: #3873AD; } -.content span.attr, .content a.attr, .block a.current.attr, -.content span.derive, .content a.derive, .block a.current.derive, -.content span.macro, .content a.macro, .block a.current.macro { color: #068000; } -.content span.union, .content a.union, .block a.current.union { color: #AD378A; } -.content span.constant, .content a.constant, .block a.current.constant, -.content span.static, .content a.static, .block a.current.static { color: #3873AD; } -.content span.primitive, .content a.primitive, .block a.current.primitive { color: #AD378A; } -.content span.externcrate, -.content span.mod, .content a.mod, .block a.current.mod { color: #3873AD; } -.content span.trait, .content a.trait, .block a.current.trait { color: #6E4FC9; } -.content span.traitalias, .content a.traitalias, .block a.current.traitalias { color: #5137AD; } -.content span.fn, .content a.fn, .block a.current.fn, -.content span.method, .content a.method, .block a.current.method, -.content span.tymethod, .content a.tymethod, .block a.current.tymethod, -.content .fnname { color: #AD7C37; } -.content span.keyword, .content a.keyword, .block a.current.keyword { color: #3873AD; } - -.sidebar a { color: #356da4; } -.sidebar a.current.enum { color: #a63283; } -.sidebar a.current.struct { color: #a63283; } -.sidebar a.current.type { color: #a63283; } -.sidebar a.current.associatedtype { color: #356da4; } -.sidebar a.current.foreigntype { color: #356da4; } -.sidebar a.current.attr, -.sidebar a.current.derive, -.sidebar a.current.macro { color: #067901; } -.sidebar a.current.union { color: #a63283; } -.sidebar a.current.constant -.sidebar a.current.static { color: #356da4; } -.sidebar a.current.primitive { color: #a63283; } -.sidebar a.current.externcrate -.sidebar a.current.mod { color: #356da4; } -.sidebar a.current.trait { color: #6849c3; } -.sidebar a.current.traitalias { color: #4b349e; } -.sidebar a.current.fn, -.sidebar a.current.method, -.sidebar a.current.tymethod { color: #a67736; } -.sidebar a.current.keyword { color: #356da4; } - -nav.main .current { - border-top-color: #000; - border-bottom-color: #000; -} -nav.main .separator { - border: 1px solid #000; -} - -a { - color: #3873AD; -} - body.source .example-wrap pre.rust a { background: #eee; } -details.rustdoc-toggle > summary.hideme > span, -details.rustdoc-toggle > summary::before { - color: #999; -} - -#crate-search, .search-input { - background-color: white; - border-color: #e0e0e0; -} - -#crate-search { - /* Without the `!important`, the border-color is ignored for `<select>`... - It cannot be in the group above because `.search-input` has a different border color on - hover. */ - border-color: #e0e0e0 !important; -} - -.search-input:focus { - border-color: #66afe9; -} - -.stab.empty-impl { background: #FFF5D6; border-color: #FFC600; } -.stab.unstable { background: #FFF5D6; border-color: #FFC600; } -.stab.deprecated { background: #ffc4c4; border-color: #db7b7b; } -.stab.must_implement { background: #F3DFFF; border-color: #b07bdb; } -.stab.portability { background: #F3DFFF; border-color: #b07bdb; } -.stab.portability > code { background: none; } - -.rightside, -.out-of-band { - color: grey; +#crate-search-div::after { + /* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */ + filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg) brightness(114%) contrast(76%); } - -.line-numbers :target { background-color: transparent; } - -/* Code highlighting */ -pre.rust .kw { color: #8959A8; } -pre.rust .kw-2, pre.rust .prelude-ty { color: #4271AE; } -pre.rust .number, pre.rust .string { color: #718C00; } -pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val, -pre.rust .attribute, pre.rust .attribute .ident { color: #C82829; } -pre.rust .comment { color: #8E908C; } -pre.rust .doccomment { color: #4D4D4C; } -pre.rust .macro, pre.rust .macro-nonterminal { color: #3E999F; } -pre.rust .lifetime { color: #B76514; } -pre.rust .question-mark { - color: #ff9011; +#crate-search:hover, #crate-search:focus { + border-color: #717171 !important; } - -.example-wrap > pre.line-number { - border-color: #c7c7c7; +#crate-search-div:hover::after, #crate-search-div:focus-within::after { + filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg) brightness(96%) contrast(93%); } a.test-arrow { @@ -201,64 +97,11 @@ a.test-arrow:hover{ background-color: #4e8bca; } -.toggle-label, -.code-attribute { - color: #999; -} - :target { background: #FDFFD3; border-right: 3px solid #AD7C37; } -pre.compile_fail { - border-left: 2px solid rgba(255,0,0,.5); -} - -pre.compile_fail:hover, .information:hover + pre.compile_fail { - border-left: 2px solid #f00; -} - -pre.should_panic { - border-left: 2px solid rgba(255,0,0,.5); -} - -pre.should_panic:hover, .information:hover + pre.should_panic { - border-left: 2px solid #f00; -} - -pre.ignore { - border-left: 2px solid rgba(255,142,0,.6); -} - -pre.ignore:hover, .information:hover + pre.ignore { - border-left: 2px solid #ff9200; -} - -.tooltip.compile_fail { - color: rgba(255,0,0,.5); -} - -.information > .compile_fail:hover { - color: #f00; -} - -.tooltip.should_panic { - color: rgba(255,0,0,.5); -} - -.information > .should_panic:hover { - color: #f00; -} - -.tooltip.ignore { - color: rgba(255,142,0,.6); -} - -.information > .ignore:hover { - color: #ff9200; -} - .search-failed a { color: #3873AD; } @@ -274,11 +117,6 @@ pre.ignore:hover, .information:hover + pre.ignore { .notable-traits-tooltiptext { background-color: #eee; - border-color: #999; -} - -.notable-traits-tooltiptext .notable { - border-bottom-color: #DDDDDD; } #titles > button:not(.selected) { @@ -295,58 +133,21 @@ pre.ignore:hover, .information:hover + pre.ignore { color: #888; } -@media (max-width: 700px) { - .sidebar-elems { - border-right-color: #000; - } -} - kbd { color: #000; background-color: #fafbfc; - border-color: #d1d5da; - border-bottom-color: #c6cbd1; box-shadow: inset 0 -1px 0 #c6cbd1; } -#settings-menu > a, #help-button > button { - border-color: #e0e0e0; - background-color: #fff; +#settings-menu > a, #help-button > a { + color: #000; } #settings-menu > a:hover, #settings-menu > a:focus, -#help-button > button:hover, #help-button > button:focus { +#help-button > a:hover, #help-button > a:focus { border-color: #717171; } -.popover, .popover::before, -#help-button span.top, #help-button span.bottom { - border-color: #DDDDDD; -} - -#copy-path { - color: #999; -} -#copy-path > img { - filter: invert(50%); -} -#copy-path:hover > img { - filter: invert(35%); -} - -#theme-choices { - border-color: #ccc; - background-color: #fff; -} - -#theme-choices > button:not(:first-child) { - border-top-color: #e0e0e0; -} - -#theme-choices > button:hover, #theme-choices > button:focus { - background-color: #eee; -} - .search-results .result-name span.alias { color: #000; } @@ -354,9 +155,6 @@ kbd { color: #999; } -#source-sidebar > .title { - border-bottom-color: #ccc; -} #source-sidebar div.files > a:hover, details.dir-entry summary:hover, #source-sidebar div.files > a:focus, details.dir-entry summary:focus { background-color: #E0E0E0; @@ -372,9 +170,6 @@ kbd { border-color: black; color: black; } -.more-examples-toggle summary, .more-examples-toggle .hide-more { - color: #999; -} .scraped-example .example-wrap .rust span.highlight { background: #fcffd6; } |