From 1a7bcfb386a0485ccf7b448efdf0416cc10a0aac Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Tue, 1 Feb 2022 01:05:00 -0800 Subject: [PATCH 1/3] rustdoc: fix colors for top buttons and search Make sure the top buttons and search have the same border color and the same color for the icon inside. --- src/librustdoc/html/static/css/rustdoc.css | 1 - src/librustdoc/html/static/css/themes/ayu.css | 21 +++++++------ .../html/static/css/themes/dark.css | 25 +++++++++------- .../html/static/css/themes/light.css | 30 +++++++++++-------- src/test/rustdoc-gui/headers-color.goml | 15 ++++++++-- 5 files changed, 55 insertions(+), 37 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 78e7c97d71d25..87395f1cff3b6 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -902,7 +902,6 @@ table, margin-left: 0.25em; padding-left: 0.3125em; padding-right: 23px; - border: 0; border-radius: 4px; outline: none; cursor: pointer; diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index e402b3583f399..b0855f5bf4591 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -234,14 +234,19 @@ details.undocumented > summary::before { filter: invert(100%); } -#crate-search, .search-input { +#theme-picker, #settings-menu, #help-button, +#crate-search, .search-input, .search-input::placeholder { background-color: #141920; border-color: #424c57; - color: #c5c5c5; + color: grey; +} + +#crate-search { + color: white; } .search-input { - color: #ffffff; + color: white; } .module-item .stab, @@ -531,16 +536,14 @@ kbd { box-shadow: inset 0 -1px 0 #5c6773; } -#theme-picker, #settings-menu, #help-button { - border-color: #5c6773; - background-color: #0f1419; - color: #fff; -} - #theme-picker > img, #settings-menu > img { filter: invert(100); } +.sub-container img { + opacity: 50%; +} + #copy-path { color: #fff; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 0a56055b8cbf6..15a1f503475e6 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -214,14 +214,23 @@ details.undocumented > summary::before { filter: invert(100%); } -#crate-search, .search-input { - color: #111; - background-color: #f0f0f0; - border-color: #000; +#theme-picker, #settings-menu, #help-button, +#crate-search, .search-input, .search-input::placeholder { + color: grey; + background-color: #353535; + border-color: #505050; +} + +#theme-picker > img, #settings-menu > img { + filter: invert(50%); +} + +#crate-search { + color: white; } .search-input { - border-color: #e0e0e0; + color: white; } .search-input:focus { @@ -408,12 +417,6 @@ kbd { box-shadow: inset 0 -1px 0 #c6cbd1; } -#theme-picker, #settings-menu, #help-button { - border-color: #e0e0e0; - background: #f0f0f0; - color: #000; -} - #theme-picker:hover, #theme-picker:focus, #settings-menu:hover, #settings-menu:focus, #help-button:hover, #help-button:focus { diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index dc1715b2a78f3..1701ab243000c 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -208,12 +208,27 @@ details.undocumented > summary::before { color: #999; } -#crate-search, .search-input { - color: #555; +#theme-picker:hover, #theme-picker:focus, +#settings-menu:hover, #settings-menu:focus, +#help-button:hover, #help-button:focus { + border-color: #717171; +} + +#theme-picker, #settings-menu, #help-button, +#crate-search, .search-input, .search-input::placeholder { + color: grey; background-color: white; border-color: #e0e0e0; } +#crate-search { + color: black; +} + +.sub-container img { + opacity: 50%; +} + .search-input:focus { border-color: #66afe9; } @@ -394,17 +409,6 @@ kbd { box-shadow: inset 0 -1px 0 #c6cbd1; } -#theme-picker, #settings-menu, #help-button { - border-color: #e0e0e0; - background-color: #fff; -} - -#theme-picker:hover, #theme-picker:focus, -#settings-menu:hover, #settings-menu:focus, -#help-button:hover, #help-button:focus { - border-color: #717171; -} - #copy-path { color: #999; } diff --git a/src/test/rustdoc-gui/headers-color.goml b/src/test/rustdoc-gui/headers-color.goml index cf9caa2d5866a..a55d20299111c 100644 --- a/src/test/rustdoc-gui/headers-color.goml +++ b/src/test/rustdoc-gui/headers-color.goml @@ -19,10 +19,13 @@ assert-css: ( ) assert-css: ( ".impl .code-header", - {"color": "rgb(230, 225, 207)", "background-color": "rgb(15, 20, 25)"}, + {"color": "rgb(230, 225, 207)", "background-color": "rgba(0, 0, 0, 0)"}, ALL, ) +compare-elements-css: ("#settings-menu", "#help-button", ["border-color", "background-color", "color"]) +compare-elements-css: ("#settings-menu", ".search-input", ["border-color", "color"]) + goto: file://|DOC_PATH|/test_docs/struct.Foo.html#impl assert-css: ( "#impl", @@ -58,7 +61,7 @@ assert-css: ( ) assert-css: ( ".impl .code-header", - {"color": "rgb(221, 221, 221)", "background-color": "rgb(53, 53, 53)"}, + {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"}, ALL, ) @@ -75,6 +78,9 @@ assert-css: ( ALL, ) +compare-elements-css: ("#settings-menu", "#help-button", ["border-color", "background-color", "color"]) +compare-elements-css: ("#settings-menu", ".search-input", ["border-color", "color"]) + goto: file://|DOC_PATH|/test_docs/index.html assert-css: (".small-section-header a", {"color": "rgb(221, 221, 221)"}, ALL) @@ -95,10 +101,13 @@ assert-css: ( ) assert-css: ( ".impl .code-header", - {"color": "rgb(0, 0, 0)", "background-color": "rgb(255, 255, 255)"}, + {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"}, ALL, ) +compare-elements-css: ("#settings-menu", "#help-button", ["border-color", "background-color", "color"]) +compare-elements-css: ("#settings-menu", ".search-input", ["border-color", "color"]) + goto: file://|DOC_PATH|/test_docs/struct.Foo.html#impl assert-css: ("#impl", {"color": "rgb(0, 0, 0)", "background-color": "rgb(253, 255, 211)"}) From 2c9b9130c4a294d15404b2b082eb48d0a819ccfe Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Tue, 1 Feb 2022 01:12:52 -0800 Subject: [PATCH 2/3] rustdoc: remove background-color on .in-band This was overwriting the style for :target on impl headings. Instead of showing the whole summary as yellow (on light theme), it would show part of the summary as white and part as yellow. --- src/librustdoc/html/static/css/themes/ayu.css | 4 ---- src/librustdoc/html/static/css/themes/dark.css | 4 ---- src/librustdoc/html/static/css/themes/light.css | 4 ---- 3 files changed, 12 deletions(-) diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index b0855f5bf4591..e69d93bec473e 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -26,10 +26,6 @@ h4 { border: none; } -.in-band { - background-color: #0f1419; -} - .invisible { background: rgba(0, 0, 0, 0); } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 15a1f503475e6..aac5948f27b3e 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -13,10 +13,6 @@ h2, h3, h4 { border-bottom-color: #d2d2d2; } -.in-band { - background-color: #353535; -} - .invisible { background: rgba(0, 0, 0, 0); } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 1701ab243000c..c6e3df4d98d77 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -15,10 +15,6 @@ h2, h3, h4 { border-bottom-color: #DDDDDD; } -.in-band { - background-color: white; -} - .invisible { background: rgba(0, 0, 0, 0); } From f62dc1464a2843f45ea70f331784424f52f95c2b Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Fri, 11 Feb 2022 22:16:37 -0800 Subject: [PATCH 3/3] Increase contrast for help and settings buttons --- library/stdarch | 2 +- src/librustdoc/html/static/css/themes/ayu.css | 8 -------- src/librustdoc/html/static/css/themes/dark.css | 14 +++----------- src/librustdoc/html/static/css/themes/light.css | 12 ++---------- 4 files changed, 6 insertions(+), 30 deletions(-) diff --git a/library/stdarch b/library/stdarch index 863d31b8e1314..eaee02ffdf5d8 160000 --- a/library/stdarch +++ b/library/stdarch @@ -1 +1 @@ -Subproject commit 863d31b8e1314e15d124384e5eaa9ab21e12bd79 +Subproject commit eaee02ffdf5d820729ccdf2f95fa08b08c7d24d2 diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index e69d93bec473e..85178492a62d8 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -237,14 +237,6 @@ details.undocumented > summary::before { color: grey; } -#crate-search { - color: white; -} - -.search-input { - color: white; -} - .module-item .stab, .import-item .stab { color: #000; diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index aac5948f27b3e..cbbb9e33a4c79 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -211,22 +211,14 @@ details.undocumented > summary::before { } #theme-picker, #settings-menu, #help-button, -#crate-search, .search-input, .search-input::placeholder { - color: grey; +#crate-search, .search-input { + color: white; background-color: #353535; border-color: #505050; } #theme-picker > img, #settings-menu > img { - filter: invert(50%); -} - -#crate-search { - color: white; -} - -.search-input { - color: white; + filter: invert(100%); } .search-input:focus { diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index c6e3df4d98d77..dcdc27fadf275 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -211,20 +211,12 @@ details.undocumented > summary::before { } #theme-picker, #settings-menu, #help-button, -#crate-search, .search-input, .search-input::placeholder { - color: grey; +#crate-search, .search-input { + color: black; background-color: white; border-color: #e0e0e0; } -#crate-search { - color: black; -} - -.sub-container img { - opacity: 50%; -} - .search-input:focus { border-color: #66afe9; }