bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

Rollup merge of #105504 - notriddle:notriddle/stab-css, r=GuillaumeGomez

Browse source 
rustdoc: make stability badge CSS more consistent

# Before

![image](https://user-images.githubusercontent.com/1593513/206763667-8e0deb74-be63-4906-8229-9a7eb51725c2.png)

![image](https://user-images.githubusercontent.com/1593513/206764007-6301c0e8-4594-4a41-ba93-105824dffee6.png)

# After

![image](https://user-images.githubusercontent.com/1593513/206763698-e187cee2-3a50-4e48-b7b5-c3cfa41a797d.png)

![image](https://user-images.githubusercontent.com/1593513/206764058-3999ee67-1439-4c98-8216-b90575342aa8.png)

# Description

* They all get rounded corners now. A test case has been added for this, too.

* There are now broadly two kinds of stability badge, where there used to be three: item-info "fat badge", and the "thin badge" in both item tables and in docblocks (which got merged). The fat badges can have icons, while the thin badges can't.

* The old Ayu design doesn't make sense to me. Does anyone know why it was done that way?
This commit is contained in:
Matthias Krüger 2022-12-09 22:31:58 +01:00 • committed by GitHub
commit d0563c64b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/librustdoc/html/static/css/rustdoc.css
View file

@ -212,7 +212,7 @@ pre.rust a,
.mobile-topbar h2 a,
h1 a,
.search-results a,
.item-left .stab,
.stab,
.result-name .primitive > i, .result-name .keyword > i {
color: var(--main-color);
}
@ -960,22 +960,29 @@ so that we can apply CSS-filters to change the arrow color in themes */
}
.item-info .stab {
width: fit-content;
/* This min-height is needed to unify the height of the stab elements because some of them
have emojis.
*/
min-height: 36px;
display: flex;
align-items: center;
white-space: pre-wrap;
}
.stab {
padding: 3px;
margin-bottom: 5px;
}
.item-left .stab {
margin-left: 0.3125em;
}
.stab {
padding: 0 2px;
font-size: 0.875rem;
font-weight: normal;
color: var(--main-color);
background-color: var(--stab-background-color);
width: fit-content;
align-items: center;
white-space: pre-wrap;
border-radius: 3px;
display: inline-flex;
vertical-align: text-bottom;
}
.stab.portability > code {
@ -988,12 +995,6 @@ so that we can apply CSS-filters to change the arrow color in themes */
margin-right: 0.3rem;
}
/* This is to prevent the `.stab` elements to overflow the .docblock elements. */
.docblock .stab {
padding: 0 0.125em;
margin-bottom: 0;
}
/* Black one-pixel outline around emoji shapes */
.emoji {
text-shadow:
@ -1003,16 +1004,6 @@ so that we can apply CSS-filters to change the arrow color in themes */
0 -1px 0 black;
}
.item-left .stab {
border-radius: 3px;
display: inline-block;
line-height: 1.2;
margin-bottom: 0;
margin-left: 0.3125em;
padding: 2px;
vertical-align: text-bottom;
}
.module-item.unstable,
.import-item.unstable {
opacity: 0.65;

5
src/librustdoc/html/static/css/themes/ayu.css
View file

@ -160,11 +160,6 @@ body.source .example-wrap pre.rust a {
background: #333;
}
.module-item .stab,
.import-item .stab {
color: #000;
}
.result-name .primitive > i, .result-name .keyword > i {
color: #788797;
}

41
src/test/rustdoc-gui/stab-badge.goml Normal file
View file

@ -0,0 +1,41 @@
// All stability badges should have rounded corners and colored backgrounds.
goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
show-text: true
define-function: (
"check-badge",
(theme, background, color),
[
("local-storage", {"rustdoc-use-system-theme": "false", "rustdoc-theme": |theme|}),
("goto", "file://" + |DOC_PATH| + "/test_docs/index.html"),
("assert", (".docblock .stab")),
("assert", (".item-table .stab")),
("assert-css", (".stab", {
"border-radius": "3px",
"color": |color|,
"background-color": |background|,
})),
("goto", "file://" + |DOC_PATH| + "/test_docs/fn.replaced_function.html"),
("assert", (".item-info .stab")),
("assert-css", (".stab", {
"border-radius": "3px",
"color": |color|,
"background-color": |background|,
})),
]
)
call-function: ("check-badge", {
"theme": "ayu",
"color": "rgb(197, 197, 197)",
"background": "rgb(49, 69, 89)",
})
call-function: ("check-badge", {
"theme": "dark",
"color": "rgb(221, 221, 221)",
"background": "rgb(49, 69, 89)",
})
call-function: ("check-badge", {
"theme": "light",
"color": "rgb(0, 0, 0)",
"background": "rgb(255, 245, 214)",
})