Skip to content

Commit 9700a23

Browse files
notriddlenotriddle
committed
Fix styles and
1 parent f5eaae6 commit 9700a23

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
@@ -2002,17 +2002,16 @@ a.tooltip:hover::after {
20022002
left: 6px;
20032003
height: 34px;
20042004
width: 34px;
2005+
z-index: calc(var(--desktop-sidebar-z-index) + 1);
20052006
}
20062007
.hide-sidebar #sidebar-button {
20072008
left: 6px;
20082009
background-color: var(--main-background-color);
2009-
z-index: 1;
20102010
}
20112011
.src #sidebar-button {
20122012
margin-top: 0;
20132013
top: 8px;
20142014
left: 8px;
2015-
z-index: calc(var(--desktop-sidebar-z-index) + 1);
20162015
border-color: var(--border-color);
20172016
}
20182017
.hide-sidebar .src #sidebar-button {
@@ -2044,14 +2043,14 @@ button#toggle-all-docs {
20442043
min-width: 0;
20452044
}
20462045
#sidebar-button > a {
2046+
border: solid 1px transparent;
2047+
border-radius: var(--button-border-radius);
20472048
background-color: var(--button-background-color);
20482049
width: 33px;
20492050
}
20502051
.src #sidebar-button > a {
2051-
background-color: transparent;
2052-
}
2053-
#sidebar-button > a:hover, #sidebar-button > a:focus-visible {
2054-
background-color: var(--main-background-color);
2052+
background-color: var(--sidebar-background-color);
2053+
border-color: var(--border-color);
20552054
}
20562055

20572056
#search-button > a:hover, #search-button > a:focus-visible,
@@ -2109,17 +2108,31 @@ button#toggle-all-docs::before {
21092108
}
21102109

