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:
parent
e10201c9bb
commit
d60967bef2
@ -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;
|
||||
|
@ -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
41
src/test/rustdoc-gui/stab-badge.goml
Normal 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)",
|
||||
})
|
Loading…
Reference in New Issue
Block a user