From f0525da1242cc50297e7fa97f3ba148c2734bea8 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 20 Jan 2022 14:18:59 +0100 Subject: [PATCH] Unify search input and buttons size --- src/librustdoc/html/static/css/rustdoc.css | 83 +++++-------------- src/librustdoc/html/static/css/themes/ayu.css | 12 +-- .../html/static/css/themes/dark.css | 11 +-- .../html/static/css/themes/light.css | 13 +-- src/librustdoc/html/templates/page.html | 20 ++--- 5 files changed, 33 insertions(+), 106 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index bdd8aa430b2d1..d9fa257085633 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -873,11 +873,11 @@ h2.small-section-header > .anchor { .search-container { position: relative; - max-width: 960px; + display: flex; + height: 34px; } -.search-container > div { - display: inline-flex; - width: calc(100% - 63px); +.search-container > * { + height: 100%; } .search-results-title { display: inline; @@ -908,10 +908,8 @@ h2.small-section-header > .anchor { background-position: calc(100% - 1px) 56%; background-image: /* AUTOREPLACE: */url("down-arrow.svg"); } -.search-container > .top-button { - position: absolute; - right: 0; - top: 10px; +.search-container { + margin-top: 4px; } .search-input { /* Override Normalize.css: it has a rule that sets @@ -924,23 +922,14 @@ h2.small-section-header > .anchor { -moz-box-sizing: border-box !important; box-sizing: border-box !important; outline: none; - border: none; - border-radius: 1px; - margin-top: 5px; - padding: 10px 16px; + border: 1px solid; + border-radius: 2px; + padding: 5px 8px; font-size: 1.0625rem; transition: border-color 300ms ease; - transition: border-radius 300ms ease-in-out; - transition: box-shadow 300ms ease-in-out; width: 100%; } -.search-input:focus { - border-radius: 2px; - border: 0; - outline: 0; -} - .search-results { display: none; padding-bottom: 2em; @@ -1414,8 +1403,8 @@ pre.rust { .theme-picker { position: absolute; - left: -34px; - top: 9px; + left: -38px; + top: 4px; } .theme-picker button { @@ -1423,34 +1412,27 @@ pre.rust { } #settings-menu, #help-button { - position: absolute; - top: 10px; -} - -#settings-menu { - right: 0; + margin-left: 4px; outline: none; } +#theme-picker, #copy-path { + height: 34px; +} #theme-picker, #settings-menu, #help-button, #copy-path { - padding: 4px; - /* Rare exception to specifying font sizes in rem. Since these are acting - as icons, it's okay to specify their sizes in pixels. */ - font-size: 16px; - width: 27px; - height: 29px; + padding: 5px; + width: 33px; border: 1px solid; - border-radius: 3px; + border-radius: 2px; cursor: pointer; } #help-button { - right: 30px; font-family: "Fira Sans", Arial, sans-serif; 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: 16px; + font-size: 20px; padding-top: 2px; } @@ -1887,10 +1869,6 @@ details.rustdoc-toggle[open] > summary.hideme::after { display: none !important; } - .theme-picker { - z-index: 1; - } - .notable-traits { position: absolute; left: -22px; @@ -1977,10 +1955,6 @@ details.rustdoc-toggle[open] > summary.hideme::after { width: 100%; } - .search-container > div { - width: calc(100% - 32px); - } - /* Display an alternating layout on tablets and phones */ .search-results > a { border-bottom: 1px solid #aaa9; @@ -2025,30 +1999,11 @@ details.rustdoc-toggle[open] > summary.hideme::after { width: 50%; } - .search-container > div { - display: block; - width: calc(100% - 37px); - } - #crate-search { border-radius: 4px; border: 0; } - #theme-picker, #settings-menu { - padding: 5px; - width: 31px; - height: 31px; - } - - #theme-picker { - margin-top: -2px; - } - - #settings-menu { - top: 7px; - } - .docblock { margin-left: 12px; } diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index 69097b81b9f1c..b217d0e27f3fc 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -233,22 +233,14 @@ details.undocumented > summary::before { filter: invert(100%); } -#crate-search { - color: #c5c5c5; +#crate-search, .search-input { background-color: #141920; - box-shadow: 0 0 0 1px #424c57,0 0 0 2px transparent; border-color: #424c57; + color: #c5c5c5; } .search-input { color: #ffffff; - background-color: #141920; - box-shadow: 0 0 0 1px #424c57,0 0 0 2px transparent; - transition: box-shadow 150ms ease-in-out; -} - -#crate-search+.search-input:focus { - box-shadow: 0 0 0 1px #148099,0 0 0 2px transparent; } .module-item .stab, diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 39165b2fc058f..ead1e08386e8f 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -194,27 +194,20 @@ details.undocumented > summary::before { filter: invert(100%); } -#crate-search { +#crate-search, .search-input { color: #111; background-color: #f0f0f0; border-color: #000; - box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent; } .search-input { - color: #111; - background-color: #f0f0f0; - box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent; + border-color: #e0e0e0; } .search-input:focus { border-color: #008dfd; } -#crate-search + .search-input:focus { - box-shadow: 0 0 8px 4px #078dd8; -} - .module-item .stab, .import-item .stab { color: #ddd; diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 448c9ac603c82..cd77b80cd385f 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -186,27 +186,16 @@ details.undocumented > summary::before { color: #999; } -#crate-search { +#crate-search, .search-input { color: #555; background-color: white; border-color: #e0e0e0; - box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent; -} - -.search-input { - color: #555; - background-color: white; - box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent; } .search-input:focus { border-color: #66afe9; } -#crate-search + .search-input:focus { - box-shadow: 0 0 8px #078dd8; -} - .module-item .stab, .import-item .stab { color: #000; diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 1322b854b7fc7..3325515bef606 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -110,25 +110,23 @@