Skip to content

Commit ba4801b

Browse files
notriddlenotriddle
committed
Fix styles and
1 parent 36a5395 commit ba4801b

File tree

8 files changed

+101
-87
lines changed

8 files changed

+101
-87
lines changed

‎src/librustdoc/html/static/css/rustdoc.css

Lines changed: 84 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1998,17 +1998,16 @@ a.tooltip:hover::after {
19981998
left: 6px;
19991999
height: 34px;
20002000
width: 34px;
2001+
z-index: calc(var(--desktop-sidebar-z-index) + 1);
20012002
}
20022003
.hide-sidebar #sidebar-button {
20032004
left: 6px;
20042005
background-color: var(--main-background-color);
2005-
z-index: 1;
20062006
}
20072007
.src #sidebar-button {
20082008
margin-top: 0;
20092009
top: 8px;
20102010
left: 8px;
2011-
z-index: calc(var(--desktop-sidebar-z-index) + 1);
20122011
border-color: var(--border-color);
20132012
}
20142013
.hide-sidebar .src #sidebar-button {
@@ -2040,14 +2039,14 @@ button#toggle-all-docs {
20402039
min-width: 0;
20412040
}
20422041
#sidebar-button > a {
2042+
border: solid 1px transparent;
2043+
border-radius: var(--button-border-radius);
20432044
background-color: var(--button-background-color);
20442045
width: 33px;
20452046
}
20462047
.src #sidebar-button > a {
2047-
background-color: transparent;
2048-
}
2049-
#sidebar-button > a:hover, #sidebar-button > a:focus-visible {
2050-
background-color: var(--main-background-color);
2048+
background-color: var(--sidebar-background-color);
2049+
border-color: var(--border-color);
20512050
}
20522051

20532052
#search-button > a:hover, #search-button > a:focus-visible,
@@ -2105,17 +2104,31 @@ button#toggle-all-docs::before {
21052104
}
21062105

