diff options
| author | Michael Howell <michael@notriddle.com> | 2024-08-19 16:16:34 -0700 |
|---|---|---|
| committer | Michael Howell <michael@notriddle.com> | 2024-08-19 18:14:35 -0700 |
| commit | 9d7574f9b0925a5b681e19e81f96ad8d5f2a5be2 (patch) | |
| tree | 9ce5528376602a899b550917710181d134c381c0 | |
| parent | 5601d14249818d952da612fec481b7af3ed03a39 (diff) | |
| download | rust-9d7574f9b0925a5b681e19e81f96ad8d5f2a5be2.tar.gz rust-9d7574f9b0925a5b681e19e81f96ad8d5f2a5be2.zip | |
rustdoc: animate the `:target` highlight
This approach is, roughly, based on how Discourse does it. It came up while discussing some other possible sidebar changes, as a design that made rapid scanning easier while avoiding the inherent trade-offs in summarizing.
| -rw-r--r-- | src/librustdoc/html/static/css/rustdoc.css | 13 | ||||
| -rw-r--r-- | tests/rustdoc-gui/target.goml | 2 |
2 files changed, 14 insertions, 1 deletions
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index eb5a5d935e2..28df8d3f011 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1547,10 +1547,23 @@ instead, we check that it's not a "finger" cursor. margin-left: 24px; } +@keyframes targetfadein { + from { + background-color: var(--main-background-color); + } + 10% { + background-color: var(--target-border-color); + } + to { + background-color: var(--target-background-color); + } +} + :target { padding-right: 3px; background-color: var(--target-background-color); border-right: 3px solid var(--target-border-color); + animation: 0.65s cubic-bezier(0, 0, 0.1, 1.0) 0.1s targetfadein; } .code-header a.tooltip { diff --git a/tests/rustdoc-gui/target.goml b/tests/rustdoc-gui/target.goml index 82bd34ed274..92846f8e01d 100644 --- a/tests/rustdoc-gui/target.goml +++ b/tests/rustdoc-gui/target.goml @@ -11,7 +11,7 @@ define-function: ( [theme, background, border], block { call-function: ("switch-theme", {"theme": |theme|}) - assert-css: ("#method\.a_method:target", { + wait-for-css: ("#method\.a_method:target", { "background-color": |background|, "border-right": "3px solid " + |border|, }) |