From c20e2a9c237cab7b481137f8f34a4b1822c43aae Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Mon, 31 Jan 2022 05:53:43 -0800 Subject: [PATCH] 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. --- src/librustdoc/html/static/css/rustdoc.css | 19 +++++++------------ src/librustdoc/html/static/css/themes/ayu.css | 16 ++++++---------- .../html/static/css/themes/dark.css | 9 +++------ .../html/static/css/themes/light.css | 7 ++----- src/test/rustdoc-gui/mobile.goml | 2 +- src/test/rustdoc-gui/sidebar-mobile.goml | 2 +- src/test/rustdoc-gui/sidebar.goml | 2 +- .../rustdoc-gui/type-declation-overflow.goml | 4 ++-- 8 files changed, 23 insertions(+), 38 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index cf3c63d6a8fb6..6d94c70eadee6 100644 --- 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 index 0aaf4f78c34ef..e402b3583f399 100644 --- 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 index 4fad2359ff0eb..0a56055b8cbf6 100644 --- 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 index 16a777b7e672a..dc1715b2a78f3 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -63,7 +63,8 @@ pre, .rustdoc.source .example-wrap { background-color: rgba(36, 37, 39, 0.6); } -.sidebar .current { +.sidebar .current, +.sidebar a:hover { background-color: #fff; } @@ -71,10 +72,6 @@ pre, .rustdoc.source .example-wrap { 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 index 7be46a613c4fb..2e44dd32d45b4 100644 --- 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 index ef588a69f1d5f..9581aa74b0f64 100644 --- 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 index 9505e00512f4c..877cc61b66f24 100644 --- 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 " 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 index 99aa38e87e925..d4142511e4373 100644 --- 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"})