21072106
.help-menu > a::before {
2108-
/* Question mark with circle */
2109-
content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 12 12" \
2110-
enable-background="new 0 0 12 12" xmlns="http://www.w3.org/2000/svg" fill="none">\
2111-
<circle r="5.25" cx="6" cy="6" stroke-width="1.5" stroke="black"/>\
2112-
<text x="6" y="7" style="font:8px sans-serif;font-weight:1000" text-anchor="middle" \
2113-
dominant-baseline="middle" fill="black">?</text></svg>');
2107+
/* Question mark with "circle" */
2108+
content: url('data:image/svg+xml,\
2109+
<svg width="18" height="18" enable-background="new 0 0 12 12" fill="none" \
2110+
version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"> \
2111+
<path d="m6.007 0.6931c2.515 0 5.074 1.908 5.074 5.335 0 3.55-2.567 5.278-5.088 \
2112+
5.278-2.477 0-5.001-1.742-5.001-5.3 0-3.38 2.527-5.314 5.014-5.314z" stroke="black" \
2113+
stroke-width="1.5"/>\
2114+
<path d="m5.999 7.932c0.3111 0 0.7062 0.2915 0.7062 0.7257 0 0.5458-0.3951 \
2115+
0.8099-0.7081 0.8099-0.2973 0-0.7023-0.266-0.7023-0.7668 0-0.4695 0.3834-0.7688 \
2116+
0.7042-0.7688z" fill="black"/>\
2117+
<path d="m4.281 3.946c0.0312-0.03057 0.06298-0.06029 0.09528-0.08916 0.4833-0.432 1.084-0.6722 \
2118+
1.634-0.6722 1.141 0 1.508 1.043 1.221 1.621-0.2753 0.5542-1.061 0.5065-1.273 \
2119+
1.595-0.05728 0.2939 0.0134 0.9812 0.0134 1.205" fill="none" stroke="black" \
2120+
stroke-width="1.25"/>\
2121+
</svg>');
21142122
width: 18px;
21152123
height: 18px;
21162124
filter: var(--settings-menu-filter);
21172125
}
21182126

2127+
.help-menu > a {
2128+
/* design hack to cope with "Help" being far shorter than "Settings" etc */
2129+
width: 74px;
2130+
}
2131+
21192132
#search-button > a::before,
21202133
button#toggle-all-docs::before,
21212134
.help-menu > a::before,
@@ -2154,9 +2167,9 @@ rustdoc-toolbar span.label {
21542167
/* sidebar resizer image */
21552168
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" \
21562169
fill="none" stroke="black">\
2157-
<rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5" stroke="%23777"/>\
2158-
<circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\
2159-
<path d="m7.6121 3v16 M5.375 7.625h-2 m2 3h-2 m2 3h-2" stroke-width="1.25"/></svg>');
2170+
<rect x="1" y="2" width="20" height="18" ry="1.5" stroke-width="1.5" stroke="%23777"/>\
2171+
<circle cx="4.375" cy="5.375" r="1" stroke-width=".75"/>\
2172+
<path d="m7.6121 4v14 M5.375 8.625h-2 m2 3h-2 m2 3h-2" stroke-width="1.25"/></svg>');
21602173
width: 22px;
21612174
height: 22px;
21622175
}
@@ -2435,6 +2448,9 @@ However, it's not needed with smaller screen width because the doc/code block is
24352448
opacity: 0.75;
24362449
filter: var(--mobile-sidebar-menu-filter);
24372450
}
2451+
.src #sidebar-button > a:hover {
2452+
background: var(--main-background-color);
2453+
}
24382454
.sidebar-menu-toggle:hover::before,
24392455
.sidebar-menu-toggle:active::before,
24402456
.sidebar-menu-toggle:focus::before {
@@ -2457,32 +2473,34 @@ However, it's not needed with smaller screen width because the doc/code block is
24572473

24582474
/* Text label takes up too much space at this size. */
24592475
.main-heading {
2460-
grid-template-areas:
2461-
"main-heading-breadcrumbs main-heading-toolbar"
2462-
"main-heading-h1 main-heading-toolbar"
2463-
"main-heading-sub-heading main-heading-toolbar";
2476+
grid-template-areas:
2477+
"main-heading-breadcrumbs main-heading-toolbar"
2478+
"main-heading-h1 main-heading-toolbar"
2479+
"main-heading-sub-heading main-heading-toolbar";
24642480
}
24652481
.search-results-main-heading {
2466-
display: grid;
2467-
grid-template-areas:
2468-
"main-heading-breadcrumbs main-heading-toolbar"
2469-
"main-heading-breadcrumbs main-heading-toolbar"
2470-
"main-heading-h1 main-heading-toolbar";
2482+
display: grid;
2483+
grid-template-areas:
2484+
"main-heading-breadcrumbs main-heading-toolbar"
2485+
"main-heading-breadcrumbs main-heading-toolbar"
2486+
"main-heading-h1 main-heading-toolbar";
24712487
}
24722488
rustdoc-toolbar {
2473-
display: grid;
2474-
grid-template-areas:
2475-
"x settings help"
2476-
"search summary summary";
2489+
margin-top: -10px;
2490+
display: grid;
2491+
grid-template-areas:
2492+
"x settings help"
2493+
"search summary summary";
2494+
grid-template-rows: 35px 1fr;
24772495
}
24782496
.search-results-main-heading rustdoc-toolbar {
2479-
display: grid;
2480-
grid-template-areas:
2481-
"settings help"
2482-
"search search";
2497+
display: grid;
2498+
grid-template-areas:
2499+
"settings help"
2500+
"search search";
24832501
}
24842502
.search-results-main-heading #toggle-all-docs {
2485-
display: none;
2503+
display: none;
24862504
}
24872505
rustdoc-toolbar .settings-menu span.label,
24882506
rustdoc-toolbar .help-menu span.label
@@ -2504,22 +2522,27 @@ However, it's not needed with smaller screen width because the doc/code block is
25042522
rustdoc-toolbar #toggle-all-docs {
25052523
grid-area: summary;
25062524
}
2525+
rustdoc-toolbar .settings-menu,
2526+
rustdoc-toolbar .help-menu {
2527+
height: 35px;
2528+
}
25072529
rustdoc-toolbar .settings-menu > a,
25082530
rustdoc-toolbar .help-menu > a {
2509-
border-radius: 2px;
2510-
text-align: center;
2511-
width: 40px;
2531+
border-radius: 2px;
2532+
text-align: center;
2533+
width: 34px;
2534+
padding: 5px 0;
25122535
}
25132536
rustdoc-toolbar .settings-menu > a:before,
25142537
rustdoc-toolbar .help-menu > a:before {
2515-
margin: 0 4px;
2538+
margin: 0 4px;
25162539
}
25172540
#settings.popover {
2518-
top: 16px;
2541+
top: 16px;
25192542
--popover-arrow-offset: 58px;
25202543
}
25212544
#help.popover {
2522-
top: 16px;
2545+
top: 16px;
25232546
--popover-arrow-offset: 16px;
25242547
}
25252548
}
@@ -2554,42 +2577,29 @@ in src-script.js and main.js
25542577

