Rollup merge of #100494 - GuillaumeGomez:cleanup-themes, r=jsha

Cleanup rustdoc themes

This PR continues our work to simplify the rustdoc themes by relying more on CSS variables. Interestingly enough, this time it allowed me to realize that we were having a lot of different colors for borders even though the difference is unnoticeable. I used this opportunity to unify them.

The live demo is [here](https://rustdoc.crud.net/imperio/cleanup-themes/std/index.html).

r? `@jsha`

8 files changed, 275 insertions, 245 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 710ca3ee7c7..8d0bcb7519b 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -693,8 +693,13 @@ h2.location a {
 	flex-grow: 1;
 	margin: 0px;
 	padding: 0px;
+	/* We use overflow-wrap: break-word for Safari, which doesn't recognize
+	   `anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */
 	overflow-wrap: break-word;
+	/* Then override it with `anywhere`, which is required to make non-Safari browsers break
+	   more aggressively when we want them to. */
 	overflow-wrap: anywhere;
+	background-color: var(--main-background-color);
 }
 
 .in-band > code, .in-band > .code-header {
@@ -731,13 +736,13 @@ pre, .rustdoc.source .example-wrap {
 
 .docblock table td {
 	padding: .5em;
-	border: 1px dashed;
+	border: 1px dashed var(--border-color);
 }
 
 .docblock table th {
 	padding: .5em;
 	text-align: left;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 }
 
 .fields + table {
@@ -835,20 +840,6 @@ nav.sub {
 .source nav.sub {
 	margin-left: 32px;
 }
-nav.main {
-	padding: 20px 0;
-	text-align: center;
-}
-nav.main .current {
-	border-top: 1px solid;
-	border-bottom: 1px solid;
-}
-nav.main .separator {
-	border: 1px solid;
-	display: inline-block;
-	height: 23px;
-	margin: 0 20px;
-}
 nav.sum { text-align: right; }
 nav.sub form { display: inline; }
 
@@ -974,7 +965,7 @@ table,
 	max-width: 100%;
 	/* contents can overflow because of max-width limit, then show ellipsis */
 	text-overflow: ellipsis;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	border-radius: 4px;
 	outline: none;
 	cursor: pointer;
@@ -1027,11 +1018,12 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	-moz-box-sizing: border-box !important;
 	box-sizing: border-box !important;
 	outline: none;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	border-radius: 2px;
 	padding: 8px;
 	font-size: 1rem;
 	width: 100%;
+	background-color: var(--button-background-color);
 }
 
 .search-results {
@@ -1087,7 +1079,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	display: block;
 	margin-top: 7px;
 	border-radius: 3px;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	font-size: 1rem;
 }
 
@@ -1096,7 +1088,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	content: '';
 	position: absolute;
 	right: 11px;
-	border: solid;
+	border: solid var(--border-color);
 	border-width: 1px 1px 0 0;
 	display: inline-block;
 	padding: 4px;
@@ -1132,13 +1124,13 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	text-align: center;
 	display: block;
 	margin: 10px 0;
-	border-bottom: 1px solid;
+	border-bottom: 1px solid var(--border-color);
 	padding-bottom: 4px;
 	margin-bottom: 6px;
 }
 #help-button span.bottom {
 	clear: both;
-	border-top: 1px solid;
+	border-top: 1px solid var(--border-color);
 }
 .side-by-side {
 	text-align: initial;
@@ -1331,6 +1323,7 @@ h3.variant {
 	border-radius: 6px;
 	margin-left: 5px;
 	font-size: 1rem;
+	border: 1px solid var(--border-color);
 }
 
 .tooltip.ignore::after {
@@ -1496,7 +1489,7 @@ pre.rust {
 #source-sidebar > .title {
 	font-size: 1.5rem;
 	text-align: center;
-	border-bottom: 1px solid;
+	border-bottom: 1px solid var(--border-color);
 	margin-bottom: 6px;
 }
 #sidebar-toggle > button {
@@ -1524,11 +1517,12 @@ pre.rust {
 
 #copy-path {
 	height: 34px;
+	background-color: var(--main-background-color);
 }
 #settings-menu > a, #help-button > button, #copy-path {
 	padding: 5px;
 	width: 33px;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	border-radius: 2px;
 	cursor: pointer;
 }
@@ -1539,6 +1533,7 @@ pre.rust {
 	padding: 5px;
 	height: 100%;
 	display: block;
+	background-color: var(--button-background-color);
 }
 
 @keyframes rotating {
@@ -1588,37 +1583,13 @@ input:checked + .slider {
 	border: 0;
 }
 
-#theme-choices {
-	display: none;
-	position: absolute;
-	left: 0;
-	top: 28px;
-	border: 1px solid;
-	border-radius: 3px;
-	z-index: 1;
-	cursor: pointer;
-}
-
-#theme-choices > button {
-	border: none;
-	width: 100%;
-	padding: 4px 8px;
-	text-align: center;
-	background: rgba(0,0,0,0);
-	overflow-wrap: normal;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top: 1px solid;
-}
-
 kbd {
 	display: inline-block;
 	padding: 3px 5px;
 	font: 15px monospace;
 	line-height: 10px;
 	vertical-align: middle;
-	border: solid 1px;
+	border: solid 1px var(--border-color);
 	border-radius: 3px;
 	cursor: default;
 }
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 4dfb64abbeb..e7ccd402dd0 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -14,6 +14,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--scrollbar-thumb-background-color: #5c6773;
 	--scrollbar-color: #5c6773 #24292f;
 	--headings-border-bottom-color: #5c6773;
+	--border-color: #5c6773;
+	--button-background-color: #141920;
 }
 
 .slider {
@@ -36,10 +38,6 @@ h4 {
 	border: none;
 }
 
-.in-band {
-	background-color: #0f1419;
-}
-
 .docblock code {
 	color: #ffb454;
 }
@@ -84,10 +82,6 @@ pre, .rustdoc.source .example-wrap {
 	border-right: 1px solid #ffb44c;
 }
 
-.docblock table td, .docblock table th {
-	border-color: #5c6773;
-}
-
 .search-results a:hover {
 	background-color: #777;
 }
@@ -151,13 +145,6 @@ pre, .rustdoc.source .example-wrap {
 pre.rust .comment { color: #788797; }
 pre.rust .doccomment { color: #a1ac88; }
 
-nav.main .current {
-	border-top-color: #5c6773;
-	border-bottom-color: #5c6773;
-}
-nav.main .separator {
-	border: 1px solid #5c6773;
-}
 a {
 	color: #39AFD7;
 }
@@ -182,17 +169,6 @@ details.rustdoc-toggle > summary::before {
 	filter: invert(100%);
 }
 
-.search-input {
-	background-color: #141920;
-	border-color: #424c57;
-}
-
-#crate-search {
-	/* Without the `!important`, the border-color is ignored for `<select>`...
-	   It cannot be in the group above because `.search-input` has a different border color on
-	   hover. */
-	border-color: #5c6773 !important;
-}
 #crate-search-div::after {
 	/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 	filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) brightness(94%) contrast(94%);
@@ -205,7 +181,7 @@ details.rustdoc-toggle > summary::before {
 }
 
 .search-input {
-	color: #ffffff;
+	color: #fff;
 }
 
 .module-item .stab,
@@ -333,7 +309,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 .tooltip::after {
 	background-color: #314559;
 	color: #c5c5c5;
-	border: 1px solid #5c6773;
 }
 
 .tooltip::before {
@@ -342,11 +317,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 
 .notable-traits-tooltiptext {
 	background-color: #314559;
-	border-color: #5c6773;
-}
-
-.notable-traits-tooltiptext .notable {
-	border-bottom-color: #5c6773;
 }
 
 #titles > button.selected {
@@ -449,23 +419,13 @@ a.result-keyword:focus {}
 .sidebar a.current.tymethod {}
 .sidebar a.current.keyword {}
 
-@media (max-width: 700px) {
-	.sidebar-elems {
-		border-right-color: #5c6773;
-	}
-}
-
 kbd {
 	color: #c5c5c5;
 	background-color: #314559;
-	border-color: #5c6773;
-	border-bottom-color: #5c6773;
 	box-shadow: inset 0 -1px 0 #5c6773;
 }
 
 #settings-menu > a, #help-button > button {
-	border-color: #5c6773;
-	background-color: #0f1419;
 	color: #fff;
 }
 
@@ -473,11 +433,6 @@ kbd {
 	filter: invert(100);
 }
 
-.popover, .popover::before,
-#help-button span.top, #help-button span.bottom {
-	border-color: #5c6773;
-}
-
 #copy-path {
 	color: #fff;
 }
@@ -493,19 +448,6 @@ kbd {
 	border-color: #e0e0e0;
 }
 
-#theme-choices {
-	border-color: #5c6773;
-	background-color: #0f1419;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top-color: #5c6773;
-}
-
-#theme-choices > button:hover, #theme-choices > button:focus {
-	background-color: rgba(110, 110, 110, 0.33);
-}
-
 .search-results .result-name span.alias {
 	color: #c5c5c5;
 }
@@ -515,7 +457,6 @@ kbd {
 
 #source-sidebar > .title {
 	color: #fff;
-	border-bottom-color: #5c6773;
 }
 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 39f83c99808..1fcda22b6f4 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -9,6 +9,8 @@
 	--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
 	--scrollbar-color: rgba(32,34,37,.6) #5a5a5a;
 	--headings-border-bottom-color: #d2d2d2;
+	--border-color: #e0e0e0;
+	--button-background-color: #f0f0f0;
 }
 
 .slider {
@@ -21,10 +23,6 @@ input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
 
-.in-band {
-	background-color: #353535;
-}
-
 .rust-logo {
 	filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
@@ -42,10 +40,6 @@ input:focus + .slider {
 	background-color: #0a042f !important;
 }
 
-.docblock table td, .docblock table th {
-	border-color: #ddd;
-}
-
 .search-results a:hover {
 	background-color: #777;
 }
@@ -127,14 +121,6 @@ a.result-keyword:focus { background-color: #884719; }
 pre.rust .comment { color: #8d8d8b; }
 pre.rust .doccomment { color: #8ca375; }
 
-nav.main .current {
-	border-top-color: #eee;
-	border-bottom-color: #eee;
-}
-nav.main .separator {
-	border-color: #eee;
-}
-
 a {
 	color: #D2991D;
 }
@@ -154,16 +140,9 @@ details.rustdoc-toggle > summary::before {
 
 .search-input {
 	color: #111;
-	background-color: #f0f0f0;
 	border-color: #f0f0f0;
 }
 
-#crate-search {
-	/* Without the `!important`, the border-color is ignored for `<select>`...
-	   It cannot be in the group above because `.search-input` has a different border color on
-	   hover. */
-	border-color: #d2d2d2 !important;
-}
 #crate-search-div::after {
 	/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 	filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg) brightness(90%) contrast(90%);
@@ -175,10 +154,6 @@ details.rustdoc-toggle > summary::before {
 	filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%);
 }
 
-.search-input {
-	border-color: #e0e0e0;
-}
-
 .search-input:focus {
 	border-color: #008dfd;
 }
@@ -296,11 +271,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 
 .notable-traits-tooltiptext {
 	background-color: #111;
-	border-color: #777;
-}
-
-.notable-traits-tooltiptext .notable {
-	border-bottom-color: #d2d2d2;
 }
 
 #titles > button:not(.selected) {
@@ -317,23 +287,13 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	color: #888;
 }
 
-@media (max-width: 700px) {
-	.sidebar-elems {
-		border-right-color: #000;
-	}
-}
-
 kbd {
 	color: #000;
 	background-color: #fafbfc;
-	border-color: #d1d5da;
-	border-bottom-color: #c6cbd1;
 	box-shadow: inset 0 -1px 0 #c6cbd1;
 }
 
 #settings-menu > a, #help-button > button {
-	border-color: #e0e0e0;
-	background: #f0f0f0;
 	color: #000;
 }
 
@@ -342,11 +302,6 @@ kbd {
 	border-color: #ffb900;
 }
 
-.popover, .popover::before,
-#help-button span.top, #help-button span.bottom {
-	border-color: #d2d2d2;
-}
-
 #copy-path {
 	color: #999;
 }
@@ -357,19 +312,6 @@ kbd {
 	filter: invert(65%);
 }
 
-#theme-choices {
-	border-color: #e0e0e0;
-	background-color: #353535;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top-color: #e0e0e0;
-}
-
-#theme-choices > button:hover, #theme-choices > button:focus {
-	background-color: #4e4e4e;
-}
-
 .search-results .result-name span.alias {
 	color: #fff;
 }
@@ -377,9 +319,6 @@ kbd {
 	color: #ccc;
 }
 
-#source-sidebar > .title {
-	border-bottom-color: #ccc;
-}
 #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;
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index 5698088c790..7139c199729 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -9,6 +9,8 @@
 	--scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6);
 	--scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
 	--headings-border-bottom-color: #ddd;
+	--border-color: #e0e0e0;
+	--button-background-color: #fff;
 }
 
 .slider {
@@ -21,10 +23,6 @@ input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
 
-.in-band {
-	background-color: white;
-}
-
 .rust-logo {
 	/* This rule exists to force other themes to explicitly style the logo.
 	 * Rustdoc has a custom linter for this purpose.
@@ -41,10 +39,6 @@ input:focus + .slider {
 	background-color: #FDFFD3 !important;
 }
 
-.docblock table td, .docblock table th {
-	border-color: #ddd;
-}
-
 .search-results a:hover {
 	background-color: #ddd;
 }
@@ -123,14 +117,6 @@ a.result-keyword:focus { background-color: #afc6e4; }
 .sidebar a.current.tymethod { color: #a67736; }
 .sidebar a.current.keyword { color: #356da4; }
 
-nav.main .current {
-	border-top-color: #000;
-	border-bottom-color: #000;
-}
-nav.main .separator {
-	border: 1px solid #000;
-}
-
 a {
 	color: #3873AD;
 }
@@ -144,16 +130,6 @@ details.rustdoc-toggle > summary::before {
 	color: #999;
 }
 
-.search-input {
-	background-color: white;
-	border-color: #e0e0e0;
-}
-#crate-search {
-	/* Without the `!important`, the border-color is ignored for `<select>`...
-	   It cannot be in the group above because `.search-input` has a different border color on
-	   hover. */
-	border-color: #e0e0e0 !important;
-}
 #crate-search-div::after {
 	/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 	filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg) brightness(114%) contrast(76%);
@@ -279,11 +255,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 
 .notable-traits-tooltiptext {
 	background-color: #eee;
-	border-color: #999;
-}
-
-.notable-traits-tooltiptext .notable {
-	border-bottom-color: #DDDDDD;
 }
 
 #titles > button:not(.selected) {
@@ -300,35 +271,17 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	color: #888;
 }
 
-@media (max-width: 700px) {
-	.sidebar-elems {
-		border-right-color: #000;
-	}
-}
-
 kbd {
 	color: #000;
 	background-color: #fafbfc;
-	border-color: #d1d5da;
-	border-bottom-color: #c6cbd1;
 	box-shadow: inset 0 -1px 0 #c6cbd1;
 }
 
-#settings-menu > a, #help-button > button {
-	border-color: #e0e0e0;
-	background-color: #fff;
-}
-
 #settings-menu > a:hover, #settings-menu > a:focus,
 #help-button > button:hover, #help-button > button:focus {
 	border-color: #717171;
 }
 
-.popover, .popover::before,
-#help-button span.top, #help-button span.bottom {
-	border-color: #e0e0e0;
-}
-
 #copy-path {
 	color: #999;
 }
@@ -339,19 +292,6 @@ kbd {
 	filter: invert(35%);
 }
 
-#theme-choices {
-	border-color: #ccc;
-	background-color: #fff;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top-color: #e0e0e0;
-}
-
-#theme-choices > button:hover, #theme-choices > button:focus {
-	background-color: #eee;
-}
-
 .search-results .result-name span.alias {
 	color: #000;
 }
