1 files changed, 19 insertions, 38 deletions

diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css
index 83939f63b..1f6fb961e 100644
--- a/src/librustdoc/html/static/css/settings.css
+++ b/src/librustdoc/html/static/css/settings.css
@@ -8,7 +8,8 @@
 	flex-wrap: wrap;
 }
 
-.setting-line .radio-line input {
+.setting-line .radio-line input,
+.setting-line .toggle input {
 	margin-right: 0.3em;
 	height: 1.2rem;
 	width: 1.2rem;
@@ -17,9 +18,18 @@
 	outline: none;
 	-webkit-appearance: none;
 	cursor: pointer;
+}
+.setting-line .radio-line input {
 	border-radius: 50%;
 }
-.setting-line .radio-line input + span {
+.setting-line .toggle input:checked {
+	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">\
+		<path d="M7,25L17,32L33,12" fill="none" stroke="black" stroke-width="5"/>\
+		<path d="M7,23L17,30L33,10" fill="none" stroke="white" stroke-width="5"/></svg>');
+}
+
+.setting-line .radio-line input + span,
+.setting-line .toggle span {
 	padding-bottom: 1px;
 }
 
@@ -49,37 +59,6 @@
 	cursor: pointer;
 }
 
-.toggle input {
-	opacity: 0;
-	position: absolute;
-}
-
-.slider {
-	position: relative;
-	width: 45px;
-	min-width: 45px;
-	display: block;
-	height: 28px;
-	margin-right: 20px;
-	cursor: pointer;
-	background-color: #ccc;
-	transition: .3s;
-}
-
-.slider:before {
-	position: absolute;
-	content: "";
-	height: 19px;
-	width: 19px;
-	left: 4px;
-	bottom: 4px;
-	transition: .3s;
-}
-
-input:checked + .slider:before {
-	transform: translateX(19px);
-}
-
 .setting-line > .sub-settings {
 	padding-left: 42px;
 	width: 100%;
@@ -94,7 +73,11 @@ input:checked + .slider:before {
 	box-shadow: inset 0 0 0 3px var(--main-background-color);
 	background-color: var(--settings-input-color);
 }
-.setting-line .radio-line input:focus {
+.setting-line .toggle input:checked {
+	background-color: var(--settings-input-color);
+}
+.setting-line .radio-line input:focus,
+.setting-line .toggle input:focus {
 	box-shadow: 0 0 1px 1px var(--settings-input-color);
 }
 /* In here we combine both `:focus` and `:checked` properties. */
@@ -102,9 +85,7 @@ input:checked + .slider:before {
 	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 {
+.setting-line .radio-line input:hover,
+.setting-line .toggle input:hover {
 	border-color: var(--settings-input-color) !important;
 }
-input:checked + .slider {
-	background-color: var(--settings-input-color);
-}