From 7aa4a205a83bfbdba1131ee8a6463d5c029bb089 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 26 Jan 2023 13:32:33 -0700 Subject: rustdoc: merge doctest tooltip with notable traits tooltip Fixes https://discord.com/channels/442252698964721669/443150878111694848/1066420140167680000 Fixes #91100 --- src/librustdoc/html/static/css/rustdoc.css | 54 +++++------------------------- 1 file changed, 9 insertions(+), 45 deletions(-) (limited to 'src/librustdoc/html/static/css/rustdoc.css') diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index bf83ff2044e..437b8748c1d 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -697,8 +697,8 @@ h2.small-section-header > .anchor { .main-heading a:hover, .example-wrap > pre.rust a:hover, .all-items a:hover, -.docblock a:not(.test-arrow):not(.scrape-help):hover, -.docblock-short a:not(.test-arrow):not(.scrape-help):hover, +.docblock a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover, +.docblock-short a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover, .item-info a { text-decoration: underline; } @@ -1093,44 +1093,8 @@ pre.rust .doccomment { display: block; left: -25px; top: 5px; -} - -.example-wrap .tooltip:hover::after { - padding: 5px 3px 3px 3px; - border-radius: 6px; - margin-left: 5px; - font-size: 1rem; - border: 1px solid var(--border-color); - position: absolute; - width: max-content; - top: -2px; - z-index: 1; - background-color: var(--tooltip-background-color); - color: var(--tooltip-color); -} - -.example-wrap .tooltip:hover::before { - content: " "; - position: absolute; - top: 50%; - left: 16px; - margin-top: -5px; - z-index: 1; - border: 5px solid transparent; - border-right-color: var(--tooltip-background-color); -} - -.example-wrap.ignore .tooltip:hover::after { - content: "This example is not tested"; -} -.example-wrap.compile_fail .tooltip:hover::after { - content: "This example deliberately fails to compile"; -} -.example-wrap.should_panic .tooltip:hover::after { - content: "This example panics"; -} -.example-wrap.edition .tooltip:hover::after { - content: "This code runs with edition " attr(data-edition); + margin: 0; + line-height: 1; } .example-wrap.compile_fail .tooltip, @@ -1196,7 +1160,7 @@ a.test-arrow:hover { border-right: 3px solid var(--target-border-color); } -.notable-traits { +.code-header a.tooltip { color: inherit; margin-right: 15px; position: relative; @@ -1205,7 +1169,7 @@ a.test-arrow:hover { /* 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 { +a.tooltip:hover::after { position: absolute; top: calc(100% - 10px); left: -15px; @@ -1214,11 +1178,11 @@ a.test-arrow:hover { content: "\00a0"; } -.notable .content { +.popover.tooltip .content { margin: 0.25em 0.5em; } -.notable .content pre, .notable .content code { +.popover.tooltip .content pre, .popover.tooltip .content code { background: transparent; margin: 0; padding: 0; @@ -1226,7 +1190,7 @@ a.test-arrow:hover { white-space: pre-wrap; } -.notable .content > h3:first-child { +.popover.tooltip .content > h3:first-child { margin: 0 0 5px 0; } -- cgit 1.4.1-3-g733a5 From b0df355f80647ca94e6676e1f5bd6990ae17086e Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Sun, 12 Feb 2023 12:27:40 -0700 Subject: rustdoc: use tighter line height in h1 and h2 --- src/librustdoc/html/static/css/rustdoc.css | 8 ++++++++ tests/rustdoc-gui/mobile.goml | 2 +- tests/rustdoc-gui/scrape-examples-layout.goml | 8 ++++---- tests/rustdoc-gui/search-result-display.goml | 4 ++-- tests/rustdoc-gui/sidebar-mobile-scroll.goml | 6 +++--- tests/rustdoc-gui/sidebar-mobile.goml | 2 +- 6 files changed, 19 insertions(+), 11 deletions(-) (limited to 'src/librustdoc/html/static/css/rustdoc.css') diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 2a9548712f0..4f8f00f298a 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -174,6 +174,14 @@ h1, h2, h3, h4 { .top-doc .docblock > h4 { border-bottom: 1px solid var(--headings-border-bottom-color); } +/* 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; +} h3.code-header { font-size: 1.125rem; /* 18px */ } diff --git a/tests/rustdoc-gui/mobile.goml b/tests/rustdoc-gui/mobile.goml index 3e444cbd6dc..8c8516ebff8 100644 --- a/tests/rustdoc-gui/mobile.goml +++ b/tests/rustdoc-gui/mobile.goml @@ -12,7 +12,7 @@ assert-css: (".main-heading", { "flex-direction": "column" }) -assert-property: (".mobile-topbar h2", {"offsetHeight": 36}) +assert-property: (".mobile-topbar h2", {"offsetHeight": 33}) // Note: We can't use assert-text here because the 'Since' is set by CSS and // is therefore not part of the DOM. diff --git a/tests/rustdoc-gui/scrape-examples-layout.goml b/tests/rustdoc-gui/scrape-examples-layout.goml index 95102528ec1..dad727c7757 100644 --- a/tests/rustdoc-gui/scrape-examples-layout.goml +++ b/tests/rustdoc-gui/scrape-examples-layout.goml @@ -40,10 +40,10 @@ assert-property: ( store-value: (offset_y, 4) // First with desktop -assert-position: (".scraped-example .code-wrapper", {"y": 255}) -assert-position: (".scraped-example .code-wrapper .prev", {"y": 255 + |offset_y|}) +assert-position: (".scraped-example .code-wrapper", {"y": 253}) +assert-position: (".scraped-example .code-wrapper .prev", {"y": 253 + |offset_y|}) // Then with mobile size: (600, 600) -assert-position: (".scraped-example .code-wrapper", {"y": 314}) -assert-position: (".scraped-example .code-wrapper .prev", {"y": 314 + |offset_y|}) +assert-position: (".scraped-example .code-wrapper", {"y": 308}) +assert-position: (".scraped-example .code-wrapper .prev", {"y": 308 + |offset_y|}) diff --git a/tests/rustdoc-gui/search-result-display.goml b/tests/rustdoc-gui/search-result-display.goml index 43e608228d8..20a88c36edb 100644 --- a/tests/rustdoc-gui/search-result-display.goml +++ b/tests/rustdoc-gui/search-result-display.goml @@ -22,7 +22,7 @@ size: (900, 900) // First we check the current width, height and position. assert-css: ("#crate-search", {"width": "223px"}) -assert-css: (".search-results-title", {"height": "44px", "width": "640px"}) +assert-css: (".search-results-title", {"height": "50px", "width": "640px"}) assert-css: ("#search", {"width": "640px"}) // Then we update the text of one of the `