rustdoc: make the toggle buttons look more like the big one

Author: notriddle

src/librustdoc/html/static/css/noscript.css

@@ -54,6 +54,8 @@ nav.sub {
 	--code-attribute-color: #999;
 	--toggles-color: #999;
 	--toggle-filter: none;
+	--toggle-border: #ccc;
+	--toggle-border-hover: #616161;
 	--search-input-focused-border-color: #66afe9;
 	--copy-path-button-color: #999;
 	--copy-path-img-filter: invert(50%);
@@ -157,6 +159,8 @@ nav.sub {
 		--code-attribute-color: #999;
 		--toggles-color: #999;
 		--toggle-filter: invert(100%);
+		--toggle-border: grey;
+		--toggle-border-hover: black;
 		--search-input-focused-border-color: #008dfd;
 		--copy-path-button-color: #999;
 		--copy-path-img-filter: invert(50%);

src/librustdoc/html/static/css/rustdoc.css

@@ -1604,16 +1604,15 @@ details.toggle > summary.hideme > span {
 
 details.toggle > summary::before {
 	/* toggle plus */
-	background: url('data:image/svg+xml,<svg width="19" height="19" stroke="black" fill="none" \
-xmlns="http://www.w3.org/2000/svg"><path d="M2.5 2.5h14v14h-14v-14.5" \
-shape-rendering="crispEdges" stroke="grey"/><path d="M6 9.5h7M9.5 13.5V5.5"/></svg>') no-repeat top left;
+	background: url('data:image/svg+xml,<svg width="15" height="15" stroke="black" fill="none" \
+xmlns="http://www.w3.org/2000/svg"><path d="M3 6.5h7M6.5 10.5V2.5"/></svg>') no-repeat top left;
 	content: "";
 	cursor: pointer;
-	width: 18px;
-	height: 18px;
+	width: 13px;
+	height: 13px;
+	border: solid 1px var(--toggle-border);
 	display: inline-block;
 	vertical-align: middle;
-	opacity: .5;
 	filter: var(--toggle-filter);
 }
 
@@ -1639,7 +1638,7 @@ details.toggle > summary.hideme::after {
 
 details.toggle > summary:focus-visible::before,
 details.toggle > summary:hover::before {
-	opacity: 1;
+	border: solid 1px var(--toggle-border-hover);
 }
 
 details.toggle > summary:focus-visible::before {
@@ -2208,6 +2207,8 @@ in src-script.js
 	--code-attribute-color: #999;
 	--toggles-color: #999;
 	--toggle-filter: none;
+	--toggle-border: #ccc;
+	--toggle-border-hover: #616161;
 	--search-input-focused-border-color: #66afe9;
 	--copy-path-button-color: #999;
 	--copy-path-img-filter: invert(50%);
@@ -2310,6 +2311,8 @@ in src-script.js
 	--code-attribute-color: #999;
 	--toggles-color: #999;
 	--toggle-filter: invert(100%);
+	--toggle-border: grey;
+	--toggle-border-hover: black;
 	--search-input-focused-border-color: #008dfd;
 	--copy-path-button-color: #999;
 	--copy-path-img-filter: invert(50%);
@@ -2427,6 +2430,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--code-attribute-color: #999;
 	--toggles-color: #999;
 	--toggle-filter: invert(100%);
+	--toggle-border: grey;
+	--toggle-border-hover: black;
 	--search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */
 	--copy-path-button-color: #fff;
 	--copy-path-img-filter: invert(70%);

tests/rustdoc-gui/toggle-docs.goml

@@ -49,27 +49,42 @@ assert-attribute: ("details.toggle", {"open": ""}, ALL)
 show-text: true
 define-function: (
     "check-color",
-    (theme, filter),
+    (theme, filter, border_color, border_color_hover),
     block {
         // Setting the theme.
         set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
         // We reload the page so the local storage settings are being used.
         reload:
 
         assert-css: ("details.toggle > summary::before", {
-            "opacity": "0.5",
+            "border-color": |border_color|,
             "filter": |filter|,
         }, ALL)
         move-cursor-to: "details.toggle summary"
         assert-css: ("details.toggle > summary:hover::before", {
-            "opacity": "1",
+            "border-color": |border_color_hover|,
             "filter": |filter|,
         })
         // moving the cursor somewhere else to not mess with next function calls.
         move-cursor-to: ".search-input"
     },
 )
 
-call-function: ("check-color", {"theme": "ayu", "filter": "invert(1)"})
-call-function: ("check-color", {"theme": "dark", "filter": "invert(1)"})
-call-function: ("check-color", {"theme": "light", "filter": "none"})
+call-function: ("check-color", {
+    "theme": "ayu",
+    "filter": "invert(1)",
+    "border_color": "#808080",
+    "border_color_hover": "#000",
+})
+call-function: ("check-color", {
+    "theme": "dark",
+    "filter": "invert(1)",
+    "border_color": "#808080",
+    "border_color_hover": "#000",
+})
+call-function: ("check-color", {
+    "theme": "light",
+    "filter": "none",
+    "border_color": "#ccc",
+    "border_color_hover": "#616161",
+})