diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index c6933a8254bc2..69409b77251cb 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -949,7 +949,7 @@ table, #crate-search { min-width: 115px; margin-top: 5px; - padding-left: 0.3125em; + padding-left: 0.15em; padding-right: 23px; border: 1px solid; border-radius: 4px; @@ -958,8 +958,6 @@ table, -moz-appearance: none; -webkit-appearance: none; /* Removes default arrow from firefox */ - text-indent: 0.01px; - text-overflow: ""; background-repeat: no-repeat; background-color: transparent; background-size: 20px; @@ -986,7 +984,6 @@ table, border-radius: 2px; padding: 8px; font-size: 1rem; - transition: border-color 300ms ease; width: 100%; } diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index 142ce456c5213..7ff8063904ace 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -184,7 +184,13 @@ details.rustdoc-toggle > summary::before { #crate-search, .search-input { background-color: #141920; - /* Without the `!important`, the border-color is ignored for ``... + It cannot be in the group above because `.search-input` has a different border color on + hover. */ border-color: #424c57 !important; } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index aeaca7515f962..8e753f5768206 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -159,7 +159,13 @@ details.rustdoc-toggle > summary::before { #crate-search, .search-input { color: #111; background-color: #f0f0f0; - /* Without the `!important`, the border-color is ignored for ``... + It cannot be in the group above because `.search-input` has a different border color on + hover. */ border-color: #f0f0f0 !important; } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 54d1a7b65d665..40d965c39c390 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -146,7 +146,13 @@ details.rustdoc-toggle > summary::before { #crate-search, .search-input { background-color: white; - /* Without the `!important`, the border-color is ignored for ``... + It cannot be in the group above because `.search-input` has a different border color on + hover. */ border-color: #e0e0e0 !important; } diff --git a/src/test/rustdoc-gui/search-input.goml b/src/test/rustdoc-gui/search-input.goml new file mode 100644 index 0000000000000..44123b702df8a --- /dev/null +++ b/src/test/rustdoc-gui/search-input.goml @@ -0,0 +1,23 @@ +// Ensures that the search input border color changes on focus. +goto: file://|DOC_PATH|/test_docs/index.html +local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "dark"} +reload: + +assert-css: (".search-input", {"border-color": "rgb(224, 224, 224)"}) +click: ".search-input" +focus: ".search-input" +assert-css: (".search-input", {"border-color": "rgb(0, 141, 253)"}) + +local-storage: {"rustdoc-theme": "light"} +reload: + +assert-css: (".search-input", {"border-color": "rgb(224, 224, 224)"}) +click: ".search-input" +assert-css: (".search-input", {"border-color": "rgb(102, 175, 233)"}) + +local-storage: {"rustdoc-theme": "ayu"} +reload: + +assert-css: (".search-input", {"border-color": "rgb(66, 76, 87)"}) +click: ".search-input" +assert-css: (".search-input", {"border-color": "rgb(66, 76, 87)"}) diff --git a/src/test/rustdoc-gui/search-result-display.goml b/src/test/rustdoc-gui/search-result-display.goml index 6295d7fae8907..8464ba7c23cfe 100644 --- a/src/test/rustdoc-gui/search-result-display.goml +++ b/src/test/rustdoc-gui/search-result-display.goml @@ -18,7 +18,7 @@ assert-css: (".search-results div.desc", {"width": "570px"}) size: (900, 900) // First we check the current width and position. -assert-css: ("#crate-search", {"width": "222px"}) +assert-css: ("#crate-search", {"width": "218px"}) compare-elements-position-near: ( "#crate-search", "#search-settings .search-results-title",