Rollup merge of #101348 - GuillaumeGomez:cleanup-css-theme, r=notriddle
Cleanup css theme Follow-up of https://github.com/rust-lang/rust/pull/100494. The change for the border color of the search input in the dark mode was actually a weird case: the search input border was unique, it didn't share the same variable with other items with borders. This weird case being unique to the dark theme, I removed it, hence the modification in the GUI test. Live demo is [here](https://rustdoc.crud.net/imperio/cleanup-css-theme/std/index.html). cc `@jsha` r? `@notriddle`
This commit is contained in:
Dylan DPC
GitHub
commit
7eed25b200
6 changed files with 49 additions and 93 deletions
|
|
@ -987,6 +987,9 @@ so that we can apply CSS-filters to change the arrow color in themes */
|
|||
width: 100%;
|
||||
background-color: var(--button-background-color);
|
||||
}
|
||||
.search-input:focus {
|
||||
border-color: var(--search-input-focused-border-color);
|
||||
}
|
||||
|
||||
.search-results {
|
||||
display: none;
|
||||
|
|
@ -1167,6 +1170,12 @@ so that we can apply CSS-filters to change the arrow color in themes */
|
|||
float: right;
|
||||
}
|
||||
|
||||
.rightside:not(a),
|
||||
.out-of-band {
|
||||
color: var(--right-side-color);
|
||||
}
|
||||
|
||||
|
||||
.impl-items .srclink, .impl .srclink, .methods .srclink {
|
||||
/* Override header settings otherwise it's too bold */
|
||||
font-weight: normal;
|
||||
|
|
@ -1205,6 +1214,7 @@ a.test-arrow:hover {
|
|||
|
||||
.code-attribute {
|
||||
font-weight: 300;
|
||||
color: var(--code-attribute-color);
|
||||
}
|
||||
|
||||
.item-spacer {
|
||||
|
|
@ -1478,6 +1488,16 @@ pre.rust {
|
|||
background-color: var(--button-background-color);
|
||||
}
|
||||
|
||||
#copy-path {
|
||||
color: var(--copy-path-button-color);
|
||||
}
|
||||
#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);
|
||||
|
|
@ -1601,6 +1621,12 @@ details.rustdoc-toggle > summary::before {
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
details.rustdoc-toggle > summary.hideme > span,
|
||||
details.rustdoc-toggle > summary::before,
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,13 @@ Original by Dempfi (https://github.com/dempfi/ayu)
|
|||
--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%);
|
||||
}
|
||||
|
||||
.slider {
|
||||
|
|
@ -158,11 +165,6 @@ 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%);
|
||||
}
|
||||
|
|
@ -197,11 +199,6 @@ details.rustdoc-toggle > summary::before {
|
|||
background: none;
|
||||
}
|
||||
|
||||
.rightside:not(a),
|
||||
.out-of-band {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.result-name .primitive > i, .result-name .keyword > i {
|
||||
color: #788797;
|
||||
}
|
||||
|
|
@ -242,10 +239,6 @@ a.test-arrow:hover {
|
|||
color: #c5c5c5;
|
||||
}
|
||||
|
||||
.code-attribute {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
:target {
|
||||
background: rgba(255, 236, 164, 0.06);
|
||||
border-right: 3px solid rgba(255, 180, 76, 0.85);
|
||||
|
|
@ -341,7 +334,6 @@ 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 {}
|
||||
|
|
@ -428,16 +420,6 @@ kbd {
|
|||
filter: invert(100);
|
||||
}
|
||||
|
||||
#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 {
|
||||
border-color: #e0e0e0;
|
||||
|
|
@ -471,9 +453,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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,13 @@
|
|||
--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%);
|
||||
}
|
||||
|
||||
.slider {
|
||||
|
|
@ -129,18 +136,12 @@ 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%);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: #111;
|
||||
border-color: #f0f0f0;
|
||||
}
|
||||
|
||||
#crate-search-div::after {
|
||||
|
|
@ -154,10 +155,6 @@ details.rustdoc-toggle > summary::before {
|
|||
filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #008dfd;
|
||||
}
|
||||
|
||||
.stab { background: #314559; }
|
||||
|
||||
.stab.portability > code {
|
||||
|
|
@ -165,11 +162,6 @@ details.rustdoc-toggle > summary::before {
|
|||
background: none;
|
||||
}
|
||||
|
||||
.rightside:not(a),
|
||||
.out-of-band {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.line-numbers :target { background-color: transparent; }
|
||||
|
||||
/* Code highlighting */
|
||||
|
|
@ -197,10 +189,6 @@ a.test-arrow:hover{
|
|||
background-color: #4e8bca;
|
||||
}
|
||||
|
||||
.code-attribute {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
:target {
|
||||
background-color: #494a3d;
|
||||
border-right: 3px solid #bb7410;
|
||||
|
|
@ -301,16 +289,6 @@ kbd {
|
|||
border-color: #ffb900;
|
||||
}
|
||||
|
||||
#copy-path {
|
||||
color: #999;
|
||||
}
|
||||
#copy-path > img {
|
||||
filter: invert(50%);
|
||||
}
|
||||
#copy-path:hover > img {
|
||||
filter: invert(65%);
|
||||
}
|
||||
|
||||
.search-results .result-name span.alias {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -334,9 +312,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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,13 @@
|
|||
--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%);
|
||||
}
|
||||
|
||||
.slider {
|
||||
|
|
@ -125,11 +132,6 @@ body.source .example-wrap pre.rust a {
|
|||
background: #eee;
|
||||
}
|
||||
|
||||
details.rustdoc-toggle > summary.hideme > span,
|
||||
details.rustdoc-toggle > summary::before {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#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%);
|
||||
|
|
@ -141,18 +143,9 @@ details.rustdoc-toggle > summary::before {
|
|||
filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg) brightness(96%) contrast(93%);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #66afe9;
|
||||
}
|
||||
|
||||
.stab { background: #FFF5D6; border-color: #FFC600; }
|
||||
.stab.portability > code { background: none; }
|
||||
|
||||
.rightside:not(a),
|
||||
.out-of-band {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.line-numbers :target { background-color: transparent; }
|
||||
|
||||
/* Code highlighting */
|
||||
|
|
@ -182,10 +175,6 @@ a.test-arrow:hover{
|
|||
background-color: #4e8bca;
|
||||
}
|
||||
|
||||
.code-attribute {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
:target {
|
||||
background: #FDFFD3;
|
||||
border-right: 3px solid #AD7C37;
|
||||
|
|
@ -281,16 +270,6 @@ kbd {
|
|||
border-color: #717171;
|
||||
}
|
||||
|
||||
#copy-path {
|
||||
color: #999;
|
||||
}
|
||||
#copy-path > img {
|
||||
filter: invert(50%);
|
||||
}
|
||||
#copy-path:hover > img {
|
||||
filter: invert(35%);
|
||||
}
|
||||
|
||||
.search-results .result-name span.alias {
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -313,9 +292,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ reload:
|
|||
assert-css: (
|
||||
".search-input",
|
||||
{
|
||||
"border-color": "rgb(240, 240, 240)",
|
||||
"border-color": "rgb(224, 224, 224)",
|
||||
"background-color": "rgb(240, 240, 240)",
|
||||
"color": "rgb(17, 17, 17)",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ goto: file://|DOC_PATH|/test_docs/index.html
|
|||
local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "dark"}
|
||||
reload:
|
||||
|
||||
assert-css: (".search-input", {"border-color": "rgb(240, 240, 240)"})
|
||||
assert-css: (".search-input", {"border-color": "rgb(224, 224, 224)"})
|
||||
click: ".search-input"
|
||||
assert-css: (".search-input", {"border-color": "rgb(0, 141, 253)"})
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue