Rollup merge of #107477 - GuillaumeGomez:css-var, r=notriddle

Migrate last part of CSS themes to CSS variables

No changes in the output. This is already tested in `tests/rustdoc-gui/search-tab.goml` so no need to add a GUI test.

r? `@notriddle`

Author: JohnTitor

src/librustdoc/html/static/css/rustdoc.css

@@ -1262,6 +1262,14 @@ a.test-arrow:hover {
 	line-height: 1.5;
 	color: inherit;
 }
+#search-tabs button:not(.selected) {
+	background-color: var(--search-tab-button-not-selected-background);
+	border-top-color: var(--search-tab-button-not-selected-border-top-color);
+}
+#search-tabs button:hover, #search-tabs button.selected {
+	background-color: var(--search-tab-button-selected-background);
+	border-top-color: var(--search-tab-button-selected-border-top-color);
+}
 
 #search-tabs .count {
 	font-size: 1rem;

src/librustdoc/html/static/css/themes/ayu.css

@@ -46,6 +46,10 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--search-results-alias-color: #c5c5c5;
 	--search-results-grey-color: #999;
 	--search-tab-title-count-color: #888;
+	--search-tab-button-not-selected-border-top-color: none;
+	--search-tab-button-not-selected-background: transparent !important;
+	--search-tab-button-selected-border-top-color: none;
+	--search-tab-button-selected-background: #141920 !important;
 	--stab-background-color: #314559;
 	--stab-code-color: #e6e1cf;
 	--code-highlight-kw-color: #ff7733;
@@ -171,28 +175,17 @@ pre, .rustdoc.source .example-wrap {
 }
 
 #search-tabs > button.selected {
-	background-color: #141920 !important;
 	border-bottom: 1px solid #ffb44c !important;
 	border-top: none;
 }
-
 #search-tabs > button:not(.selected) {
-	background-color: transparent !important;
 	border: none;
+	background-color: transparent !important;
 }
-
 #search-tabs > button:hover {
 	border-bottom: 1px solid rgba(242, 151, 24, 0.3);
 }
 
-/* rules that this theme does not need to set, here to satisfy the rule checker */
-/* note that a lot of these are partially set in some way (meaning they are set
-individually rather than as a group) */
-/* FIXME: these rules should be at the bottom of the file but currently must be
-above the `@media (max-width: 700px)` rules due to a bug in the css checker */
-/* see https://github.com/rust-lang/rust/pull/71237#issuecomment-618170143 */
-#search-tabs > button:hover, #search-tabs > button.selected {}
-
 #settings-menu > a img {
 	filter: invert(100);
 }

src/librustdoc/html/static/css/themes/dark.css

@@ -41,6 +41,10 @@
 	--search-results-alias-color: #fff;
 	--search-results-grey-color: #ccc;
 	--search-tab-title-count-color: #888;
+	--search-tab-button-not-selected-border-top-color: #252525;
+	--search-tab-button-not-selected-background: #252525;
+	--search-tab-button-selected-border-top-color: #0089ff;
+	--search-tab-button-selected-background: #353535;
 	--stab-background-color: #314559;
 	--stab-code-color: #e6e1cf;
 	--code-highlight-kw-color: #ab8ac1;
@@ -95,13 +99,3 @@
 	--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
 	--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
 }
-
-#search-tabs > button:not(.selected) {
-	background-color: #252525;
-	border-top-color: #252525;
-}
-
-#search-tabs > button:hover, #search-tabs > button.selected {
-	border-top-color: #0089ff;
-	background-color: #353535;
-}

src/librustdoc/html/static/css/themes/light.css

@@ -41,6 +41,10 @@
 	--search-results-alias-color: #000;
 	--search-results-grey-color: #999;
 	--search-tab-title-count-color: #888;
+	--search-tab-button-not-selected-border-top-color: #e6e6e6;
+	--search-tab-button-not-selected-background: #e6e6e6;
+	--search-tab-button-selected-border-top-color: #0089ff;
+	--search-tab-button-selected-background: #ffffff;
 	--stab-background-color: #fff5d6;
 	--stab-code-color: #000;
 	--code-highlight-kw-color: #8959a8;
@@ -92,13 +96,3 @@
 	--scrape-example-code-wrapper-background-start: rgba(255, 255, 255, 1);
 	--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
 }
-
-#search-tabs > button:not(.selected) {
-	background-color: #e6e6e6;
-	border-top-color: #e6e6e6;
-}
-
-#search-tabs > button:hover, #search-tabs > button.selected {
-	background-color: #ffffff;
-	border-top-color: #0089ff;
-}