Rollup merge of #98460 - GuillaumeGomez:css-simplification, r=jsha

Use CSS variables to handle theming

This is the start for our simplification of theming. Considering how big the diff quickly becomes, I think it's better to do it in multiple parts.

(The 3 first commits come from https://github.com/rust-lang/rust/pull/98297 so once it's merged, they'll disappear).

Normally they shouldn't be any UI changes. You can check it [here](https://rustdoc.crud.net/imperio/css-simplification/doc/foo/index.html).

cc `@notriddle`
r? `@jsha`

1 files changed, 55 insertions, 5 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 0ea954d601b..f7b4fdb736c 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -114,6 +114,9 @@ body {
 	-webkit-font-feature-settings: "kern", "liga";
 	-moz-font-feature-settings: "kern", "liga";
 	font-feature-settings: "kern", "liga";
+
+	background-color: var(--main-background-color);
+	color: var(--main-color);
 }
 
 h1 {
@@ -214,6 +217,26 @@ a.srclink,
 	font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
 }
 
+h1, h2, h3, h4,
+a#toggle-all-docs,
+a.anchor,
+.small-section-header a,
+#source-sidebar a,
+pre.rust a,
+.sidebar h2 a,
+.sidebar h3 a,
+.mobile-topbar h2 a,
+.in-band a,
+.search-results a,
+.module-item .stab,
+.import-item .stab,
+.result-name .primitive > i, .result-name .keyword > i,
+.content .method .where,
+.content .fn .where,
+.content .where.fmt-newline {
+	color: var(--main-color);
+}
+
 ol, ul {
 	padding-left: 24px;
 }
@@ -391,6 +414,14 @@ nav.sub {
 	display: none;
 }
 
+.source .sidebar, #sidebar-toggle, #source-sidebar {
+	background-color: var(--sidebar-background-color);
+}
+
+#sidebar-toggle:hover {
+	background-color: var(--sidebar-background-color-hover);
+}
+
 .source .sidebar > *:not(#sidebar-toggle) {
 	opacity: 0;
 	visibility: hidden;
@@ -629,11 +660,6 @@ h2.location a {
 	display: block;
 }
 
-.invisible {
-	width: 100%;
-	display: inline-block;
-}
-
 .content .in-band {
 	flex-grow: 1;
 	margin: 0px;
@@ -1008,6 +1034,11 @@ table,
 	top: -5px;
 }
 
+.popover, .popover::before {
+	background-color: var(--main-background-color);
+	color: var(--main-color);
+}
+
 #help-button .popover {
 	max-width: 600px;
 }
@@ -1428,6 +1459,25 @@ pre.rust {
 	animation: rotating 2s linear infinite;
 }
 
+.setting-line .radio-line input:checked {
+	box-shadow: inset 0 0 0 3px var(--main-background-color);
+	background-color: var(--settings-input-color);
+}
+.setting-line .radio-line input:focus {
+	box-shadow: 0 0 1px 1px var(--settings-input-color);
+}
+/* In here we combine both `:focus` and `:checked` properties. */
+.setting-line .radio-line input:checked:focus {
+	box-shadow: inset 0 0 0 3px var(--main-background-color),
+		0 0 2px 2px var(--settings-input-color);
+}
+.setting-line .radio-line input:hover {
+	border-color: var(--settings-input-color) !important;
+}
+input:checked + .slider {
+	background-color: var(--settings-input-color);
+}
+
 #help-button > button {
 	font-family: "Fira Sans", Arial, sans-serif;
 	text-align: center;