diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2021-10-09 14:32:56 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-10-09 14:32:56 -0400 |
| commit | 0e4b769390ec88e609e862776dff2601227baaa5 (patch) | |
| tree | f4da6e1735ab1533e6d3911770bf8bdc9f74be65 /ext | |
| parent | e3986196e13cdac60c3b6a4875e38305b7e47436 (diff) | |
Search CSS updates (#1979)
* Update styles
* Limit the height of the query parser
Diffstat (limited to 'ext')
| -rw-r--r-- | ext/css/display.css | 6 | ||||
| -rw-r--r-- | ext/css/search.css | 16 | ||||
| -rw-r--r-- | ext/popup.html | 10 | ||||
| -rw-r--r-- | ext/search.html | 48 |
4 files changed, 45 insertions, 35 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index 58cd23eb..b82a09d5 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -568,7 +568,13 @@ button.sidebar-button.sidebar-button-highlight { /* Search page */ +.search-header { + display: flex; + flex-flow: column nowrap; + max-height: 100vh; +} #query-parser-container { + overflow-y: auto; padding-left: var(--entry-horizontal-padding); padding-right: var(--entry-horizontal-padding); padding-bottom: 0.25em; diff --git a/ext/css/search.css b/ext/css/search.css index f529fbb6..593bbe6c 100644 --- a/ext/css/search.css +++ b/ext/css/search.css @@ -87,7 +87,7 @@ h1 { white-space: pre-wrap; z-index: 1; } -#search-button { +.search-button { flex: 0 0 auto; position: relative; width: 2.5em; @@ -100,22 +100,22 @@ h1 { transition: background-color var(--animation-duration) ease-in-out; border-radius: 0; } -#search-button:hover, -#search-button:focus { +.search-button:hover, +.search-button:focus { background-color: var(--input-background-color-dark); } -#search-button:focus:not(:focus-visible):not(:hover) { +.search-button:focus:not(:focus-visible):not(:hover) { background-color: var(--input-background-color); } -#search-button:focus-visible { +.search-button:focus-visible { background-color: var(--input-background-color-dark); } -#search-button:active, -#search-button:active:focus { +.search-button:active, +.search-button:active:focus { background-color: var(--input-background-color-darker); } -#search-button>.icon { +.search-button>.icon { display: block; position: absolute; left: 0; diff --git a/ext/popup.html b/ext/popup.html index 98ee7c45..5c9039f9 100644 --- a/ext/popup.html +++ b/ext/popup.html @@ -27,11 +27,13 @@ <span tabindex="-1" id="content-scroll-focus"></span> - <div class="scan-disable" id="query-parser-container" hidden> - <div class="search-option" id="query-parser-mode-container" hidden> - <select id="query-parser-mode-select"></select> + <div class="search-header"> + <div class="scan-disable scrollbar" id="query-parser-container" hidden> + <div class="search-option" id="query-parser-mode-container" hidden> + <select id="query-parser-mode-select"></select> + </div> + <div id="query-parser-content" lang="ja"></div> </div> - <div id="query-parser-content" lang="ja"></div> </div> <div id="dictionary-entries"></div> diff --git a/ext/search.html b/ext/search.html index de0cab58..03ee781f 100644 --- a/ext/search.html +++ b/ext/search.html @@ -28,33 +28,35 @@ <span tabindex="-1" id="content-scroll-focus"></span> - <div id="intro"> - <h1>Yomichan Search</h1> - </div> + <div class="search-header"> + <div id="intro"> + <h1>Yomichan Search</h1> + </div> - <div class="scan-disable"> - <div class="search-options"> - <label class="search-option"> - <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> - <span class="search-option-label">Automatic kana conversion</span> - </label> - <label class="search-option" id="search-option-clipboard-monitor-container"> - <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> - <span class="search-option-label">Clipboard monitor</span> - </label> - <div class="search-option" id="query-parser-mode-container" hidden> - <span class="search-option-pre-label">Parser:</span> - <select id="query-parser-mode-select"></select> + <div class="scan-disable"> + <div class="search-options"> + <label class="search-option"> + <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> + <span class="search-option-label">Automatic kana conversion</span> + </label> + <label class="search-option" id="search-option-clipboard-monitor-container"> + <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> + <span class="search-option-label">Clipboard monitor</span> + </label> + <div class="search-option" id="query-parser-mode-container" hidden> + <span class="search-option-pre-label">Parser:</span> + <select id="query-parser-mode-select"></select> + </div> + </div> + <div class="search-textbox-container"> + <textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea> + <button id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button> </div> </div> - <div class="search-textbox-container"> - <textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea> - <button id="search-button"><span class="icon" data-icon="magnifying-glass"></span></button> - </div> - </div> - <div class="scan-disable" id="query-parser-container" hidden> - <div id="query-parser-content" lang="ja"></div> + <div class="scan-disable scrollbar" id="query-parser-container" hidden> + <div id="query-parser-content" lang="ja"></div> + </div> </div> <div id="dictionary-entries"></div> |