@@ -359,9 +299,6 @@ kbd {
 	color: #999;
 }
 
-#source-sidebar > .title {
-	border-bottom-color: #ccc;
-}
 #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;
diff --git a/src/test/rustdoc-gui/pocket-menu.goml b/src/test/rustdoc-gui/pocket-menu.goml
index 782526e29f4..71d514648ba 100644
--- a/src/test/rustdoc-gui/pocket-menu.goml
+++ b/src/test/rustdoc-gui/pocket-menu.goml
@@ -56,7 +56,7 @@ reload:
 click: "#help-button"
 assert-css: (
     "#help-button .popover",
-    {"display": "block", "border-color": "rgb(210, 210, 210)"},
+    {"display": "block", "border-color": "rgb(224, 224, 224)"},
 )
 compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-color"])
 compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])
diff --git a/src/test/rustdoc-gui/search-filter.goml b/src/test/rustdoc-gui/search-filter.goml
index b12eddfd12a..35d7ca480ca 100644
--- a/src/test/rustdoc-gui/search-filter.goml
+++ b/src/test/rustdoc-gui/search-filter.goml
@@ -69,7 +69,7 @@ click: "#settings-menu"
 wait-for: "#settings"
 click: "#theme-dark"
 wait-for-css: ("#crate-search", {
-    "border": "1px solid rgb(210, 210, 210)",
+    "border": "1px solid rgb(224, 224, 224)",
     "color": "rgb(221, 221, 221)",
     "background-color": "rgb(53, 53, 53)",
 })
