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

rust-lang · Dec 6, 2023 · 5731a0a · 5731a0a
1 parent b3c08a3
commit 5731a0a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/src/librustdoc/html/static/css/noscript.css b/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%);

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -1599,16 +1599,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);
 }
 
@@ -1634,7 +1633,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 {
@@ -1680,9 +1679,9 @@ details.toggle[open] > summary.hideme > span {
 
 details.toggle[open] > summary::before {
 	/* toggle minus */
-	background: url('data:image/svg+xml,<svg width="19" height="19" \
-shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \
-d="M2.5 2.5h14v14h-14v-14.5" stroke="grey"/><path d="M6 9.5h7"/></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.5h7"/></svg>') no-repeat top left;
+	<path d="M6 9.5h7"/></svg>') no-repeat top left;
 }
 
 details.toggle[open] > summary::after {
@@ -2205,6 +2204,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%);
@@ -2307,6 +2308,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%);
@@ -2424,6 +2427,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%);