mathieu/os-rust
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rollup merge of #104014 - GuillaumeGomez:run-button-css-var, r=notriddle

Browse source 
Migrate test-arrow to CSS variables

There should be no UI changes. I kept both `color` and `background-color` properties even though only the ayu theme is actually completely making use of them on hover.

r? ``@notriddle``
This commit is contained in:
Matthias Krüger 2022-11-06 08:35:27 +01:00 • committed by GitHub
commit ef0d79f865
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 69 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1204,6 +1204,12 @@ a.test-arrow {
top: 5px;
right: 5px;
z-index: 1;
color: var(--test-arrow-color);
background-color: var(--test-arrow-background-color);
}
a.test-arrow:hover {
color: var(--test-arrow-hover-color);
background-color: var(--test-arrow-hover-background-color);
}
.example-wrap:hover .test-arrow {
visibility: visible;

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

@ -59,6 +59,10 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--example-line-numbers-border-color: none;
--src-line-numbers-span-color: #5c6773;
--src-line-number-highlighted-background-color: rgba(255, 236, 164, 0.06);
--test-arrow-color: #788797;
--test-arrow-background-color: rgba(57, 175, 215, 0.09);
--test-arrow-hover-color: #c5c5c5;
--test-arrow-hover-background-color: rgba(57, 175, 215, 0.368);
}
.slider {
@ -172,18 +176,6 @@ details.rustdoc-toggle > summary::before {
color: #788797;
}
a.test-arrow {
font-size: 100%;
color: #788797;
border-radius: 4px;
background-color: rgba(57, 175, 215, 0.09);
}
a.test-arrow:hover {
background-color: rgba(57, 175, 215, 0.368);
color: #c5c5c5;
}
:target {
background: rgba(255, 236, 164, 0.06);
border-right: 3px solid rgba(255, 180, 76, 0.85);

13
src/librustdoc/html/static/css/themes/dark.css
View file

@ -54,6 +54,10 @@
--example-line-numbers-border-color: #4a4949;
--src-line-numbers-span-color: #3b91e2;
--src-line-number-highlighted-background-color: #0a042f;
--test-arrow-color: #dedede;
--test-arrow-background-color: rgba(78, 139, 202, 0.2);
--test-arrow-hover-color: #dedede;
--test-arrow-hover-background-color: #4e8bca;
}
.slider {
@ -94,15 +98,6 @@ details.rustdoc-toggle > summary::before {
filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%);
}
a.test-arrow {
color: #dedede;
background-color: rgba(78, 139, 202, 0.2);
}
a.test-arrow:hover{
background-color: #4e8bca;
}
:target {
background-color: #494a3d;
border-right: 3px solid #bb7410;

13
src/librustdoc/html/static/css/themes/light.css
View file

@ -54,6 +54,10 @@
--example-line-numbers-border-color: #c7c7c7;
--src-line-numbers-span-color: #c67e2d;
--src-line-number-highlighted-background-color: #fdffd3;
--test-arrow-color: #f5f5f5;
--test-arrow-background-color: rgba(78, 139, 202, 0.2);
--test-arrow-hover-color: #f5f5f5;
--test-arrow-hover-background-color: #4e8bca;
}
.slider {
@ -89,15 +93,6 @@ body.source .example-wrap pre.rust a {
filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg) brightness(96%) contrast(93%);
}
a.test-arrow {
color: #f5f5f5;
background-color: rgba(78, 139, 202, 0.2);
}
a.test-arrow:hover{
background-color: #4e8bca;
}
:target {
background: #FDFFD3;
border-right: 3px solid #AD7C37;

55
src/test/rustdoc-gui/run-on-hover.goml
View file

@ -1,7 +1,54 @@
// Example code blocks sometimes have a "Run" button to run them on the
// Playground. That button is hidden until the user hovers over the code block.
// This test checks that it is hidden, and that it shows on hover.
// This test checks that it is hidden, and that it shows on hover. It also
// checks for its color.
goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
assert-css: (".test-arrow", {"visibility": "hidden"})
move-cursor-to: ".example-wrap"
assert-css: (".test-arrow", {"visibility": "visible"})
show-text: true
define-function: (
"check-run-button",
(theme, color, background, hover_color, hover_background),
[
("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
("reload"),
("assert-css", (".test-arrow", {"visibility": "hidden"})),
("move-cursor-to", ".example-wrap"),
("assert-css", (".test-arrow", {
"visibility": "visible",
"color": |color|,
"background-color": |background|,
"font-size": "22px",
"border-radius": "5px",
})),
("move-cursor-to", ".test-arrow"),
("assert-css", (".test-arrow:hover", {
"visibility": "visible",
"color": |hover_color|,
"background-color": |hover_background|,
"font-size": "22px",
"border-radius": "5px",
})),
],
)
call-function: ("check-run-button", {
"theme": "ayu",
"color": "rgb(120, 135, 151)",
"background": "rgba(57, 175, 215, 0.09)",
"hover_color": "rgb(197, 197, 197)",
"hover_background": "rgba(57, 175, 215, 0.37)",
})
call-function: ("check-run-button", {
"theme": "dark",
"color": "rgb(222, 222, 222)",
"background": "rgba(78, 139, 202, 0.2)",
"hover_color": "rgb(222, 222, 222)",
"hover_background": "rgb(78, 139, 202)",
})
call-function: ("check-run-button", {
"theme": "light",
"color": "rgb(245, 245, 245)",
"background": "rgba(78, 139, 202, 0.2)",
"hover_color": "rgb(245, 245, 245)",
"hover_background": "rgb(78, 139, 202)",
})