bjoernager/rust
bjoernager/rust
1
Fork 0
Code Issues Pull requests Activity
rust/src/librustdoc/html/static/css/rustdoc.css

2887 lines
74 KiB
CSS
Raw Normal View History

add comment to rustdoc.css on updating filename suffixes
2023-01-27 15:49:08 +01:00
/* When static files are updated, their suffixes need to be updated.
1. In the top directory run:
./x.py doc --stage 1 library/core
2. Find the directory containing files named with updated suffixes:
find build -path '*'/stage1-std/'*'/static.files
3. Copy the filenames with updated suffixes from the directory.
*/
Improve display of logo on very small screens
2023-04-05 17:13:00 +02:00
:root {
--nav-sub-mobile-padding: 8px;
Fix display of long items in search results
2023-06-27 15:05:43 +02:00
--search-typename-width: 6.75rem;
rustdoc: enforce BODY_MIN constraint on sidebar resize
2023-09-27 08:59:32 -07:00
/* DEFAULT_SIDEBAR_WIDTH
see main.js for information on these values
and on the RUSTDOC_MOBILE_BREAKPOINT */
--desktop-sidebar-width: 200px;
--src-sidebar-width: 300px;
use css variable for z-index of the sidebar and calculate the z-indices of things that go over the sidebar
2023-12-31 22:25:46 +01:00
--desktop-sidebar-z-index: 100;
rustdoc: click target for sidebar items flush left
2024-07-01 17:08:49 -07:00
--sidebar-elems-left-padding: 24px;
Add copy code button
2024-05-29 23:40:58 +02:00
/* clipboard <https://github.com/rust-lang/crates.io/commits/main/public/assets/copy.svg> */
--clipboard-image: url('data:image/svg+xml,<svg width="19" height="18" viewBox="0 0 24 25" \
xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \
0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \
7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \
2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
</svg>');
Make "copy code" button the same size as the "copy path" button
2024-06-03 09:55:11 +02:00
--copy-path-height: 34px;
--copy-path-width: 33px;
Add copy code button
2024-05-29 23:40:58 +02:00
/* Checkmark <https://www.svgrepo.com/svg/335033/checkmark> */
--checkmark-image: url('data:image/svg+xml,<svg viewBox="-1 -1 23 23" \
xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
<g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"></path>\
</g></svg>');
Unify UI between code block buttons and top buttons
2024-06-03 21:27:29 +02:00
--button-left-margin: 4px;
--button-border-radius: 2px;
Improve display of logo on very small screens
2023-04-05 17:13:00 +02:00
}
Make rustdoc output comply with licenses The output of rustdoc includes resources licensed under the SIL Open Font License, the MIT license, and the Apache License 2.0. All of these licenses permit redistribution provided that the license text is also redistributed. Previously this was not the case, making rustdoc output unsuitable for distribution by default. This resolves that problem by including the license texts in rustdoc output.
2015-09-19 10:42:03 +01:00
/* See FiraSans-LICENSE.txt for the Fira Sans license. */
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
@font-face {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-family: 'Fira Sans';
font-style: normal;
font-weight: 400;
Add optional woff2 versions of FiraSans. For browsers that support woff2 (most modern ones: https://caniuse.com/woff2), this offers a reduction in download size for these two fonts from 362k to 257k (32% reduction). It decreases the total page size for `struct.String.html` (counting all subresources) by about 2.5%. If this is interesting, I'm happy to apply the same treatment to the other fonts, but these two are the biggest.
2021-02-26 00:02:11 -08:00
src: local('Fira Sans'),
rustdoc: add hash to filename of toolchain files All static files used by rustdoc are now stored in static.files/ and include a hash of their contents. They no longer include the contents of the --resource-suffix flag. This clarifies caching semantics. Anything in static.files can use Cache-Control: immutable because any updates will show up as a new URL. Invocation-specific files like crates-NN.js, search-index-NN.js, and sidebar-items-NN.js still get the resource suffix. The --disable-minification flag is removed because it would vary the output of static files based on invocation flags. Instead, for rustdoc development purposes it's preferable to symlink static files to a non-minified copy for quick iteration.
2022-10-24 01:28:55 -07:00
url("FiraSans-Regular-018c141bf0843ffd.woff2") format("woff2");
Improve page load performance in rustdoc. Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/. Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load.
2021-02-19 17:54:41 -08:00
font-display: swap;
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
}
@font-face {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-family: 'Fira Sans';
font-style: normal;
font-weight: 500;
Add optional woff2 versions of FiraSans. For browsers that support woff2 (most modern ones: https://caniuse.com/woff2), this offers a reduction in download size for these two fonts from 362k to 257k (32% reduction). It decreases the total page size for `struct.String.html` (counting all subresources) by about 2.5%. If this is interesting, I'm happy to apply the same treatment to the other fonts, but these two are the biggest.
2021-02-26 00:02:11 -08:00
src: local('Fira Sans Medium'),
rustdoc: add hash to filename of toolchain files All static files used by rustdoc are now stored in static.files/ and include a hash of their contents. They no longer include the contents of the --resource-suffix flag. This clarifies caching semantics. Anything in static.files can use Cache-Control: immutable because any updates will show up as a new URL. Invocation-specific files like crates-NN.js, search-index-NN.js, and sidebar-items-NN.js still get the resource suffix. The --disable-minification flag is removed because it would vary the output of static files based on invocation flags. Instead, for rustdoc development purposes it's preferable to symlink static files to a non-minified copy for quick iteration.
2022-10-24 01:28:55 -07:00
url("FiraSans-Medium-8f9a781e4970d388.woff2") format("woff2");
Improve page load performance in rustdoc. Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/. Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load.
2021-02-19 17:54:41 -08:00
font-display: swap;
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
}
Make rustdoc output comply with licenses The output of rustdoc includes resources licensed under the SIL Open Font License, the MIT license, and the Apache License 2.0. All of these licenses permit redistribution provided that the license text is also redistributed. Previously this was not the case, making rustdoc output unsuitable for distribution by default. This resolves that problem by including the license texts in rustdoc output.
2015-09-19 10:42:03 +01:00
Update Source Serif to release 4.004 Now the family name is Source Serif 4 (upstream issue 77) instead of Source Serif Pro.
2021-03-29 18:33:22 +02:00
/* See SourceSerif4-LICENSE.md for the Source Serif 4 license. */
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
@font-face {
Update Source Serif to release 4.004 Now the family name is Source Serif 4 (upstream issue 77) instead of Source Serif Pro.
2021-03-29 18:33:22 +02:00
font-family: 'Source Serif 4';
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-style: normal;
font-weight: 400;
rustdoc: add optional woff2 versions of Source Serif and Source Code
2021-06-17 17:36:42 +02:00
src: local('Source Serif 4'),
rustdoc: update Source Serif 4 from 4.004 to 4.005 Version 4.005 was released on 2023-01-20.
2023-01-27 12:43:00 +01:00
url("SourceSerif4-Regular-46f98efaafac5295.ttf.woff2") format("woff2");
Improve page load performance in rustdoc. Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/. Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load.
2021-02-19 17:54:41 -08:00
font-display: swap;
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
}
@font-face {
Update Source Serif to release 4.004 Now the family name is Source Serif 4 (upstream issue 77) instead of Source Serif Pro.
2021-03-29 18:33:22 +02:00
font-family: 'Source Serif 4';
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-style: italic;
font-weight: 400;
rustdoc: add optional woff2 versions of Source Serif and Source Code
2021-06-17 17:36:42 +02:00
src: local('Source Serif 4 Italic'),
rustdoc: update Source Serif 4 from 4.004 to 4.005 Version 4.005 was released on 2023-01-20.
2023-01-27 12:43:00 +01:00
url("SourceSerif4-It-acdfaf1a8af734b1.ttf.woff2") format("woff2");
Improve page load performance in rustdoc. Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/. Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load.
2021-02-19 17:54:41 -08:00
font-display: swap;
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
}
@font-face {
Update Source Serif to release 4.004 Now the family name is Source Serif 4 (upstream issue 77) instead of Source Serif Pro.
2021-03-29 18:33:22 +02:00
font-family: 'Source Serif 4';
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-style: normal;
font-weight: 700;
rustdoc: add optional woff2 versions of Source Serif and Source Code
2021-06-17 17:36:42 +02:00
src: local('Source Serif 4 Bold'),
rustdoc: update Source Serif 4 from 4.004 to 4.005 Version 4.005 was released on 2023-01-20.
2023-01-27 12:43:00 +01:00
url("SourceSerif4-Bold-a2c9cd1067f8b328.ttf.woff2") format("woff2");
Improve page load performance in rustdoc. Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/. Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load.
2021-02-19 17:54:41 -08:00
font-display: swap;
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
}
Make rustdoc output comply with licenses The output of rustdoc includes resources licensed under the SIL Open Font License, the MIT license, and the Apache License 2.0. All of these licenses permit redistribution provided that the license text is also redistributed. Previously this was not the case, making rustdoc output unsuitable for distribution by default. This resolves that problem by including the license texts in rustdoc output.
2015-09-19 10:42:03 +01:00
/* See SourceCodePro-LICENSE.txt for the Source Code Pro license. */
webfonts: serve Source Code Pro locally So that we have freestanding docs.
2014-07-08 20:26:23 +02:00
@font-face {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
Avoid using locally installed Source Code Pro font (fixes #24355). In some versions of this font the ampersands are drawn badly.
2016-12-04 13:44:19 -08:00
/* Avoid using locally installed font because bad versions are in circulation:
* see https://github.com/rust-lang/rust/issues/24355 */
rustdoc: add hash to filename of toolchain files All static files used by rustdoc are now stored in static.files/ and include a hash of their contents. They no longer include the contents of the --resource-suffix flag. This clarifies caching semantics. Anything in static.files can use Cache-Control: immutable because any updates will show up as a new URL. Invocation-specific files like crates-NN.js, search-index-NN.js, and sidebar-items-NN.js still get the resource suffix. The --disable-minification flag is removed because it would vary the output of static files based on invocation flags. Instead, for rustdoc development purposes it's preferable to symlink static files to a non-minified copy for quick iteration.
2022-10-24 01:28:55 -07:00
src: url("SourceCodePro-Regular-562dcc5011b6de7d.ttf.woff2") format("woff2");
Update Source Code Pro and include italics
2021-03-04 15:38:31 +01:00
font-display: swap;
}
@font-face {
font-family: 'Source Code Pro';
font-style: italic;
font-weight: 400;
rustdoc: add hash to filename of toolchain files All static files used by rustdoc are now stored in static.files/ and include a hash of their contents. They no longer include the contents of the --resource-suffix flag. This clarifies caching semantics. Anything in static.files can use Cache-Control: immutable because any updates will show up as a new URL. Invocation-specific files like crates-NN.js, search-index-NN.js, and sidebar-items-NN.js still get the resource suffix. The --disable-minification flag is removed because it would vary the output of static files based on invocation flags. Instead, for rustdoc development purposes it's preferable to symlink static files to a non-minified copy for quick iteration.
2022-10-24 01:28:55 -07:00
src: url("SourceCodePro-It-1cc31594bf4f1f79.ttf.woff2") format("woff2");
Improve page load performance in rustdoc. Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/. Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load.
2021-02-19 17:54:41 -08:00
font-display: swap;
webfonts: serve Source Code Pro locally So that we have freestanding docs.
2014-07-08 20:26:23 +02:00
}
@font-face {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 600;
rustdoc: add hash to filename of toolchain files All static files used by rustdoc are now stored in static.files/ and include a hash of their contents. They no longer include the contents of the --resource-suffix flag. This clarifies caching semantics. Anything in static.files can use Cache-Control: immutable because any updates will show up as a new URL. Invocation-specific files like crates-NN.js, search-index-NN.js, and sidebar-items-NN.js still get the resource suffix. The --disable-minification flag is removed because it would vary the output of static files based on invocation flags. Instead, for rustdoc development purposes it's preferable to symlink static files to a non-minified copy for quick iteration.
2022-10-24 01:28:55 -07:00
src: url("SourceCodePro-Semibold-d899c5a5c4aeb14a.ttf.woff2") format("woff2");
Improve page load performance in rustdoc. Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/. Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load.
2021-02-19 17:54:41 -08:00
font-display: swap;
webfonts: serve Source Code Pro locally So that we have freestanding docs.
2014-07-08 20:26:23 +02:00
}
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
rustdoc: update noto sans kr
2021-10-12 04:47:34 +09:00
/* Avoid using legacy CJK serif fonts in Windows like Batang. */
rustdoc: avoid legacy Korean fonts in Windows
2021-05-15 14:01:27 +09:00
@font-face {
rustdoc: use ttf based font for cjk glyphs
2021-10-26 10:58:13 +09:00
font-family: 'NanumBarunGothic';
rustdoc: add hash to filename of toolchain files All static files used by rustdoc are now stored in static.files/ and include a hash of their contents. They no longer include the contents of the --resource-suffix flag. This clarifies caching semantics. Anything in static.files can use Cache-Control: immutable because any updates will show up as a new URL. Invocation-specific files like crates-NN.js, search-index-NN.js, and sidebar-items-NN.js still get the resource suffix. The --disable-minification flag is removed because it would vary the output of static files based on invocation flags. Instead, for rustdoc development purposes it's preferable to symlink static files to a non-minified copy for quick iteration.
2022-10-24 01:28:55 -07:00
src: url("NanumBarunGothic-0f09457c7a19b7c6.ttf.woff2") format("woff2");
rustdoc: avoid legacy Korean fonts in Windows
2021-05-15 14:01:27 +09:00
font-display: swap;
rustdoc: use ttf based font for cjk glyphs
2021-10-26 10:58:13 +09:00
unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
rustdoc: avoid legacy Korean fonts in Windows
2021-05-15 14:01:27 +09:00
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
* {
Fix tidy issues
2020-07-15 17:20:46 +02:00
box-sizing: border-box;
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
}
rustdoc: nitpicks & cleanup
2013-10-14 21:32:12 +02:00
/* General structure and fonts */
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
body {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
/* Line spacing at least 1.5 per Web Content Accessibility Guidelines
https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */
font: 1rem/1.5 "Source Serif 4", NanumBarunGothic, serif;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
margin: 0;
position: relative;
Enable wrapping words by default Faced with a very long word, browsers will let it overflow its box horizontally rather than break it in the middle. We essentially never want that behavior. We would rather break the word and keep it inside its horizontal limits. So we apply a default overflow-wrap: break-word/anywhere to the document as a while. In some contexts we would rather add a horizontal scrollbar (code blocks), or elide the excess text with an ellipsis (sidebar). Those still work as expected.
2022-01-11 17:36:52 -08:00
/* We use overflow-wrap: break-word for Safari, which doesn't recognize
`anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */
overflow-wrap: break-word;
/* Then override it with `anywhere`, which is required to make non-Safari browsers break
more aggressively when we want them to. */
overflow-wrap: anywhere;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-feature-settings: "kern", "liga";
Simplify CSS theming by setting CSS variables
2022-06-24 17:03:04 +02:00
background-color: var(--main-background-color);
color: var(--main-color);
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
}
rustdoc: style tweaks
2014-04-27 09:07:12 +03:00
h1 {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 1.5rem; /* 24px */
rustdoc: style tweaks
2014-04-27 09:07:12 +03:00
}
h2 {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 1.375rem; /* 22px */
rustdoc: style tweaks
2014-04-27 09:07:12 +03:00
}
h3 {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 1.25rem; /* 20px */
rustdoc: style tweaks
2014-04-27 09:07:12 +03:00
}
librustdoc: Use correct heading levels. - Avoid multiple <h1>s on a page. - The <h#> tags should follow a semantic hierarchy. - Cap at h6 (no h7)
2021-10-01 06:17:15 -04:00
h1, h2, h3, h4, h5, h6 {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-weight: 500;
Reduce margin on h5 and h6
2021-10-18 21:04:38 -07:00
}
h1, h2, h3, h4 {
rustdoc: use CSS containment to speed up render https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient. Also remove an unnecessary margin-top on .code-header.
2022-09-27 09:21:24 -07:00
margin: 25px 0 15px 0;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
padding-bottom: 6px;
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
}
Remove underlines from non-top docblocks. We still had a number of places where underlined section headings would show up, like under Implementations.
2021-10-21 23:09:11 -07:00
.docblock h3, .docblock h4, h5, h6 {
Reduce margin on h5 and h6
2021-10-18 21:04:38 -07:00
margin: 15px 0 5px 0;
}
rustdoc: cut margin-top from first header in docblock Fixes a regression caused by 8846c0853d8687fda0e5f23f6687b03b243980ee, where a header's top margin used to be collapsed, but isn't any more.
2022-09-28 14:33:56 -07:00
.docblock > h2:first-child,
.docblock > h3:first-child,
.docblock > h4:first-child,
.docblock > h5:first-child,
.docblock > h6:first-child {
margin-top: 0;
}
rustdoc: remove unnecessary DOM class `h1.fqn` It's misleading. The main heading sometimes isn't an fully qualified name at all. It's also redundant. It's always a child of `div.main-heading`, so just use that.
2023-01-13 10:09:25 -07:00
.main-heading h1 {
Make source links look cleaner Change from syntaxy-looking [src] to the plain word "source".
2021-12-03 17:09:04 -08:00
margin: 0;
padding: 0;
rustdoc: remove unused CSS class `in-band` Since a7c25b29575c17434406b69773f8c2961af343b3 removed `in-band` from code headers, the only remaining uses of the `in-band` class are: https://github.com/rust-lang/rust/blob/02cd79afb8080fce8c8ce35533c54d8ecf8f390e/src/librustdoc/html/render/write_shared.rs#L520-L521 https://github.com/rust-lang/rust/blob/02cd79afb8080fce8c8ce35533c54d8ecf8f390e/src/librustdoc/html/templates/print_item.html#L2-L3 https://github.com/rust-lang/rust/blob/02cd79afb8080fce8c8ce35533c54d8ecf8f390e/src/librustdoc/html/render/context.rs#L637-L638 https://github.com/rust-lang/rust/blob/02cd79afb8080fce8c8ce35533c54d8ecf8f390e/src/librustdoc/html/render/mod.rs#L368-L369 https://github.com/rust-lang/rust/blob/02cd79afb8080fce8c8ce35533c54d8ecf8f390e/src/librustdoc/html/render/mod.rs#L401-L402 https://github.com/rust-lang/rust/blob/02cd79afb8080fce8c8ce35533c54d8ecf8f390e/src/librustdoc/html/static/js/main.js#L525 Since all of these uses are nested below `h1.fqn`, we can get rid of it, and the support code that was used for when `in-band` was part of item rendering.
2022-10-04 11:54:40 -07:00
flex-grow: 1;
/* We use overflow-wrap: break-word for Safari, which doesn't recognize
`anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */
overflow-wrap: break-word;
/* Then override it with `anywhere`, which is required to make non-Safari browsers break
more aggressively when we want them to. */
overflow-wrap: anywhere;
Make source links look cleaner Change from syntaxy-looking [src] to the plain word "source".
2021-12-03 17:09:04 -08:00
}
.main-heading {
Uses flex to fix formatting of h1 at any width.
2021-04-20 22:31:48 +02:00
display: flex;
Rustdoc mobile: put out-of-band on its own line Before this, the item name and the stability, source link, and "collapse all docs" would compete for room on a single line, resulting in awkward wrapping behavior on mobile. This gives a separate line for that out-of-band information. It also removes the "copy path" icon on mobile to make a little more room. Also, switch to flex-wrap: wrap, so anytime there's not enough room for `source`, it gets bumped to the next line.
2022-01-13 09:54:44 -08:00
flex-wrap: wrap;
padding-bottom: 6px;
Make source links look cleaner Change from syntaxy-looking [src] to the plain word "source".
2021-12-03 17:09:04 -08:00
margin-bottom: 15px;
Tweaked the design to be a lot cleaner. Signed-off-by: Daniel Fagnan <dnfagnan@gmail.com>
2014-03-18 01:44:55 -06:00
}
Remove underlines from non-top docblocks. We still had a number of places where underlined section headings would show up, like under Implementations.
2021-10-21 23:09:11 -07:00
/* The only headings that get underlines are:
Markdown-generated headings within the top-doc
Rustdoc-generated h2 section headings (e.g. "Implementations", "Required Methods", etc)
Underlines elsewhere in the documentation break up visual flow and tend to invert
section hierarchies. */
rustdoc: remove class name `location` from sidebar sibling nav This change tweaks the CSS to apply most of its styles to `.sidebar h2`, cleaning up a few redundant rules from `.mobile-topbar .location` and restoring useful navigation aids in mobile mode.
2022-10-18 11:14:01 -07:00
.content h2,
Improve display of `<details>` in doc blocks
2022-05-21 13:57:52 +02:00
.top-doc .docblock > h3,
.top-doc .docblock > h4 {
Fix headings border
2022-07-27 15:36:27 +02:00
border-bottom: 1px solid var(--headings-border-bottom-color);
Tweaked the design to be a lot cleaner. Signed-off-by: Daniel Fagnan <dnfagnan@gmail.com>
2014-03-18 01:44:55 -06:00
}
rustdoc: use tighter line height in h1 and h2
2023-02-12 12:27:40 -07:00
/* while line-height 1.5 is required for any "block of text",
which WCAG defines as more than one sentence, it looks weird for
very large main headers */
h1, h2 {
line-height: 1.25;
padding-top: 3px;
padding-bottom: 9px;
}
Outdent method headings so they stand out The makes the heading / documentation distinction clearer.
2021-10-21 18:46:47 -07:00
h3.code-header {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 1.125rem; /* 18px */
Outdent method headings so they stand out The makes the heading / documentation distinction clearer.
2021-10-21 18:46:47 -07:00
}
h4.code-header {
Set font size proportional to user's font size According to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), > To maximize accessibility, it is generally best to use values that > are relative to the user's default font size. > Defining font sizes in px is not accessible, because the user cannot > change the font size in some browsers. Note that changing font size (in browser or OS settings) is distinct from the zoom functionality triggered with Ctrl/Cmd-+. Zoom functionality increases the size of everything on the page, effectively applying a multiplier to all pixel sizes. Font size changes apply to just text. For relative font sizes, we could use `em`, as we do in several places already. However that has a problem of "compounding" (see MDN article for details). The compounding problem is nicely solved by `rem`, which make font sizes relative to the root element, not the parent element. Since we were using a hodge-podge of pixel sizes, em, rem, and percentage sizes before, this change switching everything to rem, while keeping the same size relative to our old default of 16px. 16px is still the default on most browsers, for users that haven't set a larger or smaller font size.
2021-12-30 16:42:06 -05:00
font-size: 1rem;
Outdent method headings so they stand out The makes the heading / documentation distinction clearer.
2021-10-21 18:46:47 -07:00
}
Remove "up here" arrow on item-infos Use spacing to distinguish what is related to a given heading.
2022-01-07 12:39:56 -05:00
.code-header {
Rustdoc accessibility: use real headers for doc items Part of #87059 Partially reverts #84703 Preview at: https://notriddle.com/notriddle-rustdoc-test/real-headers/std/index.html
2021-07-25 21:41:57 +00:00
font-weight: 600;
margin: 0;
Remove "up here" arrow on item-infos Use spacing to distinguish what is related to a given heading.
2022-01-07 12:39:56 -05:00
padding: 0;
Replace nbsp in all rustdoc code blocks Co-Authored-By: David Tolnay <dtolnay@gmail.com>
2023-02-02 15:10:41 -07:00
white-space: pre-wrap;
Rustdoc accessibility: use real headers for doc items Part of #87059 Partially reverts #84703 Preview at: https://notriddle.com/notriddle-rustdoc-test/real-headers/std/index.html
2021-07-25 21:41:57 +00:00
}
rustdoc: Style of [src] link for trait implementors A change suggested by @GuillaumeGomez and @QuietMisdreavus. Also slight reindenting of the appropriate CSS section.
2017-10-01 15:54:50 +03:00
rustdoc: clean up "normalize.css 8" input override CSS These rules were copied from normalize.css 3, and are mostly redundant. * `optgroup` isn't used in rustdoc at all * `textarea` is only used for the "copy" button, so it's not visible * The remaining buttons and inputs mostly have styles set anyway. * We should never be setting `color` without also setting the background to something. Otherwise, you get white-on-gray text. That seems to be [the reason] why `normalize.css` changed this. [the reason]: https://github.com/necolas/normalize.css/pull/502
2022-09-28 13:52:13 -07:00
#crate-search,
librustdoc: Use correct heading levels. - Avoid multiple <h1>s on a page. - The <h#> tags should follow a semantic hierarchy. - Cap at h6 (no h7)
2021-10-01 06:17:15 -04:00
h1, h2, h3, h4, h5, h6,
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.sidebar,
.mobile-topbar,
.search-input,
.search-results .result-name,
rustdoc: simplify DOM for `.item-table` This switches from using `<div>` to the more semantic `<ul>`, and using class names that rhyme with the classes the search results table uses.
2023-02-07 19:00:18 -07:00
.item-name > a,
Make source links look cleaner Change from syntaxy-looking [src] to the plain word "source".
2021-12-03 17:09:04 -08:00
.out-of-band,
span.since,
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
a.src,
rustdoc: make the help button a link to a page This allows you to open the help section in a new browser tab, which is a pretty reasonable thing to want for a documentation page.
2022-10-14 09:48:19 -07:00
#help-button > a,
rustdoc: simplify CSS selectors on top-doc and non-exhaustive toggles This code uses a special `hideme` class anyway, so just style that.
2022-12-05 11:15:09 -07:00
summary.hideme,
rustdoc: use simpler CSS for setting the font on scraped examples
2022-12-01 11:31:44 -07:00
.scraped-example-list,
Use sans-serif font for the "all items" page links
2020-12-29 15:56:52 +01:00
/* This selector is for the items listed in the "all items" page. */
rustdoc: clean up CSS for All Items and All Crates lists This reduces the amount of CSS, and makes these two pages more consistent (which, necessarily, means changing them a bit).
2022-09-16 13:40:21 -07:00
ul.all-items {
rustdoc: use ttf based font for cjk glyphs
2021-10-26 10:58:13 +09:00
font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
}
rustdoc: clean up `#toggle-all-docs` This change converts the element from an `<a>` link to a button. It's pretty much directly trading slightly more CSS for slightly less HTML, and it's also semantically correct (so you don't get a broken "bookmark" option when you right click on it). While doing this, I also got rid of the unnecessary `class="inner"` attribute on the inner span. There was a style targeting `.collapse-toggle > .inner`, but no CSS ever targeted the `#toggle-all-docs > .inner`.
2022-09-17 09:38:57 -07:00
#toggle-all-docs,
Simplify CSS theming by setting CSS variables
2022-06-24 17:03:04 +02:00
a.anchor,
rustdoc: remove small from `small-section-header` There's no such thing as a big section header, so I don't know why the name was used.
2023-11-29 13:38:56 -07:00
.section-header a,
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
#src-sidebar a,
rustdoc: remove redundant `.content` prefix from span/a colors Reverts a1d4ebe4961c107272f9764d1908227a3cd04092, as well as fixing the problem it solved with links losing their color.
2023-03-21 15:28:22 -07:00
.rust a,
Simplify CSS theming by setting CSS variables
2022-06-24 17:03:04 +02:00
.sidebar h2 a,
.sidebar h3 a,
.mobile-topbar h2 a,
rustdoc: remove unneeded `.content` selector from link colors Since 98f05a0282625a5fda6e90ebf3b05a4bd7608f65 and b5963f07e611cf2a09a310eb74c1a93adfaeb9de removed color classes from sidebar items, there's no need for the selectors to be so specific any more. This commit does have to change `h1.fqn a` to just be `h1 a`, so that the header link color selector is less specific than the typed link at the end. Since #89506 made docblocks start at `h2`, the main page link header should be the only h1 in the page now.
2022-10-11 09:22:40 -07:00
h1 a,
Simplify CSS theming by setting CSS variables
2022-06-24 17:03:04 +02:00
.search-results a,
rustdoc: make stability badge CSS more consistent * They all get rounded corners now. A test case has been added for this, too. * There are now broadly two kinds of stability badge, where there used to be three: item-info "fat badge", and the "thin badge" in both item tables and in docblocks (which got merged). The fat badges can have icons, while the thin badges can't.
2022-12-09 10:40:49 -07:00
.stab,
Add search result item types after their name
2023-04-22 16:00:20 +02:00
.result-name i {
Simplify CSS theming by setting CSS variables
2022-06-24 17:03:04 +02:00
color: var(--main-color);
}
rustdoc: remove redundant `.content` prefix from span/a colors Reverts a1d4ebe4961c107272f9764d1908227a3cd04092, as well as fixing the problem it solved with links losing their color.
2023-03-21 15:28:22 -07:00
span.enum, a.enum,
span.struct, a.struct,
span.union, a.union,
span.primitive, a.primitive,
span.type, a.type,
span.foreigntype, a.foreigntype {
Create new CSS variables for links color
2022-09-16 17:57:07 +02:00
color: var(--type-link-color);
}
rustdoc: remove redundant `.content` prefix from span/a colors Reverts a1d4ebe4961c107272f9764d1908227a3cd04092, as well as fixing the problem it solved with links losing their color.
2023-03-21 15:28:22 -07:00
span.trait, a.trait,
span.traitalias, a.traitalias {
Create new CSS variables for links color
2022-09-16 17:57:07 +02:00
color: var(--trait-link-color);
}
rustdoc: remove redundant `.content` prefix from span/a colors Reverts a1d4ebe4961c107272f9764d1908227a3cd04092, as well as fixing the problem it solved with links losing their color.
2023-03-21 15:28:22 -07:00
span.associatedtype, a.associatedtype,
span.constant, a.constant,
span.static, a.static {
Create new CSS variables for links color
2022-09-16 17:57:07 +02:00
color: var(--assoc-item-link-color);
}
rustdoc: remove redundant `.content` prefix from span/a colors Reverts a1d4ebe4961c107272f9764d1908227a3cd04092, as well as fixing the problem it solved with links losing their color.
2023-03-21 15:28:22 -07:00
span.fn, a.fn,
span.method, a.method,
span.tymethod, a.tymethod {
Create new CSS variables for links color
2022-09-16 17:57:07 +02:00
color: var(--function-link-color);
}
rustdoc: remove redundant `.content` prefix from span/a colors Reverts a1d4ebe4961c107272f9764d1908227a3cd04092, as well as fixing the problem it solved with links losing their color.
2023-03-21 15:28:22 -07:00
span.attr, a.attr,
span.derive, a.derive,
span.macro, a.macro {
Create new CSS variables for links color
2022-09-16 17:57:07 +02:00
color: var(--macro-link-color);
}
rustdoc: remove redundant `.content` prefix from span/a colors Reverts a1d4ebe4961c107272f9764d1908227a3cd04092, as well as fixing the problem it solved with links losing their color.
2023-03-21 15:28:22 -07:00
span.mod, a.mod {
Create new CSS variables for links color
2022-09-16 17:57:07 +02:00
color: var(--mod-link-color);
}
rustdoc: remove redundant `.content` prefix from span/a colors Reverts a1d4ebe4961c107272f9764d1908227a3cd04092, as well as fixing the problem it solved with links losing their color.
2023-03-21 15:28:22 -07:00
span.keyword, a.keyword {
Create new CSS variables for links color
2022-09-16 17:57:07 +02:00
color: var(--keyword-link-color);
}
a {
color: var(--link-color);
rustdoc: merge common CSS for `a`
2023-01-09 11:09:19 -07:00
text-decoration: none;
Create new CSS variables for links color
2022-09-16 17:57:07 +02:00
}
doc: unifying with rustdoc Conflicts: src/doc/rust.md
2014-04-18 11:08:34 +09:00
ol, ul {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
padding-left: 24px;
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
}
doc: unifying with rustdoc Conflicts: src/doc/rust.md
2014-04-18 11:08:34 +09:00
ul ul, ol ul, ul ol, ol ol {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
margin-bottom: .625em;
doc: unifying with rustdoc Conflicts: src/doc/rust.md
2014-04-18 11:08:34 +09:00
}
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
Add warning block support in rustdoc
2023-01-07 14:48:55 +01:00
p, .docblock > .warning {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
/* Paragraph spacing at least 1.5 times line spacing per Web Content Accessibility Guidelines.
Line-height is 1.5rem, so line spacing is .5rem; .75em is 1.5 times that.
https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */
margin: 0 0 .75em 0;
rustdoc: add webfonts and tweak the styles accordingly
2014-04-12 21:39:12 +02:00
}
rustdoc: use CSS containment to speed up render https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient. Also remove an unnecessary margin-top on .code-header.
2022-09-27 09:21:24 -07:00
/* For the last child of a div, the margin will be taken care of
by the margin-top of the next item. */
Add warning block support in rustdoc
2023-01-07 14:48:55 +01:00
p:last-child, .docblock > .warning:last-child {
rustdoc: use CSS containment to speed up render https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient. Also remove an unnecessary margin-top on .code-header.
2022-09-27 09:21:24 -07:00
margin: 0;
}
doc: design changes cleanups Conflicts: src/librustdoc/html/layout.rs
2014-03-20 19:05:22 +01:00
Fix some style regressions due to normalize.css 8
2021-06-30 04:13:46 +09:00
/* Fix some style changes due to normalize.css 8 */
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
button {
/* Buttons on Safari have different default padding than other platforms. Make them the same. */
padding: 1px 6px;
rustdoc: factor out common button CSS
2022-11-20 21:48:57 -07:00
/* Opinionated tweak: use pointer cursor as clickability signifier. */
cursor: pointer;
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
}
rustdoc: factor out common button CSS
2022-11-20 21:48:57 -07:00
/* end tweaks for normalize.css 8 */
rustdoc: clean up `#toggle-all-docs` This change converts the element from an `<a>` link to a button. It's pretty much directly trading slightly more CSS for slightly less HTML, and it's also semantically correct (so you don't get a broken "bookmark" option when you right click on it). While doing this, I also got rid of the unnecessary `class="inner"` attribute on the inner span. There was a style targeting `.collapse-toggle > .inner`, but no CSS ever targeted the `#toggle-all-docs > .inner`.
2022-09-17 09:38:57 -07:00
button#toggle-all-docs {
padding: 0;
background: none;
border: none;
rustdoc: fix weird toggle-all-docs style in iOS
2022-09-17 09:53:31 -07:00
/* iOS button gradient: https://stackoverflow.com/q/5438567 */
-webkit-appearance: none;
opacity: 1;
rustdoc: clean up `#toggle-all-docs` This change converts the element from an `<a>` link to a button. It's pretty much directly trading slightly more CSS for slightly less HTML, and it's also semantically correct (so you don't get a broken "bookmark" option when you right click on it). While doing this, I also got rid of the unnecessary `class="inner"` attribute on the inner span. There was a style targeting `.collapse-toggle > .inner`, but no CSS ever targeted the `#toggle-all-docs > .inner`.
2022-09-17 09:38:57 -07:00
}
rustdoc: use flexbox to layout sidebar and main content
2021-09-30 04:23:02 +02:00
.rustdoc {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
main {
position: relative;
flex-grow: 1;
padding: 10px 15px 40px 45px;
rustdoc: add comment to confusing CSS `main { min-width: 0 }` This CSS was added in cad0fce2053d52b7ba04c458f4c124c8b5c6141e, but the reason why it was necessary was unclear. This comment makes it clear.
2022-11-29 11:37:32 -07:00
min-width: 0; /* avoid growing beyond the size limit */
rustdoc: use flexbox to layout sidebar and main content
2021-09-30 04:23:02 +02:00
}
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.src main {
rustdoc: fix source view
2021-10-10 00:52:14 +02:00
padding: 15px;
}
Rename CSS class main-inner into width-limiter
2021-12-02 14:21:32 +01:00
.width-limiter {
rustdoc: use flexbox to layout sidebar and main content
2021-09-30 04:23:02 +02:00
max-width: 960px;
margin-right: auto;
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details:not(.toggle) summary {
Show triangle on the "Details" disclosure element in all cases Co-authored-by: Miguel Ojeda <ojeda@kernel.org>
2021-06-24 15:41:31 +09:00
margin-bottom: .6em;
}
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
code, pre, .code-header {
Remove intermediate font specs This is a (much) more constrained version of #54772 that also aims at improving the situation in #34681. It removes any font specifications that are not the "official" rustdoc font, and instead relies on the browser to provide the fallback font if the official on is not available. On Linux systems, this is particularly important, as fonts like Helvetica, Arial, and Times often look pretty bad since they're pulled from extracted MS fonts. A specification like `serif` or `sans-serif` lets the browser instead choose a good font.
2018-11-07 11:02:08 -05:00
font-family: "Source Code Pro", monospace;
doc: CSS: fix code fonts Closes #10330.
2013-11-11 15:16:23 +01:00
}
rustdoc: more docblock-short styles
2016-09-09 11:54:12 +08:00
.docblock code, .docblock-short code {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
border-radius: 3px;
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
padding: 0 0.125em;
Rustdoc: Highlight <code> elements (from Markdown `backticks`)
2014-08-06 11:03:18 +01:00
}
rustdoc: Remove unused `spotlight` CSS I couldn't find any uses of this CSS. I think it was superseded by the `.notable-traits` CSS class and other similarly-named CSS classes.
2021-04-01 13:31:55 -07:00
.docblock pre code, .docblock-short pre code {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
padding: 0;
Set zero padding for pre tags
2015-07-12 19:42:42 -04:00
}
doc: CSS: fix code fonts Closes #10330.
2013-11-11 15:16:23 +01:00
pre {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
padding: 14px;
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
line-height: 1.5; /* https://github.com/rust-lang/rust/issues/105906 */
rustdoc: bring it inline
2014-04-25 17:34:32 +09:00
}
rustdoc: remove unnecessary wrapper div.item-decl from HTML
2023-01-30 11:05:12 -07:00
pre.item-decl {
Fix layout overflow in type declaration
2021-07-15 18:19:07 +02:00
overflow-x: auto;
}
Fix scrolling for item declaration block
2023-01-10 18:27:00 +01:00
/* This rule allows to have scrolling on the X axis. */
.item-decl .type-contents-toggle {
contain: initial;
}
rustdoc: bring it inline
2014-04-25 17:34:32 +09:00
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.src .content pre {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
padding: 20px;
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
}
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
.rustdoc.src .example-wrap .src-line-numbers {
rustdoc: make line number CSS for doc comment and scraped the same Discussed in https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Line.20number.20styling
2022-12-23 22:55:04 -07:00
padding: 20px 0 20px 4px;
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
Rustdoc - Specify max-image size Fixes #24861
2016-01-02 21:38:36 -05:00
img {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
max-width: 100%;
Rustdoc - Specify max-image size Fixes #24861
2016-01-02 21:38:36 -05:00
}
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
.logo-container {
rustdoc: clean up `.logo-container` layout CSS This commit should result in no appearance changes. To make the logo container exactly the desired height, you want to get rid of the part of the box used for typographic descenders (you know, the part of g, y, and j that descends below the baseline). After all, it contains no text, but the space is still left open in the layout by default, because `<img>` is `display:inline`. The CSS used to employ three different tricks to accomplish this: * By making `.sidebar .logo-container` a flex container, the image becomes a flex item and is [blockified], without synthesizing any inline boxes. No inline boxes means no descenders. * By giving `.mobile-topbar .logo-container` a max-height exactly the same as the height of the image plus the padding, the descender area gets cut off. * By setting `.sub-logo-container { line-height: 0 }`, we ensure that the only box that contributes to the height of the line box is the image itself, and not any zero-content text boxes that neighbor it. See the [logical height algorithm]. This commit gets rid of the first two hacks, leaving only the third, since it requires only one line of code to accomplish and doesn't require setting the value based on math. [blockified]: https://drafts.csswg.org/css-flexbox-1/#flex-items [logical height algorithm]: https://www.w3.org/TR/css-inline-3/#inline-height
2022-11-04 15:13:13 -07:00
/* zero text boxes so that computed line height = image height exactly */
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area.
2022-10-20 13:22:36 -07:00
line-height: 0;
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.
2023-01-04 13:04:30 -07:00
display: block;
rustdoc: show logo in source sub nav
2021-10-24 22:41:48 +02:00
}
Migrate rust logo filter to CSS variables
2022-11-06 18:20:28 +01:00
.rust-logo {
filter: var(--rust-logo-filter);
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
.sidebar {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 0.875rem;
rustdoc: enforce BODY_MIN constraint on sidebar resize
2023-09-27 08:59:32 -07:00
flex: 0 0 var(--desktop-sidebar-width);
rustdoc: avoid whole page layout on each frame This makes two changes, based on experimenting with different browsers: - It debounces resizing the body text. This improves behavior on huge pages like struct.Vec.html, because it doesn't have to do layout. - It does the sidebar width updates directly on the sidebar instead of doing it on the `<HTML>` element. Doing it on `<HTML>` causes it to recalculate CSS for the entire document, also causing layout jank.
2023-10-07 11:10:36 -07:00
width: var(--desktop-sidebar-width);
Make scrollbar in the sidebar always visible for visual consistency
2021-11-17 14:45:17 +01:00
overflow-y: scroll;
rustdoc: use CSS `overscroll-behavior` instead of JavaScript Fixes the desktop scrolling weirdness mentioned in https://github.com/rust-lang/rust/pull/98775#issuecomment-1182575603 As described in the MDN page for this property: * The current Firefox ESR is 102, and the first Firefox version to support this feature is 59. * The current Chrome version 112, and the first version to support this is 63. * Edge is described as having a minor bug in `none` mode, but we use `contain` mode anyway, so it doesn't matter. * Safari 16, released September 2022, is the last browser to add this feature, and is also the oldest version we officially support.
2023-04-10 16:15:51 -07:00
overscroll-behavior: contain;
rustdoc: don't use overflow for main, instead make the sidebar sticky
2021-10-24 20:03:13 +02:00
position: sticky;
height: 100vh;
Fix remaining bugs
2021-11-29 15:55:05 +01:00
top: 0;
left: 0;
use css variable for z-index of the sidebar and calculate the z-indices of things that go over the sidebar
2023-12-31 22:25:46 +01:00
z-index: var(--desktop-sidebar-z-index);
Extend sidebar scrollbar changes to all scrollbars
2020-04-07 22:10:17 +02:00
}
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.rustdoc.src .sidebar {
rustdoc: clean up sidebar width CSS This commit takes advantage of the ability to set [flex-basis] to a specific length instead of setting it to `auto` and changing min-/max-width, and setting flex-grow/-shrink both to 0. [flex-basis]: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
2022-11-16 22:52:30 -07:00
flex-basis: 50px;
Add back the column
2023-12-18 12:11:14 -07:00
width: 50px;
rustdoc: merge source sidebar into main sidebar
2021-10-10 19:08:08 +02:00
border-right: 1px solid;
overflow-x: hidden;
rustdoc: rework source sidebar
2021-10-24 21:59:53 +02:00
/* The sidebar is by default hidden */
overflow-y: hidden;
}
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
.hide-sidebar .sidebar,
.hide-sidebar .sidebar-resizer {
display: none;
}
.sidebar-resizer {
touch-action: none;
width: 9px;
cursor: col-resize;
use css variable for z-index of the sidebar and calculate the z-indices of things that go over the sidebar
2023-12-31 22:25:46 +01:00
z-index: calc(var(--desktop-sidebar-z-index) + 1);
rustdoc: avoid whole page layout on each frame This makes two changes, based on experimenting with different browsers: - It debounces resizing the body text. This improves behavior on huge pages like struct.Vec.html, because it doesn't have to do layout. - It does the sidebar width updates directly on the sidebar instead of doing it on the `<HTML>` element. Doing it on `<HTML>` causes it to recalculate CSS for the entire document, also causing layout jank.
2023-10-07 11:10:36 -07:00
position: fixed;
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
height: 100%;
/* make sure there's a 1px gap between the scrollbar and resize handle */
rustdoc: enforce BODY_MIN constraint on sidebar resize
2023-09-27 08:59:32 -07:00
left: calc(var(--desktop-sidebar-width) + 1px);
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
}
.rustdoc.src .sidebar-resizer {
Add back the column
2023-12-18 12:11:14 -07:00
/* when closed, place resizer glow on top of the normal src sidebar border (no need to
worry about sidebar) */
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
left: 49px;
}
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
.src-sidebar-expanded .src .sidebar-resizer {
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
/* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer
to right of it */
rustdoc: enforce BODY_MIN constraint on sidebar resize
2023-09-27 08:59:32 -07:00
left: var(--src-sidebar-width);
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
}
.sidebar-resizing {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sidebar-resizing * {
cursor: col-resize !important;
}
rustdoc: avoid whole page layout on each frame This makes two changes, based on experimenting with different browsers: - It debounces resizing the body text. This improves behavior on huge pages like struct.Vec.html, because it doesn't have to do layout. - It does the sidebar width updates directly on the sidebar instead of doing it on the `<HTML>` element. Doing it on `<HTML>` causes it to recalculate CSS for the entire document, also causing layout jank.
2023-10-07 11:10:36 -07:00
.sidebar-resizing .sidebar {
position: fixed;
}
.sidebar-resizing > body {
padding-left: var(--resizing-sidebar-width);
}
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
.sidebar-resizer:hover,
.sidebar-resizer:active,
.sidebar-resizer:focus,
.sidebar-resizer.active {
width: 10px;
margin: 0;
/* when active or hovered, place resizer glow on top of the sidebar (right next to, or even
on top of, the scrollbar) */
rustdoc: enforce BODY_MIN constraint on sidebar resize
2023-09-27 08:59:32 -07:00
left: var(--desktop-sidebar-width);
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
border-left: solid 1px var(--sidebar-resizer-hover);
}
.src-sidebar-expanded .rustdoc.src .sidebar-resizer:hover,
.src-sidebar-expanded .rustdoc.src .sidebar-resizer:active,
.src-sidebar-expanded .rustdoc.src .sidebar-resizer:focus,
.src-sidebar-expanded .rustdoc.src .sidebar-resizer.active {
/* when active or hovered, place resizer glow on top of the normal src sidebar border */
rustdoc: enforce BODY_MIN constraint on sidebar resize
2023-09-27 08:59:32 -07:00
left: calc(var(--src-sidebar-width) - 1px);
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
}
@media (pointer: coarse) {
.sidebar-resizer {
/* too easy to hit the resizer while trying to hit the [-] toggle */
display: none !important;
}
}
.sidebar-resizer.active {
/* make the resize tool bigger when actually resizing, to avoid :hover styles on other stuff
rustdoc: avoid whole page layout on each frame This makes two changes, based on experimenting with different browsers: - It debounces resizing the body text. This improves behavior on huge pages like struct.Vec.html, because it doesn't have to do layout. - It does the sidebar width updates directly on the sidebar instead of doing it on the `<HTML>` element. Doing it on `<HTML>` causes it to recalculate CSS for the entire document, also causing layout jank.
2023-10-07 11:10:36 -07:00
while resizing */
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
padding: 0 140px;
width: 2px;
margin-left: -140px;
border-left: none;
}
.sidebar-resizer.active:before {
border-left: solid 2px var(--sidebar-resizer-active);
display: block;
height: 100%;
content: "";
rustdoc: rework source sidebar
2021-10-24 21:59:53 +02:00
}
rustdoc: combine common sidebar background color CSS rules
2022-12-27 13:59:00 -07:00
.sidebar, .mobile-topbar, .sidebar-menu-toggle,
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
#src-sidebar {
Simplify CSS theming by setting CSS variables
2022-06-24 17:03:04 +02:00
background-color: var(--sidebar-background-color);
}
Add back the column
2023-12-18 12:11:14 -07:00
.src .sidebar > * {
rustdoc: rework source sidebar
2021-10-24 21:59:53 +02:00
visibility: hidden;
}
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.src-sidebar-expanded .src .sidebar {
rustdoc: rework source sidebar
2021-10-24 21:59:53 +02:00
overflow-y: auto;
rustdoc: enforce BODY_MIN constraint on sidebar resize
2023-09-27 08:59:32 -07:00
flex-basis: var(--src-sidebar-width);
rustdoc: avoid whole page layout on each frame This makes two changes, based on experimenting with different browsers: - It debounces resizing the body text. This improves behavior on huge pages like struct.Vec.html, because it doesn't have to do layout. - It does the sidebar width updates directly on the sidebar instead of doing it on the `<HTML>` element. Doing it on `<HTML>` causes it to recalculate CSS for the entire document, also causing layout jank.
2023-10-07 11:10:36 -07:00
width: var(--src-sidebar-width);
rustdoc: rework source sidebar
2021-10-24 21:59:53 +02:00
}
Add back the column
2023-12-18 12:11:14 -07:00
.src-sidebar-expanded .src .sidebar > * {
rustdoc: rework source sidebar
2021-10-24 21:59:53 +02:00
visibility: visible;
rustdoc: fix source view
2021-10-10 00:52:14 +02:00
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
#all-types {
margin-top: 1em;
}
Extend sidebar scrollbar changes to all scrollbars
2020-04-07 22:10:17 +02:00
/* Improve the scrollbar display on firefox */
* {
scrollbar-width: initial;
Continue themes CSS migration over CSS variables
2022-07-11 14:51:39 +02:00
scrollbar-color: var(--scrollbar-color);
Extend sidebar scrollbar changes to all scrollbars
2020-04-07 22:10:17 +02:00
}
.sidebar {
Improve scrollbar display in rustdoc
2020-04-01 16:12:40 +02:00
scrollbar-width: thin;
Continue themes CSS migration over CSS variables
2022-07-11 14:51:39 +02:00
scrollbar-color: var(--scrollbar-color);
Improve scrollbar display in rustdoc
2020-04-01 16:12:40 +02:00
}
Extend sidebar scrollbar changes to all scrollbars
2020-04-07 22:10:17 +02:00
/* Improve the scrollbar display on webkit-based browsers */
::-webkit-scrollbar {
width: 12px;
}
Improve scrollbar display in rustdoc
2020-04-01 16:12:40 +02:00
.sidebar::-webkit-scrollbar {
width: 8px;
}
Extend sidebar scrollbar changes to all scrollbars
2020-04-07 22:10:17 +02:00
::-webkit-scrollbar-track {
Improve scrollbar display in rustdoc
2020-04-01 16:12:40 +02:00
-webkit-box-shadow: inset 0;
Continue themes CSS migration over CSS variables
2022-07-11 14:51:39 +02:00
background-color: var(--scrollbar-track-background-color);
}
.sidebar::-webkit-scrollbar-track {
background-color: var(--scrollbar-track-background-color);
}
::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-background-color);
Improve the style of the sidebar in rustdoc output Makes the sidebar a light grey and highlights the currently viewed item in the sidebar more prominently. All visual design credit goes to @johnwhelchel (#37856)
2017-02-15 20:21:25 -05:00
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
/* Everything else */
rustdoc: fixes #64305: disable search field instead of hidding it Signed-off-by: Maxime “pep” Buquet <pep@bouah.net>
2019-11-11 16:54:45 +01:00
.hidden {
Fix ugly hover in sidebar
2018-02-01 23:40:23 +01:00
display: none !important;
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
Fix image position and display
2019-04-29 11:45:06 +02:00
.logo-container > img {
rustdoc: show crate name beside small logo This commit changes the layout to something a bit less "look at my logo!!!111" gigantic, and makes it clearer where clicking the logo will actually take you. It also means the crate name is persistently at the top of the sidebar, even when in a sub-item page, and clicking that name takes you back to the root. | | Short crate name | Long crate name | |---------|------------------|-----------------| | Root | ![short-root] | ![long-root] | Subpage | ![short-subpage] | ![long-subpage] [short-root]: https://github.com/rust-lang/rust/assets/1593513/fe2ce102-d4b8-44e6-9f7b-68636a907f56 [short-subpage]: https://github.com/rust-lang/rust/assets/1593513/29501663-56c0-4151-b7de-d2637e167125 [long-root]: https://github.com/rust-lang/rust/assets/1593513/f6a385c0-b4c5-4a9c-954b-21b38de4192f [long-subpage]: https://github.com/rust-lang/rust/assets/1593513/97ec47b4-61bf-4ebe-b461-0d2187b8c6ca https://notriddle.com/rustdoc-html-demo-4/logo-lockup/image/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/adler/struct.Adler32.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/struct.Sender.html This improves visual information density (the construct with the logo and crate name is *shorter* than the logo on its own, because it's not square) and navigation clarity (we can now see what clicking the Rust logo does, specifically). Compare this with the layout at [Phoenix's Hexdocs] (which is what this proposal is closely based on), the old proposal on [Internals Discourse] (which always says "Rust standard library" in the sidebar, but doesn't do the side-by-side layout). [Phoenix's Hexdocs]: https://hexdocs.pm/phoenix/1.7.7/overview.html [Internals Discourse]: https://internals.rust-lang.org/t/poc-of-a-new-design-for-the-generated-rustdoc/11018 In newer versions of rustdoc, the crate name and version are always shown in the sidebar, even in subpages. Clicking the crate name does the same thing clicking the logo always did: return you to the crate root. While this actually takes up less screen real estate than the old layout on desktop, it takes up more HTML. It's also a bit more visually complex. I could do what the Internals POC did and keep the vertically stacked layout all the time, instead of doing a horizontal stack where possible. It would take up more screen real estate, though. This design is lifted almost verbatim from Hexdocs. It seems to work for them. [`opentelemetry_process_propagator`], for example, has a long application name. [`opentelemetry_process_propagator`]: https://hexdocs.pm/opentelemetry_process_propagator/OpentelemetryProcessPropagator.html Has anyone written the rationale on why the Rust logo shows up on projects that aren't the standard library? If we turned it off on non-standard crates by default, it would line wrap crate names a lot less often. Or maybe we should encourage crate authors to include their own logo more often? It certainly helps give people a better sense of "place." I'm not sure of anything that directly follows up this one. Plenty of other changes could be made to improve the layout, like * coming up with a less cluttered way to do disclosure (there's a lot of `[-]` on the page) * doing a better job of separating lateral navigation (vec::Vec links to vec::IntoIter) and the table of contents (vec::Vec links to vec::Vec::new) * giving readers more control of how much rustdoc hows them, and giving doc authors more control of how much it generates * better search that reduces the need to browse But those are mostly orthogonal, not future possibilities unlocked by this change.
2023-09-18 11:59:49 -07:00
height: 48px;
width: 48px;
Fix image position and display
2019-04-29 11:45:06 +02:00
}
rustdoc: remove unneeded `<div>` wrapper from sidebar DOM When this was added, the sidebar had a bit more complex style. It can be removed, now.
2022-10-10 11:37:19 -07:00
ul.block, .block li {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
padding: 0;
Linkify sidebar headings for sibling items Also adjust CSS so this doesn't produce excess padding/margin.
2022-02-03 22:50:32 -08:00
margin: 0;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
list-style: none;
rustdoc: Tweak the main template and CSS for semantic mark-up. - section.sidebar -> nav.sidebar, also added an unordered list. - div#help -> aside#help, also added a hidden heading. - the current crate is now emphasized in the sidebar. Fixes #16310.
2015-09-09 00:46:44 +09:00
}
Tweaked the design to be a lot cleaner. Signed-off-by: Daniel Fagnan <dnfagnan@gmail.com>
2014-03-18 01:44:55 -06:00
rustdoc: clean up sidebar link CSS Group `text-overflow: ellipses` along with `white-space: nowrap`. It makes no sense to try to apply it to links with `overflow-wrap: anywhere`, because it can't actually make ellipses when that's turned on. Simplify the selector for the 25rem left padding on sidebar links, to match up with the style for the container left padding that makes room for it.
2022-11-30 07:51:18 -07:00
.sidebar-elems a,
.sidebar > h2 a {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
display: block;
rustdoc: clean up sidebar link CSS Group `text-overflow: ellipses` along with `white-space: nowrap`. It makes no sense to try to apply it to links with `overflow-wrap: anywhere`, because it can't actually make ellipses when that's turned on. Simplify the selector for the 25rem left padding on sidebar links, to match up with the style for the container left padding that makes room for it.
2022-11-30 07:51:18 -07:00
padding: 0.25rem; /* 4px */
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
margin-right: 0.25rem;
rustdoc: click target for sidebar items flush left
2024-07-01 17:08:49 -07:00
/* extend click target to far edge of screen (mile wide bar) */
border-left: solid var(--sidebar-elems-left-padding) transparent;
margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding));
rustdoc: make sidebar highlight cover whole click target
2024-07-15 16:20:37 -07:00
background-clip: border-box;
Tweaked the design to be a lot cleaner. Signed-off-by: Daniel Fagnan <dnfagnan@gmail.com>
2014-03-18 01:44:55 -06:00
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.sidebar h2 {
rustdoc: properly handle path wrapping
2024-07-19 09:00:50 -07:00
text-wrap: balance;
rustdoc: remove class name `location` from sidebar sibling nav This change tweaks the CSS to apply most of its styles to `.sidebar h2`, cleaning up a few redundant rules from `.mobile-topbar .location` and restoring useful navigation aids in mobile mode.
2022-10-18 11:14:01 -07:00
overflow-wrap: anywhere;
Rustdoc accessibility: make the sidebar headers actual headers Part of #87059 Preview it at: https://notriddle.com/notriddle-rustdoc-test/rustdoc-sidebar-header/std/index.html
2021-07-16 21:58:23 -07:00
padding: 0;
rustdoc: use CSS margin/padding shorthand when all are being set
2022-10-29 09:04:31 -07:00
margin: 0.7rem 0;
Improve sidebar rendering and add methods list
2017-10-10 23:39:10 +02:00
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.sidebar h3 {
rustdoc: properly handle path wrapping
2024-07-19 09:00:50 -07:00
text-wrap: balance;
overflow-wrap: anywhere;
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 1.125rem; /* 18px */
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
padding: 0;
margin: 0;
Improve sidebar rendering and add methods list
2017-10-10 23:39:10 +02:00
}
rustdoc: remove class name `location` from sidebar sibling nav This change tweaks the CSS to apply most of its styles to `.sidebar h2`, cleaning up a few redundant rules from `.mobile-topbar .location` and restoring useful navigation aids in mobile mode.
2022-10-18 11:14:01 -07:00
.sidebar-elems,
rustdoc: clean up the layout for annotated version numbers This should result in a layout for the actual standard library, when built on CI, that looks like this: _____ / \ std | R | 1.74.0-nightly \_____/ (203c57dbe 2023-09-17) Having the whole version as one string caused it to flex wrap, because the sidebar isn't wide enough to fit the whole thing.
2023-09-18 17:48:18 -07:00
.sidebar > .version,
rustdoc: remove class name `location` from sidebar sibling nav This change tweaks the CSS to apply most of its styles to `.sidebar h2`, cleaning up a few redundant rules from `.mobile-topbar .location` and restoring useful navigation aids in mobile mode.
2022-10-18 11:14:01 -07:00
.sidebar > h2 {
rustdoc: click target for sidebar items flush left
2024-07-01 17:08:49 -07:00
padding-left: var(--sidebar-elems-left-padding);
rustdoc: remove class name `location` from sidebar sibling nav This change tweaks the CSS to apply most of its styles to `.sidebar h2`, cleaning up a few redundant rules from `.mobile-topbar .location` and restoring useful navigation aids in mobile mode.
2022-10-18 11:14:01 -07:00
}
rustdoc: remove redundant CSS selector `.sidebar .current` Since the current sidebar item is already a link, it doesn't do anything.
2023-01-19 16:30:05 -07:00
.sidebar a {
* Migrate sidebar links color to new CSS theme handling * Remove specific color handling for ".current" items in the sidebar.
2022-09-24 15:49:10 +02:00
color: var(--sidebar-link-color);
}
.sidebar .current,
rustdoc: show crate name beside small logo This commit changes the layout to something a bit less "look at my logo!!!111" gigantic, and makes it clearer where clicking the logo will actually take you. It also means the crate name is persistently at the top of the sidebar, even when in a sub-item page, and clicking that name takes you back to the root. | | Short crate name | Long crate name | |---------|------------------|-----------------| | Root | ![short-root] | ![long-root] | Subpage | ![short-subpage] | ![long-subpage] [short-root]: https://github.com/rust-lang/rust/assets/1593513/fe2ce102-d4b8-44e6-9f7b-68636a907f56 [short-subpage]: https://github.com/rust-lang/rust/assets/1593513/29501663-56c0-4151-b7de-d2637e167125 [long-root]: https://github.com/rust-lang/rust/assets/1593513/f6a385c0-b4c5-4a9c-954b-21b38de4192f [long-subpage]: https://github.com/rust-lang/rust/assets/1593513/97ec47b4-61bf-4ebe-b461-0d2187b8c6ca https://notriddle.com/rustdoc-html-demo-4/logo-lockup/image/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/adler/struct.Adler32.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/struct.Sender.html This improves visual information density (the construct with the logo and crate name is *shorter* than the logo on its own, because it's not square) and navigation clarity (we can now see what clicking the Rust logo does, specifically). Compare this with the layout at [Phoenix's Hexdocs] (which is what this proposal is closely based on), the old proposal on [Internals Discourse] (which always says "Rust standard library" in the sidebar, but doesn't do the side-by-side layout). [Phoenix's Hexdocs]: https://hexdocs.pm/phoenix/1.7.7/overview.html [Internals Discourse]: https://internals.rust-lang.org/t/poc-of-a-new-design-for-the-generated-rustdoc/11018 In newer versions of rustdoc, the crate name and version are always shown in the sidebar, even in subpages. Clicking the crate name does the same thing clicking the logo always did: return you to the crate root. While this actually takes up less screen real estate than the old layout on desktop, it takes up more HTML. It's also a bit more visually complex. I could do what the Internals POC did and keep the vertically stacked layout all the time, instead of doing a horizontal stack where possible. It would take up more screen real estate, though. This design is lifted almost verbatim from Hexdocs. It seems to work for them. [`opentelemetry_process_propagator`], for example, has a long application name. [`opentelemetry_process_propagator`]: https://hexdocs.pm/opentelemetry_process_propagator/OpentelemetryProcessPropagator.html Has anyone written the rationale on why the Rust logo shows up on projects that aren't the standard library? If we turned it off on non-standard crates by default, it would line wrap crate names a lot less often. Or maybe we should encourage crate authors to include their own logo more often? It certainly helps give people a better sense of "place." I'm not sure of anything that directly follows up this one. Plenty of other changes could be made to improve the layout, like * coming up with a less cluttered way to do disclosure (there's a lot of `[-]` on the page) * doing a better job of separating lateral navigation (vec::Vec links to vec::IntoIter) and the table of contents (vec::Vec links to vec::Vec::new) * giving readers more control of how much rustdoc hows them, and giving doc authors more control of how much it generates * better search that reduces the need to browse But those are mostly orthogonal, not future possibilities unlocked by this change.
2023-09-18 11:59:49 -07:00
.sidebar .current a,
.sidebar-crate a.logo-container:hover + h2 a,
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.
2023-01-04 13:04:30 -07:00
.sidebar a:hover:not(.logo-container) {
* Migrate sidebar links color to new CSS theme handling * Remove specific color handling for ".current" items in the sidebar.
2022-09-24 15:49:10 +02:00
background-color: var(--sidebar-current-link-background-color);
}
Unify sidebar a bit more by generating a list using <ul> instead of <div> elements
2022-02-08 17:04:53 +01:00
.sidebar-elems .block {
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
margin-bottom: 2em;
Improve sidebar rendering and add methods list
2017-10-10 23:39:10 +02:00
}
Unify sidebar a bit more by generating a list using <ul> instead of <div> elements
2022-02-08 17:04:53 +01:00
.sidebar-elems .block li a {
white-space: nowrap;
rustdoc: clean up sidebar link CSS Group `text-overflow: ellipses` along with `white-space: nowrap`. It makes no sense to try to apply it to links with `overflow-wrap: anywhere`, because it can't actually make ellipses when that's turned on. Simplify the selector for the 25rem left padding on sidebar links, to match up with the style for the container left padding that makes room for it.
2022-11-30 07:51:18 -07:00
text-overflow: ellipsis;
overflow: hidden;
Unify sidebar a bit more by generating a list using <ul> instead of <div> elements
2022-02-08 17:04:53 +01:00
}
rustdoc: show crate name beside small logo This commit changes the layout to something a bit less "look at my logo!!!111" gigantic, and makes it clearer where clicking the logo will actually take you. It also means the crate name is persistently at the top of the sidebar, even when in a sub-item page, and clicking that name takes you back to the root. | | Short crate name | Long crate name | |---------|------------------|-----------------| | Root | ![short-root] | ![long-root] | Subpage | ![short-subpage] | ![long-subpage] [short-root]: https://github.com/rust-lang/rust/assets/1593513/fe2ce102-d4b8-44e6-9f7b-68636a907f56 [short-subpage]: https://github.com/rust-lang/rust/assets/1593513/29501663-56c0-4151-b7de-d2637e167125 [long-root]: https://github.com/rust-lang/rust/assets/1593513/f6a385c0-b4c5-4a9c-954b-21b38de4192f [long-subpage]: https://github.com/rust-lang/rust/assets/1593513/97ec47b4-61bf-4ebe-b461-0d2187b8c6ca https://notriddle.com/rustdoc-html-demo-4/logo-lockup/image/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/adler/struct.Adler32.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/struct.Sender.html This improves visual information density (the construct with the logo and crate name is *shorter* than the logo on its own, because it's not square) and navigation clarity (we can now see what clicking the Rust logo does, specifically). Compare this with the layout at [Phoenix's Hexdocs] (which is what this proposal is closely based on), the old proposal on [Internals Discourse] (which always says "Rust standard library" in the sidebar, but doesn't do the side-by-side layout). [Phoenix's Hexdocs]: https://hexdocs.pm/phoenix/1.7.7/overview.html [Internals Discourse]: https://internals.rust-lang.org/t/poc-of-a-new-design-for-the-generated-rustdoc/11018 In newer versions of rustdoc, the crate name and version are always shown in the sidebar, even in subpages. Clicking the crate name does the same thing clicking the logo always did: return you to the crate root. While this actually takes up less screen real estate than the old layout on desktop, it takes up more HTML. It's also a bit more visually complex. I could do what the Internals POC did and keep the vertically stacked layout all the time, instead of doing a horizontal stack where possible. It would take up more screen real estate, though. This design is lifted almost verbatim from Hexdocs. It seems to work for them. [`opentelemetry_process_propagator`], for example, has a long application name. [`opentelemetry_process_propagator`]: https://hexdocs.pm/opentelemetry_process_propagator/OpentelemetryProcessPropagator.html Has anyone written the rationale on why the Rust logo shows up on projects that aren't the standard library? If we turned it off on non-standard crates by default, it would line wrap crate names a lot less often. Or maybe we should encourage crate authors to include their own logo more often? It certainly helps give people a better sense of "place." I'm not sure of anything that directly follows up this one. Plenty of other changes could be made to improve the layout, like * coming up with a less cluttered way to do disclosure (there's a lot of `[-]` on the page) * doing a better job of separating lateral navigation (vec::Vec links to vec::IntoIter) and the table of contents (vec::Vec links to vec::Vec::new) * giving readers more control of how much rustdoc hows them, and giving doc authors more control of how much it generates * better search that reduces the need to browse But those are mostly orthogonal, not future possibilities unlocked by this change.
2023-09-18 11:59:49 -07:00
.sidebar-crate {
display: flex;
align-items: center;
justify-content: center;
rustdoc: align crate name with search bar Based on PR feedback.
2023-09-21 11:45:13 -07:00
/* there's a 10px padding at the top of <main>, and a 4px margin at the
top of the search form. To line them up, add them. */
rustdoc: clean up the In [name] up-pointer This commit makes three changes for consistency and readability: - It shows the sibling navigation on module pages. It's weird that it didn't work before, and is inconsistent with everything else (even Crates have sibling navigation with other Crates). - It hides the "In [parent]" header if it's the same as the current crate, and if there's no other header between them. We need to keep it on modules and types, since they have their own header and data between them, and we don't want to show siblings under a header implying that they're children. - It adds a margin to deal with the headers butting directly into the branding lockup.
2023-09-23 12:59:58 -07:00
margin: 14px 32px 1rem;
rustdoc: remove rust logo from non-Rust crates
2023-09-19 16:28:18 -07:00
row-gap: 10px;
rustdoc: show crate name beside small logo This commit changes the layout to something a bit less "look at my logo!!!111" gigantic, and makes it clearer where clicking the logo will actually take you. It also means the crate name is persistently at the top of the sidebar, even when in a sub-item page, and clicking that name takes you back to the root. | | Short crate name | Long crate name | |---------|------------------|-----------------| | Root | ![short-root] | ![long-root] | Subpage | ![short-subpage] | ![long-subpage] [short-root]: https://github.com/rust-lang/rust/assets/1593513/fe2ce102-d4b8-44e6-9f7b-68636a907f56 [short-subpage]: https://github.com/rust-lang/rust/assets/1593513/29501663-56c0-4151-b7de-d2637e167125 [long-root]: https://github.com/rust-lang/rust/assets/1593513/f6a385c0-b4c5-4a9c-954b-21b38de4192f [long-subpage]: https://github.com/rust-lang/rust/assets/1593513/97ec47b4-61bf-4ebe-b461-0d2187b8c6ca https://notriddle.com/rustdoc-html-demo-4/logo-lockup/image/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/adler/struct.Adler32.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/struct.Sender.html This improves visual information density (the construct with the logo and crate name is *shorter* than the logo on its own, because it's not square) and navigation clarity (we can now see what clicking the Rust logo does, specifically). Compare this with the layout at [Phoenix's Hexdocs] (which is what this proposal is closely based on), the old proposal on [Internals Discourse] (which always says "Rust standard library" in the sidebar, but doesn't do the side-by-side layout). [Phoenix's Hexdocs]: https://hexdocs.pm/phoenix/1.7.7/overview.html [Internals Discourse]: https://internals.rust-lang.org/t/poc-of-a-new-design-for-the-generated-rustdoc/11018 In newer versions of rustdoc, the crate name and version are always shown in the sidebar, even in subpages. Clicking the crate name does the same thing clicking the logo always did: return you to the crate root. While this actually takes up less screen real estate than the old layout on desktop, it takes up more HTML. It's also a bit more visually complex. I could do what the Internals POC did and keep the vertically stacked layout all the time, instead of doing a horizontal stack where possible. It would take up more screen real estate, though. This design is lifted almost verbatim from Hexdocs. It seems to work for them. [`opentelemetry_process_propagator`], for example, has a long application name. [`opentelemetry_process_propagator`]: https://hexdocs.pm/opentelemetry_process_propagator/OpentelemetryProcessPropagator.html Has anyone written the rationale on why the Rust logo shows up on projects that aren't the standard library? If we turned it off on non-standard crates by default, it would line wrap crate names a lot less often. Or maybe we should encourage crate authors to include their own logo more often? It certainly helps give people a better sense of "place." I'm not sure of anything that directly follows up this one. Plenty of other changes could be made to improve the layout, like * coming up with a less cluttered way to do disclosure (there's a lot of `[-]` on the page) * doing a better job of separating lateral navigation (vec::Vec links to vec::IntoIter) and the table of contents (vec::Vec links to vec::Vec::new) * giving readers more control of how much rustdoc hows them, and giving doc authors more control of how much it generates * better search that reduces the need to browse But those are mostly orthogonal, not future possibilities unlocked by this change.
2023-09-18 11:59:49 -07:00
column-gap: 32px;
flex-wrap: wrap;
}
.sidebar-crate h2 {
flex-grow: 1;
/* This setup with the margins and row-gap is designed to make flex-wrap
work the way we want. If they're in the side-by-side lockup, there
should be a 16px margin to the left of the logo (visually the same as
the 24px one on everything else, which are not giant circles) and 8px
between it and the crate's name and version. When they're line wrapped,
the logo needs to have the same margin on both sides of itself (to
center properly) and the crate name and version need 24px on their
left margin. */
margin: 0 -8px;
rustdoc: align crate name with search bar Based on PR feedback.
2023-09-21 11:45:13 -07:00
/* To align this with the search bar, it should not be centered, even when
the logo is. */
align-self: start;
rustdoc: show crate name beside small logo This commit changes the layout to something a bit less "look at my logo!!!111" gigantic, and makes it clearer where clicking the logo will actually take you. It also means the crate name is persistently at the top of the sidebar, even when in a sub-item page, and clicking that name takes you back to the root. | | Short crate name | Long crate name | |---------|------------------|-----------------| | Root | ![short-root] | ![long-root] | Subpage | ![short-subpage] | ![long-subpage] [short-root]: https://github.com/rust-lang/rust/assets/1593513/fe2ce102-d4b8-44e6-9f7b-68636a907f56 [short-subpage]: https://github.com/rust-lang/rust/assets/1593513/29501663-56c0-4151-b7de-d2637e167125 [long-root]: https://github.com/rust-lang/rust/assets/1593513/f6a385c0-b4c5-4a9c-954b-21b38de4192f [long-subpage]: https://github.com/rust-lang/rust/assets/1593513/97ec47b4-61bf-4ebe-b461-0d2187b8c6ca https://notriddle.com/rustdoc-html-demo-4/logo-lockup/image/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/adler/struct.Adler32.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/struct.Sender.html This improves visual information density (the construct with the logo and crate name is *shorter* than the logo on its own, because it's not square) and navigation clarity (we can now see what clicking the Rust logo does, specifically). Compare this with the layout at [Phoenix's Hexdocs] (which is what this proposal is closely based on), the old proposal on [Internals Discourse] (which always says "Rust standard library" in the sidebar, but doesn't do the side-by-side layout). [Phoenix's Hexdocs]: https://hexdocs.pm/phoenix/1.7.7/overview.html [Internals Discourse]: https://internals.rust-lang.org/t/poc-of-a-new-design-for-the-generated-rustdoc/11018 In newer versions of rustdoc, the crate name and version are always shown in the sidebar, even in subpages. Clicking the crate name does the same thing clicking the logo always did: return you to the crate root. While this actually takes up less screen real estate than the old layout on desktop, it takes up more HTML. It's also a bit more visually complex. I could do what the Internals POC did and keep the vertically stacked layout all the time, instead of doing a horizontal stack where possible. It would take up more screen real estate, though. This design is lifted almost verbatim from Hexdocs. It seems to work for them. [`opentelemetry_process_propagator`], for example, has a long application name. [`opentelemetry_process_propagator`]: https://hexdocs.pm/opentelemetry_process_propagator/OpentelemetryProcessPropagator.html Has anyone written the rationale on why the Rust logo shows up on projects that aren't the standard library? If we turned it off on non-standard crates by default, it would line wrap crate names a lot less often. Or maybe we should encourage crate authors to include their own logo more often? It certainly helps give people a better sense of "place." I'm not sure of anything that directly follows up this one. Plenty of other changes could be made to improve the layout, like * coming up with a less cluttered way to do disclosure (there's a lot of `[-]` on the page) * doing a better job of separating lateral navigation (vec::Vec links to vec::IntoIter) and the table of contents (vec::Vec links to vec::Vec::new) * giving readers more control of how much rustdoc hows them, and giving doc authors more control of how much it generates * better search that reduces the need to browse But those are mostly orthogonal, not future possibilities unlocked by this change.
2023-09-18 11:59:49 -07:00
}
.sidebar-crate .logo-container {
rustdoc: align crate name with search bar Based on PR feedback.
2023-09-21 11:45:13 -07:00
/* The logo is expected to have 8px "slop" along its edges, so we can optically
center it. */
rustdoc: click target for sidebar items flush left
2024-07-01 17:08:49 -07:00
margin: 0 calc(-16px - var(--sidebar-elems-left-padding));
padding: 0 var(--sidebar-elems-left-padding);
rustdoc: show crate name beside small logo This commit changes the layout to something a bit less "look at my logo!!!111" gigantic, and makes it clearer where clicking the logo will actually take you. It also means the crate name is persistently at the top of the sidebar, even when in a sub-item page, and clicking that name takes you back to the root. | | Short crate name | Long crate name | |---------|------------------|-----------------| | Root | ![short-root] | ![long-root] | Subpage | ![short-subpage] | ![long-subpage] [short-root]: https://github.com/rust-lang/rust/assets/1593513/fe2ce102-d4b8-44e6-9f7b-68636a907f56 [short-subpage]: https://github.com/rust-lang/rust/assets/1593513/29501663-56c0-4151-b7de-d2637e167125 [long-root]: https://github.com/rust-lang/rust/assets/1593513/f6a385c0-b4c5-4a9c-954b-21b38de4192f [long-subpage]: https://github.com/rust-lang/rust/assets/1593513/97ec47b4-61bf-4ebe-b461-0d2187b8c6ca https://notriddle.com/rustdoc-html-demo-4/logo-lockup/image/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/adler/struct.Adler32.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/struct.Sender.html This improves visual information density (the construct with the logo and crate name is *shorter* than the logo on its own, because it's not square) and navigation clarity (we can now see what clicking the Rust logo does, specifically). Compare this with the layout at [Phoenix's Hexdocs] (which is what this proposal is closely based on), the old proposal on [Internals Discourse] (which always says "Rust standard library" in the sidebar, but doesn't do the side-by-side layout). [Phoenix's Hexdocs]: https://hexdocs.pm/phoenix/1.7.7/overview.html [Internals Discourse]: https://internals.rust-lang.org/t/poc-of-a-new-design-for-the-generated-rustdoc/11018 In newer versions of rustdoc, the crate name and version are always shown in the sidebar, even in subpages. Clicking the crate name does the same thing clicking the logo always did: return you to the crate root. While this actually takes up less screen real estate than the old layout on desktop, it takes up more HTML. It's also a bit more visually complex. I could do what the Internals POC did and keep the vertically stacked layout all the time, instead of doing a horizontal stack where possible. It would take up more screen real estate, though. This design is lifted almost verbatim from Hexdocs. It seems to work for them. [`opentelemetry_process_propagator`], for example, has a long application name. [`opentelemetry_process_propagator`]: https://hexdocs.pm/opentelemetry_process_propagator/OpentelemetryProcessPropagator.html Has anyone written the rationale on why the Rust logo shows up on projects that aren't the standard library? If we turned it off on non-standard crates by default, it would line wrap crate names a lot less often. Or maybe we should encourage crate authors to include their own logo more often? It certainly helps give people a better sense of "place." I'm not sure of anything that directly follows up this one. Plenty of other changes could be made to improve the layout, like * coming up with a less cluttered way to do disclosure (there's a lot of `[-]` on the page) * doing a better job of separating lateral navigation (vec::Vec links to vec::IntoIter) and the table of contents (vec::Vec links to vec::Vec::new) * giving readers more control of how much rustdoc hows them, and giving doc authors more control of how much it generates * better search that reduces the need to browse But those are mostly orthogonal, not future possibilities unlocked by this change.
2023-09-18 11:59:49 -07:00
text-align: center;
}
rustdoc: make sidebar highlight cover whole click target
2024-07-15 16:20:37 -07:00
.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-clip: border-box;
z-index: 1;
}
rustdoc: show crate name beside small logo This commit changes the layout to something a bit less "look at my logo!!!111" gigantic, and makes it clearer where clicking the logo will actually take you. It also means the crate name is persistently at the top of the sidebar, even when in a sub-item page, and clicking that name takes you back to the root. | | Short crate name | Long crate name | |---------|------------------|-----------------| | Root | ![short-root] | ![long-root] | Subpage | ![short-subpage] | ![long-subpage] [short-root]: https://github.com/rust-lang/rust/assets/1593513/fe2ce102-d4b8-44e6-9f7b-68636a907f56 [short-subpage]: https://github.com/rust-lang/rust/assets/1593513/29501663-56c0-4151-b7de-d2637e167125 [long-root]: https://github.com/rust-lang/rust/assets/1593513/f6a385c0-b4c5-4a9c-954b-21b38de4192f [long-subpage]: https://github.com/rust-lang/rust/assets/1593513/97ec47b4-61bf-4ebe-b461-0d2187b8c6ca https://notriddle.com/rustdoc-html-demo-4/logo-lockup/image/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/adler/struct.Adler32.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/struct.Sender.html This improves visual information density (the construct with the logo and crate name is *shorter* than the logo on its own, because it's not square) and navigation clarity (we can now see what clicking the Rust logo does, specifically). Compare this with the layout at [Phoenix's Hexdocs] (which is what this proposal is closely based on), the old proposal on [Internals Discourse] (which always says "Rust standard library" in the sidebar, but doesn't do the side-by-side layout). [Phoenix's Hexdocs]: https://hexdocs.pm/phoenix/1.7.7/overview.html [Internals Discourse]: https://internals.rust-lang.org/t/poc-of-a-new-design-for-the-generated-rustdoc/11018 In newer versions of rustdoc, the crate name and version are always shown in the sidebar, even in subpages. Clicking the crate name does the same thing clicking the logo always did: return you to the crate root. While this actually takes up less screen real estate than the old layout on desktop, it takes up more HTML. It's also a bit more visually complex. I could do what the Internals POC did and keep the vertically stacked layout all the time, instead of doing a horizontal stack where possible. It would take up more screen real estate, though. This design is lifted almost verbatim from Hexdocs. It seems to work for them. [`opentelemetry_process_propagator`], for example, has a long application name. [`opentelemetry_process_propagator`]: https://hexdocs.pm/opentelemetry_process_propagator/OpentelemetryProcessPropagator.html Has anyone written the rationale on why the Rust logo shows up on projects that aren't the standard library? If we turned it off on non-standard crates by default, it would line wrap crate names a lot less often. Or maybe we should encourage crate authors to include their own logo more often? It certainly helps give people a better sense of "place." I'm not sure of anything that directly follows up this one. Plenty of other changes could be made to improve the layout, like * coming up with a less cluttered way to do disclosure (there's a lot of `[-]` on the page) * doing a better job of separating lateral navigation (vec::Vec links to vec::IntoIter) and the table of contents (vec::Vec links to vec::Vec::new) * giving readers more control of how much rustdoc hows them, and giving doc authors more control of how much it generates * better search that reduces the need to browse But those are mostly orthogonal, not future possibilities unlocked by this change.
2023-09-18 11:59:49 -07:00
.sidebar-crate h2 a {
display: block;
rustdoc: click target for sidebar items flush left
2024-07-01 17:08:49 -07:00
/* extend click target to far edge of screen (mile wide bar) */
border-left: solid var(--sidebar-elems-left-padding) transparent;
rustdoc: make sidebar highlight cover whole click target
2024-07-15 16:20:37 -07:00
background-clip: border-box;
rustdoc: click target for sidebar items flush left
2024-07-01 17:08:49 -07:00
margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding));
rustdoc: align crate name with search bar Based on PR feedback.
2023-09-21 11:45:13 -07:00
/* Align the sidebar crate link with the search bar, which have different
font sizes.
| | font-size | line-height | total line-height | padding-y | total |
|:-------|----------:|------------:|------------------:|----------:|-------------:|
| crate | 1.375rem | 1.25 | 1.72rem | x | 2x+1.72rem |
| search | 1rem | 1.15 | 1.15rem | 8px | 1.15rem+16px |
2x + 1.72rem = 1.15rem + 16px
2x = 1.15rem + 16px - 1.72rem
2x = 16px - 0.57rem
x = ( 16px - 0.57rem ) / 2
*/
padding: calc( ( 16px - 0.57rem ) / 2 ) 0.25rem;
Improve display of crate name when hovered
2024-01-29 20:40:22 +01:00
padding-left: 0.2rem;
rustdoc: show crate name beside small logo This commit changes the layout to something a bit less "look at my logo!!!111" gigantic, and makes it clearer where clicking the logo will actually take you. It also means the crate name is persistently at the top of the sidebar, even when in a sub-item page, and clicking that name takes you back to the root. | | Short crate name | Long crate name | |---------|------------------|-----------------| | Root | ![short-root] | ![long-root] | Subpage | ![short-subpage] | ![long-subpage] [short-root]: https://github.com/rust-lang/rust/assets/1593513/fe2ce102-d4b8-44e6-9f7b-68636a907f56 [short-subpage]: https://github.com/rust-lang/rust/assets/1593513/29501663-56c0-4151-b7de-d2637e167125 [long-root]: https://github.com/rust-lang/rust/assets/1593513/f6a385c0-b4c5-4a9c-954b-21b38de4192f [long-subpage]: https://github.com/rust-lang/rust/assets/1593513/97ec47b4-61bf-4ebe-b461-0d2187b8c6ca https://notriddle.com/rustdoc-html-demo-4/logo-lockup/image/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/index.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/adler/struct.Adler32.html https://notriddle.com/rustdoc-html-demo-4/logo-lockup/crossbeam_channel/struct.Sender.html This improves visual information density (the construct with the logo and crate name is *shorter* than the logo on its own, because it's not square) and navigation clarity (we can now see what clicking the Rust logo does, specifically). Compare this with the layout at [Phoenix's Hexdocs] (which is what this proposal is closely based on), the old proposal on [Internals Discourse] (which always says "Rust standard library" in the sidebar, but doesn't do the side-by-side layout). [Phoenix's Hexdocs]: https://hexdocs.pm/phoenix/1.7.7/overview.html [Internals Discourse]: https://internals.rust-lang.org/t/poc-of-a-new-design-for-the-generated-rustdoc/11018 In newer versions of rustdoc, the crate name and version are always shown in the sidebar, even in subpages. Clicking the crate name does the same thing clicking the logo always did: return you to the crate root. While this actually takes up less screen real estate than the old layout on desktop, it takes up more HTML. It's also a bit more visually complex. I could do what the Internals POC did and keep the vertically stacked layout all the time, instead of doing a horizontal stack where possible. It would take up more screen real estate, though. This design is lifted almost verbatim from Hexdocs. It seems to work for them. [`opentelemetry_process_propagator`], for example, has a long application name. [`opentelemetry_process_propagator`]: https://hexdocs.pm/opentelemetry_process_propagator/OpentelemetryProcessPropagator.html Has anyone written the rationale on why the Rust logo shows up on projects that aren't the standard library? If we turned it off on non-standard crates by default, it would line wrap crate names a lot less often. Or maybe we should encourage crate authors to include their own logo more often? It certainly helps give people a better sense of "place." I'm not sure of anything that directly follows up this one. Plenty of other changes could be made to improve the layout, like * coming up with a less cluttered way to do disclosure (there's a lot of `[-]` on the page) * doing a better job of separating lateral navigation (vec::Vec links to vec::IntoIter) and the table of contents (vec::Vec links to vec::Vec::new) * giving readers more control of how much rustdoc hows them, and giving doc authors more control of how much it generates * better search that reduces the need to browse But those are mostly orthogonal, not future possibilities unlocked by this change.
2023-09-18 11:59:49 -07:00
}
.sidebar-crate h2 .version {
display: block;
font-weight: normal;
font-size: 1rem;
overflow-wrap: break-word;
}
Clean up subversion layout
2023-09-23 15:31:32 -07:00
.sidebar-crate + .version {
margin-top: -1rem;
margin-bottom: 1rem;
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.mobile-topbar {
Greatly improve sidebar when width < 700px
2017-12-06 00:42:33 +01:00
display: none;
}
Fix line number not being clickable on source pages
2021-05-10 11:39:53 +02:00
.rustdoc .example-wrap {
rustdoc: use block flex for line-number CSS `display: inline-flex` was used as part of e961d397cab900c55f8d8c104648852e2b63664e, the original commit that added these line numbers. Does anyone know why it was done this way?
2022-09-21 15:26:15 -07:00
display: flex;
Fix "run" button position in error index
2021-03-10 16:40:27 +01:00
position: relative;
rustdoc: use CSS containment to speed up render https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient. Also remove an unnecessary margin-top on .code-header.
2022-09-27 09:21:24 -07:00
margin-bottom: 10px;
}
Unify UI between code block buttons and top buttons
2024-06-03 21:27:29 +02:00
Fix wrong rounded corners when line numbers are displayed on code examples
2024-08-31 22:28:40 +02:00
.rustdoc .example-wrap > pre,
.rustdoc .scraped-example .src-line-numbers {
Unify UI between code block buttons and top buttons
2024-06-03 21:27:29 +02:00
border-radius: 6px;
}
Fix wrong rounded corners when line numbers are displayed on code examples
2024-08-31 22:28:40 +02:00
/*
If the code example line numbers are displayed, there will be a weird radius in the middle from
both the code example and the line numbers, so we need to remove the radius in this case.
*/
.rustdoc .example-wrap > .example-line-numbers,
.rustdoc .scraped-example .src-line-numbers {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.rustdoc .example-wrap > .example-line-numbers + pre,
.rustdoc .scraped-example .rust {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
.rustdoc .scraped-example {
position: relative;
}
rustdoc: use CSS containment to speed up render https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient. Also remove an unnecessary margin-top on .code-header.
2022-09-27 09:21:24 -07:00
/* For the last child of a div, the margin will be taken care of
by the margin-top of the next item. */
.rustdoc .example-wrap:last-child {
margin-bottom: 0px;
}
Add line numbers option to rustdoc
2018-10-08 22:51:37 +02:00
rustdoc: avoid including line numbers in Google SERP snippets
2023-04-05 09:11:10 -07:00
.rustdoc .example-wrap pre {
Small fixes on code blocks in rustdoc
2018-11-10 21:58:47 +01:00
margin: 0;
rustdoc: combine shared CSS between `.*-line-numbers`
2022-10-25 10:43:08 -07:00
flex-grow: 1;
Move scrollbar on the <main> element rather than only on the code block to improve UX
2023-04-04 16:35:36 +02:00
}
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
.scraped-example:not(.expanded) .example-wrap {
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
/* scrape-examples.js has a constant DEFAULT_MAX_LINES (call it N) for the number
* of lines shown in the un-expanded example code viewer. This pre needs to have
* a max-height equal to line-height * N. The line-height is currently 1.5em,
* and we include additional 10px for padding. */
max-height: calc(1.5em * 5 + 10px);
}
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
.rustdoc:not(.src) .scraped-example:not(.expanded) .src-line-numbers,
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
.rustdoc:not(.src) .scraped-example:not(.expanded) pre.rust {
padding-bottom: 0;
/* See above comment, should be the same max-height. */
rustdoc: prevent scroll bar on source viewer
2023-01-24 16:46:45 +01:00
overflow: auto hidden;
Small fixes on code blocks in rustdoc
2018-11-10 21:58:47 +01:00
}
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
.rustdoc:not(.src) .example-wrap pre {
overflow: auto;
}
rustdoc: avoid including line numbers in Google SERP snippets
2023-04-05 09:11:10 -07:00
.rustdoc .example-wrap pre.example-line-numbers,
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
.rustdoc .example-wrap .src-line-numbers {
rustdoc: prevent CSS layout of line numbers shrinking into nothing
2022-12-20 10:32:35 -07:00
min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
flex-grow: 0;
rustdoc: combine shared CSS between `.*-line-numbers`
2022-10-25 10:43:08 -07:00
text-align: right;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
-webkit-user-select: none;
user-select: none;
rustdoc: make line number CSS for doc comment and scraped the same Discussed in https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Line.20number.20styling
2022-12-23 22:55:04 -07:00
padding: 14px 8px;
color: var(--src-line-numbers-span-color);
Make the line numbers of the source code clickable
2014-12-20 03:56:47 +09:00
}
rustdoc: combine shared CSS between `.*-line-numbers`
2022-10-25 10:43:08 -07:00
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
.rustdoc .scraped-example .src-line-numbers {
rustdoc: make line number CSS for doc comment and scraped the same Discussed in https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Line.20number.20styling
2022-12-23 22:55:04 -07:00
padding: 14px 0;
rustdoc: combine shared CSS between `.*-line-numbers`
2022-10-25 10:43:08 -07:00
}
rustdoc: avoid excessive HTML generated in example sources
2022-11-12 08:53:12 -07:00
.src-line-numbers a, .src-line-numbers span {
Migrate line numbers CSS to CSS variables
2022-10-27 13:07:07 +02:00
color: var(--src-line-numbers-span-color);
rustdoc: make line number CSS for doc comment and scraped the same Discussed in https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Line.20number.20styling
2022-12-23 22:55:04 -07:00
padding: 0 8px;
Migrate line numbers CSS to CSS variables
2022-10-27 13:07:07 +02:00
}
.src-line-numbers :target {
background-color: transparent;
rustdoc: remove left border from `.src-line-numbers > a`
2022-10-28 09:51:57 -07:00
border-right: none;
rustdoc: make line number CSS for doc comment and scraped the same Discussed in https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Line.20number.20styling
2022-12-23 22:55:04 -07:00
padding: 0 8px;
rustdoc: remove left border from `.src-line-numbers > a`
2022-10-28 09:51:57 -07:00
}
.src-line-numbers .line-highlighted {
background-color: var(--src-line-number-highlighted-background-color);
Fix ugly hover in sidebar
2018-02-01 23:40:23 +01:00
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
rustdoc: combine shared CSS between `.*-line-numbers`
2022-10-25 10:43:08 -07:00
.search-loading {
text-align: center;
}
Add word-wrap rule for short descriptions
2020-10-08 13:25:36 +02:00
.docblock-short {
Enable wrapping words by default Faced with a very long word, browsers will let it overflow its box horizontally rather than break it in the middle. We essentially never want that behavior. We would rather break the word and keep it inside its horizontal limits. So we apply a default overflow-wrap: break-word/anywhere to the document as a while. In some contexts we would rather add a horizontal scrollbar (code blocks), or elide the excess text with an ellipsis (sidebar). Those still work as expected.
2022-01-11 17:36:52 -08:00
overflow-wrap: break-word;
Add word-wrap rule for short descriptions
2020-10-08 13:25:36 +02:00
overflow-wrap: anywhere;
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
}
Wrap non-pre code blocks Fix #83550 regression
2021-03-29 21:49:58 +08:00
/* Wrap non-pre code blocks (`text`) but not (```text```). */
rustdoc: apply `pre-wrap` CSS to code-wrapped links This is common syntax used for intra-doc links, so fixing it should help with doc formatting.
2022-12-13 10:46:27 -07:00
.docblock :not(pre) > code,
.docblock-short code {
Fix docblock short code missing end whitespaces
2021-01-31 01:27:21 +08:00
white-space: pre-wrap;
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
.top-doc .docblock h2 { font-size: 1.375rem; }
Fix invalid css property value
2022-07-27 15:00:43 +02:00
.top-doc .docblock h3 { font-size: 1.25rem; }
rustdoc: restore header sizes
2021-05-16 20:47:03 -07:00
.top-doc .docblock h4,
Reduce margin on h5 and h6
2021-10-18 21:04:38 -07:00
.top-doc .docblock h5 {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 1.125rem;
Reduce margin on h5 and h6
2021-10-18 21:04:38 -07:00
}
librustdoc: Use correct heading levels. - Avoid multiple <h1>s on a page. - The <h#> tags should follow a semantic hierarchy. - Cap at h6 (no h7)
2021-10-01 06:17:15 -04:00
.top-doc .docblock h6 {
Set font size proportional to user's font size According to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), > To maximize accessibility, it is generally best to use values that > are relative to the user's default font size. > Defining font sizes in px is not accessible, because the user cannot > change the font size in some browsers. Note that changing font size (in browser or OS settings) is distinct from the zoom functionality triggered with Ctrl/Cmd-+. Zoom functionality increases the size of everything on the page, effectively applying a multiplier to all pixel sizes. Font size changes apply to just text. For relative font sizes, we could use `em`, as we do in several places already. However that has a problem of "compounding" (see MDN article for details). The compounding problem is nicely solved by `rem`, which make font sizes relative to the root element, not the parent element. Since we were using a hodge-podge of pixel sizes, em, rem, and percentage sizes before, this change switching everything to rem, while keeping the same size relative to our old default of 16px. 16px is still the default on most browsers, for users that haven't set a larger or smaller font size.
2021-12-30 16:42:06 -05:00
font-size: 1rem;
rustdoc: restore header sizes
2021-05-16 20:47:03 -07:00
}
rustdoc: shrink headings in non-top-level docblocks
2017-08-01 17:08:33 -05:00
Set font size proportional to user's font size According to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), > To maximize accessibility, it is generally best to use values that > are relative to the user's default font size. > Defining font sizes in px is not accessible, because the user cannot > change the font size in some browsers. Note that changing font size (in browser or OS settings) is distinct from the zoom functionality triggered with Ctrl/Cmd-+. Zoom functionality increases the size of everything on the page, effectively applying a multiplier to all pixel sizes. Font size changes apply to just text. For relative font sizes, we could use `em`, as we do in several places already. However that has a problem of "compounding" (see MDN article for details). The compounding problem is nicely solved by `rem`, which make font sizes relative to the root element, not the parent element. Since we were using a hodge-podge of pixel sizes, em, rem, and percentage sizes before, this change switching everything to rem, while keeping the same size relative to our old default of 16px. 16px is still the default on most browsers, for users that haven't set a larger or smaller font size.
2021-12-30 16:42:06 -05:00
.docblock h5 { font-size: 1rem; }
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
.docblock h6 { font-size: 0.875rem; }
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
print enum variant fields in docs
2016-05-27 12:04:56 +02:00
.docblock {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
margin-left: 24px;
Add more links and put the link character to the left
2017-09-17 22:11:37 +02:00
position: relative;
print enum variant fields in docs
2016-05-27 12:04:56 +02:00
}
rustdoc: simplify the codeblock tooltip This commit moves the tooltip into example-wrap, simplifying allowing several overly-complex things to be fixed: * The mousover javascript can be removed, because hovering example-wrap can style the tooltip inside. * The sibling selecor can be removed, because hovering the tooltip also hovers the wrapper, which can hover the codeblock itself. * The relative positioning of the `<li>` tag, which was added in e861efd9f9ca45c1048a256812dfe8faffbb1367 to fix the positioning of the code tooltip, can now be removed, because example-wrap itself already has relative positioning.
2022-09-08 17:46:57 -07:00
.docblock > :not(.more-examples-toggle):not(.example-wrap) {
Wrap <table> elements into <div> to prevent breaking layout and width
2021-09-08 15:08:11 +02:00
max-width: 100%;
overflow-x: auto;
}
rustdoc: clean up `.out-of-band`/`.in-band` CSS * Remove the `float: right` fallback from the main header, which hasn't been needed since IE11 support was dropped. * Remove `in-band` from low-level headers, which hasn't been needed since `.rightside` switched to `float: right` in 593d6d1cb15c55c88319470dabb40126c7b7f1e2 * Remove unreachable `.in-band > code, .in-band > .code-header` CSS, since the `in-band` class was attached to the `code-header` itself, not nested directly below it. * Use `rem` instead of `em` for code header margins. * This results in a slight change in spacing around impls and item-info, but since it makes it more consistent with the way methods are presented, it's probably fine.
2022-09-25 13:09:22 -07:00
.out-of-band {
Use flex more consistently.
2021-04-22 22:33:54 +02:00
flex-grow: 0;
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 1.125rem;
Update CSS for future rustdoc merge
2016-05-05 04:46:45 +02:00
}
Continue themes CSS migration over CSS variables
2022-07-11 14:51:39 +02:00
.docblock code, .docblock-short code,
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
pre, .rustdoc.src .example-wrap {
Continue themes CSS migration over CSS variables
2022-07-11 14:51:39 +02:00
background-color: var(--code-block-background-color);
}
Rename ID "main" into "main-content"
2021-11-29 17:14:05 +01:00
#main-content {
Fix ugly hover in sidebar
2018-02-01 23:40:23 +01:00
position: relative;
}
Improve rustdoc css of "source" and "since" elements
2016-05-06 18:47:12 +02:00
Add styles for docblock tables Fixes #22357
2015-02-15 15:58:45 +02:00
.docblock table {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
margin: .5em 0;
rustdoc: merge `table { border-collapse } into `.docblock table` This was added in 510107815fe888319028c5e96001cdee70e7a931, to fix the display of the module items and search results tables (see the discussion in https://github.com/rust-lang/rust/pull/86725). Those aren't tables any more. The only remaining table is in docblock, which needs this attribute to look right.
2022-09-26 09:54:44 -07:00
border-collapse: collapse;
Add styles for docblock tables Fixes #22357
2015-02-15 15:58:45 +02:00
}
rustdoc: clean up docblock table CSS * The rule `display: block` had no noticeable effect. Technically, because markdown tables have a tbody and thead, they get wrapped in an [anonymous table box] in the CSS tree, nested within the `<table>` element's block layout box. This rule was added in #87230 to make the table side-scrolling, but this same issue was doubly fixed in #88742 by wrapping it in an explicit `<div>` tag. Since accessibility advocates recommend the wrapper div over marking the table as `display: block`, we'll stick with that. https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html * The rule `width: calc(100% - 2px)` had no visible effect, because the anonymous table box was not affected. * The style is tweaked to basically be the same style GitHub uses. In particular, it adds zebra stripes, and removes dotted borders. [anonymous table box]: https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
2022-12-07 21:59:54 -07:00
.docblock table td, .docblock table th {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
padding: .5em;
rustdoc: clean up docblock table CSS * The rule `display: block` had no noticeable effect. Technically, because markdown tables have a tbody and thead, they get wrapped in an [anonymous table box] in the CSS tree, nested within the `<table>` element's block layout box. This rule was added in #87230 to make the table side-scrolling, but this same issue was doubly fixed in #88742 by wrapping it in an explicit `<div>` tag. Since accessibility advocates recommend the wrapper div over marking the table as `display: block`, we'll stick with that. https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html * The rule `width: calc(100% - 2px)` had no visible effect, because the anonymous table box was not affected. * The style is tweaked to basically be the same style GitHub uses. In particular, it adds zebra stripes, and removes dotted borders. [anonymous table box]: https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
2022-12-07 21:59:54 -07:00
border: 1px solid var(--border-color);
Add styles for docblock tables Fixes #22357
2015-02-15 15:58:45 +02:00
}
rustdoc: add GUI test case for docblock table colors
2022-12-08 09:38:27 -07:00
.docblock table tbody tr:nth-child(2n) {
rustdoc: clean up docblock table CSS * The rule `display: block` had no noticeable effect. Technically, because markdown tables have a tbody and thead, they get wrapped in an [anonymous table box] in the CSS tree, nested within the `<table>` element's block layout box. This rule was added in #87230 to make the table side-scrolling, but this same issue was doubly fixed in #88742 by wrapping it in an explicit `<div>` tag. Since accessibility advocates recommend the wrapper div over marking the table as `display: block`, we'll stick with that. https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html * The rule `width: calc(100% - 2px)` had no visible effect, because the anonymous table box was not affected. * The style is tweaked to basically be the same style GitHub uses. In particular, it adds zebra stripes, and removes dotted borders. [anonymous table box]: https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
2022-12-07 21:59:54 -07:00
background: var(--table-alt-row-background-color);
Add styles for docblock tables Fixes #22357
2015-02-15 15:58:45 +02:00
}
Fix stab display in doc blocks
2024-07-20 22:28:13 +02:00
.docblock .stab, .docblock-short .stab {
display: inline-block;
}
rustdoc: `div.where` instead of fmt-newline class This is about equally readable, a lot more terse, and stops special-casing functions and methods. ```console $ du -hs doc-old/ doc-new/ 671M doc-old/ 670M doc-new/ ```
2023-11-30 10:10:49 -07:00
/* "where ..." clauses with block display are also smaller */
div.where {
Replace nbsp in all rustdoc code blocks Co-Authored-By: David Tolnay <dtolnay@gmail.com>
2023-02-02 15:10:41 -07:00
white-space: pre-wrap;
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 0.875rem;
rustdoc: break where clauses onto their own line if they don't have enough room
2016-10-15 10:29:47 -05:00
}
Indent where clause in rustdoc * Add <span class=‘where’> around clause * CSS rule to format the span (for #20176)
2014-12-27 22:45:13 -05:00
Switch item-info div to span to generate valid HTML
2022-04-06 20:41:44 +02:00
.item-info {
display: block;
rustdoc: merge separate `.item-info` CSS Rough timeline: * The longer `.content .item-info` selector originated in 110e7270ab7b0700ce714b8b1c7e509195dea2c4. No reason seems to be given in the PR why it needed the `.content` part, but it was probably added because of <https://github.com/rust-lang/rust/blob/110e7270ab7b0700ce714b8b1c7e509195dea2c4/src/librustdoc/html/static/rustdoc.css#L476-L478>. That selector with the margin-bottom was removed when CSS containment was added in 8846c0853d8687fda0e5f23f6687b03b243980ee. * `.stability` was renamed `.item-info` in caf6c5790a858893c1d32ed2054c9577d12e7493. * The selector without the `.content` was added in d48a39a5e24ab08f727d1c919dc2af98c333ad14.
2022-10-12 11:24:23 -07:00
margin-left: 24px;
Switch item-info div to span to generate valid HTML
2022-04-06 20:41:44 +02:00
}
rustdoc: merge separate `.item-info` CSS Rough timeline: * The longer `.content .item-info` selector originated in 110e7270ab7b0700ce714b8b1c7e509195dea2c4. No reason seems to be given in the PR why it needed the `.content` part, but it was probably added because of <https://github.com/rust-lang/rust/blob/110e7270ab7b0700ce714b8b1c7e509195dea2c4/src/librustdoc/html/static/rustdoc.css#L476-L478>. That selector with the margin-bottom was removed when CSS containment was added in 8846c0853d8687fda0e5f23f6687b03b243980ee. * `.stability` was renamed `.item-info` in caf6c5790a858893c1d32ed2054c9577d12e7493. * The selector without the `.content` was added in d48a39a5e24ab08f727d1c919dc2af98c333ad14.
2022-10-12 11:24:23 -07:00
.item-info code {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 0.875rem;
rustdoc: Adjusted style for unstable feature-name
2015-08-17 20:23:47 +02:00
}
Rename ID "main" into "main-content"
2021-11-29 17:14:05 +01:00
#main-content > .item-info {
Remove "up here" arrow on item-infos Use spacing to distinguish what is related to a given heading.
2022-01-07 12:39:56 -05:00
margin-left: 0;
Fix invalid display of unstable messages
2018-08-27 21:52:10 +02:00
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
nav.sub {
rustdoc: show logo in source sub nav
2021-10-24 22:41:48 +02:00
flex-grow: 1;
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area.
2022-10-20 13:22:36 -07:00
flex-flow: row nowrap;
margin: 4px 0 25px 0;
display: flex;
align-items: center;
}
rustdoc: remove redundant `div.search-container` This wrapper DIV was originally added in 89e1fb322321c05497caa01372ceb7d5b57fa680, when it allowed the search bar's size to be calculated without using `calc()`. This `width` hack can be removed using flexbox.
2022-10-27 13:36:27 -07:00
.search-form {
position: relative;
display: flex;
height: 34px;
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area.
2022-10-20 13:22:36 -07:00
flex-grow: 1;
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
}
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.src nav.sub {
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area.
2022-10-20 13:22:36 -07:00
margin: 0 0 15px 0;
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
rustdoc: remove small from `small-section-header` There's no such thing as a big section header, so I don't know why the name was used.
2023-11-29 13:38:56 -07:00
.section-header {
rustdoc: make struct fields `display: block`
2022-11-22 14:48:58 -07:00
/* fields use <span> tags, but should get their own lines */
display: block;
Fix rustdoc stabilized versions layout
2021-06-17 09:57:48 +02:00
position: relative;
}
rustdoc: remove small from `small-section-header` There's no such thing as a big section header, so I don't know why the name was used.
2023-11-29 13:38:56 -07:00
.section-header:hover > .anchor, .impl:hover > .anchor,
rustdoc: simplify section anchor CSS Since f50bf8636e3b0296db82e631fe95c84324a46ccc changed anchors to be always positioned absolute, specifying it on hover as well is redundant.
2022-12-20 12:44:22 -07:00
.trait-impl:hover > .anchor, .variant:hover > .anchor {
Improve headers linking
2017-08-08 22:16:08 +02:00
display: initial;
}
.anchor {
display: none;
Add more links and put the link character to the left
2017-09-17 22:11:37 +02:00
position: absolute;
Outdent method headings so they stand out The makes the heading / documentation distinction clearer.
2021-10-21 18:46:47 -07:00
left: -0.5em;
Fix anchors display in rustdoc
2021-08-06 16:47:35 +02:00
background: none !important;
Improve headers linking
2017-08-08 22:16:08 +02:00
}
Add more links and put the link character to the left
2017-09-17 22:11:37 +02:00
.anchor.field {
rustdoc: Remove visual overlap between § and [+]
2018-02-17 20:46:06 +03:00
left: -5px;
Add more links and put the link character to the left
2017-09-17 22:11:37 +02:00
}
rustdoc: remove small from `small-section-header` There's no such thing as a big section header, so I don't know why the name was used.
2023-11-29 13:38:56 -07:00
.section-header > .anchor {
Fix anchors display in rustdoc
2021-08-06 16:47:35 +02:00
left: -15px;
padding-right: 8px;
}
rustdoc: remove small from `small-section-header` There's no such thing as a big section header, so I don't know why the name was used.
2023-11-29 13:38:56 -07:00
h2.section-header > .anchor {
Fix anchors display in rustdoc
2021-08-06 16:47:35 +02:00
padding-right: 6px;
Fix anchor not always being put at the right place
2018-03-06 22:05:41 +01:00
}
Make headings anchor hidden by default and show on hover
2023-11-14 15:40:31 +01:00
a.doc-anchor {
color: var(--main-color);
display: none;
position: absolute;
left: -17px;
/* We add this padding so that when the cursor moves from the heading's text to the anchor,
the anchor doesn't disappear. */
rustdoc: make the hover trail for doc anchors a bit bigger https://rust-lang.zulipchat.com/#narrow/stream/266220-t-rustdoc/topic/Weird.20markdown.20heading.20rendering.3F
2024-08-03 12:30:38 -07:00
padding-right: 10px;
Make headings anchor hidden by default and show on hover
2023-11-14 15:40:31 +01:00
/* And this padding is used to make the anchor larger and easier to click on. */
padding-left: 3px;
}
*:hover > .doc-anchor {
display: block;
}
/* If the first element of the top doc block is a heading, we don't want to ever display its anchor
because of the `[-]` element which would overlap with it. */
.top-doc > .docblock > *:first-child > .doc-anchor {
display: none !important;
Rework doc blocks headings by not turning them into links anymore and putting an anchor to their left side
2022-02-25 15:09:37 +01:00
}
Improve headers linking
2017-08-08 22:16:08 +02:00
rustdoc: add main-heading and example-wrap link CSS to big selector This makes the stylesheet more consistent about how it handles link hover.
2022-10-07 17:05:30 -07:00
.main-heading a:hover,
rustdoc: avoid including line numbers in Google SERP snippets
2023-04-05 09:11:10 -07:00
.example-wrap .rust a:hover,
rustdoc: clean up CSS for All Items and All Crates lists This reduces the amount of CSS, and makes these two pages more consistent (which, necessarily, means changing them a bit).
2022-09-16 13:40:21 -07:00
.all-items a:hover,
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
.docblock a:not(.scrape-help):not(.tooltip):hover:not(.doc-anchor),
.docblock-short a:not(.scrape-help):not(.tooltip):hover,
rustdoc: remove unused CSS `.docblock a:not(.srclink)` This selector was added in c7312fbae4979c6d4fdfbd1f55a71cd47d82a480, because the list of impl items could be nested below `docblock`. https://github.com/rust-lang/rust/blob/c7312fbae4979c6d4fdfbd1f55a71cd47d82a480/src/librustdoc/html/render.rs#L3841-L3845 Now that rustdoc toggles have been switched to `<details>`, there shouldn't be any need to put things inside docblock containers just to give them disclosure toggles.
2022-10-06 11:20:37 -07:00
.item-info a {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
text-decoration: underline;
Fix style fallout from 204e2bd442 Links in docblock headers also became blue, which was not intended.
2015-02-20 13:54:11 +02:00
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
.crate.block li.current a { font-weight: 500; }
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
rustdoc: fix overflow-wrap for table layouts For all table layouts, set overflow-wrap: break-word.
2022-01-20 14:47:26 -08:00
/* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap
as much as needed on mobile (see
Change `src/test` to `tests` in source files, fix tidy and tests
2023-01-05 09:45:44 +01:00
tests/rustdoc-gui/type-declaration-overflow.goml for an example of why
rustdoc: fix overflow-wrap for table layouts For all table layouts, set overflow-wrap: break-word.
2022-01-20 14:47:26 -08:00
this matters). The `anywhere` value means:
"Soft wrap opportunities introduced by the word break are considered when
calculating min-content intrinsic sizes."
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#values
For table layouts, that becomes a problem: the browser tries to make each
column as narrow as possible, and `overflow-wrap: anywhere` means it can do
so by breaking words - even if some other column could be shrunk without
breaking words! This shows up, for instance, in the `Structs` / `Modules` /
`Functions` (etcetera) sections of a module page, and when a docblock
contains a table.
So, for table layouts, override the default with break-word, which does
_not_ affect min-content intrinsic sizes.
*/
table,
.item-table {
overflow-wrap: break-word;
}
Migrate from custom elements to divs with classes to be compatible with safari
2021-06-18 00:33:42 +02:00
.item-table {
Cleanup .item-table CSS
2021-10-11 00:38:56 +02:00
display: table;
rustdoc: simplify DOM for `.item-table` This switches from using `<div>` to the more semantic `<ul>`, and using class names that rhyme with the classes the search results table uses.
2023-02-07 19:00:18 -07:00
padding: 0;
margin: 0;
rustdoc: short descr. cause word-breaks in tables The `.item-table` class is used to display name+description lists, e.g. the exported functions, as a table. If the names are long and the descriptions are short, then the width of the table does not expand to the whole size, but only uses a fraction. This causes a some names to break inside a word. This change makes the table always use 100% of its parent width. The `.width-limiter` wrapper already ensures that the used width still does not become excessive. Signed-off-by: René Kijewski <rene.kijewski@fu-berlin.de>
2024-07-21 02:28:04 +02:00
width: 100%;
Implement Desktop and Mobile version with gridlayout * implement sans-serif #85621
2021-05-25 00:36:36 +02:00
}
rustdoc: simplify DOM for `.item-table` This switches from using `<div>` to the more semantic `<ul>`, and using class names that rhyme with the classes the search results table uses.
2023-02-07 19:00:18 -07:00
.item-table > li {
Move from grid layout to table based layout because of browser limits that overlay row entries after a UA specific amount of rows
2021-09-12 01:18:39 +02:00
display: table-row;
}
rustdoc: simplify DOM for `.item-table` This switches from using `<div>` to the more semantic `<ul>`, and using class names that rhyme with the classes the search results table uses.
2023-02-07 19:00:18 -07:00
.item-table > li > div {
Move from grid layout to table based layout because of browser limits that overlay row entries after a UA specific amount of rows
2021-09-12 01:18:39 +02:00
display: table-cell;
Implement Desktop and Mobile version with gridlayout * implement sans-serif #85621
2021-05-25 00:36:36 +02:00
}
rustdoc: simplify DOM for `.item-table` This switches from using `<div>` to the more semantic `<ul>`, and using class names that rhyme with the classes the search results table uses.
2023-02-07 19:00:18 -07:00
.item-table > li > .item-name {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
padding-right: 1.25rem;
Implement Desktop and Mobile version with gridlayout * implement sans-serif #85621
2021-05-25 00:36:36 +02:00
}
Move crate drop-down to search results page This reduces clutter on doc pages.
2022-01-01 23:48:34 -05:00
.search-results-title {
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
margin-top: 0;
white-space: nowrap;
/* flex layout allows shrinking the <select> appropriately if it becomes too large */
rustdoc: simplify `.search-results-title` CSS By using `display: flex`, we still get the never-wrapping layout with `#crate-search-div` maxing out and truncating its text. The title itself winds up always filling its parent, but since `#crate-search` doesn't have `flex-grow` set, it won't fill available space.
2022-11-23 13:28:06 -07:00
display: flex;
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
/* make things look like in a line, despite the fact that we're using a layout
with boxes (i.e. from the flex layout) */
align-items: baseline;
Move crate drop-down to search results page This reduces clutter on doc pages.
2022-01-01 23:48:34 -05:00
}
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
#crate-search-div {
/* ensures that 100% in properties of #crate-search-div:after
are relative to the size of this div */
position: relative;
/* allows this div (and with it the <select>-element "#crate-search") to be shrunk */
min-width: 5em;
Move crate drop-down to search results page This reduces clutter on doc pages.
2022-01-01 23:48:34 -05:00
}
Add crate filtering
2018-10-01 00:47:54 +02:00
#crate-search {
Improve page load performance in rustdoc. Add font-display: swap. Per https://web.dev/font-display/, this prevents "flash of invisible text" during load by using a system font until the custom font is available. I've noticed this flash of invisible text occasionally when reading Rust docs. Add an explicit height to icons (which already had an explicit width) to allow browsers to lay out the page more accurately before the icons have been loaded. https://web.dev/optimize-cls/. Add min-width: 115px to the crate search dropdown. When the HTML first loads, this dropdown includes only the text "All crates." Later, JS loads the items underneath it, some of which are wider. That causes the dropdown to get wider, causing a distracting reflow. This sets a min-width based on the size that the dropdown eventually becomes based on the crates on doc.rust-lang.org, reducing page movement during load.
2021-02-19 17:54:41 -08:00
min-width: 115px;
rustdoc: use CSS margin/padding shorthand when all are being set
2022-10-29 09:04:31 -07:00
padding: 0 23px 0 4px;
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
/* prevents the <select> from overflowing the containing div in case it's shrunk */
max-width: 100%;
/* contents can overflow because of max-width limit, then show ellipsis */
text-overflow: ellipsis;
Simplify rustdoc themes by relying more on CSS variables
2022-08-13 14:00:23 +02:00
border: 1px solid var(--border-color);
Move crate drop-down to search results page This reduces clutter on doc pages.
2022-01-01 23:48:34 -05:00
border-radius: 4px;
Add crate filtering
2018-10-01 00:47:54 +02:00
outline: none;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none;
/* Removes default arrow from firefox */
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
text-indent: 0.01px;
background-color: var(--main-background-color);
rustdoc: clean up "normalize.css 8" input override CSS These rules were copied from normalize.css 3, and are mostly redundant. * `optgroup` isn't used in rustdoc at all * `textarea` is only used for the "copy" button, so it's not visible * The remaining buttons and inputs mostly have styles set anyway. * We should never be setting `color` without also setting the background to something. Otherwise, you get white-on-gray text. That seems to be [the reason] why `normalize.css` changed this. [the reason]: https://github.com/necolas/normalize.css/pull/502
2022-09-28 13:52:13 -07:00
color: inherit;
line-height: 1.5;
font-weight: 500;
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
}
Migrate crate-search element to CSS variables
2022-11-07 18:08:14 +01:00
#crate-search:hover, #crate-search:focus {
border-color: var(--crate-search-hover-border);
}
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
/* pseudo-element for holding the dropdown-arrow image; needs to be a separate thing
so that we can apply CSS-filters to change the arrow color in themes */
#crate-search-div::after {
/* lets clicks through! */
pointer-events: none;
/* completely covers the underlying div */
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
Add arrow to the crate select box
2018-11-29 01:29:49 +01:00
background-repeat: no-repeat;
Fix right arrow size for crate filter
2018-12-08 16:35:51 +01:00
background-size: 20px;
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
background-position: calc(100% - 2px) 56%;
Inline CSS background images directly into the CSS
2023-01-31 21:23:23 +01:00
/* down arrow (image is black color) */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
width="128" height="128" viewBox="-30 -20 176 176"><path d="M111,40.5L64,87.499L17,40.5" \
fill="none" stroke="black" strike-linecap="square" stroke-miterlimit="10" stroke-width="12"/> \
</svg>');
Migrate crate-search element to CSS variables
2022-11-07 18:08:14 +01:00
/* changes the arrow image color */
filter: var(--crate-search-div-filter);
}
#crate-search-div:hover::after, #crate-search-div:focus-within::after {
filter: var(--crate-search-div-hover-filter);
Improve crate selection on rustdoc search results page Resolves all of issue #93240 Reproduces a similar change as #99086, but with improvements In particular, this PR inlcludes: * redesigning the crate-search selector so the background color matches its surroundings * decrease the font of the dropdown menu to a reaonable size * add a hover effect * make the color of the arrow theme-dependent, using a surrounding div, with :after pseudo-element that can then be transformed using CSS filters to approximate the desired color * fix the text "in" to match the title font * remove the "for xyz" in the "Results for xyz in [All crates]" title when searching for search term "xyz"; you can already see what you're searching for as it's typed in the search bar! * in line with #99086, handle super-long crate names appropriately without a long <select> element escaping the screen area; the improvement is that we also keep the title within a single line now; uses some flex layout shenanigans... * the margins / paddings are adjusted so the selected label of the <select> fits within the rest of that title nicely; also some inconsistency in the way that Firefox renders a <select> with "appearance: none" (roughly 4px more padding left and right of the text than e.g. Chrome) is worked around, and it now produces a result that looks (essentially) identical to Chrome * the color of the help menu and settings menu border in light theme is made to match with the color of the corresponding buttons, like they do (match) in the ayu theme * the casing of "All crates" changes to "all crates" * the new tests from #99086 are temporarily disabled, until they can be adapted later
2022-07-03 20:10:19 +02:00
}
#crate-search > option {
font-size: 1rem;
Add crate filtering
2018-10-01 00:47:54 +02:00
}
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
.search-input {
Add -webkit-appearance: none to search input This fixes an issue when displaying on iPad, where the search box had no borders.
2021-12-08 23:39:42 -08:00
/* Override Normalize.css: it has a rule that sets
-webkit-appearance: textfield for search inputs. That
causes rounded corners and no border on iOS Safari. */
-webkit-appearance: none;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
outline: none;
Simplify rustdoc themes by relying more on CSS variables
2022-08-13 14:00:23 +02:00
border: 1px solid var(--border-color);
Unify search input and buttons size
2022-01-20 14:18:59 +01:00
border-radius: 2px;
Add a bit more padding on search padding and reduce its font size
2022-01-27 17:55:39 +01:00
padding: 8px;
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 1rem;
rustdoc: remove redundant `div.search-container` This wrapper DIV was originally added in 89e1fb322321c05497caa01372ceb7d5b57fa680, when it allowed the search bar's size to be calculated without using `calc()`. This `width` hack can be removed using flexbox.
2022-10-27 13:36:27 -07:00
flex-grow: 1;
Simplify rustdoc themes by relying more on CSS variables
2022-08-13 14:00:23 +02:00
background-color: var(--button-background-color);
Migrate search input color to CSS variable
2022-10-06 13:01:07 +02:00
color: var(--search-color);
Tweaked the design to be a lot cleaner. Signed-off-by: Daniel Fagnan <dnfagnan@gmail.com>
2014-03-18 01:44:55 -06:00
}
Clean up themes CSS
2022-09-02 15:08:23 +02:00
.search-input:focus {
border-color: var(--search-input-focused-border-color);
}
Tweaked the design to be a lot cleaner. Signed-off-by: Daniel Fagnan <dnfagnan@gmail.com>
2014-03-18 01:44:55 -06:00
rustdoc: use focus for search navigation Rather than keeping track of highlighted element inside the JS, take advantage of `.focus()` and the :focus CSS pseudo-class. This required wrapping each row of results in one big <a> tag (because anchors can be focused, but table rows cannot). That in turn required moving from a table layout to a div layout with float. This makes it so Ctrl+Enter opens links in new tabs, and using the arrow keys to navigate off the bottom of the page scrolls the rest of the page into view. It also simplifies the keyboard event handling. It eliminates the need for click handlers on the search results, and for tracking mouse movements. This changes the UI treatment of mouse hovering. A hovered element now gets a light grey background, but does not change the focused element. It's possible to have two highlighted search results: one that is focused (via keyboard) and one that is hovered (via mouse). Pressing enter will activate the focused link; clicking will activate the hovered link. This matches up with how Firefox and Chrome handle suggestions in their URL bar, and avoids stray mouse movements changing the focus. Selecting tabs is now done with left/right arrows while any search result is focused. The visibility of results on each search tab is controlled with the "active" class, rather than by setting display: none directly. Note that the old code kept track of highlighted search element when tabbing back and forth. The new code doesn't.
2021-05-09 12:56:21 -07:00
.search-results {
display: none;
}
.search-results.active {
display: block;
}
Fix search results display
2021-05-21 16:39:03 +02:00
.search-results > a {
rustdoc: simplify search results CSS and DOM There is a layout change caused by this commit, but it's subtle. You won't notice it unless you're looking for it.
2022-11-04 12:34:24 -07:00
display: flex;
rustdoc: use focus for search navigation Rather than keeping track of highlighted element inside the JS, take advantage of `.focus()` and the :focus CSS pseudo-class. This required wrapping each row of results in one big <a> tag (because anchors can be focused, but table rows cannot). That in turn required moving from a table layout to a div layout with float. This makes it so Ctrl+Enter opens links in new tabs, and using the arrow keys to navigate off the bottom of the page scrolls the rest of the page into view. It also simplifies the keyboard event handling. It eliminates the need for click handlers on the search results, and for tracking mouse movements. This changes the UI treatment of mouse hovering. A hovered element now gets a light grey background, but does not change the focused element. It's possible to have two highlighted search results: one that is focused (via keyboard) and one that is hovered (via mouse). Pressing enter will activate the focused link; clicking will activate the hovered link. This matches up with how Firefox and Chrome handle suggestions in their URL bar, and avoids stray mouse movements changing the focus. Selecting tabs is now done with left/right arrows while any search result is focused. The visibility of results on each search tab is controlled with the "active" class, rather than by setting display: none directly. Note that the old code kept track of highlighted search element when tabbing back and forth. The new code doesn't.
2021-05-09 12:56:21 -07:00
/* A little margin ensures the browser's outlining of focused links has room to display. */
margin-left: 2px;
margin-right: 2px;
Fix search result bottom border color
2022-11-04 22:36:04 +01:00
border-bottom: 1px solid var(--search-result-border-color);
rustdoc: simplify search results CSS and DOM There is a layout change caused by this commit, but it's subtle. You won't notice it unless you're looking for it.
2022-11-04 12:34:24 -07:00
gap: 1em;
Make doc search results use <a> tags instead of js for navigating This has the primary advantage of not interfering with browser default behavior for links like being able to cmd/ctrl+click on a result to open the result in a new tab but leave the current page as-is (previous behavior both opened a new tab and changed the current tab's location to the result's)
2014-08-31 17:11:42 -04:00
}
rustdoc: get rid of CSS/DOM `div.desc span`, which isn't really needed
2022-11-04 13:19:33 -07:00
.search-results > a > div.desc {
white-space: nowrap;
text-overflow: ellipsis;
rustdoc: simplify search results CSS and DOM There is a layout change caused by this commit, but it's subtle. You won't notice it unless you're looking for it.
2022-11-04 12:34:24 -07:00
overflow: hidden;
Fix display of long items in search results
2023-06-27 15:05:43 +02:00
flex: 2;
Fix search results display
2021-05-21 16:39:03 +02:00
}
Migrate search results theme style to CSS variables
2022-10-01 15:50:47 +02:00
.search-results a:hover,
.search-results a:focus {
background-color: var(--search-result-link-focus-background-color);
}
Fix display of long items in search results
2023-06-27 15:05:43 +02:00
.search-results .result-name {
display: flex;
align-items: center;
justify-content: start;
flex: 3;
}
Fix display of aliases in rustdoc search results
2023-07-18 14:22:27 +02:00
.search-results .result-name .alias {
Migrate search result alias to CSS variables
2022-11-21 11:15:41 +01:00
color: var(--search-results-alias-color);
}
Add search result item types after their name
2023-04-22 16:00:20 +02:00
.search-results .result-name .grey {
Migrate search result alias to CSS variables
2022-11-21 11:15:41 +01:00
color: var(--search-results-grey-color);
}
rustdoc: js: change color and reduce size of typename in search result
2023-06-16 23:18:57 +02:00
.search-results .result-name .typename {
color: var(--search-results-grey-color);
font-size: 0.875rem;
Fix display of long items in search results
2023-06-27 15:05:43 +02:00
width: var(--search-typename-width);
}
.search-results .result-name .path {
word-break: break-all;
max-width: calc(100% - var(--search-typename-width));
display: inline-block;
rustdoc: js: change color and reduce size of typename in search result
2023-06-16 23:18:57 +02:00
}
Fix display of aliases in rustdoc search results
2023-07-18 14:22:27 +02:00
.search-results .result-name .path > * {
display: inline;
}
Migrate search result alias to CSS variables
2022-11-21 11:15:41 +01:00
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
.popover {
position: absolute;
rustdoc: clean up help and settings button CSS The old version of this code specified a bunch of different numbers that had to line up just right to get the size it wanted. This version uses flexbox centering, specifies the font size, and lets the browser figure out the rest of the layout automatically.
2022-12-01 14:24:33 -07:00
top: 100%;
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
right: 0;
use css variable for z-index of the sidebar and calculate the z-indices of things that go over the sidebar
2023-12-31 22:25:46 +01:00
z-index: calc(var(--desktop-sidebar-z-index) + 1);
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
margin-top: 7px;
border-radius: 3px;
Simplify rustdoc themes by relying more on CSS variables
2022-08-13 14:00:23 +02:00
border: 1px solid var(--border-color);
rustdoc: simplify popover CSS * Merge the color-changing block into the regular rules, which was probably written that way because it used to be in the theme files, but has no reason to be written this way now that it's in rustdoc.css * Get rid of redundant `display: block`, since `position: absolute` blockifies the layout anyway.
2022-12-13 11:00:34 -07:00
background-color: var(--main-background-color);
color: var(--main-color);
rustdoc: use consistent "popover" styling for notable traits
2022-11-08 18:00:22 -07:00
--popover-arrow-offset: 11px;
librustdoc: blur page when help dialogue is present Blurs the document's background when the help dialogue is present, making the contents of the dialogue stand out more.
2015-07-08 14:52:58 +01:00
}
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
.popover::before {
content: '';
position: absolute;
rustdoc: use consistent "popover" styling for notable traits
2022-11-08 18:00:22 -07:00
right: var(--popover-arrow-offset);
Simplify rustdoc themes by relying more on CSS variables
2022-08-13 14:00:23 +02:00
border: solid var(--border-color);
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
border-width: 1px 1px 0 0;
rustdoc: simplify popover CSS * Merge the color-changing block into the regular rules, which was probably written that way because it used to be in the theme files, but has no reason to be written this way now that it's in rustdoc.css * Get rid of redundant `display: block`, since `position: absolute` blockifies the layout anyway.
2022-12-13 11:00:34 -07:00
background-color: var(--main-background-color);
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
padding: 4px;
transform: rotate(-45deg);
top: -5px;
librustdoc: blur page when help dialogue is present Blurs the document's background when the help dialogue is present, making the contents of the dialogue stand out more.
2015-07-08 14:52:58 +01:00
}
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
Merge settings.css into rustdoc.css
2023-09-13 11:09:04 +02:00
.setting-line {
margin: 1.2em 0.6em;
}
.setting-radio input, .setting-check input {
margin-right: 0.3em;
height: 1.2rem;
width: 1.2rem;
border: 2px solid var(--settings-input-border-color);
outline: none;
-webkit-appearance: none;
cursor: pointer;
}
.setting-radio input {
border-radius: 50%;
}
.setting-radio span, .setting-check span {
padding-bottom: 1px;
}
.setting-radio {
margin-top: 0.1em;
margin-bottom: 0.1em;
min-width: 3.8em;
padding: 0.3em;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.setting-radio + .setting-radio {
margin-left: 0.5em;
}
.setting-check {
margin-right: 20px;
display: flex;
align-items: center;
cursor: pointer;
}
.setting-radio input:checked {
box-shadow: inset 0 0 0 3px var(--main-background-color);
background-color: var(--settings-input-color);
}
.setting-check input:checked {
background-color: var(--settings-input-color);
border-width: 1px;
Add some missing comments to describe what the inlined SVG is
2024-04-10 20:36:02 +02:00
/* cross-mark image in the settings checkboxes */
Merge settings.css into rustdoc.css
2023-09-13 11:09:04 +02:00
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">\
<path d="M7,25L17,32L33,12" fill="none" stroke="black" stroke-width="5"/>\
<path d="M7,23L17,30L33,10" fill="none" stroke="white" stroke-width="5"/></svg>');
}
.setting-radio input:focus, .setting-check input:focus {
box-shadow: 0 0 1px 1px var(--settings-input-color);
}
/* In here we combine both `:focus` and `:checked` properties. */
.setting-radio input:checked:focus {
box-shadow: inset 0 0 0 3px var(--main-background-color),
0 0 2px 2px var(--settings-input-color);
}
.setting-radio input:hover, .setting-check input:hover {
border-color: var(--settings-input-color) !important;
}
rustdoc: make the help button a link to a page This allows you to open the help section in a new browser tab, which is a pretty reasonable thing to want for a documentation page.
2022-10-14 09:48:19 -07:00
/* use larger max-width for help popover, but not for help.html */
#help.popover {
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
max-width: 600px;
rustdoc: use consistent "popover" styling for notable traits
2022-11-08 18:00:22 -07:00
--popover-arrow-offset: 48px;
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
}
rustdoc: make the help button a link to a page This allows you to open the help section in a new browser tab, which is a pretty reasonable thing to want for a documentation page.
2022-10-14 09:48:19 -07:00
#help dt {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
float: left;
clear: left;
Better styling of "Switch result tab" shortcut
2021-02-02 16:15:57 -05:00
margin-right: 0.5rem;
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
}
rustdoc: make the help button a link to a page This allows you to open the help section in a new browser tab, which is a pretty reasonable thing to want for a documentation page.
2022-10-14 09:48:19 -07:00
#help span.top, #help span.bottom {
Add link to rustdoc book in rustdoc help popup
2020-10-19 13:44:27 +02:00
text-align: center;
display: block;
Set font size proportional to user's font size According to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), > To maximize accessibility, it is generally best to use values that > are relative to the user's default font size. > Defining font sizes in px is not accessible, because the user cannot > change the font size in some browsers. Note that changing font size (in browser or OS settings) is distinct from the zoom functionality triggered with Ctrl/Cmd-+. Zoom functionality increases the size of everything on the page, effectively applying a multiplier to all pixel sizes. Font size changes apply to just text. For relative font sizes, we could use `em`, as we do in several places already. However that has a problem of "compounding" (see MDN article for details). The compounding problem is nicely solved by `rem`, which make font sizes relative to the root element, not the parent element. Since we were using a hodge-podge of pixel sizes, em, rem, and percentage sizes before, this change switching everything to rem, while keeping the same size relative to our old default of 16px. 16px is still the default on most browsers, for users that haven't set a larger or smaller font size.
2021-12-30 16:42:06 -05:00
font-size: 1.125rem;
Add rustdoc version into the help popup
2021-09-15 13:37:29 +02:00
}
rustdoc: make the help button a link to a page This allows you to open the help section in a new browser tab, which is a pretty reasonable thing to want for a documentation page.
2022-10-14 09:48:19 -07:00
#help span.top {
Add rustdoc version into the help popup
2021-09-15 13:37:29 +02:00
margin: 10px 0;
Simplify rustdoc themes by relying more on CSS variables
2022-08-13 14:00:23 +02:00
border-bottom: 1px solid var(--border-color);
Add link to rustdoc book in rustdoc help popup
2020-10-19 13:44:27 +02:00
padding-bottom: 4px;
margin-bottom: 6px;
}
rustdoc: make the help button a link to a page This allows you to open the help section in a new browser tab, which is a pretty reasonable thing to want for a documentation page.
2022-10-14 09:48:19 -07:00
#help span.bottom {
Add rustdoc version into the help popup
2021-09-15 13:37:29 +02:00
clear: both;
Simplify rustdoc themes by relying more on CSS variables
2022-08-13 14:00:23 +02:00
border-top: 1px solid var(--border-color);
Add rustdoc version into the help popup
2021-09-15 13:37:29 +02:00
}
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
.side-by-side > div {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
width: 50%;
float: left;
Move help popup into a pocket menu as well
2022-06-20 16:28:52 +02:00
padding: 0 20px 20px 17px;
Implement a web backend for rustdoc_ng This large commit implements and `html` output option for rustdoc_ng. The executable has been altered to be invoked as "rustdoc_ng html <crate>" and it will dump everything into the local "doc" directory. JSON can still be generated by changing 'html' to 'json'. This also fixes a number of bugs in rustdoc_ng relating to comment stripping, along with some other various issues that I found along the way. The `make doc` command has been altered to generate the new documentation into the `doc/ng/$(CRATE)` directories.
2013-09-18 22:18:38 -07:00
}
rustdoc: Render stability attributes Closes #8965
2013-09-26 12:53:06 -07:00
Fix item info display
2021-07-18 12:25:49 +02:00
.item-info .stab {
Fix display of features in rustdoc
2023-12-06 15:33:01 +01:00
display: block;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
padding: 3px;
margin-bottom: 5px;
rustdoc: make stability badge CSS more consistent * They all get rounded corners now. A test case has been added for this, too. * There are now broadly two kinds of stability badge, where there used to be three: item-info "fat badge", and the "thin badge" in both item tables and in docblocks (which got merged). The fat badges can have icons, while the thin badges can't.
2022-12-09 10:40:49 -07:00
}
rustdoc: simplify DOM for `.item-table` This switches from using `<div>` to the more semantic `<ul>`, and using class names that rhyme with the classes the search results table uses.
2023-02-07 19:00:18 -07:00
.item-name .stab {
rustdoc: make stability badge CSS more consistent * They all get rounded corners now. A test case has been added for this, too. * There are now broadly two kinds of stability badge, where there used to be three: item-info "fat badge", and the "thin badge" in both item tables and in docblocks (which got merged). The fat badges can have icons, while the thin badges can't.
2022-12-09 10:40:49 -07:00
margin-left: 0.3125em;
}
.stab {
padding: 0 2px;
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 0.875rem;
Make portability part of the summary. That means it will be visible under "Implementors" on trait pages, and under "Implementations" on struct/enum pages, even when all methods are collapsed. Switch to a float layout for rightside elements.
2021-06-08 11:04:53 -07:00
font-weight: normal;
Migrate stab elements style to CSS variables
2022-10-03 15:31:59 +02:00
color: var(--main-color);
background-color: var(--stab-background-color);
rustdoc: make stability badge CSS more consistent * They all get rounded corners now. A test case has been added for this, too. * There are now broadly two kinds of stability badge, where there used to be three: item-info "fat badge", and the "thin badge" in both item tables and in docblocks (which got merged). The fat badges can have icons, while the thin badges can't.
2022-12-09 10:40:49 -07:00
width: fit-content;
white-space: pre-wrap;
border-radius: 3px;
Fix display of long inline cfg labels
2023-07-03 13:26:08 +02:00
display: inline;
rustdoc: align stability badge to baseline instead of bottom r? @joshtripplet
2022-12-13 11:09:38 -07:00
vertical-align: baseline;
Migrate stab elements style to CSS variables
2022-10-03 15:31:59 +02:00
}
.stab.portability > code {
background: none;
color: var(--stab-code-color);
rustdoc: incorporate stability index throughout This commit hooks rustdoc into the stability index infrastructure in two ways: 1. It looks up stability levels via the index, rather than by manual attributes. 2. It adds stability level information throughout rustdoc output, rather than just at the top header. In particular, a stability color (with mouseover text) appears next to essentially every item that appears in rustdoc's HTML output. Along the way, the stability index code has been lightly refactored.
2014-06-26 11:37:39 -07:00
}
Fix display of features in rustdoc
2023-12-06 15:33:01 +01:00
.stab .emoji, .item-info .stab::before {
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 1.25rem;
Fix display of features in rustdoc
2023-12-06 15:33:01 +01:00
}
.stab .emoji {
Fix item-info display
2022-08-18 15:47:39 +02:00
margin-right: 0.3rem;
Improved rustdoc rendering for unstable features
2017-01-04 22:09:54 -08:00
}
Fix display of features in rustdoc
2023-12-06 15:33:01 +01:00
.item-info .stab::before {
/* ensure badges with emoji and without it have same height */
content: "\0";
width: 0;
display: inline-block;
color: transparent;
}
Improved rustdoc rendering for unstable features
2017-01-04 22:09:54 -08:00
Slight visual improvements to warning boxes in the docs
2021-03-23 12:23:45 +01:00
/* Black one-pixel outline around emoji shapes */
.emoji {
text-shadow:
1px 0 0 black,
-1px 0 0 black,
Fix display of features in rustdoc
2023-12-06 15:33:01 +01:00
0 1px 0 black,
Slight visual improvements to warning boxes in the docs
2021-03-23 12:23:45 +01:00
0 -1px 0 black;
}
Improve rustdoc css of "source" and "since" elements
2016-05-06 18:47:12 +02:00
.since {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-weight: normal;
font-size: initial;
Rustdoc - display `since` version for stable items Fixes #27607
2016-02-09 21:15:29 -05:00
}
Make source links look cleaner Change from syntaxy-looking [src] to the plain word "source".
2021-12-03 17:09:04 -08:00
.rightside {
Simplify foreign type rendering. Simplified foreign type rendering by switching from tables to flexbox. Also, removed some seemingly extraneous elements like “ghost” spans. Reduces element count on std::iter::Iterator by 30%.
2018-12-26 21:23:05 -08:00
padding-left: 12px;
Merge duplicated CSS rules
2022-08-27 00:37:04 +02:00
float: right;
Simplify foreign type rendering. Simplified foreign type rendering by switching from tables to flexbox. Also, removed some seemingly extraneous elements like “ghost” spans. Reduces element count on std::iter::Iterator by 30%.
2018-12-26 21:23:05 -08:00
}
Clean up themes CSS
2022-09-02 15:08:23 +02:00
.rightside:not(a),
.out-of-band {
color: var(--right-side-color);
}
Migrate highlight style to CSS variables
2022-10-04 16:56:56 +02:00
pre.rust {
tab-size: 4;
-moz-tab-size: 4;
}
/* Code highlighting */
pre.rust .kw {
color: var(--code-highlight-kw-color);
}
pre.rust .kw-2 {
color: var(--code-highlight-kw-2-color);
}
pre.rust .lifetime {
color: var(--code-highlight-lifetime-color);
}
pre.rust .prelude-ty {
color: var(--code-highlight-prelude-color);
}
pre.rust .prelude-val {
color: var(--code-highlight-prelude-val-color);
}
pre.rust .string {
color: var(--code-highlight-string-color);
}
pre.rust .number {
color: var(--code-highlight-number-color);
}
pre.rust .bool-val {
color: var(--code-highlight-literal-color);
}
pre.rust .self {
color: var(--code-highlight-self-color);
}
rustdoc: rename syntax highlighting CSS class `attribute` to `attr` Link classes use the abbreviation `attr`, so why shouldn't syntax highlighting?
2022-10-31 13:12:51 -07:00
pre.rust .attr {
Migrate highlight style to CSS variables
2022-10-04 16:56:56 +02:00
color: var(--code-highlight-attribute-color);
}
pre.rust .macro,
pre.rust .macro-nonterminal {
color: var(--code-highlight-macro-color);
}
rustdoc: color the question mark operator The idea was proposed by eddyb in: https://github.com/rust-lang/rust/issues/31436#issuecomment-247426582
2016-10-12 05:23:37 +02:00
pre.rust .question-mark {
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
font-weight: bold;
Migrate highlight style to CSS variables
2022-10-04 16:56:56 +02:00
color: var(--code-highlight-question-mark-color);
}
pre.rust .comment {
color: var(--code-highlight-comment-color);
}
pre.rust .doccomment {
color: var(--code-highlight-doc-comment-color);
rustdoc: color the question mark operator The idea was proposed by eddyb in: https://github.com/rust-lang/rust/issues/31436#issuecomment-247426582
2016-10-12 05:23:37 +02:00
}
rustdoc: Add anchors to section headers This commit adds a appear-on-over link to all section headers to generated documentation. Each header also receives an id now, even those generated through markdown. The purpose of this is to provide easy to link to sections. This modifies the default header markdown generation because the default id added looks like "toc_NN" which is difficult to reconcile among all sections (by default each section gets a "toc_0" id), and it's also not very descriptive of where you're going. This chooses to adopt the github-style anchors by taking the contents of the title and hyphen-separating them (after lower casing). Closes #12681
2014-03-04 11:24:20 -08:00
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.rustdoc.src .example-wrap pre.rust a {
Migrate Jump to def links background to CSS variable
2022-12-15 08:55:23 +01:00
background: var(--codeblock-link-background);
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
.example-wrap.compile_fail,
.example-wrap.should_panic {
Clean up themes a bit more
2022-09-08 23:40:13 +02:00
border-left: 2px solid var(--codeblock-error-color);
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
.ignore.example-wrap {
Clean up themes a bit more
2022-09-08 23:40:13 +02:00
border-left: 2px solid var(--codeblock-ignore-color);
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
.example-wrap.compile_fail:hover,
.example-wrap.should_panic:hover {
Clean up themes a bit more
2022-09-08 23:40:13 +02:00
border-left: 2px solid var(--codeblock-error-hover-color);
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
.example-wrap.ignore:hover {
Clean up themes a bit more
2022-09-08 23:40:13 +02:00
border-left: 2px solid var(--codeblock-ignore-hover-color);
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
.example-wrap.compile_fail .tooltip,
.example-wrap.should_panic .tooltip {
Clean up themes a bit more
2022-09-08 23:40:13 +02:00
color: var(--codeblock-error-color);
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
.example-wrap.ignore .tooltip {
Add warning block support in rustdoc
2023-01-07 14:48:55 +01:00
color: var(--codeblock-ignore-color);
Clean up themes a bit more
2022-09-08 23:40:13 +02:00
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
.example-wrap.compile_fail:hover .tooltip,
.example-wrap.should_panic:hover .tooltip {
Clean up themes a bit more
2022-09-08 23:40:13 +02:00
color: var(--codeblock-error-hover-color);
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
.example-wrap.ignore:hover .tooltip {
Clean up themes a bit more
2022-09-08 23:40:13 +02:00
color: var(--codeblock-ignore-hover-color);
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
.example-wrap .tooltip {
position: absolute;
display: block;
left: -25px;
top: 5px;
rustdoc: merge doctest tooltip with notable traits tooltip Fixes https://discord.com/channels/442252698964721669/443150878111694848/1066420140167680000 Fixes #91100
2023-01-26 13:32:33 -07:00
margin: 0;
line-height: 1;
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
}
.example-wrap.compile_fail .tooltip,
.example-wrap.should_panic .tooltip,
.example-wrap.ignore .tooltip {
font-weight: bold;
font-size: 1.25rem;
Add warning block support in rustdoc
2023-01-07 14:48:55 +01:00
}
/* This class only exists for users who want to draw attention to a particular element in their
documentation. */
.content .docblock .warning {
border-left: 2px solid var(--warning-border-color);
padding: 14px;
position: relative;
/* The "!important" part is required because the rule is otherwise overruled in this CSS
selector: ".docblock > :not(.more-examples-toggle):not(.example-wrap)" */
overflow-x: visible !important;
}
.content .docblock .warning::before {
color: var(--warning-border-color);
content: "ⓘ";
position: absolute;
left: -25px;
top: 5px;
font-weight: bold;
font-size: 1.25rem;
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
}
Fix display of warning block if it is first element of the top doc block
2023-12-24 19:23:42 +01:00
.top-doc > .docblock >.warning:first-child::before {
top: 20px;
}
Simplify DOM for codeblocks tooltips
2022-09-09 16:18:14 +02:00
Add copy code button
2024-05-29 23:40:58 +02:00
.example-wrap > a.test-arrow, .example-wrap .button-holder {
Make Run button visible on hover This slightly reduces the noisiness of doc pages, making them easier to read.
2021-12-17 22:38:18 -08:00
visibility: hidden;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
position: absolute;
Unify UI between code block buttons and top buttons
2024-06-03 21:27:29 +02:00
top: 4px;
right: 4px;
Fix run button positionning in case of scrolling
2020-01-26 17:24:40 +01:00
z-index: 1;
Add copy code button
2024-05-29 23:40:58 +02:00
}
a.test-arrow {
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
height: var(--copy-path-height);
padding: 6px 4px 0 11px;
Migrate test-arrow to CSS variables
2022-11-05 17:22:25 +01:00
}
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
a.test-arrow::before {
content: url('data:image/svg+xml,<svg viewBox="0 0 20 20" width="18" height="20" \
xmlns="http://www.w3.org/2000/svg"><path d="M0 0l18 10-18 10z"/></svg>');
rustdoc: Submit examples to play.rust-lang.org This grows a new option inside of rustdoc to add the ability to submit examples to an external website. If the `--markdown-playground-url` command line option or crate doc attribute `html_playground_url` is present, then examples will have a button on hover to submit the code to the playground specified. This commit enables submission of example code to play.rust-lang.org. The code submitted is that which is tested by rustdoc, not necessarily the exact code shown in the example. Closes #14654
2014-06-06 09:12:18 -07:00
}
Add copy code button
2024-05-29 23:40:58 +02:00
.example-wrap .button-holder {
display: flex;
}
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
Make the buttons remain when code example is clicked
2024-07-29 13:58:15 +02:00
/*
On iPad, the ":hover" state sticks around, making things work not greatly. Do work around
it, we move it into this media query. More information can be found at:
https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
However, using `@media (hover: hover)` makes this rule never to be applied in GUI tests, so
instead, we check that it's not a "finger" cursor.
*/
@media not (pointer: coarse) {
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
.example-wrap:hover > a.test-arrow, .example-wrap:hover > .button-holder {
Make the buttons remain when code example is clicked
2024-07-29 13:58:15 +02:00
visibility: visible;
}
}
.example-wrap .button-holder.keep-visible {
Make Run button visible on hover This slightly reduces the noisiness of doc pages, making them easier to read.
2021-12-17 22:38:18 -08:00
visibility: visible;
}
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
.example-wrap .button-holder > * {
Add copy code button
2024-05-29 23:40:58 +02:00
background: var(--main-background-color);
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
cursor: pointer;
border-radius: var(--button-border-radius);
Make "copy code" button the same size as the "copy path" button
2024-06-03 09:55:11 +02:00
height: var(--copy-path-height);
width: var(--copy-path-width);
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
border: 0;
color: var(--code-example-button-color);
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
}
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
.example-wrap .button-holder > *:hover {
color: var(--code-example-button-hover-color);
}
.example-wrap .button-holder > *:not(:first-child) {
Unify UI between code block buttons and top buttons
2024-06-03 21:27:29 +02:00
margin-left: var(--button-left-margin);
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
}
.example-wrap .button-holder .copy-button {
Add copy code button
2024-05-29 23:40:58 +02:00
padding: 2px 0 0 4px;
}
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
.example-wrap .button-holder .copy-button::before,
.example-wrap .test-arrow::before {
Add copy code button
2024-05-29 23:40:58 +02:00
filter: var(--copy-path-img-filter);
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
}
.example-wrap .button-holder .copy-button::before {
Make "copy code" button the same size as the "copy path" button
2024-06-03 09:55:11 +02:00
content: var(--clipboard-image);
Add copy code button
2024-05-29 23:40:58 +02:00
}
Unify run button display with "copy code" button and with mdbook buttons
2024-07-30 15:23:44 +02:00
.example-wrap .button-holder .copy-button:hover::before,
.example-wrap .test-arrow:hover::before {
Add copy code button
2024-05-29 23:40:58 +02:00
filter: var(--copy-path-img-hover-filter);
}
.example-wrap .button-holder .copy-button.clicked::before {
content: var(--checkmark-image);
Make "copy code" button the same size as the "copy path" button
2024-06-03 09:55:11 +02:00
padding-right: 5px;
Add copy code button
2024-05-29 23:40:58 +02:00
}
Fix style fallout from 204e2bd442 Links in docblock headers also became blue, which was not intended.
2015-02-20 13:54:11 +02:00
Reduce visual weight of attributes.
2021-04-17 18:08:50 -07:00
.code-attribute {
font-weight: 300;
Clean up themes CSS
2022-09-02 15:08:23 +02:00
color: var(--code-attribute-color);
Reduce visual weight of attributes.
2021-04-17 18:08:50 -07:00
}
Add spacing between trait functions
2017-07-09 00:40:29 +02:00
.item-spacer {
width: 100%;
height: 12px;
rustdoc: trait bound formatting rustdoc: fix item-spacer rustdoc: use proper comment style rustdoc: change formatting where clauses for traits rustdoc: remove semicolon from provided methods update provided methods formatting
2022-11-26 01:51:50 +01:00
display: block;
Add spacing between trait functions
2017-07-09 00:40:29 +02:00
}
use span instead of div for since version
2019-05-03 12:55:31 -04:00
.out-of-band > span.since {
Set font size proportional to user's font size According to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), > To maximize accessibility, it is generally best to use values that > are relative to the user's default font size. > Defining font sizes in px is not accessible, because the user cannot > change the font size in some browsers. Note that changing font size (in browser or OS settings) is distinct from the zoom functionality triggered with Ctrl/Cmd-+. Zoom functionality increases the size of everything on the page, effectively applying a multiplier to all pixel sizes. Font size changes apply to just text. For relative font sizes, we could use `em`, as we do in several places already. However that has a problem of "compounding" (see MDN article for details). The compounding problem is nicely solved by `rem`, which make font sizes relative to the root element, not the parent element. Since we were using a hodge-podge of pixel sizes, em, rem, and percentage sizes before, this change switching everything to rem, while keeping the same size relative to our old default of 16px. 16px is still the default on most browsers, for users that haven't set a larger or smaller font size.
2021-12-30 16:42:06 -05:00
font-size: 1.25rem;
Improve "since" tag placement
2016-05-10 21:01:10 +02:00
}
Improve display of enum variants Use h3 and h4 for the variant name and the "Fields" subheading. Remove the "of T" part of the "Fields" subheading. Remove border-bottom from "Fields" subheading. Move docblock below "Fields" listing.
2021-10-19 22:48:53 -07:00
.sub-variant h4 {
Set font size proportional to user's font size According to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), > To maximize accessibility, it is generally best to use values that > are relative to the user's default font size. > Defining font sizes in px is not accessible, because the user cannot > change the font size in some browsers. Note that changing font size (in browser or OS settings) is distinct from the zoom functionality triggered with Ctrl/Cmd-+. Zoom functionality increases the size of everything on the page, effectively applying a multiplier to all pixel sizes. Font size changes apply to just text. For relative font sizes, we could use `em`, as we do in several places already. However that has a problem of "compounding" (see MDN article for details). The compounding problem is nicely solved by `rem`, which make font sizes relative to the root element, not the parent element. Since we were using a hodge-podge of pixel sizes, em, rem, and percentage sizes before, this change switching everything to rem, while keeping the same size relative to our old default of 16px. 16px is still the default on most browsers, for users that haven't set a larger or smaller font size.
2021-12-30 16:42:06 -05:00
font-size: 1rem;
Improve display of enum variants Use h3 and h4 for the variant name and the "Fields" subheading. Remove the "of T" part of the "Fields" subheading. Remove border-bottom from "Fields" subheading. Move docblock below "Fields" listing.
2021-10-19 22:48:53 -07:00
font-weight: 400;
margin-top: 0;
margin-bottom: 0;
Fix sub-variant doc display
2018-10-19 01:34:46 +02:00
}
Improve display of enum variants Use h3 and h4 for the variant name and the "Fields" subheading. Remove the "of T" part of the "Fields" subheading. Remove border-bottom from "Fields" subheading. Move docblock below "Fields" listing.
2021-10-19 22:48:53 -07:00
.sub-variant {
margin-left: 24px;
margin-bottom: 40px;
Fix sub-variant doc display
2018-10-19 01:34:46 +02:00
}
Improve display of enum variants Use h3 and h4 for the variant name and the "Fields" subheading. Remove the "of T" part of the "Fields" subheading. Remove border-bottom from "Fields" subheading. Move docblock below "Fields" listing.
2021-10-19 22:48:53 -07:00
.sub-variant > .sub-variant-field {
margin-left: 24px;
rustdoc: fold fields for enum struct variants into a docblock
2016-11-11 16:41:00 -06:00
}
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.
2024-08-19 16:16:34 -07:00
@keyframes targetfadein {
from {
background-color: var(--main-background-color);
}
10% {
background-color: var(--target-border-color);
}
to {
background-color: var(--target-background-color);
}
}
Fix target highlighting in rustdoc. Also factor out outer_version and const_outer_version into render_rightside.
2021-06-16 22:48:23 -07:00
:target {
padding-right: 3px;
Migrate :target rules to use CSS variables
2022-11-08 21:12:17 +01:00
background-color: var(--target-background-color);
border-right: 3px solid var(--target-border-color);
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.
2024-08-19 16:16:34 -07:00
animation: 0.65s cubic-bezier(0, 0, 0.1, 1.0) 0.1s targetfadein;
Fix target highlighting in rustdoc. Also factor out outer_version and const_outer_version into render_rightside.
2021-06-16 22:48:23 -07:00
}
rustdoc: merge doctest tooltip with notable traits tooltip Fixes https://discord.com/channels/442252698964721669/443150878111694848/1066420140167680000 Fixes #91100
2023-01-26 13:32:33 -07:00
.code-header a.tooltip {
rustdoc: use consistent "popover" styling for notable traits
2022-11-08 18:00:22 -07:00
color: inherit;
margin-right: 15px;
position: relative;
Make spotlight show on hover This makes the spotlight show on hover instead of click. Clicks can be used to persist it, which is also what's used on mobile.
2020-07-06 17:18:04 -07:00
}
rustdoc: add hover indicator for notable trait tooltip
2023-05-23 17:19:35 -07:00
.code-header a.tooltip:hover {
color: var(--link-color);
}
rustdoc: use consistent "popover" styling for notable traits
2022-11-08 18:00:22 -07:00
/* placeholder thunk so that the mouse can easily travel from "(i)" to popover
the resulting "hover tunnel" is a stepped triangle, approximating
https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */
rustdoc: merge doctest tooltip with notable traits tooltip Fixes https://discord.com/channels/442252698964721669/443150878111694848/1066420140167680000 Fixes #91100
2023-01-26 13:32:33 -07:00
a.tooltip:hover::after {
Make spotlight show on hover This makes the spotlight show on hover instead of click. Clicks can be used to persist it, which is also what's used on mobile.
2020-07-06 17:18:04 -07:00
position: absolute;
rustdoc: use consistent "popover" styling for notable traits
2022-11-08 18:00:22 -07:00
top: calc(100% - 10px);
left: -15px;
right: -15px;
height: 20px;
content: "\00a0";
Make spotlight show on hover This makes the spotlight show on hover instead of click. Clicks can be used to persist it, which is also what's used on mobile.
2020-07-06 17:18:04 -07:00
}
rustdoc: add interaction delays for tooltip popovers Designing a good hover microinteraction is a matter of guessing user intent from what are, literally, vague gestures. In this case, guessing if hovering in our out of the tooltip base is intentional or not. To figure this out, a few different techniques are used: * When the mouse pointer enters a tooltip anchor point, its hitbox is grown on the bottom, where the popover is/will appear. This was already there before this commit: search "hover tunnel" in rustdoc.css for the implementation. * This commit adds a delay when the mouse pointer enters the base anchor, in case the mouse pointer was just passing through and the user didn't want to open it. * This commit also adds a delay when the mouse pointer exits the tooltip's base anchor or its popover, before hiding it. * A fade-out animation is layered onto the pointer exit delay to immediately inform the user that they successfully dismissed the popover, while still providing a way for them to cancel it if it was a mistake and they still wanted to interact with it. * No animation is used for revealing it, because we don't want people to try to interact with an element while it's in the middle of fading in: either they're allowed to interact with it while it's fading in, meaning it can't serve as mistake- proofing for opening the popover, or they can't, but they might try and be frustrated. See also: * https://www.nngroup.com/articles/timing-exposing-content/ * https://www.nngroup.com/articles/tooltip-guidelines/ * https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
2023-05-23 15:29:43 -07:00
/* This animation is layered onto the mistake-proofing delay for dismissing
a hovered tooltip, to ensure it feels responsive even with the delay.
*/
.fade-out {
opacity: 0;
transition: opacity 0.45s cubic-bezier(0, 0, 0.1, 1.0);
}
rustdoc: merge doctest tooltip with notable traits tooltip Fixes https://discord.com/channels/442252698964721669/443150878111694848/1066420140167680000 Fixes #91100
2023-01-26 13:32:33 -07:00
.popover.tooltip .content {
rustdoc: use consistent "popover" styling for notable traits
2022-11-08 18:00:22 -07:00
margin: 0.25em 0.5em;
Replace h3 for notable traits with div
2021-06-02 21:16:33 +02:00
}
rustdoc: merge doctest tooltip with notable traits tooltip Fixes https://discord.com/channels/442252698964721669/443150878111694848/1066420140167680000 Fixes #91100
2023-01-26 13:32:33 -07:00
.popover.tooltip .content pre, .popover.tooltip .content code {
rustdoc: use javascript to layout notable traits popups Fixes #102576
2022-11-07 15:53:30 -07:00
background: transparent;
Fix tidy issues
2020-07-15 17:20:46 +02:00
margin: 0;
padding: 0;
Set font size proportional to user's font size According to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), > To maximize accessibility, it is generally best to use values that > are relative to the user's default font size. > Defining font sizes in px is not accessible, because the user cannot > change the font size in some browsers. Note that changing font size (in browser or OS settings) is distinct from the zoom functionality triggered with Ctrl/Cmd-+. Zoom functionality increases the size of everything on the page, effectively applying a multiplier to all pixel sizes. Font size changes apply to just text. For relative font sizes, we could use `em`, as we do in several places already. However that has a problem of "compounding" (see MDN article for details). The compounding problem is nicely solved by `rem`, which make font sizes relative to the root element, not the parent element. Since we were using a hodge-podge of pixel sizes, em, rem, and percentage sizes before, this change switching everything to rem, while keeping the same size relative to our old default of 16px. 16px is still the default on most browsers, for users that haven't set a larger or smaller font size.
2021-12-30 16:42:06 -05:00
font-size: 1.25rem;
rustdoc: use javascript to layout notable traits popups Fixes #102576
2022-11-07 15:53:30 -07:00
white-space: pre-wrap;
Invert colors in important traits tooltip
2017-11-29 19:23:41 +01:00
}
rustdoc: merge doctest tooltip with notable traits tooltip Fixes https://discord.com/channels/442252698964721669/443150878111694848/1066420140167680000 Fixes #91100
2023-01-26 13:32:33 -07:00
.popover.tooltip .content > h3:first-child {
rustdoc: remove `docblock` class from notable trait popover This commit builds on b72de9be74dd5ac1d8b23d5ece03a7690274a14c, which removes the `docblock` class from the All Items page, and 9457380ac902db3febf92077c5b645db55998ad4, which removes the `docblock` class from the item decl. Fixes #92974
2023-01-13 15:42:29 -07:00
margin: 0 0 5px 0;
}
Add tabs for search for better information access Make tabs work
2017-10-04 00:06:07 +02:00
.search-failed {
text-align: center;
margin-top: 20px;
rustdoc: use focus for search navigation Rather than keeping track of highlighted element inside the JS, take advantage of `.focus()` and the :focus CSS pseudo-class. This required wrapping each row of results in one big <a> tag (because anchors can be focused, but table rows cannot). That in turn required moving from a table layout to a div layout with float. This makes it so Ctrl+Enter opens links in new tabs, and using the arrow keys to navigate off the bottom of the page scrolls the rest of the page into view. It also simplifies the keyboard event handling. It eliminates the need for click handlers on the search results, and for tracking mouse movements. This changes the UI treatment of mouse hovering. A hovered element now gets a light grey background, but does not change the focused element. It's possible to have two highlighted search results: one that is focused (via keyboard) and one that is hovered (via mouse). Pressing enter will activate the focused link; clicking will activate the hovered link. This matches up with how Firefox and Chrome handle suggestions in their URL bar, and avoids stray mouse movements changing the focus. Selecting tabs is now done with left/right arrows while any search result is focused. The visibility of results on each search tab is controlled with the "active" class, rather than by setting display: none directly. Note that the old code kept track of highlighted search element when tabbing back and forth. The new code doesn't.
2021-05-09 12:56:21 -07:00
display: none;
}
.search-failed.active {
display: block;
Add tabs for search for better information access Make tabs work
2017-10-04 00:06:07 +02:00
}
Improve no result found sentence in doc search
2018-11-01 02:20:49 +01:00
.search-failed > ul {
text-align: left;
max-width: 570px;
margin-left: auto;
margin-right: auto;
}
rustdoc: use a more evocative name for CSS/JS `#titles` This renames the ID, which is only used in search results, to `#search-tabs`. Also changes the `.count` to a span, so it doesn't need its display mode to be overridden.
2022-12-22 15:52:34 -07:00
#search-tabs {
rustdoc: clean up CSS `#titles` using flexbox This commit allows it to stop manually specifying pixel heights for the tabs on search result pages. There's less messing with manual breakpoints and less complex CSS selectors.
2022-09-14 09:45:05 -07:00
display: flex;
flex-direction: row;
gap: 1px;
margin-bottom: 4px;
Add tabs for search for better information access Make tabs work
2017-10-04 00:06:07 +02:00
}
rustdoc: use a more evocative name for CSS/JS `#titles` This renames the ID, which is only used in search results, to `#search-tabs`. Also changes the `.count` to a span, so it doesn't need its display mode to be overridden.
2022-12-22 15:52:34 -07:00
#search-tabs button {
Add tabs for search for better information access Make tabs work
2017-10-04 00:06:07 +02:00
text-align: center;
Set font size proportional to user's font size According to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), > To maximize accessibility, it is generally best to use values that > are relative to the user's default font size. > Defining font sizes in px is not accessible, because the user cannot > change the font size in some browsers. Note that changing font size (in browser or OS settings) is distinct from the zoom functionality triggered with Ctrl/Cmd-+. Zoom functionality increases the size of everything on the page, effectively applying a multiplier to all pixel sizes. Font size changes apply to just text. For relative font sizes, we could use `em`, as we do in several places already. However that has a problem of "compounding" (see MDN article for details). The compounding problem is nicely solved by `rem`, which make font sizes relative to the root element, not the parent element. Since we were using a hodge-podge of pixel sizes, em, rem, and percentage sizes before, this change switching everything to rem, while keeping the same size relative to our old default of 16px. 16px is still the default on most browsers, for users that haven't set a larger or smaller font size.
2021-12-30 16:42:06 -05:00
font-size: 1.125rem;
Make search results tab and help button focusable with keyboard
2020-12-10 11:38:12 +01:00
border: 0;
improve search tabs look
2018-10-16 19:07:41 +02:00
border-top: 2px solid;
rustdoc: clean up CSS `#titles` using flexbox This commit allows it to stop manually specifying pixel heights for the tabs on search result pages. There's less messing with manual breakpoints and less complex CSS selectors.
2022-09-14 09:45:05 -07:00
flex: 1;
rustdoc: clean up "normalize.css 8" input override CSS These rules were copied from normalize.css 3, and are mostly redundant. * `optgroup` isn't used in rustdoc at all * `textarea` is only used for the "copy" button, so it's not visible * The remaining buttons and inputs mostly have styles set anyway. * We should never be setting `color` without also setting the background to something. Otherwise, you get white-on-gray text. That seems to be [the reason] why `normalize.css` changed this. [the reason]: https://github.com/necolas/normalize.css/pull/502
2022-09-28 13:52:13 -07:00
line-height: 1.5;
color: inherit;
Add tabs for search for better information access Make tabs work
2017-10-04 00:06:07 +02:00
}
Migrate last part of CSS themes to CSS variables
2023-01-30 19:28:47 +01:00
#search-tabs button:not(.selected) {
background-color: var(--search-tab-button-not-selected-background);
border-top-color: var(--search-tab-button-not-selected-border-top-color);
}
#search-tabs button:hover, #search-tabs button.selected {
background-color: var(--search-tab-button-selected-background);
border-top-color: var(--search-tab-button-selected-border-top-color);
}
Add elements count in tab search title
2017-11-02 01:01:51 +01:00
rustdoc: use a more evocative name for CSS/JS `#titles` This renames the ID, which is only used in search results, to `#search-tabs`. Also changes the `.count` to a span, so it doesn't need its display mode to be overridden.
2022-12-22 15:52:34 -07:00
#search-tabs .count {
Set font size proportional to user's font size According to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size), > To maximize accessibility, it is generally best to use values that > are relative to the user's default font size. > Defining font sizes in px is not accessible, because the user cannot > change the font size in some browsers. Note that changing font size (in browser or OS settings) is distinct from the zoom functionality triggered with Ctrl/Cmd-+. Zoom functionality increases the size of everything on the page, effectively applying a multiplier to all pixel sizes. Font size changes apply to just text. For relative font sizes, we could use `em`, as we do in several places already. However that has a problem of "compounding" (see MDN article for details). The compounding problem is nicely solved by `rem`, which make font sizes relative to the root element, not the parent element. Since we were using a hodge-podge of pixel sizes, em, rem, and percentage sizes before, this change switching everything to rem, while keeping the same size relative to our old default of 16px. 16px is still the default on most browsers, for users that haven't set a larger or smaller font size.
2021-12-30 16:42:06 -05:00
font-size: 1rem;
rustdoc: add test cases, and fix, search tabs
2023-09-19 19:40:36 -07:00
font-variant-numeric: tabular-nums;
Migrate search tab title color to CSS variable
2022-12-22 11:38:39 +01:00
color: var(--search-tab-title-count-color);
Add elements count in tab search title
2017-11-02 01:01:51 +01:00
}
First step for important traits UI
2017-11-15 20:04:02 +01:00
Put backtick content from rustdoc search errors into a <code> elements
2023-02-28 22:37:52 +01:00
#search .error code {
border-radius: 3px;
background-color: var(--search-error-code-background-color);
}
rustdoc: restructure type search engine to pick-and-use IDs This change makes it so, instead of mixing string distance with type unification, function signature search works by mapping names to IDs at the start, reporting to the user any cases where it had to make corrections, and then matches with IDs when going through the items. This only changes function searches. Name searches are left alone, and corrections are only done when there's a single item in the search query.
2023-04-15 11:53:50 -07:00
.search-corrections {
font-weight: normal;
}
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
#src-sidebar {
Fix sidebar in source code page
2021-12-14 11:48:30 +01:00
width: 100%;
Improve file sidebar in source code view page on mobile
2019-04-29 23:24:09 +02:00
overflow: auto;
}
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
#src-sidebar div.files > a:hover, details.dir-entry summary:hover,
#src-sidebar div.files > a:focus, details.dir-entry summary:focus {
background-color: var(--src-sidebar-background-hover);
Migrate source code elements style to CSS variables
2022-11-24 23:36:26 +01:00
}
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
#src-sidebar div.files > a.selected {
background-color: var(--src-sidebar-background-selected);
Migrate source code elements style to CSS variables
2022-11-24 23:36:26 +01:00
}
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
.src-sidebar-title {
position: sticky;
top: 0;
display: flex;
Use folder icon instead of hamburger and sidebar
2023-12-18 18:22:35 -07:00
padding: 8px 8px 0 48px;
margin-bottom: 7px;
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
background: var(--sidebar-background-color);
Add border bottom for source sidebar title area
2023-12-18 16:00:57 -07:00
border-bottom: 1px solid var(--border-color);
rustdoc: make source sidebar toggle a real button This fixes tab focus, so that you can open and close the sidebar from keyboard.
2022-07-01 11:05:38 -07:00
}
rustdoc: simplify settings, help, and copy button CSS by not reusing Since there remains only one common CSS rule shared between them, there's no point to it: the block and selector costs more than the single `width` rule saves.
2022-12-28 16:04:57 -07:00
Move global click handlers to per-element ones. In rustdoc's main.js, we had an onclick handler for the whole document that would dispatch to handlers for various elements. This change attaches the handlers to the elements that trigger them, instead. This simplfies the code and avoids reimplementing the browser's bubbling functionality. As part of this change, change from a class to an id for help button. Move the handlers and associated code for highlighting source lines into source-script.js (and factor out a shared regex).
2021-05-09 11:21:38 -07:00
#settings-menu, #help-button {
Unify UI between code block buttons and top buttons
2024-06-03 21:27:29 +02:00
margin-left: var(--button-left-margin);
rustdoc: clean up help and settings button CSS The old version of this code specified a bunch of different numbers that had to line up just right to get the size it wanted. This version uses flexbox centering, specifies the font size, and lets the browser figure out the rest of the layout automatically.
2022-12-01 14:24:33 -07:00
display: flex;
Cleanup media queries
2019-04-29 23:43:39 +02:00
}
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
#sidebar-button {
display: none;
Stop using the trigram of heaven as a hamburger button It doesn't look quite right, because the lines are too far apart, and it's not going to be announced by screenreaders as a menu button, since that's not what the symbol means. This adds a real tooltip and uses a better drawing of the icon.
2023-12-18 13:30:47 -07:00
line-height: 0;
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
}
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
.hide-sidebar #sidebar-button,
.src #sidebar-button {
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
display: flex;
margin-right: 4px;
position: fixed;
left: 6px;
height: 34px;
width: 34px;
background-color: var(--main-background-color);
z-index: 1;
}
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
.src #sidebar-button {
Add back the column
2023-12-18 12:11:14 -07:00
left: 8px;
use css variable for z-index of the sidebar and calculate the z-indices of things that go over the sidebar
2023-12-31 22:25:46 +01:00
z-index: calc(var(--desktop-sidebar-z-index) + 1);
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
}
Fix corner cases when dealing with mobile mode
2023-12-19 18:22:38 -07:00
.hide-sidebar .src #sidebar-button {
position: static;
}
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
#settings-menu > a, #help-button > a, #sidebar-button > a {
rustdoc: clean up help and settings button CSS The old version of this code specified a bunch of different numbers that had to line up just right to get the size it wanted. This version uses flexbox centering, specifies the font size, and lets the browser figure out the rest of the layout automatically.
2022-12-01 14:24:33 -07:00
display: flex;
align-items: center;
justify-content: center;
Simplify rustdoc themes by relying more on CSS variables
2022-08-13 14:00:23 +02:00
background-color: var(--button-background-color);
rustdoc: remove redundant CSS on `#copy-path` The border and background were removed in 5d004c1e2020eaa9bc336f09b6b0475c0eef4d78, but not all the CSS was.
2022-10-17 11:53:42 -07:00
border: 1px solid var(--border-color);
Unify UI between code block buttons and top buttons
2024-06-03 21:27:29 +02:00
border-radius: var(--button-border-radius);
Migrate top buttons style to CSS variables
2022-11-19 11:07:13 +01:00
color: var(--settings-button-color);
rustdoc: clean up help and settings button CSS The old version of this code specified a bunch of different numbers that had to line up just right to get the size it wanted. This version uses flexbox centering, specifies the font size, and lets the browser figure out the rest of the layout automatically.
2022-12-01 14:24:33 -07:00
/* Rare exception to specifying font sizes in rem. Since this is acting
as an icon, it's okay to specify their sizes in pixels. */
font-size: 20px;
rustdoc: simplify settings, help, and copy button CSS by not reusing Since there remains only one common CSS rule shared between them, there's no point to it: the block and selector costs more than the single `width` rule saves.
2022-12-28 16:04:57 -07:00
width: 33px;
Migrate top buttons style to CSS variables
2022-11-19 11:07:13 +01:00
}
#settings-menu > a:hover, #settings-menu > a:focus,
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
#help-button > a:hover, #help-button > a:focus,
#sidebar-button > a:hover, #sidebar-button > a:focus {
Migrate top buttons style to CSS variables
2022-11-19 11:07:13 +01:00
border-color: var(--settings-button-border-focus);
Improve settings menu display
2022-05-10 16:09:41 +02:00
}
Add a button to copy the "use statement"
2021-03-31 22:13:47 +02:00
rustdoc: load icons from css instead of inline This cuts the HTML overhead for a page by about 1KiB, significantly reducing the overall size of the docs bundle.
2024-04-09 17:15:33 -07:00
#settings-menu > a {
line-height: 0;
font-size: 0;
}
#settings-menu > a:before {
Inline `wheel.svg` into CSS
2024-04-10 20:29:15 +02:00
/* Wheel <https://www.svgrepo.com/svg/384069/settings-cog-gear> */
content: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 12 12" \
enable-background="new 0 0 12 12" xmlns="http://www.w3.org/2000/svg">\
<path d="M10.25,6c0-0.1243286-0.0261841-0.241333-0.0366211-0.362915l1.6077881-1.5545654l\
-1.25-2.1650391 c0,0-1.2674561,0.3625488-2.1323853,0.6099854c-0.2034912-0.1431885-0.421875\
-0.2639771-0.6494751-0.3701782L7.25,0h-2.5 c0,0-0.3214111,1.2857666-0.5393066,2.1572876\
C3.9830933,2.2634888,3.7647095,2.3842773,3.5612183,2.5274658L1.428833,1.9174805 \
l-1.25,2.1650391c0,0,0.9641113,0.9321899,1.6077881,1.5545654C1.7761841,5.758667,\
1.75,5.8756714,1.75,6 s0.0261841,0.241333,0.0366211,0.362915L0.178833,7.9174805l1.25,\
2.1650391l2.1323853-0.6099854 c0.2034912,0.1432495,0.421875,0.2639771,0.6494751,0.3701782\
L4.75,12h2.5l0.5393066-2.1572876 c0.2276001-0.1062012,0.4459839-0.2269287,0.6494751\
-0.3701782l2.1323853,0.6099854l1.25-2.1650391L10.2133789,6.362915 C10.2238159,6.241333,\
10.25,6.1243286,10.25,6z M6,7.5C5.1715698,7.5,4.5,6.8284302,4.5,6S5.1715698,4.5,6,4.5S7.5\
,5.1715698,7.5,6 S6.8284302,7.5,6,7.5z" fill="black"/></svg>');
rustdoc: load icons from css instead of inline This cuts the HTML overhead for a page by about 1KiB, significantly reducing the overall size of the docs bundle.
2024-04-09 17:15:33 -07:00
width: 22px;
height: 22px;
Fix bad color for setting cog in ayu theme
2024-05-05 19:27:59 +02:00
filter: var(--settings-menu-filter);
rustdoc: load icons from css instead of inline This cuts the HTML overhead for a page by about 1KiB, significantly reducing the overall size of the docs bundle.
2024-04-09 17:15:33 -07:00
}
rustdoc: bundle sidebar button icon into CSS This removes an HTTP request from the loading pipeline, and allows it to be changed with a media query.
2023-10-07 09:41:38 -07:00
#sidebar-button > a:before {
Add some missing comments to describe what the inlined SVG is
2024-04-10 20:36:02 +02:00
/* sidebar resizer image */
rustdoc: bundle sidebar button icon into CSS This removes an HTTP request from the loading pipeline, and allows it to be changed with a media query.
2023-10-07 09:41:38 -07:00
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" \
fill="none" stroke="black">\
<rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5"/>\
<circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\
<path d="m7.6121 3v16 M5.375 7.625h-2 m2 3h-2 m2 3h-2" stroke-width="1.25"/></svg>');
width: 22px;
height: 22px;
}
Clean up themes CSS
2022-09-02 15:08:23 +02:00
#copy-path {
color: var(--copy-path-button-color);
rustdoc: remove redundant CSS on `#copy-path` The border and background were removed in 5d004c1e2020eaa9bc336f09b6b0475c0eef4d78, but not all the CSS was.
2022-10-17 11:53:42 -07:00
background: var(--main-background-color);
Make "copy code" button the same size as the "copy path" button
2024-06-03 09:55:11 +02:00
height: var(--copy-path-height);
width: var(--copy-path-width);
rustdoc: remove redundant CSS on `#copy-path` The border and background were removed in 5d004c1e2020eaa9bc336f09b6b0475c0eef4d78, but not all the CSS was.
2022-10-17 11:53:42 -07:00
margin-left: 10px;
padding: 0;
padding-left: 2px;
border: 0;
rustdoc: load icons from css instead of inline This cuts the HTML overhead for a page by about 1KiB, significantly reducing the overall size of the docs bundle.
2024-04-09 17:15:33 -07:00
font-size: 0;
Clean up themes CSS
2022-09-02 15:08:23 +02:00
}
Fix copy-path button
2024-04-16 23:55:32 +02:00
#copy-path::before {
Clean up themes CSS
2022-09-02 15:08:23 +02:00
filter: var(--copy-path-img-filter);
Add copy code button
2024-05-29 23:40:58 +02:00
content: var(--clipboard-image);
Clean up themes CSS
2022-09-02 15:08:23 +02:00
}
Fix copy-path button
2024-04-16 23:55:32 +02:00
#copy-path:hover::before {
Clean up themes CSS
2022-09-02 15:08:23 +02:00
filter: var(--copy-path-img-hover-filter);
}
Fix copy-path button
2024-04-16 23:55:32 +02:00
#copy-path.clicked::before {
Add copy code button
2024-05-29 23:40:58 +02:00
content: var(--checkmark-image);
Fix copy-path button
2024-04-16 23:55:32 +02:00
}
Clean up themes CSS
2022-09-02 15:08:23 +02:00
Add rotation animation on settings button when loading
2022-05-04 15:39:18 +02:00
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Remove theme picker button
2022-05-11 23:11:18 +02:00
#settings-menu.rotate > a img {
Add rotation animation on settings button when loading
2022-05-04 15:39:18 +02:00
animation: rotating 2s linear infinite;
}
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
kbd {
display: inline-block;
padding: 3px 5px;
font: 15px monospace;
line-height: 10px;
vertical-align: middle;
Simplify rustdoc themes by relying more on CSS variables
2022-08-13 14:00:23 +02:00
border: solid 1px var(--border-color);
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
border-radius: 3px;
Fix --kbd-color variable name in rustdoc.css
2023-01-05 11:03:35 +01:00
color: var(--kbd-color);
Migrate kdb colors to CSS variables
2022-11-20 14:32:27 +01:00
background-color: var(--kbd-background);
box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color);
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
}
rustdoc: clean up CSS for All Items and All Crates lists This reduces the amount of CSS, and makes these two pages more consistent (which, necessarily, means changing them a bit).
2022-09-16 13:40:21 -07:00
ul.all-items > li {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
list-style: none;
}
rustdoc: add spacing to the source view sidebar https://user-images.githubusercontent.com/1593513/176974336-20cecdc3-1885-402a-a6d5-81a8dd03a45d.png
2022-07-01 15:29:47 -07:00
details.dir-entry {
padding-left: 4px;
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
}
rustdoc: add spacing to the source view sidebar https://user-images.githubusercontent.com/1593513/176974336-20cecdc3-1885-402a-a6d5-81a8dd03a45d.png
2022-07-01 15:29:47 -07:00
rustdoc: use <details> tag for the source code sidebar This fixes the extremely poor accessibility of the old system, making it possible to navigate the sidebar by keyboard, and also implicitly gives the sidebar items the correct ARIA roles.
2022-07-01 10:33:06 -07:00
details.dir-entry > summary {
rustdoc: use the regular arrow indicator for dir-entry CSS This mostly reverts 468acca108e65101b802821bded17149dc1d86c9, while still fixing the problem it fixed by using an internal list-style-position. It results in a slight change in the hover indicator, but nothing misleading.
2022-12-30 11:58:58 -07:00
margin: 0 0 0 -4px;
padding: 0 0 0 4px;
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
cursor: pointer;
}
rustdoc: use <details> tag for the source code sidebar This fixes the extremely poor accessibility of the old system, making it possible to navigate the sidebar by keyboard, and also implicitly gives the sidebar items the correct ARIA roles.
2022-07-01 10:33:06 -07:00
details.dir-entry div.folders, details.dir-entry div.files {
rustdoc: add spacing to the source view sidebar https://user-images.githubusercontent.com/1593513/176974336-20cecdc3-1885-402a-a6d5-81a8dd03a45d.png
2022-07-01 15:29:47 -07:00
padding-left: 23px;
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
}
rustdoc: use <details> tag for the source code sidebar This fixes the extremely poor accessibility of the old system, making it possible to navigate the sidebar by keyboard, and also implicitly gives the sidebar items the correct ARIA roles.
2022-07-01 10:33:06 -07:00
details.dir-entry a {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
display: block;
}
rustdoc: use CSS containment to speed up render https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient. Also remove an unnecessary margin-top on .code-header.
2022-09-27 09:21:24 -07:00
/* We use CSS containment on the details elements because most sizeable elements
of the page are contained in one of these. This also makes re-rendering
faster on document changes (like closing and opening toggles).
Unfortunately we can't yet specify contain: content or contain: strict
because the [-]/[+] toggles extend past the boundaries of the <details>
https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle {
rustdoc: use CSS containment to speed up render https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient. Also remove an unnecessary margin-top on .code-header.
2022-09-27 09:21:24 -07:00
contain: layout;
rustdoc: merge identical CSS blocks
2022-10-21 10:31:33 -07:00
position: relative;
rustdoc: use CSS containment to speed up render https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient. Also remove an unnecessary margin-top on .code-header.
2022-09-27 09:21:24 -07:00
}
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
/* The hideme class is used on summary tags that contain a span with
placeholder text shown only when the toggle is closed. For instance,
"Expand description" or "Show methods". */
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary.hideme {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
cursor: pointer;
rustdoc: simplify CSS selectors on top-doc and non-exhaustive toggles This code uses a special `hideme` class anyway, so just style that.
2022-12-05 11:15:09 -07:00
font-size: 1rem;
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
list-style: none;
rustdoc: stop hiding focus outlines on non-rustdoc-toggle details tags We really shouldn't be overriding this kind of stuff unless the browser default is really broken (like outlining the thing that isn't clickable). This directly reverts b8f4e74cbc938d3448507d422c98061c2b71c922.
2022-10-27 09:48:06 -07:00
/* focus outline is shown on `::before` instead of this */
outline: none;
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary::-webkit-details-marker,
details.toggle > summary::marker {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
display: none;
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary.hideme > span {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
margin-left: 9px;
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary::before {
Inline CSS background images directly into the CSS
2023-01-31 21:23:23 +01:00
/* toggle plus */
background: url('data:image/svg+xml,<svg width="17" height="17" \
shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \
d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>') no-repeat top left;
Use empty string instead of single space
2021-07-17 11:28:26 -07:00
content: "";
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
cursor: pointer;
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
width: 16px;
height: 16px;
Rustdoc accessibility: use an icon for the [-]/[+] controls This way, we can show the plus and minus buttons on screens, while voice control will read off actual words "Collapse" and "Expand" instead of reading "open brace minus close brace" and "open brace plus close brace". Part of #87059
2021-07-16 17:24:35 -07:00
display: inline-block;
vertical-align: middle;
opacity: .5;
Migrate summary toggle filter to CSS variable
2022-12-01 15:55:09 +01:00
filter: var(--toggle-filter);
Pull the "Expand" / "Collapse" text to the end of the line, instead of start
2021-07-17 10:55:33 -07:00
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary.hideme > span,
Clean up themes CSS
2022-09-02 15:08:23 +02:00
.more-examples-toggle summary, .more-examples-toggle .hide-more {
color: var(--toggles-color);
}
Pull the "Expand" / "Collapse" text to the end of the line, instead of start
2021-07-17 10:55:33 -07:00
/* Screen readers see the text version at the end the line.
Visual readers see the icon at the start of the line, but small and transparent. */
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary::after {
Pull the "Expand" / "Collapse" text to the end of the line, instead of start
2021-07-17 10:55:33 -07:00
content: "Expand";
Rustdoc accessibility: use an icon for the [-]/[+] controls This way, we can show the plus and minus buttons on screens, while voice control will read off actual words "Collapse" and "Expand" instead of reading "open brace minus close brace" and "open brace plus close brace". Part of #87059
2021-07-16 17:24:35 -07:00
overflow: hidden;
Pull the "Expand" / "Collapse" text to the end of the line, instead of start
2021-07-17 10:55:33 -07:00
width: 0;
height: 0;
position: absolute;
Rustdoc accessibility: use an icon for the [-]/[+] controls This way, we can show the plus and minus buttons on screens, while voice control will read off actual words "Collapse" and "Expand" instead of reading "open brace minus close brace" and "open brace plus close brace". Part of #87059
2021-07-16 17:24:35 -07:00
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary.hideme::after {
Rustdoc accessibility: use an icon for the [-]/[+] controls This way, we can show the plus and minus buttons on screens, while voice control will read off actual words "Collapse" and "Expand" instead of reading "open brace minus close brace" and "open brace plus close brace". Part of #87059
2021-07-16 17:24:35 -07:00
/* "hideme" toggles already have a description when they're contracted */
Pull the "Expand" / "Collapse" text to the end of the line, instead of start
2021-07-17 10:55:33 -07:00
content: "";
Rustdoc accessibility: use an icon for the [-]/[+] controls This way, we can show the plus and minus buttons on screens, while voice control will read off actual words "Collapse" and "Expand" instead of reading "open brace minus close brace" and "open brace plus close brace". Part of #87059
2021-07-16 17:24:35 -07:00
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary:focus::before,
details.toggle > summary:hover::before {
Rustdoc accessibility: use an icon for the [-]/[+] controls This way, we can show the plus and minus buttons on screens, while voice control will read off actual words "Collapse" and "Expand" instead of reading "open brace minus close brace" and "open brace plus close brace". Part of #87059
2021-07-16 17:24:35 -07:00
opacity: 1;
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary:focus-visible::before {
Update src/librustdoc/html/static/css/rustdoc.css Co-authored-by: Jacob Hoffman-Andrews <github@hoffman-andrews.com>
2022-10-26 02:41:34 -07:00
/* The SVG is black, and gets turned white using a filter in the dark themes.
rustdoc: add visible focus outline to rustdoc-toggle The change in opacity is inconsistent with most of rustdoc, which uses default browser styles for the focus outline. Unfortunately, just using the default focus outline here won't work, because it gets applied to the summary itself instead of the pseudo-element "real button."
2022-10-25 16:52:50 -07:00
Do the same with the outline.
Update src/librustdoc/html/static/css/rustdoc.css Co-authored-by: Jacob Hoffman-Andrews <github@hoffman-andrews.com>
2022-10-26 02:41:34 -07:00
The dotted 1px style is copied from Firefox's focus ring style.
rustdoc: add visible focus outline to rustdoc-toggle The change in opacity is inconsistent with most of rustdoc, which uses default browser styles for the focus outline. Unfortunately, just using the default focus outline here won't work, because it gets applied to the summary itself instead of the pseudo-element "real button."
2022-10-25 16:52:50 -07:00
*/
outline: 1px dotted #000;
outline-offset: 1px;
}
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
details.non-exhaustive {
margin-bottom: 8px;
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary.hideme::before {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
position: relative;
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle > summary:not(.hideme)::before {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
position: absolute;
Outdent method headings so they stand out The makes the heading / documentation distinction clearer.
2021-10-21 18:46:47 -07:00
left: -24px;
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
top: 4px;
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
.impl-items > details.toggle > summary:not(.hideme)::before {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
position: absolute;
Outdent method headings so they stand out The makes the heading / documentation distinction clearer.
2021-10-21 18:46:47 -07:00
left: -24px;
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
}
/* When a "hideme" summary is open and the "Expand description" or "Show
methods" text is hidden, we want the [-] toggle that remains to not
affect the layout of the items to its right. To do that, we use
absolute positioning. Note that we also set position: relative
on the parent <details> to make this work properly. */
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle[open] > summary.hideme {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
position: absolute;
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle[open] > summary.hideme > span {
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
display: none;
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle[open] > summary::before {
Inline CSS background images directly into the CSS
2023-01-31 21:23:23 +01:00
/* toggle minus */
background: url('data:image/svg+xml,<svg width="17" height="17" \
shape-rendering="crispEdges" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg"><path \
d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>') no-repeat top left;
Pull the "Expand" / "Collapse" text to the end of the line, instead of start
2021-07-17 10:55:33 -07:00
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle[open] > summary::after {
Rustdoc accessibility: use an icon for the [-]/[+] controls This way, we can show the plus and minus buttons on screens, while voice control will read off actual words "Collapse" and "Expand" instead of reading "open brace minus close brace" and "open brace plus close brace". Part of #87059
2021-07-16 17:24:35 -07:00
content: "Collapse";
Move @media rules at the end so they override the other rules
2021-05-14 19:43:08 +02:00
}
Fix display of `<details>`/`<summary>` in doc blocks
2022-05-21 15:05:19 +02:00
/* This is needed in docblocks to have the "▶" element to be on the same line. */
.docblock summary > * {
display: inline-block;
Improve display of `<details>` in doc blocks
2022-05-21 13:57:52 +02:00
}
rustdoc: remove CSS `@media (min-width: 701px)` The two rules within it can and should be done without the separate media query: * There ain't no rule saying a viewport can't be `700.5px` wide, since hardware pixels can be finer than CSS pixels. * The rule for the first example-wrap child should probably apply on mobile. * The rule for the source sidebar is overriden by the mobile rule setting `max-width: 100vw`, so it can be merged with the rest of the styles.
2022-10-17 13:54:42 -07:00
/* In case there is no documentation before a code block, we need to add some margin at the top
to prevent an overlay between the "collapse toggle" and the information tooltip.
However, it's not needed with smaller screen width because the doc/code block is always put
"one line" below. */
.docblock > .example-wrap:first-child .tooltip {
margin-top: 16px;
Fix tooltip position if the documentation starts with a code block
2020-07-22 16:28:47 +02:00
}
Use folder icon instead of hamburger and sidebar
2023-12-18 18:22:35 -07:00
/* sidebar button opens modal
use hamburger button */
.src #sidebar-button > a:before, .sidebar-menu-toggle:before {
Add some missing comments to describe what the inlined SVG is
2024-04-10 20:36:02 +02:00
/* hamburger button image */
Use folder icon instead of hamburger and sidebar
2023-12-18 18:22:35 -07:00
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="0 0 22 22" fill="none" stroke="black">\
<path d="M3,5h16M3,11h16M3,17h16" stroke-width="2.75"/></svg>');
opacity: 0.75;
}
.sidebar-menu-toggle:hover:before,
.sidebar-menu-toggle:active:before,
.sidebar-menu-toggle:focus:before {
opacity: 1;
}
/* src sidebar button opens a folder view */
.src #sidebar-button > a:before {
Add some missing comments to describe what the inlined SVG is
2024-04-10 20:36:02 +02:00
/* folder image */
Use folder icon instead of hamburger and sidebar
2023-12-18 18:22:35 -07:00
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="0 0 22 22" fill="none" stroke="black">\
<path d="M16,9v-4h-6v-1l-2,-2h-4l-2,2v16h13L21,9h-15L2,19" stroke-width="1.25"/>\
<path d="M15,7h-11v3" stroke-width="0.75"/>\
<path d="M3.75,10v1.25" stroke-width="0.375"/></svg>');
opacity: 0.75;
}
rustdoc: remove CSS `@media (min-width: 701px)` The two rules within it can and should be done without the separate media query: * There ain't no rule saying a viewport can't be `700.5px` wide, since hardware pixels can be finer than CSS pixels. * The rule for the first example-wrap child should probably apply on mobile. * The rule for the source sidebar is overriden by the mobile rule setting `max-width: 100vw`, so it can be merged with the rest of the styles.
2022-10-17 13:54:42 -07:00
/* Media Queries */
rustdoc: add test cases, and fix, search tabs
2023-09-19 19:40:36 -07:00
/* Make sure all the buttons line wrap at the same time */
@media (max-width: 850px) {
#search-tabs .count {
display: block;
}
}
Improve click behavior of the source code mobile full-screen "sidebar" On desktop, if you open the source code sidebar, it stays open even when you move from page to page. It used to do the same thing on mobile, but I think that's stupid. Since the file list fills the entire screen on mobile, and you can't really do anything with the currently selected file other than dismiss the "sidebar" to look at it, it's safe to assume that anybody who clicks a file in that list probably wants the list to go away so they can see it.
2022-07-01 12:13:46 -07:00
/*
WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
If you update this line, then you also need to update the line with the same warning
rustdoc: enforce BODY_MIN constraint on sidebar resize
2023-09-27 08:59:32 -07:00
in src-script.js and main.js
Improve click behavior of the source code mobile full-screen "sidebar" On desktop, if you open the source code sidebar, it stays open even when you move from page to page. It used to do the same thing on mobile, but I think that's stupid. Since the file list fills the entire screen on mobile, and you can't really do anything with the currently selected file other than dismiss the "sidebar" to look at it, it's safe to assume that anybody who clicks a file in that list probably wants the list to go away so they can see it.
2022-07-01 12:13:46 -07:00
*/
make rustdoc more responsive * move some sidebar contents to a title bar when small * inline description toggle when small * make out-of-band and in-band content share space, rather than float and clash * compress wording of out-of-band content to avoid line-wrap as much as possible
2014-08-02 20:58:41 -04:00
@media (max-width: 700px) {
Fix scroll offset when jumping to internal id
2022-01-18 22:05:17 -08:00
/* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size.
*/
*[id] {
scroll-margin-top: 45px;
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.rustdoc {
/* Sidebar should overlay main content, rather than pushing main content to the right.
Turn off `display: flex` on the body element. */
display: block;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
}
rustdoc: use flexbox to layout sidebar and main content
2021-09-30 04:23:02 +02:00
main {
padding-left: 15px;
padding-top: 0px;
}
Rustdoc mobile: put out-of-band on its own line Before this, the item name and the stability, source link, and "collapse all docs" would compete for room on a single line, resulting in awkward wrapping behavior on mobile. This gives a separate line for that out-of-band information. It also removes the "copy path" icon on mobile to make a little more room. Also, switch to flex-wrap: wrap, so anytime there's not enough room for `source`, it gets bumped to the next line.
2022-01-13 09:54:44 -08:00
.main-heading {
rustdoc: use flexbox to layout sidebar and main content
2021-09-30 04:23:02 +02:00
flex-direction: column;
}
rustdoc: clean up `.out-of-band`/`.in-band` CSS * Remove the `float: right` fallback from the main header, which hasn't been needed since IE11 support was dropped. * Remove `in-band` from low-level headers, which hasn't been needed since `.rightside` switched to `float: right` in 593d6d1cb15c55c88319470dabb40126c7b7f1e2 * Remove unreachable `.in-band > code, .in-band > .code-header` CSS, since the `in-band` class was attached to the `code-header` itself, not nested directly below it. * Use `rem` instead of `em` for code header margins. * This results in a slight change in spacing around impls and item-info, but since it makes it more consistent with the way methods are presented, it's probably fine.
2022-09-25 13:09:22 -07:00
.out-of-band {
Rustdoc mobile: put out-of-band on its own line Before this, the item name and the stability, source link, and "collapse all docs" would compete for room on a single line, resulting in awkward wrapping behavior on mobile. This gives a separate line for that out-of-band information. It also removes the "copy path" icon on mobile to make a little more room. Also, switch to flex-wrap: wrap, so anytime there's not enough room for `source`, it gets bumped to the next line.
2022-01-13 09:54:44 -08:00
text-align: left;
margin-left: initial;
padding: initial;
}
rustdoc: clean up `.out-of-band`/`.in-band` CSS * Remove the `float: right` fallback from the main header, which hasn't been needed since IE11 support was dropped. * Remove `in-band` from low-level headers, which hasn't been needed since `.rightside` switched to `float: right` in 593d6d1cb15c55c88319470dabb40126c7b7f1e2 * Remove unreachable `.in-band > code, .in-band > .code-header` CSS, since the `in-band` class was attached to the `code-header` itself, not nested directly below it. * Use `rem` instead of `em` for code header margins. * This results in a slight change in spacing around impls and item-info, but since it makes it more consistent with the way methods are presented, it's probably fine.
2022-09-25 13:09:22 -07:00
.out-of-band .since::before {
Rustdoc mobile: put out-of-band on its own line Before this, the item name and the stability, source link, and "collapse all docs" would compete for room on a single line, resulting in awkward wrapping behavior on mobile. This gives a separate line for that out-of-band information. It also removes the "copy path" icon on mobile to make a little more room. Also, switch to flex-wrap: wrap, so anytime there's not enough room for `source`, it gets bumped to the next line.
2022-01-13 09:54:44 -08:00
content: "Since ";
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
/* Hide the logo and item name from the sidebar. Those are displayed
in the mobile-topbar instead. */
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.
2023-01-04 13:04:30 -07:00
.sidebar .logo-container,
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
.sidebar .location,
.sidebar-resizer {
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
display: none;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.sidebar {
rustdoc: merge source sidebar into main sidebar
2021-10-10 19:08:08 +02:00
position: fixed;
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
top: 45px;
/* Hide the sidebar offscreen while not in use. Doing this instead of display: none means
the sidebar stays visible for screen readers, which is useful for navigation. */
left: -1000px;
rustdoc: merge source sidebar into main sidebar
2021-10-10 19:08:08 +02:00
z-index: 11;
rustdoc: small fixes to mobile navigation - Make sure the mobile-topbar doesn't overflow its height if the user sets a bigger font. - Make sure the sidebar can be scrolled all the way to the bottom by shortening it to accommodate the mobile-topbar. - Make the item name in the mobile-topbar clickable to go to the top of the page. - Remove excess padding sidebar in mobile mode.
2022-01-21 17:44:54 -08:00
/* Reduce height slightly to account for mobile topbar. */
height: calc(100vh - 45px);
rustdoc: clean up sidebar width CSS This commit takes advantage of the ability to set [flex-basis] to a specific length instead of setting it to `auto` and changing min-/max-width, and setting flex-grow/-shrink both to 0. [flex-basis]: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
2022-11-16 22:52:30 -07:00
width: 200px;
rustdoc: merge source sidebar into main sidebar
2021-10-10 19:08:08 +02:00
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
/* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
so don't bump down the main content or the sidebar. */
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.src main,
.rustdoc.src .sidebar {
rustdoc: don't use overflow for main, instead make the sidebar sticky
2021-10-24 20:03:13 +02:00
top: 0;
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
padding: 0;
Fix height for the source sidebar in mobile mode
2022-06-29 15:15:40 +02:00
height: 100vh;
border: 0;
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
}
Add back the column
2023-12-18 12:11:14 -07:00
.src .search-form {
margin-left: 40px;
}
Fix corner cases when dealing with mobile mode
2023-12-19 18:22:38 -07:00
.hide-sidebar .search-form {
margin-left: 32px;
}
.hide-sidebar .src .search-form {
margin-left: 0;
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.sidebar.shown,
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.src-sidebar-expanded .src .sidebar,
.rustdoc:not(.src) .sidebar:focus-within {
rustdoc: don't use overflow for main, instead make the sidebar sticky
2021-10-24 20:03:13 +02:00
left: 0;
}
rustdoc: remove class name `location` from sidebar sibling nav This change tweaks the CSS to apply most of its styles to `.sidebar h2`, cleaning up a few redundant rules from `.mobile-topbar .location` and restoring useful navigation aids in mobile mode.
2022-10-18 11:14:01 -07:00
.mobile-topbar h2 {
padding-bottom: 0;
Fix hover effects in sidebar The dark and ayu themes have a menu-like highlight on sidebar items. The light theme used to, but it was accidentally lost in the sidebar unification. The change brings back the hover effect in the light theme. It also makes the hover effect apply consistently to all links in the sidebar, including headings. It also simplifies the "In _path_" heading so it's one big link. The breadcrumbs are still readily available at the top of the page.
2022-01-31 05:53:43 -08:00
margin: auto 0.5em auto auto;
rustdoc: small fixes to mobile navigation - Make sure the mobile-topbar doesn't overflow its height if the user sets a bigger font. - Make sure the sidebar can be scrolled all the way to the bottom by shortening it to accommodate the mobile-topbar. - Make the item name in the mobile-topbar clickable to go to the top of the page. - Remove excess padding sidebar in mobile mode.
2022-01-21 17:44:54 -08:00
overflow: hidden;
/* Rare exception to specifying font sizes in rem. Since the topbar
height is specified in pixels, this also has to be specified in
pixels to avoid overflowing the topbar when the user sets a bigger
font size. */
rustdoc: tweak line and ¶ spacing for a11y The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
2022-02-05 05:05:05 -08:00
font-size: 24px;
rustdoc: remove class name `location` from sidebar sibling nav This change tweaks the CSS to apply most of its styles to `.sidebar h2`, cleaning up a few redundant rules from `.mobile-topbar .location` and restoring useful navigation aids in mobile mode.
2022-10-18 11:14:01 -07:00
white-space: nowrap;
rustdoc: Correctly handle long crate names on mobile
2024-01-31 14:34:29 +01:00
text-overflow: ellipsis;
rustdoc: remove class name `location` from sidebar sibling nav This change tweaks the CSS to apply most of its styles to `.sidebar h2`, cleaning up a few redundant rules from `.mobile-topbar .location` and restoring useful navigation aids in mobile mode.
2022-10-18 11:14:01 -07:00
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.mobile-topbar .logo-container > img {
Fix image position and display
2019-04-29 11:45:06 +02:00
max-width: 35px;
max-height: 35px;
rustdoc: use CSS margin/padding shorthand when all are being set
2022-10-29 09:04:31 -07:00
margin: 5px 0 5px 20px;
Fix image position and display
2019-04-29 11:45:06 +02:00
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.mobile-topbar {
display: flex;
flex-direction: row;
position: sticky;
Fix mobile doc style and improve search bar
2017-12-11 22:30:04 +01:00
z-index: 10;
Greatly improve sidebar when width < 700px
2017-12-06 00:42:33 +01:00
font-size: 2rem;
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
height: 45px;
width: 100%;
Fix mobile doc style and improve search bar
2017-12-11 22:30:04 +01:00
left: 0;
Fix remaining bugs
2021-11-29 15:55:05 +01:00
top: 0;
Improve attributes display and allow expansion
2016-11-06 21:03:08 +01:00
}
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
.hide-sidebar .mobile-topbar {
display: none;
}
Simplify and unify rustdoc sidebar styles This switches to just use size, weight, and spacing to distinguish headings in the sidebar. We no longer use boxes, horizontal bars, or centering to distinguish headings. This makes it much easier to understand the hierarchy of headings, and reduces visual noise. I also refactored how the mobile topbar works. Previously, we tried to shift around elements from the sidebar to make the topbar. Now, the topbar gets its own elements, which can be styled on their own. This makes styling and reasoning about those elements simpler. Because the heading font sizes are bigger, increase the sidebar width slightly. As a very minor change, removed version from the "All types" page. It's now only on the crate page.
2022-01-06 19:48:24 -05:00
.sidebar-menu-toggle {
width: 45px;
border: none;
Stop using the trigram of heaven as a hamburger button It doesn't look quite right, because the lines are too far apart, and it's not going to be announced by screenreaders as a menu button, since that's not what the symbol means. This adds a real tooltip and uses a better drawing of the icon.
2023-12-18 13:30:47 -07:00
line-height: 0;
Fix mobile doc style and improve search bar
2017-12-11 22:30:04 +01:00
}
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
.hide-sidebar .sidebar-menu-toggle {
display: none;
}
Continue themes CSS migration over CSS variables
2022-07-11 14:51:39 +02:00
.sidebar-elems {
Merge duplicated CSS rules
2022-08-27 00:37:04 +02:00
margin-top: 1em;
Continue themes CSS migration over CSS variables
2022-07-11 14:51:39 +02:00
}
rustdoc: Reposition the § per GuillaumeGomez request
2018-02-19 23:22:08 +03:00
.anchor {
rustdoc: On mobile: hide §, adjust [+] position
2018-02-20 22:46:24 +03:00
display: none !important;
rustdoc: Reposition the § per GuillaumeGomez request
2018-02-19 23:22:08 +03:00
}
Fix mobile doc display
2018-10-06 18:51:56 +02:00
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
#main-content > details.toggle > summary::before,
#main-content > div > details.toggle > summary::before {
Unify toggle rules on smaller resolutions
2021-05-14 19:58:21 +02:00
left: -11px;
rustdoc: use details tag for trait implementors This switches from JS-generated toggles to using the HTML <details> tag for expanding and collapsing entries in the "Implementors" section.
2021-04-17 23:43:20 -07:00
}
rustdoc: clean up button-hiding mobile CSS
2022-12-01 13:44:28 -07:00
/* We don't display these buttons on mobile devices. */
#copy-path, #help-button {
Hide help button on mobile devices
2020-10-15 17:28:42 +02:00
display: none;
}
Implement Desktop and Mobile version with gridlayout * implement sans-serif #85621
2021-05-25 00:36:36 +02:00
rustdoc: bundle sidebar button icon into CSS This removes an HTTP request from the loading pipeline, and allows it to be changed with a media query.
2023-10-07 09:41:38 -07:00
/* sidebar button becomes topbar button */
#sidebar-button > a:before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="0 0 22 22" fill="none" stroke="black">\
<rect x="1" y="1" width="20" height="20" ry="1.5" stroke-width="1.5"/>\
<circle cx="4.375" cy="4.375" r="1" stroke-width=".75"/>\
<path d="m3 7.375h16m0-3h-4" stroke-width="1.25"/></svg>');
width: 22px;
height: 22px;
}
Stop using the trigram of heaven as a hamburger button It doesn't look quite right, because the lines are too far apart, and it's not going to be announced by screenreaders as a menu button, since that's not what the symbol means. This adds a real tooltip and uses a better drawing of the icon.
2023-12-18 13:30:47 -07:00
.sidebar-menu-toggle:before {
filter: var(--mobile-sidebar-menu-filter);
}
.sidebar-menu-toggle:hover {
background: var(--main-background-color);
}
rustdoc: bundle sidebar button icon into CSS This removes an HTTP request from the loading pipeline, and allows it to be changed with a media query.
2023-10-07 09:41:38 -07:00
Implement Desktop and Mobile version with gridlayout * implement sans-serif #85621
2021-05-25 00:36:36 +02:00
/* Display an alternating layout on tablets and phones */
rustdoc: simplify DOM for `.item-table` This switches from using `<div>` to the more semantic `<ul>`, and using class names that rhyme with the classes the search results table uses.
2023-02-07 19:00:18 -07:00
.item-table, .item-row, .item-table > li, .item-table > li > div,
rustdoc: simplify search results CSS and DOM There is a layout change caused by this commit, but it's subtle. You won't notice it unless you're looking for it.
2022-11-04 12:34:24 -07:00
.search-results > a, .search-results > a > div {
Move from grid layout to table based layout because of browser limits that overlay row entries after a UA specific amount of rows
2021-09-12 01:18:39 +02:00
display: block;
}
Implement Desktop and Mobile version with gridlayout * implement sans-serif #85621
2021-05-25 00:36:36 +02:00
Implement staggered mobile layout
2021-05-21 23:11:06 +02:00
/* Display an alternating layout on tablets and phones */
.search-results > a {
Add padding to mobile layout and fix width issue on both
2021-05-22 09:01:33 +00:00
padding: 5px 0px;
Implement staggered mobile layout
2021-05-21 23:11:06 +02:00
}
rustdoc: simplify DOM for `.item-table` This switches from using `<div>` to the more semantic `<ul>`, and using class names that rhyme with the classes the search results table uses.
2023-02-07 19:00:18 -07:00
.search-results > a > div.desc, .item-table > li > div.desc {
Implement staggered mobile layout
2021-05-21 23:11:06 +02:00
padding-left: 2em;
}
Fix display of long items in search results
2023-06-27 15:05:43 +02:00
.search-results .result-name {
display: block;
}
.search-results .result-name .typename {
width: initial;
margin-right: 0;
}
.search-results .result-name .typename, .search-results .result-name .path {
display: inline;
}
Fix sidebar in source code page
2021-12-14 11:48:30 +01:00
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.src-sidebar-expanded .src .sidebar {
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
position: fixed;
Fix sidebar in source code page
2021-12-14 11:48:30 +01:00
max-width: 100vw;
width: 100vw;
}
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from https://github.com/rust-lang/rust/pull/119049 but with a button that looks more like a button and matches the one used on other sidebar pages.
2023-12-17 23:06:31 -07:00
.src .src-sidebar-title {
padding-top: 0;
}
Fix display of toggles on mobile
2021-12-29 18:54:33 +01:00
/* Position of the "[-]" element. */
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle:not(.top-doc) > summary {
Fix display of toggles on mobile
2021-12-29 18:54:33 +01:00
margin-left: 10px;
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
.impl-items > details.toggle > summary:not(.hideme)::before,
#main-content > details.toggle:not(.top-doc) > summary::before,
#main-content > div > details.toggle > summary::before {
Fix display of toggles on mobile
2021-12-29 18:54:33 +01:00
left: -11px;
}
rustdoc: put in rule to get alignment in desktop and mobile layouts
2022-09-02 12:15:06 -07:00
/* Align summary-nested and unnested item-info gizmos. */
rustdoc: merge separate `.item-info` CSS Rough timeline: * The longer `.content .item-info` selector originated in 110e7270ab7b0700ce714b8b1c7e509195dea2c4. No reason seems to be given in the PR why it needed the `.content` part, but it was probably added because of <https://github.com/rust-lang/rust/blob/110e7270ab7b0700ce714b8b1c7e509195dea2c4/src/librustdoc/html/static/rustdoc.css#L476-L478>. That selector with the margin-bottom was removed when CSS containment was added in 8846c0853d8687fda0e5f23f6687b03b243980ee. * `.stability` was renamed `.item-info` in caf6c5790a858893c1d32ed2054c9577d12e7493. * The selector without the `.content` was added in d48a39a5e24ab08f727d1c919dc2af98c333ad14.
2022-10-12 11:24:23 -07:00
.impl-items > .item-info {
rustdoc: put in rule to get alignment in desktop and mobile layouts
2022-09-02 12:15:06 -07:00
margin-left: 34px;
}
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area.
2022-10-20 13:22:36 -07:00
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
.src nav.sub {
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area.
2022-10-20 13:22:36 -07:00
margin: 0;
Improve display of logo on very small screens
2023-04-05 17:13:00 +02:00
padding: var(--nav-sub-mobile-padding);
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area.
2022-10-20 13:22:36 -07:00
}
Improve search display on mobile
2017-12-18 21:27:19 +01:00
}
Fix scraped examples background gradient
2024-09-01 23:59:46 +02:00
Only put title over example on large screens
2022-12-05 23:48:07 -08:00
/* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */
@media (min-width: 701px) {
Include additional documentation for scrape-examples changes
2022-12-06 09:34:37 -08:00
/* Places file-link for a scraped example on top of the example to save space.
We only do this on large screens so the file-link doesn't overlap too much
with the example's content. */
Only put title over example on large screens
2022-12-05 23:48:07 -08:00
.scraped-example-title {
position: absolute;
Include additional documentation for scrape-examples changes
2022-12-06 09:34:37 -08:00
z-index: 10;
Only put title over example on large screens
2022-12-05 23:48:07 -08:00
background: var(--main-background-color);
bottom: 8px;
right: 5px;
padding: 2px 4px;
box-shadow: 0 0 4px var(--main-background-color);
}
Wrap too long item name and improve the item list display a bit
2024-07-17 14:33:10 +02:00
.item-table > li > .item-name {
width: 33%;
}
.item-table > li > div {
rustdoc: properly handle path wrapping
2024-07-19 09:00:50 -07:00
overflow-wrap: anywhere;
Wrap too long item name and improve the item list display a bit
2024-07-17 14:33:10 +02:00
}
Only put title over example on large screens
2022-12-05 23:48:07 -08:00
}
Cleanup media queries
2019-04-29 23:43:39 +02:00
@media print {
rustdoc: use `src` consistently over `source` in code The CSS uses an inconsistent mix of both. This commit switches it to always use `src`.
2023-07-14 16:38:01 -07:00
nav.sidebar, nav.sub, .out-of-band, a.src, #copy-path,
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
details.toggle[open] > summary::before, details.toggle > summary::before,
details.toggle.top-doc > summary {
Cleanup media queries
2019-04-29 23:43:39 +02:00
display: none;
}
try to fix tidy issues
2022-07-08 01:54:55 -04:00
.docblock {
margin-left: 0;
}
main {
set all padding for main element in print
2022-07-08 12:44:16 -04:00
padding: 10px;
try to fix tidy issues
2022-07-08 01:54:55 -04:00
}
Cleanup media queries
2019-04-29 23:43:39 +02:00
}
Improve search display on mobile
2017-12-18 21:27:19 +01:00
Improve resize handling
2021-01-31 13:42:16 +01:00
@media (max-width: 464px) {
Improve docblock readability on small screen
2021-01-31 01:19:29 +08:00
.docblock {
margin-left: 12px;
}
Fix <code> blocks in doc blocks display on mobile
2021-10-07 17:25:58 +02:00
.docblock code {
Enable wrapping words by default Faced with a very long word, browsers will let it overflow its box horizontally rather than break it in the middle. We essentially never want that behavior. We would rather break the word and keep it inside its horizontal limits. So we apply a default overflow-wrap: break-word/anywhere to the document as a while. In some contexts we would rather add a horizontal scrollbar (code blocks), or elide the excess text with an ellipsis (sidebar). Those still work as expected.
2022-01-11 17:36:52 -08:00
overflow-wrap: break-word;
Fix <code> blocks in doc blocks display on mobile
2021-10-07 17:25:58 +02:00
overflow-wrap: anywhere;
}
rustdoc: show logo in source sub nav
2021-10-24 22:41:48 +02:00
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area.
2022-10-20 13:22:36 -07:00
nav.sub {
rustdoc: show logo in source sub nav
2021-10-24 22:41:48 +02:00
flex-direction: column;
}
rustdoc: remove redundant `div.search-container` This wrapper DIV was originally added in 89e1fb322321c05497caa01372ceb7d5b57fa680, when it allowed the search bar's size to be calculated without using `calc()`. This `width` hack can be removed using flexbox.
2022-10-27 13:36:27 -07:00
.search-form {
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area.
2022-10-20 13:22:36 -07:00
align-self: stretch;
rustdoc: show logo in source sub nav
2021-10-24 22:41:48 +02:00
}
Fixes doc important trait display on mobile
2017-12-08 16:36:08 +01:00
}
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
rustdoc: use `code-header` class to format enum variants The font size and weights should be exactly the same after this commit, but the spacing is changed to be exactly the same as methods.
2022-11-17 15:24:39 -07:00
.variant,
rustdoc: prevent method summary margin from being applied to docblocks
2022-10-21 10:48:41 -07:00
.implementors-toggle > summary,
rustdoc: add method spacing to trait methods More cleanup for 8846c0853d8687fda0e5f23f6687b03b243980ee, this time in trait layouts when things are collapsed.
2022-09-28 17:38:25 -07:00
.impl,
rustdoc: add missing margin to no-docblock methods Fixes another regression caused by 8846c0853d8687fda0e5f23f6687b03b243980ee, this time fixing the appearance of methods that have no docblock (we didn't notice this one because libstd docs *always* have docblocks). See how it looks without the fix at https://doc.rust-lang.org/nightly/nightly-rustc/rustdoc/clean/types/enum.Type.html#implementations
2022-09-30 09:42:07 -07:00
#implementors-list > .docblock,
.impl-items > section,
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
.impl-items > .toggle > summary,
rustdoc: add margins to all impl-item toggles, not just methods Fixes #103782
2022-10-30 23:10:59 -07:00
.methods > section,
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
.methods > .toggle > summary
rustdoc: add missing margin to no-docblock trait items Fixes another regression caused by 8846c0853d8687fda0e5f23f6687b03b243980ee, this time fixing the appearance of methods that have no docblock (we didn't notice this one because libstd docs *always* have docblocks). See how it looks at https://doc.rust-lang.org/nightly/nightly-rustc/rustdoc/clean/types/trait.AttributesExt.html
2022-09-30 10:15:59 -07:00
{
Remove "up here" arrow on item-infos Use spacing to distinguish what is related to a given heading.
2022-01-07 12:39:56 -05:00
margin-bottom: 0.75em;
}
rustdoc: use `code-header` class to format enum variants The font size and weights should be exactly the same after this commit, but the spacing is changed to be exactly the same as methods.
2022-11-17 15:24:39 -07:00
.variants > .docblock,
rustdoc: add CSS margin between `impl` docblock and its items
2022-12-13 16:55:45 -07:00
.implementors-toggle > .docblock,
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
.impl-items > .toggle[open]:not(:last-child),
.methods > .toggle[open]:not(:last-child),
rustdoc: use CSS containment to speed up render https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment This affected layout a little and required adjustments to the CSS to keep spacing the same. In particular, the margins of adjacent items usually overlap with each other. However, when an item has contain: layout, any margins of child nodes push out the size of the item itself. This was making spacing between items a little too big. To solve that, I removed margins in some places: in particular for certain classes that often occur at the end of a `details.rustdoc-toggle` block, I removed their bottom margin. Generally, the margins provided by the next item down are sufficient. Also remove an unnecessary margin-top on .code-header.
2022-09-27 09:21:24 -07:00
.implementors-toggle[open]:not(:last-child) {
Remove "up here" arrow on item-infos Use spacing to distinguish what is related to a given heading.
2022-01-07 12:39:56 -05:00
margin-bottom: 2em;
}
rustdoc: rename CSS rustdoc-toggle -> toggle and toggle -> settings-toggle This swaps things around so that the class that gets used more often has the shorter name.
2023-01-10 11:35:37 -07:00
#trait-implementations-list .impl-items > .toggle:not(:last-child),
#synthetic-implementations-list .impl-items > .toggle:not(:last-child),
#blanket-implementations-list .impl-items > .toggle:not(:last-child) {
Remove "up here" arrow on item-infos Use spacing to distinguish what is related to a given heading.
2022-01-07 12:39:56 -05:00
margin-bottom: 1em;
}
Move highlighting logic from JS to Rust Continue migrating JS functionality Cleanup Fix compile error Clean up the diff Set toggle font to sans-serif
2021-08-26 14:43:12 -07:00
/* Begin: styles for --scrape-examples feature */
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
Add scrape examples help page
2022-02-14 19:49:39 -08:00
.scraped-example-list .scrape-help {
Improve alignment of additional scraped examples, add scrape examples help page
2022-01-27 17:00:31 -08:00
margin-left: 10px;
padding: 0 4px;
font-weight: normal;
font-size: 12px;
position: relative;
bottom: 1px;
rustdoc: merge scrape-help CSS
2022-12-30 10:43:06 -07:00
border: 1px solid var(--scrape-example-help-border-color);
Improve styling on scrape examples help button
2022-01-27 18:51:34 -08:00
border-radius: 50px;
rustdoc: merge scrape-help CSS
2022-12-30 10:43:06 -07:00
color: var(--scrape-example-help-color);
}
.scraped-example-list .scrape-help:hover {
border-color: var(--scrape-example-help-hover-border-color);
color: var(--scrape-example-help-hover-color);
Improve alignment of additional scraped examples, add scrape examples help page
2022-01-27 17:00:31 -08:00
}
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
.scraped-example:not(.expanded) .example-wrap::before,
.scraped-example:not(.expanded) .example-wrap::after {
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
content: " ";
width: 100%;
Move some expansion logic into generation-time, fix section header links, remove ID from line numbers, fix horizontal scrolling on non-expanded elements
2021-10-07 09:46:18 -07:00
height: 5px;
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
position: absolute;
Fix z-indexes of code example feature and cleanup its CSS
2022-10-29 12:23:10 +02:00
z-index: 1;
}
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
.scraped-example:not(.expanded) .example-wrap::before {
top: 0;
Migrate scraped-examples top and bottom "borders" to CSS variables
2023-01-21 12:15:42 +01:00
background: linear-gradient(to bottom,
var(--scrape-example-code-wrapper-background-start),
var(--scrape-example-code-wrapper-background-end));
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
}
Simplify CSS but wrapping scraped example into a div and move the title out of the code block
2024-09-02 15:59:00 +02:00
.scraped-example:not(.expanded) .example-wrap::after {
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
bottom: 0;
Migrate scraped-examples top and bottom "borders" to CSS variables
2023-01-21 12:15:42 +01:00
background: linear-gradient(to top,
var(--scrape-example-code-wrapper-background-start),
var(--scrape-example-code-wrapper-background-end));
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
}
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
.scraped-example:not(.expanded) {
Fix UI issues with Rustdoc scrape-examples feature. * Help file was being loaded from the wrong place. * CSS selector in JS has a typo. * Line numbers are overflowing, change to display: grid to fix.
2022-11-26 21:39:39 -06:00
width: 100%;
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
overflow-y: hidden;
margin-bottom: 0;
}
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
.scraped-example:not(.expanded) {
Improve alignment of additional scraped examples, add scrape examples help page
2022-01-27 17:00:31 -08:00
overflow-x: hidden;
}
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
.scraped-example .rust span.highlight {
Migrate scraped examples higlight CSS to variables
2022-12-28 17:14:17 +01:00
background: var(--scrape-example-code-line-highlight);
}
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
.scraped-example .rust span.highlight.focus {
Migrate scraped examples higlight CSS to variables
2022-12-28 17:14:17 +01:00
background: var(--scrape-example-code-line-highlight-focus);
}
Update to latest rustc and rustdoc styles
2021-10-06 21:43:40 -07:00
.more-examples-toggle {
Improve alignment of additional scraped examples, add scrape examples help page
2022-01-27 17:00:31 -08:00
max-width: calc(100% + 25px);
Update to latest rustc and rustdoc styles
2021-10-06 21:43:40 -07:00
margin-top: 10px;
Improve alignment of additional scraped examples, add scrape examples help page
2022-01-27 17:00:31 -08:00
margin-left: -25px;
}
.more-examples-toggle .hide-more {
margin-left: 25px;
cursor: pointer;
Update to latest rustc and rustdoc styles
2021-10-06 21:43:40 -07:00
}
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
.more-scraped-examples {
rustdoc: simplify CSS and DOM for more-scraped-examples This gets rid of the more-scraped-examples-inner wrapper, instead nesting the children directly and using absolute positioning for the toggle line.
2022-12-21 18:03:31 -07:00
margin-left: 25px;
position: relative;
Sort examples by size Improve styling Start to clean up code, add comments
2021-08-25 20:15:46 -07:00
}
.toggle-line {
rustdoc: simplify CSS and DOM for more-scraped-examples This gets rid of the more-scraped-examples-inner wrapper, instead nesting the children directly and using absolute positioning for the toggle line.
2022-12-21 18:03:31 -07:00
position: absolute;
top: 5px;
bottom: 0;
right: calc(100% + 10px);
Sort examples by size Improve styling Start to clean up code, add comments
2021-08-25 20:15:46 -07:00
padding: 0 4px;
cursor: pointer;
}
.toggle-line-inner {
min-width: 2px;
height: 100%;
Migrate toggle-line-inner background to CSS variable
2022-12-24 08:28:59 +01:00
background: var(--scrape-example-toggle-line-background);
}
.toggle-line:hover .toggle-line-inner {
background: var(--scrape-example-toggle-line-hover-background);
Sort examples by size Improve styling Start to clean up code, add comments
2021-08-25 20:15:46 -07:00
}
rustdoc: clean up margin CSS for scraped examples * This stops applying a margin to the additional example links. Because these links are `display: inline`, it doesn't actually do anything. * This switches from using a margin-bottom with a special exception for the examples themselves, plus an additional margin on the hide button, to instead using just margin-top on the examples, with an exception for the first one. No user-visible changes should result from this.
2022-12-16 10:11:37 -07:00
.more-scraped-examples .scraped-example, .example-links {
margin-top: 20px;
Add styles for non-white themes Tweak colors Tabs New link heading style
2021-09-14 09:50:47 -07:00
}
rustdoc: clean up margin CSS for scraped examples * This stops applying a margin to the additional example links. Because these links are `display: inline`, it doesn't actually do anything. * This switches from using a margin-bottom with a special exception for the examples themselves, plus an additional margin on the hide button, to instead using just margin-top on the examples, with an exception for the first one. No user-visible changes should result from this.
2022-12-16 10:11:37 -07:00
.more-scraped-examples .scraped-example:first-child {
margin-top: 5px;
Sort examples by size Improve styling Start to clean up code, add comments
2021-08-25 20:15:46 -07:00
}
.example-links ul {
margin-bottom: 0;
Add updated support for example-analyzer Move rendering of examples into Finalize design Cleanup, rename found -> scraped Softer yellow Clean up dead code Document scrape_examples More simplification and documentation Remove extra css Test
2021-05-09 16:22:22 -07:00
}
Move highlighting logic from JS to Rust Continue migrating JS functionality Cleanup Fix compile error Clean up the diff Set toggle font to sans-serif
2021-08-26 14:43:12 -07:00
/* End: styles for --scrape-examples feature */
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
/* Begin: styles for themes
Keep the default light and dark themes synchronized with the ones
in noscript.css
The special "Begin theme" and "End theme" below are used by a lot of
tooling to ensure different themes all define all the variables. Do not
alter their formatting. */
Default to light theme is JS is enabled but not working
2024-04-03 14:11:01 +02:00
/*
About `:root:not([data-theme])`: if for any reason the JS is enabled but cannot be loaded,
`noscript` won't be enabled and the doc will have no color applied. To do around this, we
add a selector check that if `data-theme` is not defined, then we apply the light theme
by default.
*/
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
/* Begin theme: light */
Default to light theme is JS is enabled but not working
2024-04-03 14:11:01 +02:00
:root[data-theme="light"], :root:not([data-theme]) {
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--main-background-color: white;
--main-color: black;
--settings-input-color: #2196f3;
--settings-input-border-color: #717171;
--settings-button-color: #000;
--settings-button-border-focus: #717171;
--sidebar-background-color: #f5f5f5;
--sidebar-background-color-hover: #e0e0e0;
--code-block-background-color: #f5f5f5;
--scrollbar-track-background-color: #dcdcdc;
--scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6);
--scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
--headings-border-bottom-color: #ddd;
--border-color: #e0e0e0;
--button-background-color: #fff;
--right-side-color: grey;
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: none;
Stop using the trigram of heaven as a hamburger button It doesn't look quite right, because the lines are too far apart, and it's not going to be announced by screenreaders as a menu button, since that's not what the symbol means. This adds a real tooltip and uses a better drawing of the icon.
2023-12-18 13:30:47 -07:00
--mobile-sidebar-menu-filter: none;
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--search-input-focused-border-color: #66afe9;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
--copy-path-img-hover-filter: invert(35%);
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
--code-example-button-color: #7f7f7f;
--code-example-button-hover-color: #595959;
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--codeblock-error-hover-color: rgb(255, 0, 0);
--codeblock-error-color: rgba(255, 0, 0, .5);
--codeblock-ignore-hover-color: rgb(255, 142, 0);
--codeblock-ignore-color: rgba(255, 142, 0, .6);
--warning-border-color: #ff8e00;
--type-link-color: #ad378a;
--trait-link-color: #6e4fc9;
--assoc-item-link-color: #3873ad;
--function-link-color: #ad7c37;
--macro-link-color: #068000;
--keyword-link-color: #3873ad;
--mod-link-color: #3873ad;
--link-color: #3873ad;
--sidebar-link-color: #356da4;
--sidebar-current-link-background-color: #fff;
--search-result-link-focus-background-color: #ccc;
--search-result-border-color: #aaa3;
--search-color: #000;
--search-error-code-background-color: #d0cccc;
--search-results-alias-color: #000;
--search-results-grey-color: #999;
--search-tab-title-count-color: #888;
--search-tab-button-not-selected-border-top-color: #e6e6e6;
--search-tab-button-not-selected-background: #e6e6e6;
--search-tab-button-selected-border-top-color: #0089ff;
--search-tab-button-selected-background: #fff;
Fix bad color for setting cog in ayu theme
2024-05-05 19:27:59 +02:00
--settings-menu-filter: none;
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--stab-background-color: #fff5d6;
--stab-code-color: #000;
--code-highlight-kw-color: #8959a8;
--code-highlight-kw-2-color: #4271ae;
--code-highlight-lifetime-color: #b76514;
--code-highlight-prelude-color: #4271ae;
--code-highlight-prelude-val-color: #c82829;
--code-highlight-number-color: #718c00;
--code-highlight-string-color: #718c00;
--code-highlight-literal-color: #c82829;
--code-highlight-attribute-color: #c82829;
--code-highlight-self-color: #c82829;
--code-highlight-macro-color: #3e999f;
--code-highlight-question-mark-color: #ff9011;
--code-highlight-comment-color: #8e908c;
--code-highlight-doc-comment-color: #4d4d4c;
--src-line-numbers-span-color: #c67e2d;
--src-line-number-highlighted-background-color: #fdffd3;
--target-background-color: #fdffd3;
--target-border-color: #ad7c37;
--kbd-color: #000;
--kbd-background: #fafbfc;
--kbd-box-shadow-color: #c6cbd1;
--rust-logo-filter: initial;
/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
--crate-search-div-filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg)
brightness(114%) contrast(76%);
--crate-search-div-hover-filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg)
brightness(96%) contrast(93%);
--crate-search-hover-border: #717171;
--src-sidebar-background-selected: #fff;
--src-sidebar-background-hover: #e0e0e0;
--table-alt-row-background-color: #f5f5f5;
--codeblock-link-background: #eee;
--scrape-example-toggle-line-background: #ccc;
--scrape-example-toggle-line-hover-background: #999;
--scrape-example-code-line-highlight: #fcffd6;
--scrape-example-code-line-highlight-focus: #f6fdb0;
--scrape-example-help-border-color: #555;
--scrape-example-help-color: #333;
--scrape-example-help-hover-border-color: #000;
--scrape-example-help-hover-color: #000;
--scrape-example-code-wrapper-background-start: rgba(255, 255, 255, 1);
--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
--sidebar-resizer-hover: hsl(207, 90%, 66%);
--sidebar-resizer-active: hsl(207, 90%, 54%);
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
}
/* End theme: light */
/* Begin theme: dark */
:root[data-theme="dark"] {
--main-background-color: #353535;
--main-color: #ddd;
--settings-input-color: #2196f3;
--settings-input-border-color: #999;
--settings-button-color: #000;
--settings-button-border-focus: #ffb900;
--sidebar-background-color: #505050;
--sidebar-background-color-hover: #676767;
--code-block-background-color: #2A2A2A;
--scrollbar-track-background-color: #717171;
--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
--scrollbar-color: rgba(32,34,37,.6) #5a5a5a;
--headings-border-bottom-color: #d2d2d2;
--border-color: #e0e0e0;
--button-background-color: #f0f0f0;
--right-side-color: grey;
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
Stop using the trigram of heaven as a hamburger button It doesn't look quite right, because the lines are too far apart, and it's not going to be announced by screenreaders as a menu button, since that's not what the symbol means. This adds a real tooltip and uses a better drawing of the icon.
2023-12-18 13:30:47 -07:00
--mobile-sidebar-menu-filter: invert(100%);
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--search-input-focused-border-color: #008dfd;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
--copy-path-img-hover-filter: invert(65%);
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
--code-example-button-color: #7f7f7f;
--code-example-button-hover-color: #a5a5a5;
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--codeblock-error-hover-color: rgb(255, 0, 0);
--codeblock-error-color: rgba(255, 0, 0, .5);
--codeblock-ignore-hover-color: rgb(255, 142, 0);
--codeblock-ignore-color: rgba(255, 142, 0, .6);
--warning-border-color: #ff8e00;
--type-link-color: #2dbfb8;
--trait-link-color: #b78cf2;
--assoc-item-link-color: #d2991d;
--function-link-color: #2bab63;
--macro-link-color: #09bd00;
--keyword-link-color: #d2991d;
--mod-link-color: #d2991d;
--link-color: #d2991d;
--sidebar-link-color: #fdbf35;
--sidebar-current-link-background-color: #444;
--search-result-link-focus-background-color: #616161;
--search-result-border-color: #aaa3;
--search-color: #111;
--search-error-code-background-color: #484848;
--search-results-alias-color: #fff;
--search-results-grey-color: #ccc;
--search-tab-title-count-color: #888;
--search-tab-button-not-selected-border-top-color: #252525;
--search-tab-button-not-selected-background: #252525;
--search-tab-button-selected-border-top-color: #0089ff;
--search-tab-button-selected-background: #353535;
Fix bad color for setting cog in ayu theme
2024-05-05 19:27:59 +02:00
--settings-menu-filter: none;
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--stab-background-color: #314559;
--stab-code-color: #e6e1cf;
--code-highlight-kw-color: #ab8ac1;
--code-highlight-kw-2-color: #769acb;
--code-highlight-lifetime-color: #d97f26;
--code-highlight-prelude-color: #769acb;
--code-highlight-prelude-val-color: #ee6868;
--code-highlight-number-color: #83a300;
--code-highlight-string-color: #83a300;
--code-highlight-literal-color: #ee6868;
--code-highlight-attribute-color: #ee6868;
--code-highlight-self-color: #ee6868;
--code-highlight-macro-color: #3e999f;
--code-highlight-question-mark-color: #ff9011;
--code-highlight-comment-color: #8d8d8b;
--code-highlight-doc-comment-color: #8ca375;
--src-line-numbers-span-color: #3b91e2;
--src-line-number-highlighted-background-color: #0a042f;
--target-background-color: #494a3d;
--target-border-color: #bb7410;
--kbd-color: #000;
--kbd-background: #fafbfc;
--kbd-box-shadow-color: #c6cbd1;
--rust-logo-filter: drop-shadow(1px 0 0px #fff)
drop-shadow(0 1px 0 #fff)
drop-shadow(-1px 0 0 #fff)
drop-shadow(0 -1px 0 #fff);
/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
--crate-search-div-filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg)
brightness(90%) contrast(90%);
--crate-search-div-hover-filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg)
brightness(100%) contrast(91%);
--crate-search-hover-border: #2196f3;
--src-sidebar-background-selected: #333;
--src-sidebar-background-hover: #444;
--table-alt-row-background-color: #2a2a2a;
--codeblock-link-background: #333;
--scrape-example-toggle-line-background: #999;
--scrape-example-toggle-line-hover-background: #c5c5c5;
--scrape-example-code-line-highlight: #5b3b01;
--scrape-example-code-line-highlight-focus: #7c4b0f;
--scrape-example-help-border-color: #aaa;
--scrape-example-help-color: #eee;
--scrape-example-help-hover-border-color: #fff;
--scrape-example-help-hover-color: #fff;
--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
--sidebar-resizer-hover: hsl(207, 30%, 54%);
--sidebar-resizer-active: hsl(207, 90%, 54%);
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
}
/* End theme: dark */
/* Begin theme: ayu */
/*
Based off of the Ayu theme
Original by Dempfi (https://github.com/dempfi/ayu)
*/
:root[data-theme="ayu"] {
--main-background-color: #0f1419;
--main-color: #c5c5c5;
--settings-input-color: #ffb454;
--settings-input-border-color: #999;
--settings-button-color: #fff;
--settings-button-border-focus: #e0e0e0;
--sidebar-background-color: #14191f;
--sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
--code-block-background-color: #191f26;
--scrollbar-track-background-color: transparent;
--scrollbar-thumb-background-color: #5c6773;
--scrollbar-color: #5c6773 #24292f;
--headings-border-bottom-color: #5c6773;
--border-color: #5c6773;
--button-background-color: #141920;
--right-side-color: grey;
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
Stop using the trigram of heaven as a hamburger button It doesn't look quite right, because the lines are too far apart, and it's not going to be announced by screenreaders as a menu button, since that's not what the symbol means. This adds a real tooltip and uses a better drawing of the icon.
2023-12-18 13:30:47 -07:00
--mobile-sidebar-menu-filter: invert(100%);
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */
--copy-path-button-color: #fff;
--copy-path-img-filter: invert(70%);
--copy-path-img-hover-filter: invert(100%);
Unify scraped examples with other code examples
2024-08-30 18:27:11 +02:00
--code-example-button-color: #b2b2b2;
--code-example-button-hover-color: #fff;
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--codeblock-error-hover-color: rgb(255, 0, 0);
--codeblock-error-color: rgba(255, 0, 0, .5);
--codeblock-ignore-hover-color: rgb(255, 142, 0);
--codeblock-ignore-color: rgba(255, 142, 0, .6);
--warning-border-color: #ff8e00;
--type-link-color: #ffa0a5;
--trait-link-color: #39afd7;
--assoc-item-link-color: #39afd7;
--function-link-color: #fdd687;
--macro-link-color: #a37acc;
--keyword-link-color: #39afd7;
--mod-link-color: #39afd7;
--link-color: #39afd7;
--sidebar-link-color: #53b1db;
--sidebar-current-link-background-color: transparent;
--search-result-link-focus-background-color: #3c3c3c;
--search-result-border-color: #aaa3;
--search-color: #fff;
--search-error-code-background-color: #4f4c4c;
--search-results-alias-color: #c5c5c5;
--search-results-grey-color: #999;
--search-tab-title-count-color: #888;
--search-tab-button-not-selected-border-top-color: none;
--search-tab-button-not-selected-background: transparent !important;
--search-tab-button-selected-border-top-color: none;
--search-tab-button-selected-background: #141920 !important;
Fix bad color for setting cog in ayu theme
2024-05-05 19:27:59 +02:00
--settings-menu-filter: invert(100%);
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
--stab-background-color: #314559;
--stab-code-color: #e6e1cf;
--code-highlight-kw-color: #ff7733;
--code-highlight-kw-2-color: #ff7733;
--code-highlight-lifetime-color: #ff7733;
--code-highlight-prelude-color: #69f2df;
--code-highlight-prelude-val-color: #ff7733;
--code-highlight-number-color: #b8cc52;
--code-highlight-string-color: #b8cc52;
--code-highlight-literal-color: #ff7733;
--code-highlight-attribute-color: #e6e1cf;
--code-highlight-self-color: #36a3d9;
--code-highlight-macro-color: #a37acc;
--code-highlight-question-mark-color: #ff9011;
--code-highlight-comment-color: #788797;
--code-highlight-doc-comment-color: #a1ac88;
--src-line-numbers-span-color: #5c6773;
--src-line-number-highlighted-background-color: rgba(255, 236, 164, 0.06);
--target-background-color: rgba(255, 236, 164, 0.06);
--target-border-color: rgba(255, 180, 76, 0.85);
--kbd-color: #c5c5c5;
--kbd-background: #314559;
--kbd-box-shadow-color: #5c6773;
--rust-logo-filter: drop-shadow(1px 0 0px #fff)
drop-shadow(0 1px 0 #fff)
drop-shadow(-1px 0 0 #fff)
drop-shadow(0 -1px 0 #fff);
/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
--crate-search-div-filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg)
brightness(94%) contrast(94%);
--crate-search-div-hover-filter: invert(98%) sepia(12%) saturate(81%) hue-rotate(343deg)
brightness(113%) contrast(76%);
--crate-search-hover-border: #e0e0e0;
--src-sidebar-background-selected: #14191f;
--src-sidebar-background-hover: #14191f;
--table-alt-row-background-color: #191f26;
--codeblock-link-background: #333;
--scrape-example-toggle-line-background: #999;
--scrape-example-toggle-line-hover-background: #c5c5c5;
--scrape-example-code-line-highlight: #5b3b01;
--scrape-example-code-line-highlight-focus: #7c4b0f;
--scrape-example-help-border-color: #aaa;
--scrape-example-help-color: #eee;
--scrape-example-help-hover-border-color: #fff;
--scrape-example-help-hover-color: #fff;
--scrape-example-code-wrapper-background-start: rgba(15, 20, 25, 1);
--scrape-example-code-wrapper-background-end: rgba(15, 20, 25, 0);
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
--sidebar-resizer-hover: hsl(34, 50%, 33%);
--sidebar-resizer-active: hsl(34, 100%, 66%);
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
}
:root[data-theme="ayu"] h1,
:root[data-theme="ayu"] h2,
:root[data-theme="ayu"] h3,
:root[data-theme="ayu"] h4,
:where(:root[data-theme="ayu"]) h1 a,
:root[data-theme="ayu"] .sidebar h2 a,
Add border bottom for source sidebar title area
2023-12-18 16:00:57 -07:00
:root[data-theme="ayu"] .sidebar h3 a {
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
color: #fff;
}
:root[data-theme="ayu"] .docblock code {
color: #ffb454;
}
:root[data-theme="ayu"] .docblock a > code {
color: #39AFD7 !important;
}
:root[data-theme="ayu"] .code-header,
:root[data-theme="ayu"] .docblock pre > code,
:root[data-theme="ayu"] pre,
:root[data-theme="ayu"] pre > code,
:root[data-theme="ayu"] .item-info code,
:root[data-theme="ayu"] .rustdoc.source .example-wrap {
color: #e6e1cf;
}
:root[data-theme="ayu"] .sidebar .current,
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
:root[data-theme="ayu"] .sidebar .current a,
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
:root[data-theme="ayu"] .sidebar a:hover,
:root[data-theme="ayu"] #src-sidebar div.files > a:hover,
:root[data-theme="ayu"] details.dir-entry summary:hover,
:root[data-theme="ayu"] #src-sidebar div.files > a:focus,
:root[data-theme="ayu"] details.dir-entry summary:focus,
:root[data-theme="ayu"] #src-sidebar div.files > a.selected {
color: #ffb44c;
}
:root[data-theme="ayu"] .sidebar-elems .location {
color: #ff7733;
}
:root[data-theme="ayu"] .src-line-numbers .line-highlighted {
color: #708090;
padding-right: 7px;
border-right: 1px solid #ffb44c;
}
:root[data-theme="ayu"] .search-results a:hover,
:root[data-theme="ayu"] .search-results a:focus {
color: #fff !important;
background-color: #3c3c3c;
}
:root[data-theme="ayu"] .search-results a {
color: #0096cf;
}
:root[data-theme="ayu"] .search-results a div.desc {
color: #c5c5c5;
}
:root[data-theme="ayu"] .result-name .primitive > i,
:root[data-theme="ayu"] .result-name .keyword > i {
color: #788797;
}
:root[data-theme="ayu"] #search-tabs > button.selected {
border-bottom: 1px solid #ffb44c !important;
border-top: none;
}
:root[data-theme="ayu"] #search-tabs > button:not(.selected) {
border: none;
background-color: transparent !important;
}
:root[data-theme="ayu"] #search-tabs > button:hover {
border-bottom: 1px solid rgba(242, 151, 24, 0.3);
}
rustdoc: allow resizing the sidebar
2023-09-07 18:45:24 -07:00
:root[data-theme="ayu"] #settings-menu > a img,
rustdoc: bundle sidebar button icon into CSS This removes an HTTP request from the loading pipeline, and allows it to be changed with a media query.
2023-10-07 09:41:38 -07:00
:root[data-theme="ayu"] #sidebar-button > a:before {
rustdoc: merge theme css into rustdoc.css Based on https://github.com/rust-lang/rust/pull/115812#issuecomment-1717960119 Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.
2023-09-13 15:08:45 -07:00
filter: invert(100);
}
/* End theme: ayu */
/* End: styles for themes */
Reference in a new issue Copy permalink