diff options
Diffstat (limited to 'src/librustdoc/html/static/css/rustdoc.css')
-rw-r--r-- | src/librustdoc/html/static/css/rustdoc.css | 526 |
1 files changed, 223 insertions, 303 deletions
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 1cc954a98..afcb40224 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -4,7 +4,7 @@ font-style: normal; font-weight: 400; src: local('Fira Sans'), - url("FiraSans-Regular.woff2") format("woff2"); + url("FiraSans-Regular-018c141bf0843ffd.woff2") format("woff2"); font-display: swap; } @font-face { @@ -12,7 +12,7 @@ font-style: normal; font-weight: 500; src: local('Fira Sans Medium'), - url("FiraSans-Medium.woff2") format("woff2"); + url("FiraSans-Medium-8f9a781e4970d388.woff2") format("woff2"); font-display: swap; } @@ -22,7 +22,7 @@ font-style: normal; font-weight: 400; src: local('Source Serif 4'), - url("SourceSerif4-Regular.ttf.woff2") format("woff2"); + url("SourceSerif4-Regular-1f7d512b176f0f72.ttf.woff2") format("woff2"); font-display: swap; } @font-face { @@ -30,7 +30,7 @@ font-style: italic; font-weight: 400; src: local('Source Serif 4 Italic'), - url("SourceSerif4-It.ttf.woff2") format("woff2"); + url("SourceSerif4-It-d034fe4ef9d0fa00.ttf.woff2") format("woff2"); font-display: swap; } @font-face { @@ -38,7 +38,7 @@ font-style: normal; font-weight: 700; src: local('Source Serif 4 Bold'), - url("SourceSerif4-Bold.ttf.woff2") format("woff2"); + url("SourceSerif4-Bold-124a1ca42af929b6.ttf.woff2") format("woff2"); font-display: swap; } @@ -49,28 +49,28 @@ font-weight: 400; /* Avoid using locally installed font because bad versions are in circulation: * see https://github.com/rust-lang/rust/issues/24355 */ - src: url("SourceCodePro-Regular.ttf.woff2") format("woff2"); + src: url("SourceCodePro-Regular-562dcc5011b6de7d.ttf.woff2") format("woff2"); font-display: swap; } @font-face { font-family: 'Source Code Pro'; font-style: italic; font-weight: 400; - src: url("SourceCodePro-It.ttf.woff2") format("woff2"); + src: url("SourceCodePro-It-1cc31594bf4f1f79.ttf.woff2") format("woff2"); font-display: swap; } @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 600; - src: url("SourceCodePro-Semibold.ttf.woff2") format("woff2"); + src: url("SourceCodePro-Semibold-d899c5a5c4aeb14a.ttf.woff2") format("woff2"); font-display: swap; } /* Avoid using legacy CJK serif fonts in Windows like Batang. */ @font-face { font-family: 'NanumBarunGothic'; - src: url("NanumBarunGothic.ttf.woff2") format("woff2"); + src: url("NanumBarunGothic-0f09457c7a19b7c6.ttf.woff2") format("woff2"); font-display: swap; unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF; } @@ -159,13 +159,9 @@ h1.fqn { .main-heading { display: flex; flex-wrap: wrap; - justify-content: space-between; padding-bottom: 6px; margin-bottom: 15px; } -#toggle-all-docs { - text-decoration: none; -} /* 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) @@ -199,17 +195,14 @@ h1, h2, h3, h4, h5, h6, span.since, a.srclink, #help-button > a, -details.rustdoc-toggle.top-doc > summary, -details.rustdoc-toggle.non-exhaustive > summary, -.scraped-example-title, -.more-examples-toggle summary, .more-examples-toggle .hide-more, -.example-links a, +summary.hideme, +.scraped-example-list, /* This selector is for the items listed in the "all items" page. */ ul.all-items { font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif; } -a#toggle-all-docs, +#toggle-all-docs, a.anchor, .small-section-header a, #source-sidebar a, @@ -219,12 +212,8 @@ pre.rust a, .mobile-topbar h2 a, h1 a, .search-results a, -.module-item .stab, -.import-item .stab, -.result-name .primitive > i, .result-name .keyword > i, -.method .where, -.fn .where, -.where.fmt-newline { +.item-left .stab, +.result-name .primitive > i, .result-name .keyword > i { color: var(--main-color); } @@ -249,7 +238,6 @@ h1 a, } .content span.fn, .content a.fn, -.content .fnname, .content span.method, .content a.method, .content span.tymethod, .content a.tymethod { color: var(--function-link-color); @@ -297,10 +285,21 @@ p:last-child { button { /* Buttons on Safari have different default padding than other platforms. Make them the same. */ padding: 1px 6px; + /* Opinionated tweak: use pointer cursor as clickability signifier. */ + cursor: pointer; } /* end tweaks for normalize.css 8 */ +button#toggle-all-docs { + padding: 0; + background: none; + border: none; + /* iOS button gradient: https://stackoverflow.com/q/5438567 */ + -webkit-appearance: none; + opacity: 1; +} + .rustdoc { display: flex; flex-direction: row; @@ -311,7 +310,7 @@ main { position: relative; flex-grow: 1; padding: 10px 15px 40px 45px; - min-width: 0; + min-width: 0; /* avoid growing beyond the size limit */ } .source main { @@ -360,7 +359,8 @@ img { overflow: visible; } -.sub-logo-container { +.sub-logo-container, .logo-container { + /* zero text boxes so that computed line height = image height exactly */ line-height: 0; } @@ -370,14 +370,17 @@ img { object-fit: contain; } +.rust-logo { + filter: var(--rust-logo-filter); +} + .sidebar, .mobile-topbar, .sidebar-menu-toggle { background-color: var(--sidebar-background-color); } .sidebar { font-size: 0.875rem; - width: 200px; - min-width: 200px; + flex: 0 0 200px; overflow-y: scroll; position: sticky; height: 100vh; @@ -386,12 +389,7 @@ img { } .rustdoc.source .sidebar { - width: 50px; - min-width: 0px; - max-width: 300px; - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; + flex-basis: 50px; border-right: 1px solid; overflow-x: hidden; /* The sidebar is by default hidden */ @@ -412,7 +410,7 @@ img { .source-sidebar-expanded .source .sidebar { overflow-y: auto; - width: 300px; + flex-basis: 300px; } .source-sidebar-expanded .source .sidebar > *:not(#sidebar-toggle) { @@ -458,10 +456,9 @@ img { } .sidebar .logo-container { - display: flex; margin-top: 10px; margin-bottom: 10px; - justify-content: center; + text-align: center; } .version { @@ -479,23 +476,17 @@ ul.block, .block li { list-style: none; } -.block a, -.sidebar h2 a, -.sidebar h3 a { +.sidebar-elems a, +.sidebar > h2 a { display: block; - padding: 0.25rem; + padding: 0.25rem; /* 4px */ margin-left: -0.25rem; - - text-overflow: ellipsis; - overflow: hidden; } .sidebar h2 { overflow-wrap: anywhere; padding: 0; - margin: 0; - margin-top: 0.7rem; - margin-bottom: 0.7rem; + margin: 0.7rem 0; } .sidebar h3 { @@ -523,6 +514,8 @@ ul.block, .block li { .sidebar-elems .block li a { white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } .mobile-topbar { @@ -570,15 +563,16 @@ ul.block, .block li { border-color: var(--example-line-numbers-border-color); } -.src-line-numbers span { - cursor: pointer; +.src-line-numbers a, .src-line-numbers span { color: var(--src-line-numbers-span-color); } -.src-line-numbers .line-highlighted { - background-color: var(--src-line-number-highlighted-background-color); -} .src-line-numbers :target { background-color: transparent; + border-right: none; + padding-right: 0; +} +.src-line-numbers .line-highlighted { + background-color: var(--src-line-number-highlighted-background-color); } .search-loading { @@ -636,22 +630,16 @@ pre, .rustdoc.source .example-wrap { .docblock table { margin: .5em 0; - width: calc(100% - 2px); - overflow-x: auto; - display: block; border-collapse: collapse; } -.docblock table td { +.docblock table td, .docblock table th { padding: .5em; - border: 1px dashed var(--border-color); - vertical-align: top; + border: 1px solid var(--border-color); } -.docblock table th { - padding: .5em; - text-align: left; - border: 1px solid var(--border-color); +.docblock table tbody tr:nth-child(2n) { + background: var(--table-alt-row-background-color); } /* Shift "where ..." part of method or fn definition down a line */ @@ -672,7 +660,6 @@ pre, .rustdoc.source .example-wrap { } #main-content > .item-info { - margin-top: 0; margin-left: 0; } @@ -701,8 +688,8 @@ a { } .small-section-header { - display: flex; - justify-content: space-between; + /* fields use <span> tags, but should get their own lines */ + display: block; position: relative; } @@ -710,7 +697,7 @@ a { display: initial; } -.impl:hover > .anchor, .trait-impl:hover > .anchor { +.impl:hover > .anchor, .trait-impl:hover > .anchor, .variant:hover > .anchor { display: inline-block; position: absolute; } @@ -730,9 +717,6 @@ a { h2.small-section-header > .anchor { padding-right: 6px; } -.anchor::before { - content: 'ยง'; -} .main-heading a:hover, .example-wrap > pre.rust a:hover, @@ -787,14 +771,12 @@ table, margin-top: 0; white-space: nowrap; /* flex layout allows shrinking the <select> appropriately if it becomes too large */ - display: inline-flex; - max-width: 100%; + display: flex; /* 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; } #crate-search-div { - display: inline-block; /* ensures that 100% in properties of #crate-search-div:after are relative to the size of this div */ position: relative; @@ -803,10 +785,8 @@ table, } #crate-search { min-width: 115px; - padding: 0; /* keep these two in sync with "@-moz-document url-prefix()" below */ - padding-left: 4px; - padding-right: 23px; + padding: 0 23px 0 4px; /* 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 */ @@ -824,6 +804,9 @@ table, line-height: 1.5; font-weight: 500; } +#crate-search:hover, #crate-search:focus { + border-color: var(--crate-search-hover-border); +} /* cancel stylistic differences in padding in firefox for "appearance: none"-style (or equivalent) <select>s */ @-moz-document url-prefix() { @@ -847,8 +830,13 @@ so that we can apply CSS-filters to change the arrow color in themes */ background-repeat: no-repeat; background-size: 20px; background-position: calc(100% - 2px) 56%; - /* image is black color, themes should apply a "filter" property to change the color */ - background-image: /* AUTOREPLACE: */url("down-arrow.svg"); + /* image is black color */ + background-image: url("down-arrow-927217e04c7463ac.svg"); + /* 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); } #crate-search > option { font-size: 1rem; @@ -873,40 +861,29 @@ so that we can apply CSS-filters to change the arrow color in themes */ .search-results { display: none; - padding-bottom: 2em; } .search-results.active { display: block; - /* prevent overhanging tabs from moving the first result */ - clear: both; -} - -.search-results .desc > span { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: block; } .search-results > a { - display: block; + display: flex; /* A little margin ensures the browser's outlining of focused links has room to display. */ margin-left: 2px; margin-right: 2px; - border-bottom: 1px solid #aaa3; + border-bottom: 1px solid var(--search-result-border-color); + gap: 1em; } .search-results > a > div { - display: flex; - flex-flow: row wrap; + flex: 1; } -.search-results .result-name, .search-results div.desc { - width: 50%; -} -.search-results .result-name { - padding-right: 1em; +.search-results > a > div.desc { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } .search-results a:hover, @@ -914,26 +891,32 @@ so that we can apply CSS-filters to change the arrow color in themes */ background-color: var(--search-result-link-focus-background-color); } +.search-results .result-name span.alias { + color: var(--search-results-alias-color); +} +.search-results .result-name span.grey { + color: var(--search-results-grey-color); +} + .popover { - font-size: 1rem; position: absolute; + top: 100%; right: 0; z-index: 2; display: block; margin-top: 7px; border-radius: 3px; border: 1px solid var(--border-color); - font-size: 1rem; + --popover-arrow-offset: 11px; } /* This rule is to draw the little arrow connecting the settings menu to the gear icon. */ .popover::before { content: ''; position: absolute; - right: 11px; + right: var(--popover-arrow-offset); border: solid var(--border-color); border-width: 1px 1px 0 0; - display: inline-block; padding: 4px; transform: rotate(-45deg); top: -5px; @@ -947,16 +930,12 @@ so that we can apply CSS-filters to change the arrow color in themes */ /* use larger max-width for help popover, but not for help.html */ #help.popover { max-width: 600px; -} - -#help.popover::before { - right: 48px; + --popover-arrow-offset: 48px; } #help dt { float: left; clear: left; - display: block; margin-right: 0.5rem; } #help span.top, #help span.bottom { @@ -1024,11 +1003,9 @@ so that we can apply CSS-filters to change the arrow color in themes */ 0 -1px 0 black; } -.module-item .stab, -.import-item .stab { +.item-left .stab { border-radius: 3px; display: inline-block; - font-size: 0.875rem; line-height: 1.2; margin-bottom: 0; margin-left: 0.3125em; @@ -1048,7 +1025,6 @@ so that we can apply CSS-filters to change the arrow color in themes */ .rightside { padding-left: 12px; - padding-right: 2px; float: right; } @@ -1090,7 +1066,7 @@ pre.rust .bool-val { pre.rust .self { color: var(--code-highlight-self-color); } -pre.rust .attribute { +pre.rust .attr { color: var(--code-highlight-attribute-color); } pre.rust .macro, @@ -1147,7 +1123,6 @@ pre.rust .doccomment { .example-wrap .tooltip { position: absolute; display: block; - cursor: pointer; left: -25px; top: 5px; } @@ -1164,6 +1139,8 @@ pre.rust .doccomment { width: max-content; top: -2px; z-index: 1; + background-color: var(--tooltip-background-color); + color: var(--tooltip-color); } .example-wrap .tooltip::before { @@ -1172,10 +1149,10 @@ pre.rust .doccomment { top: 50%; left: 16px; margin-top: -5px; - border-width: 5px; - border-style: solid; display: none; z-index: 1; + border: 5px solid transparent; + border-right-color: var(--tooltip-background-color); } .example-wrap.ignore .tooltip::after { @@ -1203,7 +1180,6 @@ pre.rust .doccomment { } a.test-arrow { - display: inline-block; visibility: hidden; position: absolute; padding: 5px 10px 5px 10px; @@ -1212,6 +1188,12 @@ a.test-arrow { top: 5px; right: 5px; z-index: 1; + color: var(--test-arrow-color); + background-color: var(--test-arrow-background-color); +} +a.test-arrow:hover { + color: var(--test-arrow-hover-color); + background-color: var(--test-arrow-hover-background-color); } .example-wrap:hover .test-arrow { visibility: visible; @@ -1231,12 +1213,6 @@ a.test-arrow { font-size: 1.25rem; } -h3.variant { - font-weight: 600; - font-size: 1.125rem; - margin-bottom: 10px; -} - .sub-variant h4 { font-size: 1rem; font-weight: 400; @@ -1253,59 +1229,40 @@ h3.variant { margin-left: 24px; } -:target > code, :target > .code-header { - opacity: 1; -} - :target { padding-right: 3px; + background-color: var(--target-background-color); + border-right: 3px solid var(--target-border-color); } -.notable-traits-tooltip { - display: inline-block; - cursor: pointer; -} - -.notable-traits:hover .notable-traits-tooltiptext, -.notable-traits .notable-traits-tooltiptext.force-tooltip { - display: inline-block; +.notable-traits { + color: inherit; + margin-right: 15px; + position: relative; } -.notable-traits .notable-traits-tooltiptext { - display: none; - padding: 5px 3px 3px 3px; - border-radius: 6px; - margin-left: 5px; - z-index: 10; - font-size: 1rem; - cursor: default; +/* 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 */ +.notable-traits:hover::after { position: absolute; - border: 1px solid; -} - -.notable-traits-tooltip::after { - /* The margin on the tooltip does not capture hover events, - this extends the area of hover enough so that mouse hover is not - lost when moving the mouse to the tooltip */ - content: "\00a0\00a0\00a0"; -} - -.notable-traits .docblock { - margin: 0; + top: calc(100% - 10px); + left: -15px; + right: -15px; + height: 20px; + content: "\00a0"; } -.notable-traits .notable { - margin: 0; - margin-bottom: 13px; - font-size: 1.1875rem; - font-weight: 600; - display: block; +.notable .docblock { + margin: 0.25em 0.5em; } -.notable-traits .docblock code.content { +.notable .docblock pre, .notable .docblock code { + background: transparent; margin: 0; padding: 0; font-size: 1.25rem; + white-space: pre-wrap; } .search-failed { @@ -1335,7 +1292,6 @@ h3.variant { #titles > button { text-align: center; font-size: 1.125rem; - cursor: pointer; border: 0; border-top: 2px solid; flex: 1; @@ -1348,12 +1304,6 @@ h3.variant { font-size: 1rem; } -.notable-traits { - cursor: pointer; - z-index: 2; - margin-left: 5px; -} - #sidebar-toggle { position: sticky; top: 0; @@ -1362,8 +1312,8 @@ h3.variant { border-bottom: 1px solid; display: flex; height: 40px; - justify-content: center; - align-items: center; + justify-content: stretch; + align-items: stretch; z-index: 10; } #source-sidebar { @@ -1376,44 +1326,51 @@ h3.variant { border-bottom: 1px solid var(--border-color); margin-bottom: 6px; } +#source-sidebar div.files > a:hover, details.dir-entry summary:hover, +#source-sidebar div.files > a:focus, details.dir-entry summary:focus { + background-color: var(--source-sidebar-background-hover); +} +#source-sidebar div.files > a.selected { + background-color: var(--source-sidebar-background-selected); +} #sidebar-toggle > button { font-size: inherit; font-weight: bold; background: none; color: inherit; - cursor: pointer; text-align: center; border: none; outline: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - /* work around button layout strangeness: https://stackoverflow.com/q/7271561 */ - width: 100%; + flex: 1 1; /* iOS button gradient: https://stackoverflow.com/q/5438567 */ -webkit-appearance: none; opacity: 1; } #settings-menu, #help-button { margin-left: 4px; - outline: none; + display: flex; } #settings-menu > a, #help-button > a, #copy-path { width: 33px; - cursor: pointer; - line-height: 1.5; } #settings-menu > a, #help-button > a { - padding: 5px; - height: 100%; - display: block; + display: flex; + align-items: center; + justify-content: center; background-color: var(--button-background-color); border: 1px solid var(--border-color); border-radius: 2px; + color: var(--settings-button-color); + /* 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; +} + +#settings-menu > a:hover, #settings-menu > a:focus, +#help-button > a:hover, #help-button > a:focus { + border-color: var(--settings-button-border-focus); } #copy-path { @@ -1444,14 +1401,6 @@ h3.variant { animation: rotating 2s linear infinite; } -#help-button > a { - text-align: center; - /* 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; - padding-top: 2px; -} - kbd { display: inline-block; padding: 3px 5px; @@ -1461,6 +1410,9 @@ kbd { border: solid 1px var(--border-color); border-radius: 3px; cursor: default; + color: var(--kbd--color); + background-color: var(--kbd-background); + box-shadow: inset 0 -1px 0 var(--kbd-box-shadow-color); } ul.all-items > li { @@ -1522,6 +1474,7 @@ details.rustdoc-toggle { "Expand description" or "Show methods". */ details.rustdoc-toggle > summary.hideme { cursor: pointer; + font-size: 1rem; } details.rustdoc-toggle > summary { @@ -1539,15 +1492,15 @@ details.rustdoc-toggle > summary.hideme > span { } details.rustdoc-toggle > summary::before { + background: url("toggle-plus-1092eb4930d581b0.svg") no-repeat top left; content: ""; cursor: pointer; width: 16px; height: 16px; - background-repeat: no-repeat; - background-position: top left; display: inline-block; vertical-align: middle; opacity: .5; + filter: var(--toggle-filter); } details.rustdoc-toggle > summary.hideme > span, @@ -1584,13 +1537,6 @@ details.rustdoc-toggle > summary:focus-visible::before { outline-offset: 1px; } -details.rustdoc-toggle.top-doc > summary, -details.rustdoc-toggle.top-doc > summary::before, -details.rustdoc-toggle.non-exhaustive > summary, -details.rustdoc-toggle.non-exhaustive > summary::before { - font-size: 1rem; -} - details.non-exhaustive { margin-bottom: 8px; } @@ -1623,27 +1569,11 @@ details.rustdoc-toggle[open] > summary.hideme > span { display: none; } -details.rustdoc-toggle[open] > summary::before, -details.rustdoc-toggle[open] > summary.hideme::before { - background-image: /* AUTOREPLACE: */url("toggle-minus.svg"); +details.rustdoc-toggle[open] > summary::before { + background: url("toggle-minus-31bbd6e4c77f5c96.svg") no-repeat top left; } -details.rustdoc-toggle > summary::before { - background-image: /* AUTOREPLACE: */url("toggle-plus.svg"); -} - -details.rustdoc-toggle[open] > summary::before, -details.rustdoc-toggle[open] > summary.hideme::before { - width: 16px; - height: 16px; - background-repeat: no-repeat; - background-position: top left; - display: inline-block; - content: ""; -} - -details.rustdoc-toggle[open] > summary::after, -details.rustdoc-toggle[open] > summary.hideme::after { +details.rustdoc-toggle[open] > summary::after { content: "Collapse"; } @@ -1677,7 +1607,6 @@ in storage.js } .rustdoc { - padding-top: 0px; /* Sidebar should overlay main content, rather than pushing main content to the right. Turn off `display: flex` on the body element. */ display: block; @@ -1702,10 +1631,6 @@ in storage.js content: "Since "; } - #copy-path { - display: none; - } - /* Hide the logo and item name from the sidebar. Those are displayed in the mobile-topbar instead. */ .sidebar .sidebar-logo, @@ -1719,12 +1644,10 @@ in storage.js /* 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; - margin-left: 0; - margin: 0; - padding: 0; z-index: 11; /* Reduce height slightly to account for mobile topbar. */ height: calc(100vh - 45px); + width: 200px; } /* The source view uses a different design for the sidebar toggle, and doesn't have a topbar, @@ -1765,16 +1688,10 @@ in storage.js white-space: nowrap; } - .mobile-topbar .logo-container { - max-height: 45px; - } - .mobile-topbar .logo-container > img { max-width: 35px; max-height: 35px; - margin-left: 20px; - margin-top: 5px; - margin-bottom: 5px; + margin: 5px 0 5px 20px; } .mobile-topbar { @@ -1800,7 +1717,6 @@ in storage.js .sidebar-elems { margin-top: 1em; - background-color: var(--sidebar-background-color); } .content { @@ -1815,21 +1731,6 @@ in storage.js display: block; } - /* Because of ios, we need to actually have a full height sidebar title so the - * actual sidebar can show up. But then we need to make it transparent so we don't - * hide content. The filler just allows to create the background for the sidebar - * title. But because of the absolute position, I had to lower the z-index. - */ - #sidebar-filler { - position: fixed; - left: 45px; - width: calc(100% - 45px); - top: 0; - height: 45px; - z-index: -1; - border-bottom: 1px solid; - } - #main-content > details.rustdoc-toggle > summary::before, #main-content > div > details.rustdoc-toggle > summary::before { left: -11px; @@ -1846,7 +1747,6 @@ in storage.js z-index: 10; border-top-right-radius: 3px; border-bottom-right-radius: 3px; - cursor: pointer; border: 1px solid; border-left: 0; } @@ -1862,37 +1762,22 @@ in storage.js border-bottom: 1px solid; } - .notable-traits .notable-traits-tooltiptext { - left: 0; - top: 100%; - } - - /* We don't display the help button on mobile devices. */ - #help-button { + /* We don't display these buttons on mobile devices. */ + #copy-path, #help-button { display: none; } /* Display an alternating layout on tablets and phones */ - .item-table { + .item-table, .item-row, .item-left, .item-right, + .search-results > a, .search-results > a > div { display: block; } - .item-row { - display: flex; - flex-flow: column wrap; - } - .item-left, .item-right { - width: 100%; - } /* Display an alternating layout on tablets and phones */ .search-results > a { - border-bottom: 1px solid #aaa9; padding: 5px 0px; } - .search-results .result-name, .search-results div.desc { - width: 100%; - } - .search-results div.desc, .item-right { + .search-results > a > div.desc, .item-right { padding-left: 2em; } @@ -1922,6 +1807,22 @@ in storage.js } } +/* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */ +@media (min-width: 701px) { + /* 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. */ + .scraped-example-title { + position: absolute; + z-index: 10; + background: var(--main-background-color); + bottom: 8px; + right: 5px; + padding: 2px 4px; + box-shadow: 0 0 4px var(--main-background-color); + } +} + @media print { nav.sidebar, nav.sub, .out-of-band, a.srclink, #copy-path, details.rustdoc-toggle[open] > summary::before, details.rustdoc-toggle > summary::before, @@ -1969,24 +1870,28 @@ in storage.js } } -.method-toggle > summary, +.variant, .implementors-toggle > summary, .impl, #implementors-list > .docblock, .impl-items > section, -.methods > section +.impl-items > .rustdoc-toggle > summary, +.methods > section, +.methods > .rustdoc-toggle > summary { margin-bottom: 0.75em; } -.method-toggle[open]:not(:last-child), +.variants > .docblock, +.impl-items > .rustdoc-toggle[open]:not(:last-child), +.methods > .rustdoc-toggle[open]:not(:last-child), .implementors-toggle[open]:not(:last-child) { margin-bottom: 2em; } -#trait-implementations-list .method-toggle:not(:last-child), -#synthetic-implementations-list .method-toggle:not(:last-child), -#blanket-implementations-list .method-toggle:not(:last-child) { +#trait-implementations-list .impl-items > .rustdoc-toggle:not(:last-child), +#synthetic-implementations-list .impl-items > .rustdoc-toggle:not(:last-child), +#blanket-implementations-list .impl-items > .rustdoc-toggle:not(:last-child) { margin-bottom: 1em; } @@ -1999,12 +1904,16 @@ in storage.js font-size: 12px; position: relative; bottom: 1px; - background: transparent; border-width: 1px; border-style: solid; border-radius: 50px; } +.scraped-example { + /* So .scraped-example-title can be positioned absolutely */ + position: relative; +} + .scraped-example .code-wrapper { position: relative; display: flex; @@ -2014,54 +1923,62 @@ in storage.js } .scraped-example:not(.expanded) .code-wrapper { - max-height: 240px; + /* 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); } .scraped-example:not(.expanded) .code-wrapper pre { overflow-y: hidden; - max-height: 240px; padding-bottom: 0; + /* See above comment, should be the same max-height. */ + max-height: calc(1.5em * 5 + 10px); } -.scraped-example .code-wrapper .prev { +.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper, +.more-scraped-examples .scraped-example:not(.expanded) .code-wrapper pre { + /* See above comment, except this height is based on HIDDEN_MAX_LINES. */ + max-height: calc(1.5em * 10 + 10px); +} + +.scraped-example .code-wrapper .next, +.scraped-example .code-wrapper .prev, +.scraped-example .code-wrapper .expand { + color: var(--main-color); position: absolute; top: 0.25em; + z-index: 1; + padding: 0; + background: none; + border: none; + /* iOS button gradient: https://stackoverflow.com/q/5438567 */ + -webkit-appearance: none; + opacity: 1; +} +.scraped-example .code-wrapper .prev { right: 2.25em; - z-index: 100; - cursor: pointer; } - .scraped-example .code-wrapper .next { - position: absolute; - top: 0.25em; right: 1.25em; - z-index: 100; - cursor: pointer; } - .scraped-example .code-wrapper .expand { - position: absolute; - top: 0.25em; right: 0.25em; - z-index: 100; - cursor: pointer; } -.scraped-example:not(.expanded) .code-wrapper:before { +.scraped-example:not(.expanded) .code-wrapper:before, +.scraped-example:not(.expanded) .code-wrapper:after { content: " "; width: 100%; height: 5px; position: absolute; - z-index: 100; + z-index: 1; +} +.scraped-example:not(.expanded) .code-wrapper:before { top: 0; } - .scraped-example:not(.expanded) .code-wrapper:after { - content: " "; - width: 100%; - height: 5px; - position: absolute; - z-index: 100; bottom: 0; } @@ -2070,12 +1987,15 @@ in storage.js padding: 14px 0; } +.scraped-example .code-wrapper .src-line-numbers a, .scraped-example .code-wrapper .src-line-numbers span { padding: 0 14px; } .scraped-example .code-wrapper .example-wrap { - flex: 1; + display: grid; + grid-template-columns: max-content auto; + width: 100%; overflow-x: auto; overflow-y: hidden; margin-bottom: 0; |