21112110
.help-menu > a::before {
2112-
/* Question mark with circle */
2113-
content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 12 12" \
2114-
enable-background="new 0 0 12 12" xmlns="http://www.w3.org/2000/svg" fill="none">\
2115-
<circle r="5.25" cx="6" cy="6" stroke-width="1.5" stroke="black"/>\
2116-
<text x="6" y="7" style="font:8px sans-serif;font-weight:1000" text-anchor="middle" \
2117-
dominant-baseline="middle" fill="black">?</text></svg>');
2111+
/* Question mark with "circle" */
2112+
content: url('data:image/svg+xml,\
2113+
<svg width="18" height="18" enable-background="new 0 0 12 12" fill="none" \
2114+
version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"> \
2115+
<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 \
2116+
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" \
2117+
stroke-width="1.5"/>\
2118+
<path d="m5.999 7.932c0.3111 0 0.7062 0.2915 0.7062 0.7257 0 0.5458-0.3951 \
2119+
0.8099-0.7081 0.8099-0.2973 0-0.7023-0.266-0.7023-0.7668 0-0.4695 0.3834-0.7688 \
2120+
0.7042-0.7688z" fill="black"/>\
2121+
<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 \
2122+
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 \
2123+
1.595-0.05728 0.2939 0.0134 0.9812 0.0134 1.205" fill="none" stroke="black" \
2124+
stroke-width="1.25"/>\
2125+
</svg>');
21182126
width: 18px;
21192127
height: 18px;
21202128
filter: var(--settings-menu-filter);
21212129
}
21222130

2131+
.help-menu > a {
2132+
/* design hack to cope with "Help" being far shorter than "Settings" etc */
2133+
width: 74px;
2134+
}
2135+
21232136
#search-button > a::before,
21242137
button#toggle-all-docs::before,
21252138
.help-menu > a::before,
@@ -2158,9 +2171,9 @@ rustdoc-toolbar span.label {
21582171
/* sidebar resizer image */
21592172
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" \
21602173
fill="none" stroke="black">\
2161-
<rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5" stroke="%23777"/>\
2162-
<circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\
2163-
<path d="m7.6121 3v16 M5.375 7.625h-2 m2 3h-2 m2 3h-2" stroke-width="1.25"/></svg>');
2174+
<rect x="1" y="2" width="20" height="18" ry="1.5" stroke-width="1.5" stroke="%23777"/>\
2175+
<circle cx="4.375" cy="5.375" r="1" stroke-width=".75"/>\
2176+
<path d="m7.6121 4v14 M5.375 8.625h-2 m2 3h-2 m2 3h-2" stroke-width="1.25"/></svg>');
21642177
width: 22px;
21652178
height: 22px;
21662179
}
@@ -2439,6 +2452,9 @@ However, it's not needed with smaller screen width because the doc/code block is
24392452
opacity: 0.75;
24402453
filter: var(--mobile-sidebar-menu-filter);
24412454
}
2455+
.src #sidebar-button > a:hover {
2456+
background: var(--main-background-color);
2457+
}
24422458
.sidebar-menu-toggle:hover::before,
24432459
.sidebar-menu-toggle:active::before,
24442460
.sidebar-menu-toggle:focus::before {
@@ -2461,32 +2477,34 @@ However, it's not needed with smaller screen width because the doc/code block is
24612477

24622478
/* Text label takes up too much space at this size. */
24632479
.main-heading {
2464-
grid-template-areas:
2465-
"main-heading-breadcrumbs main-heading-toolbar"
2466-
"main-heading-h1 main-heading-toolbar"
2467-
"main-heading-sub-heading main-heading-toolbar";
2480+
grid-template-areas:
2481+
"main-heading-breadcrumbs main-heading-toolbar"
2482+
"main-heading-h1 main-heading-toolbar"
2483+
"main-heading-sub-heading main-heading-toolbar";
24682484
}
24692485
.search-results-main-heading {
2470-
display: grid;
2471-
grid-template-areas:
2472-
"main-heading-breadcrumbs main-heading-toolbar"
2473-
"main-heading-breadcrumbs main-heading-toolbar"
2474-
"main-heading-h1 main-heading-toolbar";
2486+
display: grid;
2487+
grid-template-areas:
2488+
"main-heading-breadcrumbs main-heading-toolbar"
2489+
"main-heading-breadcrumbs main-heading-toolbar"
2490+
"main-heading-h1 main-heading-toolbar";
24752491
}
24762492
rustdoc-toolbar {
2477-
display: grid;
2478-
grid-template-areas:
2479-
"x settings help"
2480-
"search summary summary";
2493+
margin-top: -10px;
2494+
display: grid;
2495+
grid-template-areas:
2496+
"x settings help"
2497+
"search summary summary";
2498+
grid-template-rows: 35px 1fr;
24812499
}
24822500
.search-results-main-heading rustdoc-toolbar {
2483-
display: grid;
2484-
grid-template-areas:
2485-
"settings help"
2486-
"search search";
2501+
display: grid;
2502+
grid-template-areas:
2503+
"settings help"
2504+
"search search";
24872505
}
24882506
.search-results-main-heading #toggle-all-docs {
2489-
display: none;
2507+
display: none;
24902508
}
24912509
rustdoc-toolbar .settings-menu span.label,
24922510
rustdoc-toolbar .help-menu span.label
@@ -2508,22 +2526,27 @@ However, it's not needed with smaller screen width because the doc/code block is
25082526
rustdoc-toolbar #toggle-all-docs {
25092527
grid-area: summary;
25102528
}
2529+
rustdoc-toolbar .settings-menu,
2530+
rustdoc-toolbar .help-menu {
2531+
height: 35px;
2532+
}
25112533
rustdoc-toolbar .settings-menu > a,
25122534
rustdoc-toolbar .help-menu > a {
2513-
border-radius: 2px;
2514-
text-align: center;
2515-
width: 40px;
2535+
border-radius: 2px;
2536+
text-align: center;
2537+
width: 34px;
2538+
padding: 5px 0;
25162539
}
25172540
rustdoc-toolbar .settings-menu > a:before,
25182541
rustdoc-toolbar .help-menu > a:before {
2519-
margin: 0 4px;
2542+
margin: 0 4px;
25202543
}
25212544
#settings.popover {
2522-
top: 16px;
2545+
top: 16px;
25232546
--popover-arrow-offset: 58px;
25242547
}
25252548
#help.popover {
2526-
top: 16px;
2549+
top: 16px;
25272550
--popover-arrow-offset: 16px;
25282551
}
25292552
}
@@ -2558,42 +2581,29 @@ in src-script.js and main.js
25582581

25592582

