aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-10-09 14:32:56 -0400
committerGitHub <noreply@github.com>2021-10-09 14:32:56 -0400
commit0e4b769390ec88e609e862776dff2601227baaa5 (patch)
treef4da6e1735ab1533e6d3911770bf8bdc9f74be65 /ext
parente3986196e13cdac60c3b6a4875e38305b7e47436 (diff)
Search CSS updates (#1979)
* Update styles * Limit the height of the query parser
Diffstat (limited to 'ext')
-rw-r--r--ext/css/display.css6
-rw-r--r--ext/css/search.css16
-rw-r--r--ext/popup.html10
-rw-r--r--ext/search.html48
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>