Fix hover effects in sidebar

The dark and ayu themes have a menu-like highlight on sidebar items. The light theme used to, but it was accidentally lost in the sidebar unification. The change brings back the hover effect in the light theme. It also makes the hover effect apply consistently to all links in the sidebar, including headings. It also simplifies the "In _path_" heading so it's one big link. The breadcrumbs are still readily available at the top of the page.
rust-lang · Feb 7, 2022 · c20e2a9 · c20e2a9
1 parent f52c318
commit c20e2a9
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 38 deletions.
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -463,9 +463,6 @@ nav.sub {
 .location a:first-of-type {
 	font-weight: 500;
 }
-.location a:hover {
-	text-decoration: underline;
-}
 
 .block {
 	padding: 0;
@@ -476,10 +473,11 @@ nav.sub {
 	list-style: none;
 }
 
-.block a {
+.block a,
+h2.location a {
 	display: block;
-	padding: 0.3em;
-	margin-left: -0.3em;
+	padding: 0.3rem;
+	margin-left: -0.3rem;
 
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -494,8 +492,8 @@ nav.sub {
 	font-weight: 500;
 	padding: 0;
 	margin: 0;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
+	margin-top: 0.7rem;
+	margin-bottom: 0.7rem;
 }
 
 .sidebar h3 {
@@ -1812,10 +1810,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 
 	.mobile-topbar .location {
 		border: none;
-		margin: 0;
-		margin-left: auto;
-		padding: 0.3em;
-		padding-right: 0.6em;
+		margin: auto 0.5em auto auto;
 		text-overflow: ellipsis;
 		overflow: hidden;
 		white-space: nowrap;

diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
@@ -91,7 +91,8 @@ pre, .rustdoc.source .example-wrap {
 	background-color: #5c6773;
 }
 
-.sidebar .current {
+.sidebar .current,
+.sidebar a:hover {
 	background-color: transparent;
 	color: #ffb44c;
 }
@@ -104,15 +105,6 @@ pre, .rustdoc.source .example-wrap {
 	color: #ff7733;
 }
 
-.sidebar-elems .location a {
-	color: #fff;
-}
-
-.block a:hover {
-	background: transparent;
-	color: #ffb44c;
-}
-
 .line-numbers span { color: #5c6773; }
 .line-numbers .line-highlighted {
 	color: #708090;
@@ -220,6 +212,10 @@ pre.rust a,
 .in-band a {
 	color: #c5c5c5;
 }
+.sidebar h2 a,
+.sidebar h3 a {
+	color: white;
+}
 .search-results a {
 	color: #0096cf;
 }

diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
@@ -61,18 +61,15 @@ pre, .rustdoc.source .example-wrap {
 	background-color: rgba(32, 34, 37, .6);
 }
 
-.sidebar .current {
-	background-color: #333;
+.sidebar .current,
+.sidebar a:hover {
+	background: #444;
 }
 
 .source .sidebar {
 	background-color: #565656;
 }
 
-.block a:hover {
-	background: #444;
-}
-
 .line-numbers span { color: #3B91E2; }
 .line-numbers .line-highlighted {
 	background-color: #0a042f !important;

diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
@@ -63,18 +63,15 @@ pre, .rustdoc.source .example-wrap {
 	background-color: rgba(36, 37, 39, 0.6);
 }
 
-.sidebar .current {
+.sidebar .current,
+.sidebar a:hover {
 	background-color: #fff;
 }
 
 .source .sidebar {
 	background-color: #f1f1f1;
 }
 
-.block a:hover {
-	background: #F5F5F5;
-}
-
 .line-numbers span { color: #c67e2d; }
 .line-numbers .line-highlighted {
 	background-color: #FDFFD3 !important;

diff --git a/src/test/rustdoc-gui/mobile.goml b/src/test/rustdoc-gui/mobile.goml
@@ -11,7 +11,7 @@ assert-css: (".main-heading", {
   "flex-direction": "column"
 })
 
-assert-property: (".mobile-topbar h2.location", {"offsetHeight": 45})
+assert-property: (".mobile-topbar h2.location", {"offsetHeight": 48})
 
 // Note: We can't use assert-text here because the 'Since' is set by CSS and
 // is therefore not part of the DOM.

diff --git a/src/test/rustdoc-gui/sidebar-mobile.goml b/src/test/rustdoc-gui/sidebar-mobile.goml
@@ -39,4 +39,4 @@ assert-position: ("#method\.must_use", {"y": 45})
 // Check that the bottom-most item on the sidebar menu can be scrolled fully into view.
 click: ".sidebar-menu-toggle"
 scroll-to: ".block.keyword li:nth-child(1)"
-assert-position: (".block.keyword li:nth-child(1)", {"y": 542.234375})
+compare-elements-position-near: (".block.keyword li:nth-child(1)", ".mobile-topbar", {"y": 543})
diff --git a/src/test/rustdoc-gui/sidebar.goml b/src/test/rustdoc-gui/sidebar.goml
@@ -77,7 +77,7 @@ assert-text: ("#functions + .item-table .item-left > a", "foo")
 
 // Links to trait implementations in the sidebar should not wrap even if they are long.
 goto: file://|DOC_PATH|/lib2/struct.HasALongTraitWithParams.html
-assert-property: (".sidebar-links a", {"offsetHeight": 29})
+assert-property: (".sidebar-links a", {"offsetHeight": 30})
 
 // Test that clicking on of the "In <module>" headings in the sidebar links to the
 // appropriate anchor in index.html.

diff --git a/src/test/rustdoc-gui/type-declation-overflow.goml b/src/test/rustdoc-gui/type-declation-overflow.goml
@@ -32,6 +32,6 @@ assert-property: (".item-decl pre", {"scrollWidth": "950"})
 size: (600, 600)
 goto: file://|DOC_PATH|/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html
 // It shouldn't have an overflow in the topbar either.
-assert-property: (".mobile-topbar .location", {"scrollWidth": "986"})
-assert-property: (".mobile-topbar .location", {"clientWidth": "504"})
+assert-property: (".mobile-topbar .location", {"scrollWidth": "493"})
+assert-property: (".mobile-topbar .location", {"clientWidth": "493"})
 assert-css: (".mobile-topbar .location", {"overflow-x": "hidden"})