Rollup merge of #104849 - GuillaumeGomez:source-code-sidebar-css-migration, r=notriddle

Migrate source code elements style to CSS variables

r? ``@notriddle``
This commit is contained in:
Matthias Krüger 2022-11-25 10:44:40 +01:00 committed by GitHub
commit 8babe1c417
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 28 deletions

View File

@ -1343,6 +1343,13 @@ a.test-arrow:hover {
border-bottom: 1px solid var(--border-color);
margin-bottom: 6px;
}
#source-sidebar div.files > a:hover, details.dir-entry summary:hover,
#source-sidebar div.files > a:focus, details.dir-entry summary:focus {
background-color: var(--source-sidebar-background-hover);
}
#source-sidebar div.files > a.selected {
background-color: var(--source-sidebar-background-selected);
}
#sidebar-toggle > button {
font-size: inherit;
font-weight: bold;

View File

@ -84,6 +84,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--crate-search-div-hover-filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg)
brightness(113%) contrast(76%);
--crate-search-hover-border: #e0e0e0;
--source-sidebar-background-selected: #14191f;
--source-sidebar-background-hover: #14191f;
}
h1, h2, h3, h4 {
@ -208,12 +210,8 @@ pre.rust .kw-2, pre.rust .prelude-ty {}
color: #fff;
}
#source-sidebar div.files > a:hover, details.dir-entry summary:hover,
#source-sidebar div.files > a:focus, details.dir-entry summary:focus {
background-color: #14191f;
color: #ffb44c;
}
#source-sidebar div.files > a:focus, details.dir-entry summary:focus,
#source-sidebar div.files > a.selected {
background-color: #14191f;
color: #ffb44c;
}

View File

@ -79,6 +79,8 @@
--crate-search-div-hover-filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg)
brightness(100%) contrast(91%);
--crate-search-hover-border: #2196f3;
--source-sidebar-background-selected: #333;
--source-sidebar-background-hover: #444;
}
.content .item-info::before { color: #ccc; }
@ -105,14 +107,6 @@ details.rustdoc-toggle > summary::before {
color: #888;
}
#source-sidebar div.files > a:hover, details.dir-entry summary:hover,
#source-sidebar div.files > a:focus, details.dir-entry summary:focus {
background-color: #444;
}
#source-sidebar div.files > a.selected {
background-color: #333;
}
.scraped-example-list .scrape-help {
border-color: #aaa;
color: #eee;

View File

@ -76,6 +76,8 @@
--crate-search-div-hover-filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg)
brightness(96%) contrast(93%);
--crate-search-hover-border: #717171;
--source-sidebar-background-selected: #fff;
--source-sidebar-background-hover: #e0e0e0;
}
.content .item-info::before { color: #ccc; }
@ -98,13 +100,6 @@ body.source .example-wrap pre.rust a {
color: #888;
}
#source-sidebar div.files > a:hover, details.dir-entry summary:hover,
#source-sidebar div.files > a:focus, details.dir-entry summary:focus {
background-color: #E0E0E0;
}
#source-sidebar div.files > a.selected {
background-color: #fff;
}
.scraped-example-list .scrape-help {
border-color: #555;
color: #333;

View File

@ -43,16 +43,24 @@ define-function: (
"#source-sidebar details[open] > .files a.selected",
{"color": |color_hover|, "background-color": |background|},
)),
// Without hover or focus.
("assert-css", ("#sidebar-toggle > button", {"background-color": |background_toggle|})),
// With focus.
("focus", "#sidebar-toggle > button"),
("assert-css", ("#sidebar-toggle > button", {"background-color": |background_toggle_hover|})),
("assert-css", (
"#sidebar-toggle > button:focus",
{"background-color": |background_toggle_hover|},
)),
("focus", ".search-input"),
// With hover.
("move-cursor-to", "#sidebar-toggle > button"),
("assert-css", ("#sidebar-toggle > button", {"background-color": |background_toggle_hover|})),
// Without hover.
("assert-css", (
"#sidebar-toggle > button:hover",
{"background-color": |background_toggle_hover|},
)),
// Without hover or focus.
("assert-css", (
"#source-sidebar details[open] > .files a:not(.selected)",
{"color": |color|, "background-color": |background_toggle|},
@ -60,17 +68,37 @@ define-function: (
// With focus.
("focus", "#source-sidebar details[open] > .files a:not(.selected)"),
("wait-for-css", (
"#source-sidebar details[open] > .files a:not(.selected)",
"#source-sidebar details[open] > .files a:not(.selected):focus",
{"color": |color_hover|, "background-color": |background_hover|},
)),
("focus", ".search-input"),
// With hover.
("move-cursor-to", "#source-sidebar details[open] > .files a:not(.selected)"),
("assert-css", (
"#source-sidebar details[open] > .files a:not(.selected)",
"#source-sidebar details[open] > .files a:not(.selected):hover",
{"color": |color_hover|, "background-color": |background_hover|},
)),
// Without hover.
// Without hover or focus.
("assert-css", (
"#source-sidebar .dir-entry summary",
{"color": |color|, "background-color": |background_toggle|},
)),
// With focus.
("focus", "#source-sidebar .dir-entry summary"),
("wait-for-css", (
"#source-sidebar .dir-entry summary:focus",
{"color": |color_hover|, "background-color": |background_hover|},
)),
("focus", ".search-input"),
// With hover.
("move-cursor-to", "#source-sidebar .dir-entry summary"),
("assert-css", (
"#source-sidebar .dir-entry summary:hover",
{"color": |color_hover|, "background-color": |background_hover|},
)),
// Without hover or focus.
("assert-css", (
"#source-sidebar details[open] > .folders > details > summary",
{"color": |color|, "background-color": |background_toggle|},
@ -78,14 +106,14 @@ define-function: (
// With focus.
("focus", "#source-sidebar details[open] > .folders > details > summary"),
("wait-for-css", (
"#source-sidebar details[open] > .folders > details > summary",
"#source-sidebar details[open] > .folders > details > summary:focus",
{"color": |color_hover|, "background-color": |background_hover|},
)),
("focus", ".search-input"),
// With hover.
("move-cursor-to", "#source-sidebar details[open] > .folders > details > summary"),
("assert-css", (
"#source-sidebar details[open] > .folders > details > summary",
"#source-sidebar details[open] > .folders > details > summary:hover",
{"color": |color_hover|, "background-color": |background_hover|},
)),
],