25552578

25562579
/* Pull settings and help up into the top bar. */
2557-
.main-heading {
2558-
grid-template-areas:
2559-
"main-heading-breadcrumbs main-heading-breadcrumbs"
2560-
"main-heading-h1 main-heading-toolbar"
2561-
"main-heading-sub-heading main-heading-toolbar";
2562-
}
2563-
.search-results-main-heading {
2564-
display: grid;
2565-
grid-template-areas:
2566-
"main-heading-breadcrumbs main-heading-placeholder"
2567-
"main-heading-breadcrumbs main-heading-toolbar"
2568-
"main-heading-h1 main-heading-toolbar";
2569-
}
25702580
rustdoc-topbar span.label,
2571-
rustdoc-toolbar .settings-menu,
2572-
rustdoc-toolbar .help-menu
2581+
html:not(.hide-sidebar) .rustdoc:not(.src) rustdoc-toolbar .settings-menu > a,
2582+
html:not(.hide-sidebar) .rustdoc:not(.src) rustdoc-toolbar .help-menu > a
25732583
{
25742584
display: none;
25752585
}
25762586
rustdoc-topbar .settings-menu > a,
25772587
rustdoc-topbar .help-menu > a {
25782588
width: 33px;
2579-
line-height: 0;
2589+
line-height: 0;
25802590
}
25812591
rustdoc-topbar .settings-menu > a:hover,
25822592
rustdoc-topbar .help-menu > a:hover {
25832593
border: none;
2584-
background: var(--main-background-color);
2585-
border-radius: 0;
2594+
background: var(--main-background-color);
2595+
border-radius: 0;
25862596
}
25872597
#settings.popover {
2588-
top: 32px;
2598+
top: 32px;
25892599
--popover-arrow-offset: 48px;
25902600
}
25912601
#help.popover {
2592-
top: 32px;
2602+
top: 32px;
25932603
--popover-arrow-offset: 12px;
25942604
}
25952605

@@ -2599,7 +2609,7 @@ in src-script.js and main.js
25992609
display: block;
26002610
}
26012611

2602-
main {
2612+
html:not(.hide-sidebar) main {
26032613
padding-left: 15px;
26042614
padding-top: 0px;
26052615
}
@@ -2638,6 +2648,9 @@ in src-script.js and main.js
26382648
height: 100vh;
26392649
border: 0;
26402650
}
2651+
html .src main {
2652+
padding: 18px 0;
2653+
}
26412654
.src .search-form {
26422655
margin-left: 40px;
26432656
}
@@ -2659,7 +2672,7 @@ in src-script.js and main.js
26592672

