rustdoc: use a different style of grip track

2 files changed, 19 insertions, 39 deletions

diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css
index 03201336cde..a3c6bf98161 100644
--- a/src/librustdoc/html/static/css/noscript.css
+++ b/src/librustdoc/html/static/css/noscript.css
@@ -136,8 +136,6 @@ nav.sub {
 	--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
 	--sidebar-resizer-hover: hsl(207, 90%, 66%);
 	--sidebar-resizer-active: hsl(207, 90%, 54%);
-	--sidebar-resizer-img-filter: opacity(66%);
-	--sidebar-resizer-img-hover-filter: none;
 }
 /* End theme: light */
 
@@ -248,8 +246,6 @@ nav.sub {
 		--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
 		--sidebar-resizer-hover: hsl(207, 30%, 54%);
 		--sidebar-resizer-active: hsl(207, 90%, 54%);
-		--sidebar-resizer-img-filter: opacity(66%);
-		--sidebar-resizer-img-hover-filter: none;
 	}
 /* End theme: dark */
 }
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index a874b87dfe1..a81d5c9c49b 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1,5 +1,5 @@
+/* ignore-tidy-filelength */
 /*
-// ignore-tidy-filelength
 	When static files are updated, their suffixes need to be updated.
 	1. In the top directory run:
 		./x.py doc --stage 1 library/core
@@ -525,25 +525,20 @@ img {
 	left: var(--desktop-sidebar-width);
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: flex-start;
+	color: var(--right-side-color);
 }
-
-.sidebar-resizer::after {
-	content: url('data:image/svg+xml,\
-		<svg xmlns="http://www.w3.org/2000/svg" width="8" height="24" viewBox="0 0 8 24"> \
-		<linearGradient id="x" x1="0" x2="0" y1="0" y2="1"> \
-		<stop offset="0.5" stop-color="%23666"/><stop offset="0.5" stop-color="%23ccc"/> \
-		</linearGradient> \
-		<circle r="2" fill="none" stroke-width="2" stroke="url(%23x)" cy="21" cx="3"/> \
-		<circle r="2" fill="none" stroke-width="2" stroke="url(%23x)" cy="15" cx="3"/> \
-		<circle r="2" fill="none" stroke-width="2" stroke="url(%23x)" cy="9" cx="3"/> \
-		<circle r="2" fill="none" stroke-width="2" stroke="url(%23x)" cy="3" cx="3"/></svg>');
-	width: 8px;
-	height: 24px;
-	filter: var(--sidebar-resizer-img-filter);
+.sidebar-resizer::before {
+	content: "";
+	border-right: dotted 2px currentColor;
+	width: 2px;
+	height: 12px;
 }
-.sidebar-resizer:hover::after {
-	filter: var(--sidebar-resizer-img-hover-filter);
+.sidebar-resizer::after {
+	content: "";
+	border-right: dotted 2px currentColor;
+	width: 2px;
+	height: 16px;
 }
 
 .rustdoc.src .sidebar-resizer {
@@ -571,6 +566,7 @@ img {
 
 .sidebar-resizing .sidebar {
 	position: fixed;
+	border-right: solid 2px var(--sidebar-resizer-active);
 }
 .sidebar-resizing > body {
 	padding-left: var(--resizing-sidebar-width);
@@ -586,6 +582,7 @@ img {
 	   on top of, the scrollbar) */
 	left: calc(var(--desktop-sidebar-width) - 1px);
 	border-left: solid 1px var(--sidebar-resizer-hover);
+	color: var(--sidebar-resizer-hover);
 }
 
 .src-sidebar-expanded .rustdoc.src .sidebar-resizer:hover,
@@ -611,17 +608,10 @@ img {
 	/* make the resize tool bigger when actually resizing, to avoid :hover styles on other stuff
 		while resizing */
 	padding: 0 140px;
-	width: 2px;
+	width: calc(140px + 140px + 9px + 2px);
 	margin-left: -140px;
 	border-left: none;
-}
-.sidebar-resizer.active::before {
-	border-left: solid 2px var(--sidebar-resizer-active);
-	margin-left: 8px;
-	padding-left: 1px;
-	display: block;
-	height: 100%;
-	content: "";
+	color: var(--sidebar-resizer-active);
 }
 
 .sidebar, .mobile-topbar, .sidebar-menu-toggle,
@@ -3021,8 +3011,6 @@ by default.
 	--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
 	--sidebar-resizer-hover: hsl(207, 90%, 66%);
 	--sidebar-resizer-active: hsl(207, 90%, 54%);
-	--sidebar-resizer-img-filter: opacity(66%);
-	--sidebar-resizer-img-hover-filter: none;
 }
 /* End theme: light */
 
@@ -3036,7 +3024,7 @@ by default.
 	--settings-button-border-focus: #ffb900;
 	--sidebar-background-color: #505050;
 	--sidebar-background-color-hover: #676767;
-	--sidebar-border-color: #2A2A2A;
+	--sidebar-border-color: #999;
 	--code-block-background-color: #2A2A2A;
 	--scrollbar-track-background-color: #717171;
 	--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
@@ -3132,8 +3120,6 @@ by default.
 	--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
 	--sidebar-resizer-hover: hsl(207, 30%, 54%);
 	--sidebar-resizer-active: hsl(207, 90%, 54%);
-	--sidebar-resizer-img-filter: opacity(66%);
-	--sidebar-resizer-img-hover-filter: none;
 }
 /* End theme: dark */
 
@@ -3151,7 +3137,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--settings-button-border-focus: #e0e0e0;
 	--sidebar-background-color: #14191f;
 	--sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
-	--sidebar-border-color: #000;
+	--sidebar-border-color: #5c6773;
 	--code-block-background-color: #191f26;
 	--scrollbar-track-background-color: transparent;
 	--scrollbar-thumb-background-color: #5c6773;
@@ -3247,8 +3233,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--scrape-example-code-wrapper-background-end: rgba(15, 20, 25, 0);
 	--sidebar-resizer-hover: hsl(34, 50%, 33%);
 	--sidebar-resizer-active: hsl(34, 100%, 66%);
-	--sidebar-resizer-img-filter: opacity(66%);
-	--sidebar-resizer-img-hover-filter: none;
 }
 
 :root[data-theme="ayu"] h1,