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

Jump to bottom

Cleanup rustdoc themes #100494

Merged
merged 3 commits into from
Aug 19, 2022
Merged

Cleanup rustdoc themes #100494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d968a1
Simplify rustdoc themes by relying more on CSS variables
GuillaumeGomez Aug 13, 2022
9898793
Update existing rustdoc-gui tests and add a new one
GuillaumeGomez Aug 13, 2022
09396fc
Remove unused CSS rule
GuillaumeGomez Aug 18, 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
69 changes: 20 additions & 49 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 @@ -693,8 +693,13 @@ h2.location a {
flex-grow: 1;
margin: 0px;
padding: 0px;
/* 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;
jsha marked this conversation as resolved.
Show resolved Hide resolved
/* Then override it with `anywhere`, which is required to make non-Safari browsers break
more aggressively when we want them to. */
overflow-wrap: anywhere;
background-color: var(--main-background-color);
}

.in-band > code, .in-band > .code-header {
Expand Down Expand Up @@ -731,13 +736,13 @@ pre, .rustdoc.source .example-wrap {

.docblock table td {
padding: .5em;
border: 1px dashed;
border: 1px dashed var(--border-color);
}

.docblock table th {
padding: .5em;
text-align: left;
border: 1px solid;
border: 1px solid var(--border-color);
}

.fields + table {
Expand Down Expand Up @@ -835,20 +840,6 @@ nav.sub {
.source nav.sub {
margin-left: 32px;
}
nav.main {
padding: 20px 0;
text-align: center;
}
nav.main .current {
border-top: 1px solid;
border-bottom: 1px solid;
}
nav.main .separator {
border: 1px solid;
display: inline-block;
height: 23px;
margin: 0 20px;
}
nav.sum { text-align: right; }
nav.sub form { display: inline; }

Expand Down Expand Up @@ -974,7 +965,7 @@ table,
max-width: 100%;
/* contents can overflow because of max-width limit, then show ellipsis */
text-overflow: ellipsis;
border: 1px solid;
border: 1px solid var(--border-color);
border-radius: 4px;
outline: none;
cursor: pointer;
Expand Down Expand Up @@ -1027,11 +1018,12 @@ so that we can apply CSS-filters to change the arrow color in themes */
-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%;
background-color: var(--button-background-color);
}

.search-results {
Expand Down Expand Up @@ -1087,7 +1079,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
display: block;
margin-top: 7px;
border-radius: 3px;
border: 1px solid;
border: 1px solid var(--border-color);
font-size: 1rem;
}

Expand All @@ -1096,7 +1088,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
content: '';
position: absolute;
right: 11px;
border: solid;
border: solid var(--border-color);
border-width: 1px 1px 0 0;
display: inline-block;
padding: 4px;
Expand Down Expand Up @@ -1132,13 +1124,13 @@ so that we can apply CSS-filters to change the arrow color in themes */
text-align: center;
display: block;
margin: 10px 0;
border-bottom: 1px solid;
border-bottom: 1px solid var(--border-color);
padding-bottom: 4px;
margin-bottom: 6px;
}
#help-button span.bottom {
clear: both;
border-top: 1px solid;
border-top: 1px solid var(--border-color);
}
.side-by-side {
text-align: initial;
Expand Down Expand Up @@ -1331,6 +1323,7 @@ h3.variant {
border-radius: 6px;
margin-left: 5px;
font-size: 1rem;
border: 1px solid var(--border-color);
}

.tooltip.ignore::after {
Expand Down Expand Up @@ -1496,7 +1489,7 @@ pre.rust {
#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 {
Expand Down Expand Up @@ -1524,11 +1517,12 @@ pre.rust {

#copy-path {
height: 34px;
background-color: var(--main-background-color);
}
#settings-menu > a, #help-button > button, #copy-path {
padding: 5px;
width: 33px;
border: 1px solid;
border: 1px solid var(--border-color);
border-radius: 2px;
cursor: pointer;
}
Expand All @@ -1539,6 +1533,7 @@ pre.rust {
padding: 5px;
height: 100%;
display: block;
background-color: var(--button-background-color);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is not needed. It's redundant with the ruleset at line 1540.

}

@keyframes rotating {
Expand Down Expand Up @@ -1588,37 +1583,13 @@ input:checked + .slider {
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;
}
Expand Down
65 changes: 3 additions & 62 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 @@ -14,6 +14,8 @@ 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;
}

.slider {
Expand All @@ -36,10 +38,6 @@ h4 {
border: none;
}

.in-band {
background-color: #0f1419;
}

.docblock code {
color: #ffb454;
}
Expand Down Expand Up @@ -84,10 +82,6 @@ pre, .rustdoc.source .example-wrap {
border-right: 1px solid #ffb44c;
}

.docblock table td, .docblock table th {
border-color: #5c6773;
}

.search-results a:hover {
background-color: #777;
}
Expand Down Expand Up @@ -151,13 +145,6 @@ pre, .rustdoc.source .example-wrap {
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;
}
Expand All @@ -182,17 +169,6 @@ details.rustdoc-toggle > summary::before {
filter: invert(100%);
}

.search-input {
background-color: #141920;
border-color: #424c57;
}

#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: #5c6773 !important;
}
#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%);
Expand All @@ -205,7 +181,7 @@ details.rustdoc-toggle > summary::before {
}

.search-input {
color: #ffffff;
color: #fff;
}

.module-item .stab,
Expand Down Expand Up @@ -333,7 +309,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
.tooltip::after {
background-color: #314559;
color: #c5c5c5;
border: 1px solid #5c6773;
}

.tooltip::before {
Expand All @@ -342,11 +317,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 {
Expand Down Expand Up @@ -449,35 +419,20 @@ a.result-keyword:focus {}
.sidebar a.current.tymethod {}
.sidebar a.current.keyword {}

@media (max-width: 700px) {
.sidebar-elems {
border-right-color: #5c6773;
}
}

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;
color: #fff;
}

#settings-menu > a img {
filter: invert(100);
}

.popover, .popover::before,
#help-button span.top, #help-button span.bottom {
border-color: #5c6773;
}

#copy-path {
color: #fff;
}
Expand All @@ -493,19 +448,6 @@ kbd {
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;
}
Expand All @@ -515,7 +457,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 {
Expand Down
Loading