26602673
rustdoc-topbar > h2 {
26612674
padding-bottom: 0;
2662-
margin: auto;
2675+
margin: auto;
26632676
overflow: hidden;
26642677
/* Rare exception to specifying font sizes in rem. Since the topbar
26652678
height is specified in pixels, this also has to be specified in
@@ -2668,7 +2681,7 @@ in src-script.js and main.js
26682681
font-size: 24px;
26692682
white-space: nowrap;
26702683
text-overflow: ellipsis;
2671-
text-align: center;
2684+
text-align: center;
26722685
}
26732686

26742687
rustdoc-topbar .logo-container > img {
@@ -2693,9 +2706,9 @@ in src-script.js and main.js
26932706
}
26942707

26952708
.sidebar-menu-toggle {
2696-
/* prevent flexbox shrinking */
2709+
/* prevent flexbox shrinking */
26972710
width: 41px;
2698-
min-width: 41px;
2711+
min-width: 41px;
26992712
border: none;
27002713
line-height: 0;
27012714
}
@@ -2718,15 +2731,16 @@ in src-script.js and main.js
27182731
}
27192732

27202733
/* sidebar button becomes topbar button */
2721-
.hide-sidebar #sidebar-button {
2722-
margin-top: 0;
2723-
}
27242734
#sidebar-button > a::before {
27252735
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
27262736
viewBox="0 0 22 22" fill="none" stroke="black">\
2727-
<rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5" stroke="%23777"/>\
2728-
<circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\
2729-
<path d="m3 7.375h16m0-3h-4" stroke-width="1.25"/></svg>');
2737+
<rect x="1" y="2" width="20" height="18" ry="1.5" stroke-width="1.5" stroke="%23777"/>\
2738+
<g fill="black" stroke="none">\
2739+
<circle cx="4.375" cy="5.375" r="1" stroke-width=".75"/>\
2740+
<circle cx="17.375" cy="5.375" r="1" stroke-width=".75"/>\
2741+
<circle cx="14.375" cy="5.375" r="1" stroke-width=".75"/>\
2742+
</g>\
2743+
<path d="m3 8.375h16" stroke-width="1.25"/></svg>');
27302744
width: 22px;
27312745
height: 22px;
27322746
}

