diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css
index 920f45c4bba..d13c783d2e4 100644
--- a/src/librustdoc/html/static/css/settings.css
+++ b/src/librustdoc/html/static/css/settings.css
@@ -8,7 +8,7 @@
height: 1.2rem;
width: 1.2rem;
color: inherit;
- border: 1px solid currentColor;
+ border: 2px solid var(--settings-input-border-color);
outline: none;
-webkit-appearance: none;
cursor: pointer;
@@ -52,6 +52,7 @@
}
.setting-check input:checked {
background-color: var(--settings-input-color);
+ border-width: 1px;
}
.setting-radio input:focus, .setting-check input:focus {
box-shadow: 0 0 1px 1px 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 90cf689ad33..7145baad256 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -7,6 +7,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--main-background-color: #0f1419;
--main-color: #c5c5c5;
--settings-input-color: #ffb454;
+ --settings-input-border-color: #999;
--settings-button-color: #fff;
--settings-button-border-focus: #e0e0e0;
--sidebar-background-color: #14191f;
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index e8cd0693139..3c1186a5649 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -2,6 +2,7 @@
--main-background-color: #353535;
--main-color: #ddd;
--settings-input-color: #2196f3;
+ --settings-input-border-color: #999;
--settings-button-color: #000;
--settings-button-border-focus: #ffb900;
--sidebar-background-color: #505050;
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index 5e3f14e483f..f8c287137de 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -2,6 +2,7 @@
--main-background-color: white;
--main-color: black;
--settings-input-color: #2196f3;
+ --settings-input-border-color: #717171;
--settings-button-color: #000;
--settings-button-border-focus: #717171;
--sidebar-background-color: #F5F5F5;
diff --git a/tests/rustdoc-gui/settings.goml b/tests/rustdoc-gui/settings.goml
index cfb037245d1..733be9bebba 100644
--- a/tests/rustdoc-gui/settings.goml
+++ b/tests/rustdoc-gui/settings.goml
@@ -56,11 +56,12 @@ move-cursor-to: "#settings-menu > a"
assert-css: (
"#theme-dark",
{
- "border-color": "rgb(221, 221, 221)",
+ "border-color": "rgb(153, 153, 153)",
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
+ "border-width": "2px",
},
)
-assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
+assert-css: ("#theme-light", {"border-color": "rgb(153, 153, 153)", "box-shadow": "none"})
// Let's start with the hover for radio buttons.
move-cursor-to: "#theme-dark"
assert-css: (
@@ -68,26 +69,36 @@ assert-css: (
{
"border-color": "rgb(33, 150, 243)",
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
+ "border-width": "2px",
},
)
move-cursor-to: "#theme-light"
-assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
+assert-css: (
+ "#theme-light",
+ {
+ "border-color": "rgb(33, 150, 243)",
+ "box-shadow": "none",
+ "border-width": "2px",
+ }
+)
move-cursor-to: "#theme-ayu"
// Let's now check with the focus for radio buttons.
focus: "#theme-dark"
assert-css: (
"#theme-dark",
{
- "border-color": "rgb(221, 221, 221)",
+ "border-color": "rgb(153, 153, 153)",
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
+ "border-width": "2px",
},
)
focus: "#theme-light"
assert-css: (
"#theme-light",
{
- "border-color": "rgb(221, 221, 221)",
+ "border-color": "rgb(153, 153, 153)",
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ "border-width": "2px",
},
)
// Now we check we both focus and hover for radio buttons.
@@ -98,6 +109,7 @@ assert-css: (
{
"border-color": "rgb(33, 150, 243)",
"box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
+ "border-width": "2px",
},
)
move-cursor-to: "#theme-light"
@@ -107,6 +119,7 @@ assert-css: (
{
"border-color": "rgb(33, 150, 243)",
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ "border-width": "2px",
},
)
// Now we check the setting-radio-name is on a different line than the label.
@@ -142,7 +155,18 @@ assert-css: (
"#auto-hide-large-items",
{
"background-color": "rgb(33, 150, 243)",
- "border-color": "rgb(221, 221, 221)",
+ "border-color": "rgb(153, 153, 153)",
+ // 1px border when checked
+ "border-width": "1px",
+ },
+)
+assert-css: (
+ "#auto-hide-method-docs",
+ {
+ "background-color": "rgba(0, 0, 0, 0)",
+ "border-color": "rgb(153, 153, 153)",
+ // 2px border when unchecked
+ "border-width": "2px",
},
)
// Let's start with the hover for toggles.
@@ -152,6 +176,18 @@ assert-css: (
{
"background-color": "rgb(33, 150, 243)",
"border-color": "rgb(33, 150, 243)",
+ // 1px border when checked
+ "border-width": "1px",
+ },
+)
+move-cursor-to: "#auto-hide-method-docs"
+assert-css: (
+ "#auto-hide-method-docs",
+ {
+ "background-color": "rgba(0, 0, 0, 0)",
+ "border-color": "rgb(33, 150, 243)",
+ // 2px border when unchecked
+ "border-width": "2px",
},
)
move-cursor-to: "#settings-menu > a"
@@ -161,8 +197,21 @@ assert-css: (
"#auto-hide-large-items",
{
"background-color": "rgb(33, 150, 243)",
- "border-color": "rgb(221, 221, 221)",
+ "border-color": "rgb(153, 153, 153)",
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ // 1px border when checked
+ "border-width": "1px",
+ },
+)
+focus: "#auto-hide-method-docs"
+assert-css: (
+ "#auto-hide-method-docs",
+ {
+ "background-color": "rgba(0, 0, 0, 0)",
+ "border-color": "rgb(153, 153, 153)",
+ "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ // 2px border when unchecked
+ "border-width": "2px",
},
)
// Now we check we both focus and hover for toggles.
@@ -174,6 +223,20 @@ assert-css: (
"background-color": "rgb(33, 150, 243)",
"border-color": "rgb(33, 150, 243)",
"box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ // 1px border when checked
+ "border-width": "1px",
+ },
+)
+move-cursor-to: "#auto-hide-method-docs"
+focus: "#auto-hide-method-docs"
+assert-css: (
+ "#auto-hide-method-docs",
+ {
+ "background-color": "rgba(0, 0, 0, 0)",
+ "border-color": "rgb(33, 150, 243)",
+ "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+ // 2px border when unchecked
+ "border-width": "2px",
},
)