25602583
/* Pull settings and help up into the top bar. */
2561-
.main-heading {
2562-
grid-template-areas:
2563-
"main-heading-breadcrumbs main-heading-breadcrumbs"
2564-
"main-heading-h1 main-heading-toolbar"
2565-
"main-heading-sub-heading main-heading-toolbar";
2566-
}
2567-
.search-results-main-heading {
2568-
display: grid;
2569-
grid-template-areas:
2570-
"main-heading-breadcrumbs main-heading-placeholder"
2571-
"main-heading-breadcrumbs main-heading-toolbar"
2572-
"main-heading-h1 main-heading-toolbar";
2573-
}
25742584
rustdoc-topbar span.label,
2575-
rustdoc-toolbar .settings-menu,
2576-
rustdoc-toolbar .help-menu
2585+
html:not(.hide-sidebar) .rustdoc:not(.src) rustdoc-toolbar .settings-menu > a,
2586+
html:not(.hide-sidebar) .rustdoc:not(.src) rustdoc-toolbar .help-menu > a
25772587
{
25782588
display: none;
25792589
}
25802590
rustdoc-topbar .settings-menu > a,
25812591
rustdoc-topbar .help-menu > a {
25822592
width: 33px;
2583-
line-height: 0;
2593+
line-height: 0;
25842594
}
25852595
rustdoc-topbar .settings-menu > a:hover,
25862596
rustdoc-topbar .help-menu > a:hover {
25872597
border: none;
2588-
background: var(--main-background-color);
2589-
border-radius: 0;
2598+
background: var(--main-background-color);
2599+
border-radius: 0;
25902600
}
25912601
#settings.popover {
2592-
top: 32px;
2602+
top: 32px;
25932603
--popover-arrow-offset: 48px;
25942604
}
25952605
#help.popover {
2596-
top: 32px;
2606+
top: 32px;
25972607
--popover-arrow-offset: 12px;
25982608
}
25992609

@@ -2603,7 +2613,7 @@ in src-script.js and main.js
26032613
display: block;
26042614
}
26052615

2606-
main {
2616+
html:not(.hide-sidebar) main {
26072617
padding-left: 15px;
26082618
padding-top: 0px;
26092619
}
@@ -2642,6 +2652,9 @@ in src-script.js and main.js
26422652
height: 100vh;
26432653
border: 0;
26442654
}
2655+
html .src main {
2656+
padding: 18px 0;
2657+
}
26452658
.src .search-form {
26462659
margin-left: 40px;
26472660
}
@@ -2663,7 +2676,7 @@ in src-script.js and main.js
26632676

26642677
rustdoc-topbar > h2 {
26652678
padding-bottom: 0;
2666-
margin: auto;
2679+
margin: auto;
26672680
overflow: hidden;
26682681
/* Rare exception to specifying font sizes in rem. Since the topbar
26692682
height is specified in pixels, this also has to be specified in
@@ -2672,7 +2685,7 @@ in src-script.js and main.js
26722685
font-size: 24px;
26732686
white-space: nowrap;
26742687
text-overflow: ellipsis;
2675-
text-align: center;
2688+
text-align: center;
26762689
}
26772690

26782691
rustdoc-topbar .logo-container > img {
@@ -2697,9 +2710,9 @@ in src-script.js and main.js
26972710
}
26982711

26992712
.sidebar-menu-toggle {
2700-
/* prevent flexbox shrinking */
2713+
/* prevent flexbox shrinking */
27012714
width: 41px;
2702-
min-width: 41px;
2715+
min-width: 41px;
27032716
border: none;
27042717
line-height: 0;
27052718
}
@@ -2722,15 +2735,16 @@ in src-script.js and main.js
27222735
}
27232736

27242737
/* sidebar button becomes topbar button */
2725-
.hide-sidebar #sidebar-button {
2726-
margin-top: 0;
2727-
}
27282738
#sidebar-button > a::before {
27292739
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
27302740
viewBox="0 0 22 22" fill="none" stroke="black">\
2731-
<rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5" stroke="%23777"/>\
2732-
<circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\
2733-
<path d="m3 7.375h16m0-3h-4" stroke-width="1.25"/></svg>');
2741+
<rect x="1" y="2" width="20" height="18" ry="1.5" stroke-width="1.5" stroke="%23777"/>\
2742+
<g fill="black" stroke="none">\
2743+
<circle cx="4.375" cy="5.375" r="1" stroke-width=".75"/>\
2744+
<circle cx="17.375" cy="5.375" r="1" stroke-width=".75"/>\
2745+
<circle cx="14.375" cy="5.375" r="1" stroke-width=".75"/>\
2746+
</g>\
2747+
<path d="m3 8.375h16" stroke-width="1.25"/></svg>');
27342748
width: 22px;
27352749
height: 22px;
27362750
}

‎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)