‎src/librustdoc/html/static/js/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ function preLoadCss(cssUrl) {
215215

216216
onEachLazy(document.querySelectorAll(".settings-menu"), settingsMenu => {
217217
/** @param {MouseEvent} event */
218-
settingsMenu.onclick = event => {
218+
settingsMenu.querySelector("a").onclick = event => {
219219
if (event.ctrlKey || event.altKey || event.metaKey) {
220220
return;
221221
}

‎src/librustdoc/html/static/js/settings.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@
345345
const settingsMenu = nonnull(document.getElementById("settings"));
346346
onEachLazy(document.querySelectorAll(".settings-menu"), settingsButton => {
347347
/** @param {MouseEvent} event */
348-
settingsButton.onclick = event => {
348+
settingsButton.querySelector("a").onclick = event => {
349349
if (!(event.target instanceof Element) || settingsMenu.contains(event.target)) {
350350
return;
351351
}

‎tests/rustdoc-gui/item-info.goml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ store-position: (
2020
{"x": second_line_x, "y": second_line_y},
2121
)
2222
assert: |first_line_x| != |second_line_x| && |first_line_x| == 521 && |second_line_x| == 277
23-
assert: |first_line_y| != |second_line_y| && |first_line_y| == 674 && |second_line_y| == 697
23+
assert: |first_line_y| != |second_line_y| && |first_line_y| == 676 && |second_line_y| == 699
2424

2525
// Now we ensure that they're not rendered on the same line.
2626
set-window-size: (1100, 800)

‎tests/rustdoc-gui/search-result-display.goml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ set-text: (
6666
)
6767

6868
// Then we compare again to confirm the height didn't change.
69-
assert-size: ("#crate-search", {"width": 179})
69+
assert-size: ("#crate-search", {"width": 185})
7070
assert-size: (".search-switcher", {
7171
"height": |search_results_title_height|,
7272
})

‎tests/rustdoc-gui/sidebar-source-code-display.goml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ click: "#sidebar-button"
141141
wait-for-css: (".src .sidebar > *", {"visibility": "hidden"})
142142
// We scroll to line 117 to change the scroll position.
143143
scroll-to: '//*[@id="117"]'
144-
store-value: (y_offset, "2549")
144+
store-value: (y_offset, "2567")
145145
assert-window-property: {"pageYOffset": |y_offset|}
146146
// Expanding the sidebar...
147147
click: "#sidebar-button"

‎tests/rustdoc-gui/source-anchor-scroll.goml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ set-window-size: (600, 800)
88
assert-property: ("html", {"scrollTop": "0"})
99

1010
click: '//a[text() = "barbar" and @href="#5-7"]'
11-
assert-property: ("html", {"scrollTop": "177"})
11+
assert-property: ("html", {"scrollTop": "195"})
1212
click: '//a[text() = "bar" and @href="#28-36"]'
13-
assert-property: ("html", {"scrollTop": "210"})
13+
assert-property: ("html", {"scrollTop": "228"})
1414
click: '//a[normalize-space() = "sub_fn" and @href="#2-4"]'
15-
assert-property: ("html", {"scrollTop": "105"})
15+
assert-property: ("html", {"scrollTop": "123"})
1616

1717
// We now check that clicking on lines doesn't change the scroll
1818
// Extra information: the "sub_fn" function header is on line 1.
1919
click: '//*[@id="6"]'
20-
assert-property: ("html", {"scrollTop": "105"})
20+
assert-property: ("html", {"scrollTop": "123"})

‎tests/rustdoc-gui/type-declation-overflow.goml

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,20 +54,20 @@ assert-css: ("rustdoc-topbar h2", {"overflow-x": "hidden"})
5454
// Check that main heading and toolbar go side-by-side, both on desktop and on mobile.
5555
set-window-size: (1100, 800)
5656
go-to: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html"
57-
compare-elements-position: (".main-heading h1", ".main-heading rustdoc-toolbar", ["y"])
58-
compare-elements-position-near-false: (".main-heading h1", ".main-heading rustdoc-toolbar", {"x": 300})
57+
compare-elements-position: (".main-heading h1", ".main-heading rustdoc-toolbar #search-button", ["y"])
58+
compare-elements-position-near-false: (".main-heading h1", ".main-heading rustdoc-toolbar #search-button", {"x": 300})
5959
go-to: "file://" + |DOC_PATH| + "/lib2/index.html"
60-
compare-elements-position: (".main-heading h1", ".main-heading rustdoc-toolbar", ["y"])
61-
compare-elements-position-near-false: (".main-heading h1", ".main-heading rustdoc-toolbar", {"x": 300})
60+
compare-elements-position: (".main-heading h1", ".main-heading rustdoc-toolbar #search-button", ["y"])
61+
compare-elements-position-near-false: (".main-heading h1", ".main-heading rustdoc-toolbar #search-button", {"x": 300})
6262

6363
// On mobile, they always wrap.
6464
set-window-size: (600, 600)
6565
go-to: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html"
66-
compare-elements-position: (".main-heading h1", ".main-heading rustdoc-toolbar", ["y"])
67-
compare-elements-position-near-false: (".main-heading h1", ".main-heading rustdoc-toolbar", {"x": 200})
66+
compare-elements-position: (".main-heading h1", ".main-heading rustdoc-toolbar #search-button", ["y"])
67+
compare-elements-position-near-false: (".main-heading h1", ".main-heading rustdoc-toolbar #search-button", {"x": 200})
6868
go-to: "file://" + |DOC_PATH| + "/lib2/index.html"
69-
compare-elements-position: (".main-heading h1", ".main-heading rustdoc-toolbar", ["y"])
70-
compare-elements-position-near-false: (".main-heading h1", ".main-heading rustdoc-toolbar", {"x": 200})
69+
compare-elements-position: (".main-heading h1", ".main-heading rustdoc-toolbar #search-button", ["y"])
70+
compare-elements-position-near-false: (".main-heading h1", ".main-heading rustdoc-toolbar #search-button", {"x": 200})
7171

7272
// Now we will check that the scrolling is working.
7373
// First on an item with "hidden methods".

0 commit comments

Comments
 (0)