From ea8deb0f66e3471d7d202246c6be18af8cb4682d Mon Sep 17 00:00:00 2001 From: Manuel Kaufmann Date: Wed, 15 Jan 2025 16:41:05 +0100 Subject: [PATCH 1/4] Searhc: small updates on look & feel Based on my feedback from #496 --- src/search.css | 51 ++++++++++++++++++++++---------------------------- 1 file changed, 22 insertions(+), 29 deletions(-) diff --git a/src/search.css b/src/search.css index 77cf9720..448e265d 100644 --- a/src/search.css +++ b/src/search.css @@ -17,7 +17,7 @@ width: 100%; height: 100%; z-index: 3000; - line-height: 1.875; + line-height: 1; } :host > div a { @@ -61,16 +61,15 @@ right: 0; bottom: 0; z-index: 100000; - height: 60%; + height: 80%; width: 60%; - max-height: 1000px; - max-width: 1500px; + max-width: 700px; overflow-y: hidden; display: flex; flex-direction: column; border: 1px solid var(--readthedocs-search-content-border-color, #e0e0e0); border-radius: 0.7rem; - line-height: 1.875; + line-height: 1.75; background-color: var(--readthedocs-search-content-background-color, #fcfcfc); box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 5px 5px, @@ -80,9 +79,9 @@ :host > div form { background-color: var(--readthedocs-search-input-background-color, #eaeaea); - margin: 1.2rem; + margin: 0.5rem; border-radius: 0.25em; - font-size: 1.15em; + font-size: 1.05em; padding: 5px; display: flex; } @@ -94,7 +93,7 @@ :host > div form > label { font-size: 1.15em; - padding-left: 10px; + padding-left: 5px; color: #333; } @@ -118,24 +117,17 @@ :host > div .results { margin-top: 10px; - padding: 1.15em; + padding: 0.5em; overflow-y: scroll; height: 100%; hyphens: auto; } div.hit-block { - padding: 10px; - border-radius: 0.3rem; - border-style: solid; - border-width: 1px; - border-color: var(--readthedocs-search-result-section-border-color, #a0a0a0); - margin-bottom: 5px; - + padding-top: 3px; + border-top: 1px solid rgb(224, 224, 224); display: flex; flex-direction: column; - - box-shadow: 2px 2px 8px 0 rgba(34, 36, 38, 0.08); } div.hit-block a.hit-block-heading { @@ -154,8 +146,8 @@ div.hit-block .hit-block-heading-container .close-icon { font-size: 1.15em; width: 1em; padding-right: 10px; - margin-bottom: 15px; - color: #333; + color: #999; + padding-top: 5px; } button.close-icon { @@ -199,12 +191,10 @@ div.hit-block .hit-block-heading-container svg { :host > div .results h2 { display: inline-block; font-weight: 700; - margin-bottom: 15px; - margin-top: 0; - font-size: 1.15em; + margin-top: 3px; + margin-bottom: 5px; + font-size: 1em; color: black; - border-bottom: 1px solid - var(--readthedocs-search-result-section-border-color, #a0a0a0); line-height: inherit; } @@ -218,7 +208,7 @@ div.hit-block .hit-block-heading-container svg { } :host > div .results .hit .subheading { - color: var(--readthedocs-search-result-section-subheading-color, #999); + color: var(--readthedocs-search-result-section-subheading-color, #888); font-weight: 700; font-size: 15px; margin-right: 10px; @@ -230,7 +220,7 @@ div.hit-block .hit-block-heading-container svg { :host > div .results .hit .content { margin: 0; text-decoration: none; - color: black; + color: #999; font-size: 15px; display: block; margin-bottom: 5px; @@ -269,11 +259,13 @@ div.hit-block .hit-block-heading-container svg { :host > div .credits { float: right; margin: 0 15px; + font-size: small; + padding-top: 3px; } :host > div .credits a img { display: inline-block; - width: 125px; + width: 100px; vertical-align: middle; } @@ -297,7 +289,7 @@ div.hit-block .hit-block-heading-container svg { :host > div .filters { position: relative; padding-top: 0.9rem; - margin: 0 1.15em; + margin: 0 0.5em; } :host > div .filters ul { @@ -308,6 +300,7 @@ div.hit-block .hit-block-heading-container svg { border-style: solid; border-width: 1px; border-color: var(--readthedocs-search-filters-border-color, #e0e0e0); + border-bottom: 1px solid #e0e0e0; } :host > div .filters li { From 213980d9bf489f69bc95ecf44bb87a34ab80d481 Mon Sep 17 00:00:00 2001 From: Manuel Kaufmann Date: Wed, 15 Jan 2025 16:46:22 +0100 Subject: [PATCH 2/4] Give some space to each hit block --- src/search.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/search.css b/src/search.css index 448e265d..4ff21bb4 100644 --- a/src/search.css +++ b/src/search.css @@ -128,6 +128,7 @@ div.hit-block { border-top: 1px solid rgb(224, 224, 224); display: flex; flex-direction: column; + margin-bottom: 10px; } div.hit-block a.hit-block-heading { From 7dbdc49aa1e906501c6ddfcde2be542853c93c46 Mon Sep 17 00:00:00 2001 From: Manuel Kaufmann Date: Thu, 16 Jan 2025 11:35:13 +0100 Subject: [PATCH 3/4] Update colors based on feedback --- src/search.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/search.css b/src/search.css index 4ff21bb4..2403bcf5 100644 --- a/src/search.css +++ b/src/search.css @@ -17,7 +17,7 @@ width: 100%; height: 100%; z-index: 3000; - line-height: 1; + line-height: 1rem; } :host > div a { @@ -69,7 +69,7 @@ flex-direction: column; border: 1px solid var(--readthedocs-search-content-border-color, #e0e0e0); border-radius: 0.7rem; - line-height: 1.75; + line-height: 1.75rem; background-color: var(--readthedocs-search-content-background-color, #fcfcfc); box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 5px 5px, @@ -147,7 +147,7 @@ div.hit-block .hit-block-heading-container .close-icon { font-size: 1.15em; width: 1em; padding-right: 10px; - color: #999; + color: rgba(0, 0, 0, 0.54); padding-top: 5px; } @@ -209,7 +209,10 @@ div.hit-block .hit-block-heading-container svg { } :host > div .results .hit .subheading { - color: var(--readthedocs-search-result-section-subheading-color, #888); + color: var( + --readthedocs-search-result-section-subheading-color, + rgba(0, 0, 0, 0.64) + ); font-weight: 700; font-size: 15px; margin-right: 10px; @@ -221,7 +224,7 @@ div.hit-block .hit-block-heading-container svg { :host > div .results .hit .content { margin: 0; text-decoration: none; - color: #999; + color: rgba(0, 0, 0, 0.54); font-size: 15px; display: block; margin-bottom: 5px; From de7b73e7981f527b8fa6ac9aba3aef34c7f362aa Mon Sep 17 00:00:00 2001 From: Manuel Kaufmann Date: Mon, 20 Jan 2025 11:08:46 +0100 Subject: [PATCH 4/4] Use `em` for `max-width` --- src/search.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/search.css b/src/search.css index 2403bcf5..0a0d6a9f 100644 --- a/src/search.css +++ b/src/search.css @@ -63,7 +63,7 @@ z-index: 100000; height: 80%; width: 60%; - max-width: 700px; + max-width: 43em; overflow-y: hidden; display: flex; flex-direction: column;