diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css
index 83939f63b4e85..1f6fb961e918d 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);
-}
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 129ef6e10e7e7..63c0b78b2371c 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -75,16 +75,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--crate-search-hover-border: #e0e0e0;
}
-.slider {
- background-color: #ccc;
-}
-.slider:before {
- background-color: white;
-}
-input:focus + .slider {
- box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
-}
-
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 7cd2d7817d59d..77f888330a42a 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -70,16 +70,6 @@
--crate-search-hover-border: #2196f3;
}
-.slider {
- background-color: #ccc;
-}
-.slider:before {
- background-color: white;
-}
-input:focus + .slider {
- box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
-}
-
.content .item-info::before { color: #ccc; }
body.source .example-wrap pre.rust a {
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index c41ec24884127..13ad38cf6e631 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -67,15 +67,6 @@
--crate-search-hover-border: #717171;
}
-.slider {
- background-color: #ccc;
-}
-.slider:before {
- background-color: white;
-}
-input:focus + .slider {
- box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
-}
.content .item-info::before { color: #ccc; }
diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js
index 141563bd46a19..95cc265f1bdf6 100644
--- a/src/librustdoc/html/static/js/settings.js
+++ b/src/librustdoc/html/static/js/settings.js
@@ -66,8 +66,7 @@
function setEvents(settingsElement) {
updateLightAndDark();
- onEachLazy(settingsElement.getElementsByClassName("slider"), elem => {
- const toggle = elem.previousElementSibling;
+ onEachLazy(settingsElement.querySelectorAll("input[type=\"checkbox\"]"), toggle => {
const settingId = toggle.id;
const settingValue = getSettingValue(settingId);
if (settingValue !== null) {
@@ -139,7 +138,6 @@
const checked = setting["default"] === true ? " checked" : "";
output += `<label class="toggle">\
<input type="checkbox" id="${js_data_name}"${checked}>\
- <span class="slider"></span>\
<span class="label">${setting_name}</span>\
</label>`;
}
diff --git a/src/test/rustdoc-gui/docblock-code-block-line-number.goml b/src/test/rustdoc-gui/docblock-code-block-line-number.goml
index 911ee34be94e5..fec21ad35c3eb 100644
--- a/src/test/rustdoc-gui/docblock-code-block-line-number.goml
+++ b/src/test/rustdoc-gui/docblock-code-block-line-number.goml
@@ -30,10 +30,10 @@ wait-for: "#settings"
assert-css: ("#settings", {"display": "block"})
// Then, click the toggle button.
-click: "input#line-numbers + .slider"
+click: "input#line-numbers"
wait-for: 100 // wait-for-false does not exist
assert-false: "pre.example-line-numbers"
// Finally, turn it on again.
-click: "input#line-numbers + .slider"
+click: "input#line-numbers"
wait-for: "pre.example-line-numbers"
diff --git a/src/test/rustdoc-gui/settings.goml b/src/test/rustdoc-gui/settings.goml
index f258f4d2a838e..7e7971d47fbca 100644
--- a/src/test/rustdoc-gui/settings.goml
+++ b/src/test/rustdoc-gui/settings.goml
@@ -48,7 +48,8 @@ assert: ".setting-line.hidden #preferred-light-theme"
assert-property: ("#theme .choices #theme-dark", {"checked": "true"})
// Some style checks...
-// First we check the "default" display.
+move-cursor-to: "#settings-menu > a"
+// First we check the "default" display for radio buttons.
assert-css: (
"#theme-dark",
{
@@ -57,7 +58,7 @@ assert-css: (
},
)
assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
-// Let's start with the hover.
+// Let's start with the hover for radio buttons.
move-cursor-to: "#theme-dark"
assert-css: (
"#theme-dark",
@@ -69,7 +70,7 @@ assert-css: (
move-cursor-to: "#theme-light"
assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
move-cursor-to: "#theme-ayu"
-// Let's now check with the focus.
+// Let's now check with the focus for radio buttons.
focus: "#theme-dark"
assert-css: (
"#theme-dark",
@@ -86,7 +87,7 @@ assert-css: (
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
},
)
-// Now we check we both focus and hover.
+// Now we check we both focus and hover for radio buttons.
move-cursor-to: "#theme-dark"
focus: "#theme-dark"
assert-css: (
@@ -106,6 +107,80 @@ assert-css: (
},
)
+// First we check the "default" display for toggles.
+assert-css: (
+ "#auto-hide-large-items",
+ {
+ "background-color": "rgb(33, 150, 243)",
+ "border-color": "rgb(221, 221, 221)",
+ },
+)
+assert-css: (
+ "#use-system-theme",
+ {
+ "background-color": "rgba(0, 0, 0, 0)",
+ "border-color": "rgb(221, 221, 221)",
+ }
+)
+// Let's start with the hover for toggles.
+move-cursor-to: "#auto-hide-large-items"
+assert-css: (
+ "#auto-hide-large-items",
+ {
+ "background-color": "rgb(33, 150, 243)",
+ "border-color": "rgb(33, 150, 243)",
+ },
+)
+move-cursor-to: "#use-system-theme"
+assert-css: (
+ "#use-system-theme",
+ {
+ "background-color": "rgba(0, 0, 0, 0)",
+ "border-color": "rgb(33, 150, 243)",
+ }
+)
+move-cursor-to: "#settings-menu > a"
+// Let's now check with the focus for toggles.
+focus: "#auto-hide-large-items"
+assert-css: (
+ "#auto-hide-large-items",
+ {
+ "background-color": "rgb(33, 150, 243)",
+ "border-color": "rgb(221, 221, 221)",
+ "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ },
+)
+focus: "#use-system-theme"
+assert-css: (
+ "#use-system-theme",
+ {
+ "background-color": "rgba(0, 0, 0, 0)",
+ "border-color": "rgb(221, 221, 221)",
+ "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ },
+)
+// Now we check we both focus and hover for toggles.
+move-cursor-to: "#auto-hide-large-items"
+focus: "#auto-hide-large-items"
+assert-css: (
+ "#auto-hide-large-items",
+ {
+ "background-color": "rgb(33, 150, 243)",
+ "border-color": "rgb(33, 150, 243)",
+ "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ },
+)
+move-cursor-to: "#use-system-theme"
+focus: "#use-system-theme"
+assert-css: (
+ "#use-system-theme",
+ {
+ "background-color": "rgba(0, 0, 0, 0)",
+ "border-color": "rgb(33, 150, 243)",
+ "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ },
+)
+
// We now switch the display.
click: "#use-system-theme"
// Wait for the hidden element to show up.
@@ -118,7 +193,7 @@ assert: ".setting-line.hidden #theme"
assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme")
-// We now check that clicking on the "sliders"' text is like clicking on the slider.
+// We now check that clicking on the toggles' text is like clicking on the checkbox.
// To test it, we use the "Disable keyboard shortcuts".
local-storage: {"rustdoc-disable-shortcuts": "false"}
click: ".setting-line:last-child .toggle .label"
@@ -141,10 +216,7 @@ assert-css: ("#settings-menu .popover", {"display": "none"})
// Now we go to the settings page to check that the CSS is loaded as expected.
goto: "file://" + |DOC_PATH| + "/settings.html"
wait-for: "#settings"
-assert-css: (
- ".setting-line .toggle .slider",
- {"width": "45px", "margin-right": "20px", "border": "0px none rgb(0, 0, 0)"},
-)
+assert-css: (".setting-line", {"position": "relative"})
assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
compare-elements-position: (".sub form", "#settings", ("x"))
@@ -162,4 +234,4 @@ reload:
size: (300, 1000)
click: "#settings-menu"
wait-for: "#settings"
-assert-css: ("#settings .slider", {"width": "45px"}, ALL)
+assert-css: (".setting-line", {"position": "relative"})