From 01196c5b4cb3d966aa49ad4ed04bd2ea7aa1f6d2 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Wed, 4 Jan 2023 13:04:30 -0700
Subject: [PATCH] rustdoc: remove unnecessary wrapper around sidebar and mobile
logos
This commit changes `.sidebar a:hover:not(.logo-container)` to add the `:not()` pseudo-class, retaining the old appearance of the logo when mousing over it.
This didn't used to be necessary because the `a.sidebar-logo` was `display:inline`, and was what got the `background` changed on hover, while the `div.logo-container` inside it was `display:block`. This resulted in the hover rule not having any effect, because the logo-container box was not actually nested inside the sidebar-logo box:
https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level
> When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.
---
src/librustdoc/html/static/css/rustdoc.css | 5 ++--
src/librustdoc/html/templates/page.html | 28 ++++++++++------------
2 files changed, 15 insertions(+), 18 deletions(-)
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index afc369bc3fda6..cdc077e26bf22 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -352,6 +352,7 @@ img {
.sub-logo-container, .logo-container {
/* zero text boxes so that computed line height = image height exactly */
line-height: 0;
+ display: block;
}
.sub-logo-container {
@@ -495,7 +496,7 @@ ul.block, .block li {
color: var(--sidebar-link-color);
}
.sidebar .current,
-.sidebar a:hover {
+.sidebar a:hover:not(.logo-container) {
background-color: var(--sidebar-current-link-background-color);
}
@@ -1570,7 +1571,7 @@ in storage.js
/* Hide the logo and item name from the sidebar. Those are displayed
in the mobile-topbar instead. */
- .sidebar .sidebar-logo,
+ .sidebar .logo-container,
.sidebar .location {
display: none;
}
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index bcaff957af2f6..fddda293b9a86 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -72,28 +72,24 @@
{%- if page.css_class != "source" -%}
<nav class="mobile-topbar"> {#- -#}
<button class="sidebar-menu-toggle">☰</button> {#- -#}
- <a class="sidebar-logo" href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}index.html"> {#- -#}
- <div class="logo-container"> {#- -#}
- {%- if !layout.logo.is_empty() -%}
- <img src="{{layout.logo}}" alt="logo"> {#- -#}
- {%- else -%}
- <img class="rust-logo" src="{{static_root_path|safe}}{{files.rust_logo_svg}}" alt="logo"> {#- -#}
- {%- endif -%}
- </div> {#- -#}
+ <a class="logo-container" href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}index.html"> {#- -#}
+ {%- if !layout.logo.is_empty() -%}
+ <img src="{{layout.logo}}" alt="logo"> {#- -#}
+ {%- else -%}
+ <img class="rust-logo" src="{{static_root_path|safe}}{{files.rust_logo_svg}}" alt="logo"> {#- -#}
+ {%- endif -%}
</a> {#- -#}
<h2></h2> {#- -#}
</nav> {#- -#}
{%- endif -%}
<nav class="sidebar"> {#- -#}
{%- if page.css_class != "source" -%}
- <a class="sidebar-logo" href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}index.html"> {#- -#}
- <div class="logo-container"> {#- -#}
- {%- if !layout.logo.is_empty() %}
- <img src="{{layout.logo}}" alt="logo"> {#- -#}
- {%- else -%}
- <img class="rust-logo" src="{{static_root_path|safe}}{{files.rust_logo_svg}}" alt="logo"> {#- -#}
- {%- endif -%}
- </div> {#- -#}
+ <a class="logo-container" href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}index.html"> {#- -#}
+ {%- if !layout.logo.is_empty() %}
+ <img src="{{layout.logo}}" alt="logo"> {#- -#}
+ {%- else -%}
+ <img class="rust-logo" src="{{static_root_path|safe}}{{files.rust_logo_svg}}" alt="logo"> {#- -#}
+ {%- endif -%}
</a> {#- -#}
{%- endif -%}
{{- sidebar|safe -}}