diff options
| author | Kuuuube <61125188+Kuuuube@users.noreply.github.com> | 2024-06-24 14:05:59 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-06-24 18:05:59 +0000 |
| commit | b884ec8295fbb75b338cfaf75911268fc89ec36a (patch) | |
| tree | c264fcab2609815d88f93aa52381a4236870760c | |
| parent | 6cd88b8f4b3a3355bba52726633e0b145bec1af6 (diff) | |
Make search sizing more sensible due to search textbox and query now being sticky (#1127)24.6.24.0
* Move search height into variables
* Lock max query height to roughly 2-2.5 lines
* Reduce search textbox max height to 5 lines
| -rw-r--r-- | ext/css/display.css | 1 | ||||
| -rw-r--r-- | ext/css/search.css | 16 |
2 files changed, 11 insertions, 6 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index 68f7bf11..4923318a 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -605,6 +605,7 @@ button.sidebar-button.sidebar-button-highlight { margin-top: 0.5em; font-size: var(--query-parser-font-size); white-space: pre-wrap; + max-height: calc(var(--query-parser-font-size) * 2); } #query-parser-content[data-term-spacing=true] .query-parser-term { margin-right: 0.2em; diff --git a/ext/css/search.css b/ext/css/search.css index 6bb20d42..a7f5f0da 100644 --- a/ext/css/search.css +++ b/ext/css/search.css @@ -27,6 +27,10 @@ --background-color: #ffffff; --separator-color1: #cccccc; + + --search-textbox-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); + --search-textbox-min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); + --search-textbox-max-height: calc(var(--textarea-line-height) * 5 + var(--textarea-padding) * 2); } :root:not([data-loaded=true]) { --animation-duration: 0s; @@ -79,9 +83,9 @@ h1 { border: 0; outline: none; width: 100%; - height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); - min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); - max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2); + height: var(--search-textbox-height); + min-height: var(--search-textbox-min-height); + max-height: var(--search-textbox-max-height); resize: none; font-size: var(--font-size); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; @@ -92,9 +96,9 @@ h1 { flex: 0 0 auto; position: relative; width: 2.5em; - height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); - min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); - max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2); + height: var(--search-textbox-height); + min-height: var(--search-textbox-min-height); + max-height: var(--search-textbox-max-height); background-color: var(--input-background-color); border: 0; padding: 0; |