rustdoc: make stability badge CSS more consistent

* 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.
This commit is contained in:
Michael Howell 2022-12-09 10:40:49 -07:00
parent e10201c9bb
commit d60967bef2
3 changed files with 54 additions and 27 deletions

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;

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;
}

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)",
})