diff --git a/src/test/rustdoc-gui/search-form-elements.goml b/src/test/rustdoc-gui/search-form-elements.goml
new file mode 100644
index 00000000000..c35a86ccd1c
--- /dev/null
+++ b/src/test/rustdoc-gui/search-form-elements.goml
@@ -0,0 +1,243 @@
+// This test ensures that the elements in ".search-form" have the expected display.
+goto: file://|DOC_PATH|/test_docs/index.html
+show-text: true
+
+// Ayu theme
+local-storage: {
+    "rustdoc-theme": "ayu",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(92, 103, 115)",
+        "background-color": "rgb(20, 25, 32)",
+        "color": "rgb(255, 255, 255)",
+    },
+)
+focus: ".search-input"
+// Nothing should change.
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(92, 103, 115)",
+        "background-color": "rgb(20, 25, 32)",
+        "color": "rgb(255, 255, 255)",
+    },
+)
+
+assert-css: (
+    "#help-button",
+    {"border-color": "rgb(197, 197, 197)"},
+)
+assert-css: (
+    "#help-button > button",
+    {
+        "color": "rgb(255, 255, 255)",
+        "border-color": "rgb(92, 103, 115)",
+        "background-color": "rgb(20, 25, 32)",
+    },
+)
+move-cursor-to: "#help-button"
+assert-css: (
+    "#help-button:hover",
+    {"border-color": "rgb(197, 197, 197)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#help-button:hover > button",
+    {
+        "color": "rgb(255, 255, 255)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(20, 25, 32)",
+    },
+)
+
+assert-css: (
+    "#settings-menu",
+    {"border-color": "rgb(197, 197, 197)"},
+)
+assert-css: (
+    "#settings-menu > a",
+    {
+        "color": "rgb(255, 255, 255)",
+        "border-color": "rgb(92, 103, 115)",
+        "background-color": "rgb(20, 25, 32)",
+    },
+)
+move-cursor-to: "#settings-menu"
+assert-css: (
+    "#settings-menu:hover",
+    {"border-color": "rgb(197, 197, 197)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#settings-menu:hover > a",
+    {
+        "color": "rgb(255, 255, 255)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(20, 25, 32)",
+    },
+)
+
+// Dark theme
+local-storage: {
+    "rustdoc-theme": "dark",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(240, 240, 240)",
+        "background-color": "rgb(240, 240, 240)",
+        "color": "rgb(17, 17, 17)",
+    },
+)
+focus: ".search-input"
+// Only "border-color" should change.
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(0, 141, 253)",
+        "background-color": "rgb(240, 240, 240)",
+        "color": "rgb(17, 17, 17)",
+    },
+)
+
+assert-css: (
+    "#help-button",
+    {"border-color": "rgb(221, 221, 221)"},
+)
+assert-css: (
+    "#help-button > button",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(240, 240, 240)",
+    },
+)
+move-cursor-to: "#help-button"
+assert-css: (
+    "#help-button:hover",
+    {"border-color": "rgb(221, 221, 221)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#help-button:hover > button",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(255, 185, 0)",
+        "background-color": "rgb(240, 240, 240)",
+    },
+)
+
+assert-css: (
+    "#settings-menu",
+    {"border-color": "rgb(221, 221, 221)"},
+)
+assert-css: (
+    "#settings-menu > a",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(240, 240, 240)",
+    },
+)
+move-cursor-to: "#settings-menu"
+assert-css: (
+    "#settings-menu:hover",
+    {"border-color": "rgb(221, 221, 221)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#settings-menu:hover > a",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(255, 185, 0)",
+        "background-color": "rgb(240, 240, 240)",
+    },
+)
+
+// Light theme
+local-storage: {
+    "rustdoc-theme": "light",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(255, 255, 255)",
+        "color": "rgb(0, 0, 0)",
+    },
+)
+focus: ".search-input"
+// Nothing should change.
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(102, 175, 233)",
+        "background-color": "rgb(255, 255, 255)",
+        "color": "rgb(0, 0, 0)",
+    },
+)
+
+assert-css: (
+    "#help-button",
+    {"border-color": "rgb(0, 0, 0)"},
+)
+assert-css: (
+    "#help-button > button",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(255, 255, 255)",
+    },
+)
+move-cursor-to: "#help-button"
+assert-css: (
+    "#help-button:hover",
+    {"border-color": "rgb(0, 0, 0)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#help-button:hover > button",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(113, 113, 113)",
+        "background-color": "rgb(255, 255, 255)",
+    },
+)
+
+assert-css: (
+    "#settings-menu",
+    {"border-color": "rgb(0, 0, 0)"},
+)
+assert-css: (
+    "#settings-menu > a",
+    {
+        "color": "rgb(56, 115, 173)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(255, 255, 255)",
+    },
+)
+move-cursor-to: "#settings-menu"
+assert-css: (
+    "#settings-menu:hover",
+    {"border-color": "rgb(0, 0, 0)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#settings-menu:hover > a",
+    {
+        "color": "rgb(56, 115, 173)",
+        "border-color": "rgb(113, 113, 113)",
+        "background-color": "rgb(255, 255, 255)",
+    },
+)
diff --git a/src/test/rustdoc-gui/search-input.goml b/src/test/rustdoc-gui/search-input.goml
index 44123b702df..6903e1a1bf5 100644
--- a/src/test/rustdoc-gui/search-input.goml
+++ b/src/test/rustdoc-gui/search-input.goml
@@ -3,9 +3,8 @@ goto: file://|DOC_PATH|/test_docs/index.html
 local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "dark"}
 reload:
 
-assert-css: (".search-input", {"border-color": "rgb(224, 224, 224)"})
+assert-css: (".search-input", {"border-color": "rgb(240, 240, 240)"})
 click: ".search-input"
-focus: ".search-input"
 assert-css: (".search-input", {"border-color": "rgb(0, 141, 253)"})
 
 local-storage: {"rustdoc-theme": "light"}
@@ -18,6 +17,6 @@ assert-css: (".search-input", {"border-color": "rgb(102, 175, 233)"})
 local-storage: {"rustdoc-theme": "ayu"}
 reload:
 
-assert-css: (".search-input", {"border-color": "rgb(66, 76, 87)"})
+assert-css: (".search-input", {"border-color": "rgb(92, 103, 115)"})
 click: ".search-input"
-assert-css: (".search-input", {"border-color": "rgb(66, 76, 87)"})
+assert-css: (".search-input", {"border-color": "rgb(92, 103, 115)"})