aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
Diffstat (limited to 'ext')
-rw-r--r--ext/css/display.css14
-rw-r--r--ext/css/search.css2
-rw-r--r--ext/search.html78
3 files changed, 56 insertions, 38 deletions
diff --git a/ext/css/display.css b/ext/css/display.css
index 2ae7eab0..68f7bf11 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -575,10 +575,24 @@ button.sidebar-button.sidebar-button-highlight {
/* Search page */
+.search-header-wrapper {
+ background-color: var(--background-color);
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+.sticky-header {
+ position: sticky;
+ top: 0px;
+ z-index: 1000;
+ padding-top: 10px;
+}
.search-header {
+ width: var(--content-width);
display: flex;
flex-flow: column nowrap;
max-height: 100vh;
+ padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
}
#query-parser-container {
overflow-y: auto;
diff --git a/ext/css/search.css b/ext/css/search.css
index 808a7045..fac8de60 100644
--- a/ext/css/search.css
+++ b/ext/css/search.css
@@ -134,7 +134,7 @@ h1 {
.search-options {
display: flex;
flex-flow: row wrap;
- margin: 0.5em 0;
+ margin: 0.5em 0 0 0;
align-items: center;
}
.search-option {
diff --git a/ext/search.html b/ext/search.html
index 281c0c07..e15f9bb9 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -23,48 +23,52 @@
<div class="content-outer">
<div class="content">
<div class="content-scroll scrollbar" id="content-scroll">
- <div class="content-body" id="content-body">
- <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
- <div class="content-body-inner">
-
- <span tabindex="-1" id="content-scroll-focus"></span>
-
- <div class="search-header">
- <div id="intro">
- <h1>Yomitan Search</h1>
- </div>
+ <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
+ <div class="search-header-wrapper">
+ <div class="search-header">
+ <div id="intro">
+ <h1>Yomitan Search</h1>
+ </div>
- <div class="scan-disable">
- <div class="search-options">
- <div class="search-option" id="search-option-profile-select">
- <span class="profile-select-container"><select class="profile-select" id="profile-select">
- <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
- </select></span>
- </div>
- <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>
- <label class="search-option" id="search-option-wanakana">
- <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>
- <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 class="scan-disable">
+ <div class="search-options">
+ <div class="search-option" id="search-option-profile-select">
+ <span class="profile-select-container"><select class="profile-select" id="profile-select">
+ <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
+ </select></span>
</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 type="button" id="search-back-button" class="search-button" hidden><span class="icon" data-icon="left-chevron"></span></button>
- <button type="button" id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
+ <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>
+ <label class="search-option" id="search-option-wanakana">
+ <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>
+ <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="scan-disable scrollbar" id="query-parser-container" hidden>
- <div id="query-parser-content" lang="ja"></div>
- </div>
</div>
+ </div>
+ </div>
+ <div class="search-header-wrapper sticky-header">
+ <div class="search-header">
+ <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 type="button" id="search-back-button" class="search-button" hidden><span class="icon" data-icon="left-chevron"></span></button>
+ <button type="button" id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
+ </div>
+ <div class="scan-disable scrollbar" id="query-parser-container" hidden>
+ <div id="query-parser-content" lang="ja"></div>
+ </div>
+ </div>
+ </div>
+ <div class="content-body" id="content-body">
+ <div class="content-body-inner">
+
+ <span tabindex="-1" id="content-scroll-focus"></span>
<div id="dictionary-entries"></div>