nordic-dev.net/rust
nordic-dev.net/rust
2
0
Fork 0
mirror of https://github.com/rust-lang/rust.git synced 2024-11-27 01:04:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

rustdoc: make sidebar highlight cover whole click target

Browse Source
This commit is contained in:
Michael Howell 2024-07-15 16:20:37 -07:00
parent 5fc30b857c
commit 3924493a10
2 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/librustdoc/html/static/css/rustdoc.css
View File

@ -564,7 +564,7 @@ ul.block, .block li {
/* extend click target to far edge of screen (mile wide bar) */ /* extend click target to far edge of screen (mile wide bar) */
border-left: solid var(--sidebar-elems-left-padding) transparent; border-left: solid var(--sidebar-elems-left-padding) transparent;
margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding)); margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding));
background-clip: padding-box; background-clip: border-box;
} }
.sidebar h2 { .sidebar h2 {
@ -641,11 +641,50 @@ ul.block, .block li {
text-align: center; text-align: center;
} }
.sidebar-crate .logo-container img {
/* When in a horizontal logo lockup, the highlight color of the crate name menu item
extends underneath the actual logo (in a vertical lockup, that background highlight
extends to the left edge of the screen).
To prevent a weird-looking colored band from appearing under the logo, cover it up
with the sidebar's background. Additionally, the crate name extends slightly above
the logo, so that its highlight has a bit of space to let the ascenders breath while
also having those ascenders meet exactly with the top of the logo.
In ANSI art, make it look like this:
| ┌─────┐
| (R) │ std │
| └─────┘
Not like this (which would happen without the z-index):
| ┌────────┐
| (│ std │
| └────────┘
Not like this (which would happen without the background):
| ┌────────┐
| (R) std │
| └────────┘
Nor like this (which would happen without the negative margin):
| ─────────┐
| (R) │ std │
| └─────┘
*/
margin-top: -16px;
border-top: solid 16px transparent;
box-sizing: content-box;
position: relative;
background-color: var(--sidebar-background-color);
background-clip: border-box;
z-index: 1;
}
.sidebar-crate h2 a { .sidebar-crate h2 a {
display: block; display: block;
/* extend click target to far edge of screen (mile wide bar) */ /* extend click target to far edge of screen (mile wide bar) */
border-left: solid var(--sidebar-elems-left-padding) transparent; border-left: solid var(--sidebar-elems-left-padding) transparent;
background-clip: padding-box; background-clip: border-box;
margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding)); margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding));
/* Align the sidebar crate link with the search bar, which have different /* Align the sidebar crate link with the search bar, which have different
font sizes. font sizes.

4
tests/rustdoc-gui/huge-logo.goml
View File

@ -5,8 +5,8 @@ go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html"
set-window-size: (1280, 1024) set-window-size: (1280, 1024)
// offsetWidth = width of sidebar + left and right margins // offsetWidth = width of sidebar + left and right margins
assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offsetHeight": 48}) assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offsetHeight": 48})
// offsetWidth = width of sidebar // offsetWidth = width of sidebar, offsetHeight = height + top padding
assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 48}) assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 64})
set-window-size: (400, 600) set-window-size: (400, 600)
// offset = size + margin // offset = size + margin