Improve display of settings radio buttons

5 files changed, 78 insertions, 31 deletions

diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css
index c69ff04236d..e51f7425934 100644
--- a/src/librustdoc/html/static/css/settings.css
+++ b/src/librustdoc/html/static/css/settings.css
@@ -3,44 +3,40 @@
 	position: relative;
 }
 
-.setting-line > div {
-	display: inline-block;
-	vertical-align: top;
-	font-size: 17px;
-	padding-top: 2px;
-}
-
-.setting-line > .title {
-	font-size: 19px;
-	width: 100%;
-	max-width: none;
-	border-bottom: 1px solid;
-}
-
-.setting-line .radio-line,
 .setting-line .choices {
 	display: flex;
 	flex-wrap: wrap;
 }
 
-.setting-line .radio-line .setting-name {
-	flex-grow: 1;
-	margin-top: auto;
-	margin-bottom: auto;
-}
-
 .setting-line .radio-line input {
 	margin-right: 0.3em;
+	height: 1.2rem;
+	width: 1.2rem;
+	border: 1px solid;
+	outline: none;
+	-webkit-appearance: none;
+	cursor: pointer;
+	border-radius: 50%;
+}
+.setting-line .radio-line input + span {
+	padding-bottom: 1px;
+}
+
+.radio-line .setting-name {
+	width: 100%;
 }
 
 .radio-line .choice {
-	border-radius: 0.1em;
-	border: 1px solid;
-	margin-left: 0.5em;
 	margin-top: 0.1em;
 	margin-bottom: 0.1em;
 	min-width: 3.8em;
 	padding: 0.3em;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+}
+.radio-line .choice + .choice {
+	margin-left: 0.5em;
 }
 
 .toggle {
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index d32bb4cf22d..fabf31afa1e 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -10,6 +10,25 @@ body, #settings-menu #settings, #settings-menu #settings::before {
 	color: #c5c5c5;
 }
 
+.setting-line .radio-line input {
+	border-color: #c5c5c5;
+}
+.setting-line .radio-line input:checked {
+	box-shadow: inset 0 0 0 3px #0f1419;
+	background-color: #ffb454;
+}
+.setting-line .radio-line input:focus {
+	box-shadow: 0 0 1px 1px #ffb454;
+}
+/* In here we combine both `:focus` and `:checked` properties. */
+.setting-line .radio-line input:checked:focus {
+	box-shadow: inset 0 0 0 3px 0f1419,
+		0 0 2px 2px #ffb454;
+}
+.setting-line .radio-line input:hover {
+	border-color: #ffb454 !important;
+}
+
 h1, h2, h3, h4 {
 	color: white;
 }
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 4957f25bcf3..7da30ad948d 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -3,6 +3,25 @@ body, #settings-menu #settings, #settings-menu #settings::before {
 	color: #ddd;
 }
 
+.setting-line .radio-line input {
+	border-color: #ddd;
+}
+.setting-line .radio-line input:checked {
+	box-shadow: inset 0 0 0 3px #353535;
+	background-color: #2196f3;
+}
+.setting-line .radio-line input:focus {
+	box-shadow: 0 0 1px 1px #2196f3;
+}
+/* In here we combine both `:focus` and `:checked` properties. */
+.setting-line .radio-line input:checked:focus {
+	box-shadow: inset 0 0 0 3px #353535,
+		0 0 2px 2px #2196f3;
+}
+.setting-line .radio-line input:hover {
+	border-color: #2196f3 !important;
+}
+
 h1, h2, h3, h4 {
 	color: #ddd;
 }
@@ -472,9 +491,6 @@ div.files > a:hover, div.name:hover {
 div.files > .selected {
 	background-color: #333;
 }
-.setting-line > .title {
-	border-bottom-color: #ddd;
-}
 
 .scraped-example-list .scrape-help {
 	border-color: #aaa;
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index 7d4acc6c611..3bf66ef5b5b 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -5,6 +5,25 @@ body, #settings-menu #settings, #settings-menu #settings::before {
 	color: black;
 }
 
+.setting-line .radio-line input {
+	border-color: black;
+}
+.setting-line .radio-line input:checked {
+	box-shadow: inset 0 0 0 3px white;
+	background-color: #2196f3;
+}
+.setting-line .radio-line input:focus {
+	box-shadow: 0 0 1px 1px #2196f3;
+}
+/* In here we combine both `:focus` and `:checked` properties. */
+.setting-line .radio-line input:checked:focus {
+	box-shadow: inset 0 0 0 3px white,
+		0 0 2px 2px #2196f3;
+}
+.setting-line .radio-line input:hover {
+	border-color: #2196f3 !important;
+}
+
 h1, h2, h3, h4 {
 	color: black;
 }
@@ -456,9 +475,6 @@ div.files > a:hover, div.name:hover {
 div.files > .selected {
 	background-color: #fff;
 }
-.setting-line > .title {
-	border-bottom-color: #D5D5D5;
-}
 
 .scraped-example-list .scrape-help {
 	border-color: #555;
diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js
index 3d1d942eaa9..41bf0ec8955 100644
--- a/src/librustdoc/html/static/js/settings.js
+++ b/src/librustdoc/html/static/js/settings.js
@@ -123,7 +123,7 @@
                     output += `<label for="${js_data_name}-${option}" class="choice">\
                            <input type="radio" name="${js_data_name}" \
                                 id="${js_data_name}-${option}" value="${option}"${checked}>\
-                           ${option}\
+                           <span>${option}</span>\
                          </label>`;
                 });
                 output += "</div></div>";