diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css index 83939f63b4e..1f6fb961e91 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,\ + \ + '); +} + +.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 2fa1fa39d63..4beca56b66a 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -77,16 +77,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 43f8dd42ab3..9b0bd8c8f0a 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -72,16 +72,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 c8c5289ab54..f12fb61d879 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -69,15 +69,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 141563bd46a..95cc265f1bd 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 += ``; } 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 911ee34be94..fec21ad35c3 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 f258f4d2a83..7e7971d47fb 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"})