Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleanup css theme #101348

Merged
merged 2 commits into from
Sep 3, 2022
Merged

Cleanup css theme #101348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7fb0a89
Clean up themes CSS
GuillaumeGomez Sep 2, 2022
30bdf54
Update rustdoc-gui tests for search-input border color on dark theme
GuillaumeGomez Sep 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1205,6 +1214,7 @@ a.test-arrow:hover {

.code-attribute {
font-weight: 300;
color: var(--code-attribute-color);
}

.item-spacer {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down
35 changes: 7 additions & 28 deletions src/librustdoc/html/static/css/themes/ayu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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%);
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 {}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down
39 changes: 7 additions & 32 deletions src/librustdoc/html/static/css/themes/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -154,22 +155,13 @@ 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 {
color: #e6e1cf;
background: none;
}

.rightside:not(a),
.out-of-band {
color: grey;
}

.line-numbers :target { background-color: transparent; }

/* Code highlighting */
Expand Down Expand Up @@ -197,10 +189,6 @@ a.test-arrow:hover{
background-color: #4e8bca;
}

.code-attribute {
color: #999;
}

:target {
background-color: #494a3d;
border-right: 3px solid #bb7410;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
}
Expand Down
38 changes: 7 additions & 31 deletions src/librustdoc/html/static/css/themes/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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%);
Expand All @@ -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 */
Expand Down Expand Up @@ -182,10 +175,6 @@ a.test-arrow:hover{
background-color: #4e8bca;
}

.code-attribute {
color: #999;
}

:target {
background: #FDFFD3;
border-right: 3px solid #AD7C37;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/test/rustdoc-gui/search-form-elements.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
},
Expand Down
2 changes: 1 addition & 1 deletion src/test/rustdoc-gui/search-input.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"})

Expand Down