From ae5d0cbe74a07baef9eb92dde82b28feea8961cd Mon Sep 17 00:00:00 2001 From: Will Crichton Date: Thu, 27 Jan 2022 17:00:31 -0800 Subject: Improve alignment of additional scraped examples, add scrape examples help page --- src/librustdoc/html/static/css/rustdoc.css | 77 ++++++++++++++----------- src/librustdoc/html/static/css/themes/ayu.css | 16 ++++- src/librustdoc/html/static/css/themes/dark.css | 15 ++++- src/librustdoc/html/static/css/themes/light.css | 30 ++++++++++ 4 files changed, 100 insertions(+), 38 deletions(-) (limited to 'src/librustdoc/html/static/css') diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 42b66c70c4c..b278ab6b24d 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -618,7 +618,7 @@ h2.location a { position: relative; } -.docblock > :not(.information) { +.docblock > :not(.information):not(.more-examples-toggle) { max-width: 100%; overflow-x: auto; } @@ -836,8 +836,8 @@ h2.small-section-header > .anchor { content: 'ยง'; } -.docblock a:not(.srclink):not(.test-arrow):hover, -.docblock-short a:not(.srclink):not(.test-arrow):hover, .item-info a { +.docblock a:not(.srclink):not(.test-arrow):not(.scrape-help):hover, +.docblock-short a:not(.srclink):not(.test-arrow):not(.scrape-help):hover, .item-info a { text-decoration: underline; } @@ -2034,10 +2034,36 @@ details.rustdoc-toggle[open] > summary.hideme::after { /* Begin: styles for --scrape-examples feature */ +.scraped-example-list .section-header .scrape-help { + cursor: pointer; + border-radius: 2px; + margin-left: 10px; + padding: 0 4px; + font-weight: normal; + font-size: 12px; + position: relative; + bottom: 1px; + background: transparent; + border-width: 1px; + border-style: solid; +} + .scraped-example-title { font-family: 'Fira Sans'; } +.scraped-example .code-wrapper { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} + +.scraped-example:not(.expanded) .code-wrapper { + max-height: 240px; +} + .scraped-example:not(.expanded) .code-wrapper pre { overflow-y: hidden; max-height: 240px; @@ -2072,14 +2098,6 @@ details.rustdoc-toggle[open] > summary.hideme::after { cursor: pointer; } -.scraped-example .code-wrapper { - position: relative; - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; -} - .scraped-example:not(.expanded) .code-wrapper:before { content: " "; width: 100%; @@ -2087,7 +2105,6 @@ details.rustdoc-toggle[open] > summary.hideme::after { position: absolute; z-index: 100; top: 0; - background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); } .scraped-example:not(.expanded) .code-wrapper:after { @@ -2097,12 +2114,6 @@ details.rustdoc-toggle[open] > summary.hideme::after { position: absolute; z-index: 100; bottom: 0; - background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); -} - -.scraped-example:not(.expanded) .code-wrapper { - overflow: hidden; - max-height: 240px; } .scraped-example .code-wrapper .line-numbers { @@ -2121,34 +2132,37 @@ details.rustdoc-toggle[open] > summary.hideme::after { margin-bottom: 0; } +.scraped-example:not(.expanded) .code-wrapper .example-wrap { + overflow-x: hidden; +} + .scraped-example .code-wrapper .example-wrap pre.rust { overflow-x: inherit; width: inherit; overflow-y: hidden; } -.scraped-example .example-wrap .rust span.highlight { - background: #fcffd6; -} - -.scraped-example .example-wrap .rust span.highlight.focus { - background: #f6fdb0; -} .more-examples-toggle { + max-width: calc(100% + 25px); margin-top: 10px; + margin-left: -25px; +} + +.more-examples-toggle .hide-more { + margin-left: 25px; + margin-bottom: 5px; + cursor: pointer; } -.more-examples-toggle summary { - color: #999; +.more-examples-toggle summary, .more-examples-toggle .hide-more { font-family: 'Fira Sans'; } .more-scraped-examples { - margin-left: 25px; + margin-left: 5px; display: flex; flex-direction: row; - width: calc(100% - 25px); } .more-scraped-examples-inner { @@ -2164,13 +2178,8 @@ details.rustdoc-toggle[open] > summary.hideme::after { cursor: pointer; } -.toggle-line:hover .toggle-line-inner { - background: #aaa; -} - .toggle-line-inner { min-width: 2px; - background: #ddd; height: 100%; } diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index e402b3583f3..0fee0ba54fa 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -611,6 +611,18 @@ input:checked + .slider { background-color: #ffb454 !important; } + +.scraped-example-list .section-header .scrape-help { + border-color: #999; + color: #999; +} +.scraped-example-list .section-header .scrape-help:hover { + border-color: #c5c5c5; + color: #c5c5c5; +} +.more-examples-toggle summary, .more-examples-toggle .hide-more { + color: #999; +} .scraped-example .example-wrap .rust span.highlight { background: rgb(91, 59, 1); } @@ -624,8 +636,8 @@ input:checked + .slider { background: linear-gradient(to top, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0)); } .toggle-line-inner { - background: #616161; + background: #999; } .toggle-line:hover .toggle-line-inner { - background: #898989; + background: #c5c5c5; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 0a56055b8cb..e121c984dbd 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -478,6 +478,17 @@ div.files > .selected { border-bottom-color: #ddd; } +.scraped-example-list .section-header .scrape-help { + border-color: #999; + color: #999; +} +.scraped-example-list .section-header .scrape-help:hover { + border-color: #c5c5c5; + color: #c5c5c5; +} +.more-examples-toggle summary, .more-examples-toggle .hide-more { + color: #999; +} .scraped-example .example-wrap .rust span.highlight { background: rgb(91, 59, 1); } @@ -491,8 +502,8 @@ div.files > .selected { background: linear-gradient(to top, rgba(53, 53, 53, 1), rgba(53, 53, 53, 0)); } .toggle-line-inner { - background: #616161; + background: #999; } .toggle-line:hover .toggle-line-inner { - background: #898989; + background: #c5c5c5; } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index dc1715b2a78..be1da8df2b5 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -462,3 +462,33 @@ div.files > .selected { .setting-line > .title { border-bottom-color: #D5D5D5; } + +.scraped-example-list .section-header .scrape-help { + border-color: #999; + color: #999; +} +.scraped-example-list .section-header .scrape-help:hover { + border-color: black; + color: black; +} +.more-examples-toggle summary, .more-examples-toggle .hide-more { + color: #999; +} +.scraped-example .example-wrap .rust span.highlight { + background: #fcffd6; +} +.scraped-example .example-wrap .rust span.highlight.focus { + background: #f6fdb0; +} +.scraped-example:not(.expanded) .code-wrapper:before { + background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); +} +.scraped-example:not(.expanded) .code-wrapper:after { + background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); +} +.toggle-line-inner { + background: #ccc; +} +.toggle-line:hover .toggle-line-inner { + background: #999; +} -- cgit 1.4.1-3-g733a5